/* ── 查手机: a character's fictional phone (docs/design/PHONE_PEEK_LIFE_UI.md) ──
   Two modes (data-mode on #peek-app-root, picked by the clock: 06:00–18:00 light, otherwise dark) x six personality
   palettes (data-voice). Each palette gives four base colours; every surface below is built from them:
     --pk-deep / --pk-mid / --pk-pale : the lock-screen gradient (deep top -> pale bottom), also tints the app pages
     --pk-acc-d / --pk-acc-l          : the one accent ("in progress" glow), on dark / on light
   Surfaces are frosted glass. Text uses the app's own body font; only big numbers use the per-voice clock font.
   Clock/number fonts are self-hosted woff2 subsets in fonts/phone-peek/ - never a network font request. */
@font-face{font-family:'PK Cormorant';src:url('../fonts/phone-peek/cormorant-garamond-pk.woff2') format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'PK Outfit';src:url('../fonts/phone-peek/outfit-pk.woff2') format('woff2');font-weight:200;font-display:swap}
@font-face{font-family:'PK Quicksand';src:url('../fonts/phone-peek/quicksand-pk.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'PK DM Serif';src:url('../fonts/phone-peek/dm-serif-display-pk.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'PK Instrument';src:url('../fonts/phone-peek/instrument-serif-pk.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'PK Bodoni';src:url('../fonts/phone-peek/bodoni-moda-pk.woff2') format('woff2');font-weight:400;font-display:swap}

/* ── palettes (2026-10-15: retuned so the six voices read apart in both modes - low saturation, no yellow) ── */
#peek-app-root{--pk-deep:#212a27;--pk-mid:#5f7569;--pk-pale:#eef2ef;--pk-lt:#b6cbbd;--pk-lt2:#d8e4da;--pk-acc-d:#cfdcd0;--pk-acc-l:#4b6356;--pk-clock-font:'PK Bodoni',var(--font-display);
  --pk-you-d:#ea8f9c;--pk-you-l:#b0435a}
#peek-app-root[data-voice="steady"]{--pk-lt:#b6cbbd;--pk-lt2:#d8e4da;--pk-deep:#212a27;--pk-mid:#5f7569;--pk-pale:#eef2ef;--pk-acc-d:#cfdcd0;--pk-acc-l:#4b6356;--pk-clock-font:'PK Bodoni',var(--font-display)}
#peek-app-root[data-voice="cool"]{--pk-lt:#bccadb;--pk-lt2:#dde5ef;--pk-deep:#2b313a;--pk-mid:#5d6876;--pk-pale:#eceff2;--pk-acc-d:#d3dbe6;--pk-acc-l:#4a5668;--pk-clock-font:'PK Outfit',var(--font-display)}
#peek-app-root[data-voice="proud"]{--pk-lt:#a8909a;--pk-lt2:#cdb7be;--pk-deep:#251c21;--pk-mid:#5c3340;--pk-pale:#eeeaec;--pk-acc-d:#d9c6a5;--pk-acc-l:#6e2f3d;--pk-clock-font:'PK DM Serif',var(--font-display)}
#peek-app-root[data-voice="gentle"]{--pk-lt:#efc6bd;--pk-lt2:#f6dcd3;--pk-deep:#2c2731;--pk-mid:#8c7384;--pk-pale:#f5eff1;--pk-acc-d:#f0d0c8;--pk-acc-l:#a0605a;--pk-clock-font:'PK Cormorant',var(--font-display)}
#peek-app-root[data-voice="playful"]{--pk-lt:#a9d3cd;--pk-lt2:#f3cbc1;--pk-deep:#1d2c2e;--pk-mid:#4d7876;--pk-pale:#ebf2f1;--pk-acc-d:#f0ab9c;--pk-acc-l:#b65d4e;--pk-clock-font:'PK Quicksand',var(--font-display)}
#peek-app-root[data-voice="shy"]{--pk-lt:#cbc2e6;--pk-lt2:#e3ddf4;--pk-deep:#27253a;--pk-mid:#76719c;--pk-pale:#f2f0f7;--pk-acc-d:#ddd4f1;--pk-acc-l:#625a8d;--pk-clock-font:'PK Instrument',var(--font-display)}
/* 痕迹色: everything on his phone that is about HER. Picked per phone from a short list that suits the voice
   (js/apps/phone-peek-home.js PEEK_TRACE_ALLOW), stored with his home-screen layout. */
#peek-app-root[data-trace="rose"]{--pk-you-d:#ea8f9c;--pk-you-l:#b0435a}
#peek-app-root[data-trace="cherry"]{--pk-you-d:#e66b76;--pk-you-l:#a02636}
#peek-app-root[data-trace="coral"]{--pk-you-d:#f0a58a;--pk-you-l:#c0603f}
#peek-app-root[data-trace="peach"]{--pk-you-d:#f2b6c6;--pk-you-l:#b9587a}
#peek-app-root[data-trace="mint"]{--pk-you-d:#9fd6c2;--pk-you-l:#3f8a70}
#peek-app-root[data-trace="lake"]{--pk-you-d:#94c4e6;--pk-you-l:#3c7aa6}
#peek-app-root[data-trace="lilac"]{--pk-you-d:#c4b2ec;--pk-you-l:#6f58b0}
#peek-app-root[data-trace="champ"]{--pk-you-d:#e2cb9f;--pk-you-l:#8a6a3c}

/* ── modes: text, glass and the app-page background, all derived from the palette ── */
#peek-app-root{position:absolute;inset:0;display:flex;flex-direction:column;min-height:0;font-family:var(--font-body);
  --pk-t1:#1a2533;--pk-t2:rgba(26,37,51,.64);--pk-t3:rgba(26,37,51,.42);--pk-hair:rgba(26,37,51,.08);
  --pk-gl:rgba(255,255,255,.45);--pk-gl2:rgba(255,255,255,.78);--pk-edge:rgba(255,255,255,.75);--pk-shadow:0 6px 20px rgba(30,50,80,.07);
  --pk-acc:var(--pk-acc-l);--pk-you:var(--pk-you-l);--pk-on-acc:#fff;
  --pk-app-bg:radial-gradient(110% 55% at 10% 0%,color-mix(in srgb,var(--pk-mid) 32%,var(--pk-pale)) 0%,transparent 60%),linear-gradient(180deg,color-mix(in srgb,var(--pk-mid) 18%,var(--pk-pale)) 0%,var(--pk-pale) 50%,color-mix(in srgb,var(--pk-pale) 60%,#fff) 100%);
  /* day wall: one light tint per voice (--pk-lt/--pk-lt2), light from top to bottom, so text on the wall is dark (--pk-wall-t) */
  --pk-wall-bg:radial-gradient(120% 60% at 15% 0%,var(--pk-lt) 0%,transparent 65%),radial-gradient(80% 50% at 90% 88%,var(--pk-lt2) 0%,transparent 70%),linear-gradient(180deg,color-mix(in srgb,var(--pk-lt) 75%,#fff) 0%,color-mix(in srgb,var(--pk-lt) 38%,#fff) 58%,color-mix(in srgb,var(--pk-lt2) 55%,#fff) 100%);
  --pk-wall-t:color-mix(in srgb,var(--pk-deep) 92%,#000);
  --pk-spec:rgba(255,255,255,.55);--pk-pg:color-mix(in srgb,var(--pk-mid) 16%,var(--pk-pale));
  background:var(--pk-app-bg);color:var(--pk-t1)}
#peek-app-root[data-mode="dark"]{--pk-t1:#eef2f7;--pk-t2:rgba(226,233,243,.64);--pk-t3:rgba(226,233,243,.38);--pk-hair:rgba(255,255,255,.07);
  --pk-gl:rgba(255,255,255,.07);--pk-gl2:rgba(255,255,255,.13);--pk-edge:rgba(255,255,255,.12);--pk-shadow:none;
  --pk-acc:var(--pk-acc-d);--pk-you:var(--pk-you-d);--pk-on-acc:#0f1622;
  --pk-app-bg:radial-gradient(110% 55% at 10% 0%,color-mix(in srgb,var(--pk-mid) 70%,#000) 0%,transparent 60%),linear-gradient(180deg,color-mix(in srgb,var(--pk-deep) 85%,#000) 0%,color-mix(in srgb,var(--pk-deep) 55%,#000) 50%,color-mix(in srgb,var(--pk-deep) 25%,#05070b) 100%);
  --pk-wall-bg:radial-gradient(120% 60% at 15% 0%,var(--pk-mid) 0%,transparent 60%),linear-gradient(180deg,var(--pk-deep) 0%,color-mix(in srgb,var(--pk-deep) 60%,#000) 55%,color-mix(in srgb,var(--pk-deep) 25%,#05070b) 100%);
  --pk-wall-t:rgba(238,242,247,.75);
  --pk-spec:rgba(255,255,255,.1);--pk-pg:color-mix(in srgb,var(--pk-deep) 70%,#000)}

/* ── glass ── */
/* the glass catches a soft highlight that drifts with the pointer (--pk-lx/--pk-ly, set by phone-peek-motion.js) */
#peek-app-root .pk-glass{background:radial-gradient(180px 130px at var(--pk-lx,35%) var(--pk-ly,0%),var(--pk-spec),transparent 70%),var(--pk-gl);-webkit-backdrop-filter:blur(26px) saturate(1.4);backdrop-filter:blur(26px) saturate(1.4);border:1px solid var(--pk-edge);box-shadow:var(--pk-shadow)}
#peek-app-root .pk-glass-dark{background:color-mix(in srgb,var(--pk-deep) 45%,transparent);-webkit-backdrop-filter:blur(26px) saturate(1.3);backdrop-filter:blur(26px) saturate(1.3);border:1px solid rgba(255,255,255,.18);color:#fff}
#peek-app-root .pk-glass-on-wall{background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.28);color:#fff}
/* day: the wall is light, so glass on the wall (back button, status pill, picker chips) is a white frost with dark text */
#peek-app-root:not([data-mode="dark"]) .pk-glass-on-wall{background:rgba(255,255,255,.42);border-color:rgba(255,255,255,.8);color:var(--pk-wall-t)}
#peek-app-root:not([data-mode="dark"]) .peek-picker-card{color:color-mix(in srgb,var(--pk-deep) 92%,#000)}
#peek-app-root .pk-glass-solid{background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.6)}
#peek-app-root[data-mode="dark"] .pk-glass-solid{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.14)}
.pk-num{font-family:var(--pk-clock-font);font-variant-numeric:lining-nums}
.pk-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.pk-live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--pk-acc);box-shadow:0 0 0 4px color-mix(in srgb,var(--pk-acc) 22%,transparent),0 0 12px var(--pk-acc)}
.pk-glass-on-wall .pk-live-dot,.pk-glass-dark .pk-live-dot{background:var(--pk-acc-d);box-shadow:0 0 0 4px color-mix(in srgb,var(--pk-acc-d) 25%,transparent),0 0 12px var(--pk-acc-d)}

/* ── shared screen shell ── */
.pk-screen{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.pk-wall{background:var(--pk-wall-bg);color:var(--pk-wall-t);padding:calc(8px + env(safe-area-inset-top,0px)) 16px calc(24px + var(--sab))}
#peek-app-root[data-mode="dark"] .pk-wall{color:#fff}
/* the wallpaper is its own layer so it can drift against the pointer (parallax); the home screen blurs it */
.pk-wall{isolation:isolate}
.pk-wall::before{content:'';position:absolute;inset:-36px;z-index:-1;background:var(--pk-wall-bg);translate:calc(var(--pk-tx,0) * -14px) calc(var(--pk-ty,0) * -14px)}
.pk-wall-blur::before{filter:blur(18px) brightness(.92)}
/* page changes (phone-peek-motion.js): the page that is leaving stays on screen as a layer until its animation ends */
#peek-app-root>.pk-leaving,#peek-app-root>.pk-swiping{position:absolute;inset:0;pointer-events:none}
#peek-app-root>.pk-swiping{box-shadow:-20px 0 40px rgba(0,0,0,.22)}
/* drags (edge swipe, lock, pages) never select text; inputs stay selectable */
#peek-app-root.pk-dragging,#peek-app-root .pk-wall{-webkit-user-select:none;user-select:none}
#peek-app-root input{-webkit-user-select:text;user-select:text}
@keyframes pkBreath{50%{box-shadow:0 0 0 6px color-mix(in srgb,var(--pk-acc) 16%,transparent),0 0 16px var(--pk-acc)}}
@keyframes pkBob{to{transform:translateY(-5px)}}
@keyframes pkShim{from{background-position:100% 0}to{background-position:0 0}}
@keyframes pkBlink{50%{opacity:0}}
.pk-live-dot{animation:pkBreath 2.6s ease-in-out infinite}
.pk-rip{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(255,255,255,.65),rgba(255,255,255,0) 70%)}
.pk-top{display:flex;align-items:center;gap:12px;padding:calc(8px + env(safe-area-inset-top,0px)) 18px 0;min-height:52px}
.peek-back{width:38px;height:38px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;color:var(--pk-t1);padding:0;cursor:pointer}
.peek-back svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pk-wall .peek-back{color:#fff;background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.28)}
#peek-app-root:not([data-mode="dark"]) .pk-wall .peek-back{color:var(--pk-wall-t);background:rgba(255,255,255,.5);border-color:rgba(255,255,255,.85);box-shadow:0 4px 14px rgba(30,40,60,.08)}
.pk-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px 18px calc(28px + var(--sab))}
.pk-title{font-size:30px;font-weight:800;margin:10px 4px 0;letter-spacing:.02em}
.pk-top .pk-title{font-size:20px;margin:0}
.pk-title-sm{font-size:19px;font-weight:600;margin:0}
.pk-subline{font-size:13px;color:var(--pk-t2);margin:2px 4px 0}
.pk-sec{display:flex;justify-content:space-between;font-size:13px;font-weight:600;color:var(--pk-t2);letter-spacing:.06em;padding:20px 6px 8px}
.pk-note{font-size:12.5px;line-height:1.7;color:var(--pk-t3);margin:18px 6px 0}
.pk-list{list-style:none;margin:0;padding:0;border-radius:20px;overflow:hidden}
.pk-tag{display:inline-block;font-size:11px;font-weight:400;color:var(--pk-acc);border:1px solid color-mix(in srgb,var(--pk-acc) 35%,transparent);border-radius:4px;padding:0 6px;margin-left:6px;vertical-align:2px}
.pk-empty-line{font-size:13.5px;color:var(--pk-t3);text-align:center;padding:36px 0}
.peek-empty{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;padding:56px 24px;color:var(--pk-t2)}
.peek-empty b{color:var(--pk-t1);font-size:15px}.peek-empty p{font-size:12.5px;line-height:1.6;max-width:280px}
.peek-empty-icon{width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.peek-empty-icon svg{width:26px;height:26px;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.pk-search{display:flex;align-items:center;gap:8px;min-height:42px;border-radius:14px;padding:0 14px;margin:14px 0 0;color:var(--pk-t3)}
.pk-search svg{width:16px;height:16px;stroke-width:1.9}
.pk-search input{flex:1;min-width:0;border:none;background:transparent;outline:none;color:var(--pk-t1);font:inherit;font-size:15px;padding:9px 0}
.pk-search input::placeholder{color:var(--pk-t3);opacity:1}

/* ── 选人页 ── */
.peek-picker-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:2px}
.peek-picker-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;height:250px;border-radius:24px;border:none;overflow:hidden;background:var(--pk-wall-bg);font:inherit;padding:0;text-align:center;color:#fff;box-shadow:0 8px 22px rgba(20,30,50,.18);cursor:pointer}
.peek-picker-time{display:block;margin-top:24px;font-size:40px;line-height:1}
.peek-picker-date{display:block;font-size:11px;margin-top:6px;opacity:.9;letter-spacing:.06em}
.peek-picker-status{position:absolute;left:10px;right:10px;bottom:58px;display:flex;align-items:center;gap:7px;padding:7px 10px;border-radius:12px;font-size:12px;text-align:left;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.peek-picker-bar{position:absolute;left:0;right:0;bottom:0;height:48px;display:flex;align-items:center;gap:8px;padding:0 12px;background:rgba(255,255,255,.86);color:#1a2533}
.peek-pick-av{width:30px;height:30px;border-radius:50%;overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--pk-pale)}
.peek-picker-name{flex:1;min-width:0;font-size:14px;font-weight:700;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.peek-picker-new{flex-shrink:0;font-size:11px;color:var(--pk-you-l)}
/* each card takes its own character's palette (the root's data-voice is not set on the picker) */
.peek-picker-card[data-voice="steady"]{--pk-lt:#b6cbbd;--pk-lt2:#d8e4da;--pk-deep:#212a27;--pk-mid:#5f7569;--pk-pale:#eef2ef}
.peek-picker-card[data-voice="cool"]{--pk-lt:#bccadb;--pk-lt2:#dde5ef;--pk-deep:#2b313a;--pk-mid:#5d6876;--pk-pale:#eceff2}
.peek-picker-card[data-voice="proud"]{--pk-lt:#a8909a;--pk-lt2:#cdb7be;--pk-deep:#251c21;--pk-mid:#5c3340;--pk-pale:#eeeaec}
.peek-picker-card[data-voice="gentle"]{--pk-lt:#efc6bd;--pk-lt2:#f6dcd3;--pk-deep:#2c2731;--pk-mid:#8c7384;--pk-pale:#f5eff1}
.peek-picker-card[data-voice="playful"]{--pk-lt:#a9d3cd;--pk-lt2:#f3cbc1;--pk-deep:#1d2c2e;--pk-mid:#4d7876;--pk-pale:#ebf2f1}
.peek-picker-card[data-voice="shy"]{--pk-lt:#cbc2e6;--pk-lt2:#e3ddf4;--pk-deep:#27253a;--pk-mid:#76719c;--pk-pale:#f2f0f7}
.peek-picker-card .pk-num{font-family:'PK Bodoni',var(--font-display)}
.peek-picker-card[data-voice="cool"] .pk-num{font-family:'PK Outfit',var(--font-display)}.peek-picker-card[data-voice="proud"] .pk-num{font-family:'PK DM Serif',var(--font-display)}
.peek-picker-card[data-voice="gentle"] .pk-num{font-family:'PK Cormorant',var(--font-display)}.peek-picker-card[data-voice="playful"] .pk-num{font-family:'PK Quicksand',var(--font-display)}
.peek-picker-card[data-voice="shy"] .pk-num{font-family:'PK Instrument',var(--font-display)}

/* ── 锁屏 ── */
.pk-wall[data-screen="lock"]{touch-action:none;-webkit-user-select:none;user-select:none}
.pk-wall[data-screen="lock"] .peek-back{position:absolute;top:calc(10px + env(safe-area-inset-top,0px));left:16px;z-index:2}
.pk-lock-inner{flex:1;min-height:0;display:flex;flex-direction:column;translate:calc(var(--pk-tx,0) * 5px) calc(var(--pk-ty,0) * 5px)}
.pk-lock-clock{display:flex;flex-direction:column;align-items:center;margin-top:52px}
.pk-lock-time{font-size:104px;line-height:1;text-shadow:0 2px 20px rgba(20,35,60,.18)}
.pk-lock-date{font-size:16px;margin-top:8px;letter-spacing:.12em;opacity:.92}
.pk-lock-owner{font-size:13px;margin-top:8px;letter-spacing:.14em;opacity:.8}
.pk-now-pill{display:flex;align-items:center;gap:9px;margin-top:22px;max-width:100%;padding:9px 16px 9px 12px;border-radius:22px;font-size:14px;letter-spacing:.04em;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.peek-notifs{margin-top:auto;display:flex;flex-direction:column;gap:8px}
.peek-notif{display:flex;gap:11px;align-items:center;padding:12px 14px;border-radius:18px;color:#1a2533}
#peek-app-root .pk-wall .peek-notif.pk-glass{background:rgba(255,255,255,.30);border-color:rgba(255,255,255,.45)}
#peek-app-root[data-mode="dark"] .pk-wall .peek-notif.pk-glass{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.14);color:#eef2f7}
.peek-notif-icon{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex-shrink:0;font-weight:600;font-size:14px;overflow:hidden}
.peek-notif-icon svg{width:19px;height:19px;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.peek-notif-icon img,.pk-mpin-av img,.pk-mi-ic img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.pk-you-chip{background:var(--pk-you-l);color:#fff}
.pk-cal-chip{background:#fff;color:#d4553f}
.peek-notif-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.peek-notif-head{display:flex;justify-content:space-between;gap:8px}
.peek-notif-head b{font-size:14px;font-weight:600}
.peek-notif-time{font-size:12px;opacity:.6;flex-shrink:0}
.peek-notif-body{font-size:14px;opacity:.88;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.peek-unlock{display:flex;flex-direction:column;align-items:center;gap:4px;margin:16px auto 0;border:none;background:none;color:var(--pk-wall-t);font:inherit;font-size:13px;padding:8px 28px;min-height:44px;cursor:pointer}
.peek-unlock svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.75;animation:pkBob 1.6s ease-in-out infinite alternate}
.pk-shim{letter-spacing:.3em;padding-left:.3em;background:linear-gradient(90deg,color-mix(in srgb,var(--pk-wall-t) 55%,transparent) 0 38%,var(--pk-wall-t) 50%,color-mix(in srgb,var(--pk-wall-t) 55%,transparent) 62% 100%);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:pkShim 2.8s linear infinite}
/* 纪念日密码 */
.peek-pass{align-items:center;padding-top:calc(90px + env(safe-area-inset-top,0px))}
.peek-pass-title{font-size:17px;font-weight:700}
.peek-pass-hint{margin-top:6px;font-size:12.5px;opacity:.8}
.peek-pass-dots{display:flex;gap:16px;margin-top:30px}
.peek-pass-dot{width:14px;height:14px;border-radius:50%;border:1.5px solid color-mix(in srgb,currentColor 75%,transparent);box-sizing:border-box;transition:background 150ms ease,border-color 150ms ease}
.peek-pass-dot.filled{background:currentColor;box-shadow:0 0 12px color-mix(in srgb,currentColor 45%,transparent)}
/* by day the wallpaper is pale where the keys sit: dark text, whiter keys */
#peek-app-root:not([data-mode="dark"]) .peek-pass{color:var(--pk-wall-t)}
#peek-app-root:not([data-mode="dark"]) .peek-pass .peek-pass-key{background:rgba(255,255,255,.5);border-color:rgba(255,255,255,.85);color:var(--pk-wall-t)}
.peek-pass-dots.err .peek-pass-dot{background:#c08a85;border-color:#c08a85;box-shadow:0 0 12px rgba(192,138,133,.6)}
.peek-pass-pad{display:grid;grid-template-columns:repeat(3,76px);gap:16px 18px;margin-top:40px}
.peek-pass-key{position:relative;overflow:hidden;width:76px;height:76px;border-radius:50%;display:grid;place-items:center;font:inherit;font-size:30px;font-family:var(--pk-clock-font);padding:0;cursor:pointer;transition:background .35s ease,box-shadow .35s ease}
#peek-app-root .peek-pass-key:active{background:rgba(255,255,255,.34);box-shadow:0 0 0 6px rgba(255,255,255,.08),0 0 24px rgba(255,255,255,.2);transition-duration:.08s}
.peek-pass-del{width:76px;height:76px;border:none;background:none;color:inherit;display:grid;place-items:center;padding:0;cursor:pointer;opacity:.8}
.peek-pass-del svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.peek-pass-skip{margin-top:auto;border:none;background:none;color:inherit;font:inherit;font-size:13px;opacity:.75;padding:10px 18px;min-height:44px;cursor:pointer}

/* ── 主屏 ── */
.pk-wall[data-screen="home"]{padding-top:0}
.peek-status{display:flex;align-items:center;height:calc(36px + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) 18px 0;font-size:15px;font-weight:600}
.peek-home-nav{display:flex;align-items:center;gap:12px;min-height:44px}
.peek-home-owner{font-size:12.5px;letter-spacing:.1em;opacity:.8}
.pk-today{border-radius:24px;padding:16px 18px;cursor:pointer;display:flex;flex-direction:column;min-height:0}
.pk-today-hd{display:flex;align-items:flex-end;gap:10px}
.pk-today-d{font-size:46px;line-height:.85}
.pk-today-w{font-size:13px;font-weight:600;opacity:.85;padding-bottom:2px}
.pk-today-c{margin-left:auto;font-size:12px;opacity:.7;padding-bottom:2px}
.pk-today-now{display:flex;align-items:center;gap:10px;margin-top:14px}
.pk-today-now b{font-size:17px;font-weight:600}
.pk-today-now span{margin-left:auto;font-size:22px}
.pk-today-now.quiet{font-size:14px;opacity:.75}
.pk-bar{position:relative;height:4px;border-radius:2px;background:rgba(255,255,255,.2);margin:14px 0 6px}
.pk-bar-fill{position:absolute;top:0;bottom:0;border-radius:2px;background:linear-gradient(90deg,rgba(255,255,255,.3),var(--pk-acc-d))}
.pk-mark{position:absolute;top:-3px;width:10px;height:10px;margin-left:-5px;border-radius:50%;border:2px solid rgba(255,255,255,.85)}
.pk-mark.done,.pk-mark.ongoing{background:#fff}
.pk-mark.cancelled{border-color:rgba(255,255,255,.4)}
.pk-mark.you{background:var(--pk-you-d);border-color:var(--pk-you-d)}
.pk-bar em{position:absolute;top:-6px;bottom:-6px;width:2px;border-radius:1px;background:#fff}
.pk-bar-ax{display:flex;justify-content:space-between;font-size:10.5px;opacity:.55}
.pk-today-nx{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:12px;border-top:1px solid rgba(255,255,255,.2);font-size:13.5px}
.pk-today-nx .pk-num{font-size:16px;opacity:.8}
.pk-today-nx i{font-style:normal;margin-left:auto;font-size:12px;color:var(--pk-you-d)}
.pk-widget{border-radius:22px;padding:14px 16px;min-height:0;display:flex;flex-direction:column;align-items:flex-start;text-align:left;font:inherit;color:#1a2533;cursor:pointer}
#peek-app-root[data-mode="dark"] .pk-wall .pk-widget{color:#eef2f7}
.pk-widget-k{font-size:12px;font-weight:600;opacity:.6}
.pk-widget-big{font-size:44px;line-height:1;margin-top:auto}
.pk-widget-big small{font-family:var(--font-body);font-size:14px;margin-left:4px;opacity:.6}
.pk-widget-s{font-size:12.5px;opacity:.7;margin-top:4px}
.pk-widget-t{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;line-height:1.35;margin-top:10px}
.pk-widget-t.done{opacity:.6}
/* 4 columns x 6 rows like a real phone; the rows share the height between the top bar and the dock (never smaller than an icon + label) */
.pk-pager{flex:1;min-height:0;margin-top:6px;overflow-x:hidden;overflow-y:auto;scrollbar-width:none;touch-action:pan-y}
.pk-pager::-webkit-scrollbar{display:none}
.pk-pages{display:flex;height:100%;transition:transform .45s cubic-bezier(.3,1.1,.4,1)}
.pk-pages.drag{transition:none}
.pk-page{flex:0 0 100%;min-width:0;height:100%}
.peek-app-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(6,minmax(84px,1fr));gap:14px 10px;min-height:100%}
.peek-app-grid>.pk-today{grid-column:span 4;grid-row:span 2}
.peek-app-grid>.pk-widget{grid-column:span 2;grid-row:span 2}
.pk-pdots{display:flex;justify-content:center;align-items:center;gap:7px;height:16px}
.pk-pdots:empty{display:none}
.pk-pdots i{width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.35;cursor:pointer;transition:opacity .25s}
.pk-pdots i.on{opacity:1}
.peek-app{display:flex;flex-direction:column;align-items:center;gap:7px;border:none;background:none;font:inherit;font-size:12px;color:inherit;padding:0;cursor:pointer}
.pk-wall .peek-app{color:#1a2533}
#peek-app-root[data-mode="dark"] .pk-wall .peek-app{color:#eef2f7}
.peek-app-icon{position:relative;width:60px;height:60px;border-radius:17px;display:grid;place-items:center;color:color-mix(in srgb,var(--pk-deep) 85%,#000)}
#peek-app-root[data-mode="dark"] .peek-app-icon{color:#eef2f7}
.peek-app-icon svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pk-cal-icon{display:flex;flex-direction:column;align-items:center;justify-content:center}
.pk-cal-icon small{font-size:10px;font-weight:600;color:#c2412f}
.pk-cal-icon b{font-size:27px;line-height:1;font-weight:400}
.pk-badge{position:absolute;top:-5px;right:-5px;min-width:20px;height:20px;border-radius:10px;background:#d4553f;color:#fff;font:600 12px/20px var(--font-body);text-align:center;font-style:normal;padding:0 6px}
.peek-app-label{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk-dock{margin-top:10px;flex-shrink:0;height:94px;border-radius:34px;display:flex;justify-content:space-around;align-items:center;padding:0 8px}

/* ── 日历 ── */
/* segmented controls / tab bars: one thumb slides behind the selected button (placed by --i, slid by phone-peek-motion.js) */
.pk-seg{position:relative;margin-left:auto;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;padding:3px;border-radius:12px}
.pk-seg button{position:relative;z-index:1;border:none;background:none;font:inherit;font-size:13px;padding:5px 14px;border-radius:9px;color:var(--pk-t2);cursor:pointer;transition:color .25s}
.pk-seg button.on{color:var(--pk-t1)}
.pk-thumb-seg{position:absolute;top:3px;bottom:3px;left:3px;width:calc((100% - 6px) / var(--n));border-radius:9px;background:var(--pk-gl2);border:1px solid var(--pk-edge);box-sizing:border-box;transform:translateX(calc(var(--i) * 100%))}
.pk-date{display:flex;align-items:flex-end;gap:14px;padding:12px 6px 0}
.pk-date-d{font-size:84px;line-height:.82}
.pk-date b{display:block;font-size:17px;font-weight:600}
.pk-date span{font-size:13px;color:var(--pk-t2)}
.pk-date .pk-date-d{font-size:84px;line-height:.82;color:var(--pk-t1)}
.pk-now{display:flex;align-items:center;gap:10px;margin:16px 0 0;font-size:15px}
.pk-now small{font-size:13px;color:var(--pk-t2)}
.pk-wk{position:relative;display:grid;grid-template-columns:repeat(7,1fr);margin:16px -6px 0;text-align:center}
.pk-thumb-wk{position:absolute;top:0;bottom:0;left:0;width:calc(100% / 7);border-radius:14px;transform:translateX(calc(var(--i) * 100%))}
#peek-app-root .pk-thumb-wk{box-sizing:border-box}
.pk-wk-d{position:relative;z-index:1;border:none;background:none;font:inherit;color:var(--pk-t3);font-size:11px;padding:6px 0 8px;border-radius:12px;cursor:pointer}
.pk-wk-d b{display:block;font-size:19px;font-weight:400;color:var(--pk-t2);margin-top:2px}
.pk-wk-d i{display:block;width:4px;height:4px;border-radius:50%;margin:4px auto 0;background:var(--pk-t3)}
.pk-wk-d i.e{background:transparent}
.pk-wk-d.on b{color:var(--pk-t1)}.pk-wk-d.on i{background:var(--pk-acc)}
.pk-tl-wrap{position:relative;margin-top:18px}
.pk-tl-line{position:absolute;left:52px;top:8px;bottom:8px;width:1px;background:color-mix(in srgb,var(--pk-t1) 16%,transparent);transform-origin:top}
.pk-tl{list-style:none;margin:0;padding:0;position:relative}
.pk-nowrow{display:flex;align-items:center;margin:-2px 0 8px}
.pk-nowrow .pk-ev-t{padding-top:0;font-size:14px;color:var(--pk-acc)}
.pk-nowrow .pk-ev-k{align-self:stretch}
.pk-nowrow .pk-ev-k i{position:absolute;left:3px;top:50%;width:11px;height:11px;margin-top:-5.5px;border-radius:50%;background:var(--pk-acc);box-shadow:0 0 12px var(--pk-acc);animation:pkBreath 2.4s ease-in-out infinite}
.pk-nowline{flex:1;display:flex;align-items:center;gap:8px;margin-left:8px;font-size:12px;color:var(--pk-acc)}
.pk-nowline::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--pk-acc),transparent)}
.pk-ev{display:flex;margin-bottom:10px;position:relative}
.pk-ev-t{width:44px;text-align:right;font-size:16px;color:var(--pk-t2);padding-top:12px;flex-shrink:0}
.pk-ev-t small{display:block;font-family:var(--font-body);font-size:11px;color:var(--pk-t3);margin-top:3px}
.pk-ev-k{width:17px;position:relative;flex-shrink:0}
.pk-ev-k i{position:absolute;left:4px;top:17px;width:9px;height:9px;border-radius:50%;z-index:1}
.pk-ev-c{flex:1;min-width:0;margin-left:8px;padding:11px 14px 12px;border-radius:12px}
.pk-ev-h{display:flex;align-items:baseline;gap:8px}
.pk-ev-h b{font-size:15.5px;font-weight:600;min-width:0;overflow-wrap:anywhere}
.pk-ev-h em{margin-left:auto;font-size:12px;font-style:normal;color:var(--pk-t3);white-space:nowrap}
.pk-ev-c p{font-size:13px;line-height:1.5;color:var(--pk-t2);margin-top:3px;overflow-wrap:anywhere}
.pk-ev-c .pk-ev-place{font-size:12px;color:var(--pk-t3)}
.pk-ev.done .pk-ev-k i{background:var(--pk-t2)}
.pk-ev.planned .pk-ev-k i{border:1.5px dashed var(--pk-t2)}
#peek-app-root .pk-ev.planned .pk-ev-c{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-style:dashed;box-shadow:none}
.pk-ev.cancelled .pk-ev-k i{border:1px solid var(--pk-t3)}
#peek-app-root .pk-ev.cancelled .pk-ev-c{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border:1px dashed var(--pk-t3);box-shadow:none}
.pk-ev.cancelled .pk-ev-h b{color:var(--pk-t3);text-decoration:line-through}
.pk-ev.cancelled .pk-ev-c p{color:var(--pk-t3)}
.pk-ev.ongoing .pk-ev-k i{background:var(--pk-acc);box-shadow:0 0 0 4px color-mix(in srgb,var(--pk-acc) 22%,transparent),0 0 12px var(--pk-acc)}
#peek-app-root .pk-ev.ongoing .pk-ev-c{background:var(--pk-gl2);border-color:color-mix(in srgb,var(--pk-acc) 50%,transparent)}
.pk-ev.ongoing .pk-ev-h em{color:var(--pk-acc)}
.pk-ev.ongoing .pk-ev-t{color:var(--pk-t1)}
.pk-ev.you .pk-ev-k i{background:var(--pk-you);border:none}
#peek-app-root .pk-ev.you .pk-ev-c{border-left:2px solid var(--pk-you)}
.pk-ev.you .pk-ev-h em{color:var(--pk-you)}
.pk-prog{margin-top:9px;height:3px;border-radius:2px;background:var(--pk-hair);overflow:hidden}
.pk-prog span{display:block;height:100%;background:linear-gradient(90deg,transparent,var(--pk-acc))}
.pk-mhead{display:flex;align-items:center;justify-content:space-between;padding:10px 0 12px}
.pk-mhead b{font-size:20px;font-weight:600}
.pk-mnav{width:36px;height:36px;border:none;background:none;color:var(--pk-t2);display:grid;place-items:center;cursor:pointer}
.pk-mnav svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}
.pk-mnav.next svg{transform:rotate(180deg)}
.pk-mgrid{display:grid;grid-template-columns:repeat(7,1fr);row-gap:2px;padding:10px 6px 12px;border-radius:18px;text-align:center}
.pk-wd{font-size:11.5px;color:var(--pk-t2);padding:2px 0 6px}
.pk-mday{position:relative;height:46px;border:none;background:none;font:inherit;color:var(--pk-t1);cursor:pointer;padding:0}
.pk-mday span{display:inline-block;width:32px;height:30px;line-height:30px;border-radius:50%;font-size:16px}
.pk-mday.today span{background:var(--pk-acc);color:var(--pk-on-acc)}
.pk-mday.sel:not(.today) span{background:var(--pk-gl2);outline:1px solid var(--pk-edge)}
.pk-mday i{position:absolute;left:0;right:0;bottom:4px;display:flex;justify-content:center;gap:2px}
.pk-mday i u,.pk-legend u{width:5px;height:5px;border-radius:50%;background:var(--pk-t2)}
.pk-mday i u.you,.pk-legend u.you{background:var(--pk-you)}
.pk-mday i u.cx,.pk-legend u.cx{background:transparent;border:1px solid var(--pk-t3);box-sizing:border-box}
.pk-legend{display:flex;gap:14px;justify-content:center;margin-top:12px;font-size:11.5px;color:var(--pk-t2)}
.pk-legend span{display:flex;align-items:center;gap:5px}
.pk-month-sel .pk-sec span{font-size:11.5px;font-weight:400;letter-spacing:0;color:var(--pk-t3)}
.pk-mini-list{display:flex;flex-direction:column;width:100%;border-radius:16px;padding:4px 0;font:inherit;color:inherit;text-align:left;cursor:pointer}
.pk-mini{display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:14px}
.pk-mini+.pk-mini{border-top:1px solid var(--pk-hair)}
.pk-mini .pk-num{width:40px;font-size:15px;color:var(--pk-t2)}
.pk-mini i{width:8px;height:8px;border-radius:50%;background:var(--pk-t2);flex-shrink:0}
.pk-mini.ongoing i{background:var(--pk-acc)}.pk-mini.planned i{background:transparent;border:1.5px dashed var(--pk-t2)}
.pk-mini.cancelled{color:var(--pk-t3);text-decoration:line-through}.pk-mini.you i{background:var(--pk-you)}
.pk-mini em{margin-left:auto;font-size:11.5px;font-style:normal;color:var(--pk-t3);text-decoration:none}

/* ── 待办 ── */
.pk-big-head{display:flex;align-items:flex-start;justify-content:space-between}
.pk-ring{position:relative;width:64px;height:64px;margin-top:10px;flex-shrink:0}
.pk-ring svg{width:64px;height:64px}
.pk-ring circle{fill:none;stroke-width:5}
.pk-ring .bg{stroke:var(--pk-hair)}
.pk-ring .fg{stroke:var(--pk-acc);stroke-linecap:round;stroke-dasharray:169.6;transform:rotate(-90deg);transform-origin:32px 32px}
.pk-ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:18px;font-weight:400}
.pk-ti{display:flex;gap:13px;padding:13px 16px;align-items:flex-start}
.pk-ti+.pk-ti{border-top:1px solid var(--pk-hair)}
.pk-ti[data-peek-item]{cursor:pointer}
.pk-ti b{display:block;font-size:16px;font-weight:400;overflow-wrap:anywhere}
.pk-ti small{display:block;font-size:13px;color:var(--pk-t2);margin-top:3px}
.pk-ti small i{font-style:normal;color:var(--pk-acc)}
.pk-search-ic{flex:none;margin-top:2px;color:var(--pk-t2)}
.pk-search-ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}
.pk-ti.done b{color:var(--pk-t3)}
.pk-ti.cancelled b{color:var(--pk-t3);text-decoration:line-through}
.pk-ck{position:relative;width:22px;height:22px;border-radius:50%;border:1.6px solid var(--pk-t3);flex-shrink:0;margin-top:1px}
.pk-widget .pk-ck{width:15px;height:15px;margin-top:2px}
.pk-ck.half{border-color:var(--pk-acc)}
.pk-ck.half::after{content:'';position:absolute;inset:3px;border-radius:50%;background:conic-gradient(var(--pk-acc) 0 60%,transparent 60%)}
.pk-widget .pk-ck.half::after{inset:2px}
.pk-ck.on{background:var(--pk-acc);border-color:var(--pk-acc)}
.pk-ck.on::after{content:'';position:absolute;left:6.5px;top:3px;width:5px;height:10px;border:solid var(--pk-on-acc);border-width:0 2px 2px 0;transform:rotate(45deg)}

/* ── 备忘录 ── */
.pk-chips{position:relative;display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.pk-chip{position:relative;z-index:1;font:inherit;font-size:13px;padding:6px 14px;border-radius:16px;color:var(--pk-t2);cursor:pointer;background:var(--pk-gl);border:1px solid var(--pk-edge);transition:color .25s}
.pk-chip.on{background:var(--pk-t1);color:var(--pk-on-acc);border-color:transparent}
.pk-chips.has-th .pk-chip.on{background:transparent}
.pk-chip-th{position:absolute;left:0;top:0;border-radius:16px;background:var(--pk-t1);pointer-events:none}
#peek-app-root:not([data-mode="dark"]) .pk-chip.on{color:#fff}
.pk-pin{display:block;width:100%;text-align:left;font:inherit;color:inherit;margin-top:16px;border-radius:22px;padding:16px 18px;cursor:pointer}
.pk-pin-k{display:block;font-size:11.5px;font-weight:600;color:var(--pk-acc);letter-spacing:.1em}
.pk-pin b{display:block;font-size:18px;font-weight:700;margin-top:8px}
.pk-pin-p{display:block;font-size:14px;line-height:1.65;color:var(--pk-t2);margin-top:6px;overflow-wrap:anywhere}
.pk-pin-m{display:flex;justify-content:space-between;margin-top:10px;font-size:12px;color:var(--pk-t3)}
.pk-it{display:block;width:100%;text-align:left;font:inherit;color:inherit;background:none;border:none;padding:13px 18px;cursor:pointer}
.pk-it+.pk-it,.pk-mi+.pk-mi{border-top:1px solid var(--pk-hair)}
.pk-it-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.pk-it-h b{font-size:15.5px;font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk-it-h span{font-size:12px;color:var(--pk-t3);flex-shrink:0}
.pk-it-p{display:block;font-size:13.5px;color:var(--pk-t2);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk-it .pk-tag{margin:6px 0 0}
.peek-doc{border-radius:20px;padding:20px 18px 28px;color:var(--pk-t1)}
.peek-doc-title{font-size:22px;font-weight:700;line-height:1.35;margin:0 0 6px;overflow-wrap:anywhere}
.peek-doc-meta{font-size:12px;color:var(--pk-t3);margin-bottom:18px}
.peek-doc-body p{font-size:16px;line-height:1.9;margin:0 0 10px;overflow-wrap:anywhere}
.peek-doc-checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.peek-doc-checks li{display:flex;align-items:flex-start;gap:12px;font-size:16px;line-height:1.6;padding:11px 0;border-bottom:1px solid var(--pk-hair)}.peek-doc-checks li:last-child{border-bottom:none}
.peek-doc-checks li.done span:last-child{color:var(--pk-t3);text-decoration:line-through}
.peek-box{width:20px;height:20px;flex-shrink:0;margin-top:2px;border:1.5px solid var(--pk-t3);border-radius:50%;display:flex;align-items:center;justify-content:center}
.peek-box.done{background:var(--pk-acc);border-color:var(--pk-acc)}.peek-box svg{width:12px;height:12px;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;color:var(--pk-on-acc)}

/* §5 备忘录「关于她」: one accordion row per memory title */
.peek-about-list{list-style:none;margin:0;padding:0}
.peek-about-row{border-bottom:1px solid var(--pk-hair)}.peek-about-row:last-child{border-bottom:none}
.peek-about-head{display:block;width:100%;text-align:left;border:none;background:none;font:inherit;font-size:16px;line-height:1.6;color:var(--pk-t1);padding:11px 0;cursor:pointer}
.peek-about-body{font-size:14.5px;line-height:1.8;color:var(--pk-t2);margin:0 0 12px;overflow-wrap:anywhere}

/* ── 相册 ── */
.pk-album{display:inline-flex;flex-direction:column;width:calc(50% - 7px);margin-top:22px}
.pk-album-cv{height:150px;border-radius:18px;display:grid;place-items:center;color:var(--pk-t3)}
.pk-album-cv svg{width:30px;height:30px;fill:none;stroke:currentColor;stroke-width:1.4}
.pk-album b{font-size:14.5px;font-weight:600;margin-top:8px}
.pk-album span{font-size:12.5px;color:var(--pk-t3)}
.peek-photo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;padding-top:18px}
.peek-photo{border:none;padding:10px 10px 14px;text-align:left;font-family:inherit;color:#2a2a2a;background:#fff;border-radius:4px;box-shadow:0 6px 16px rgba(0,0,0,.16);display:flex;flex-direction:column;transform:rotate(-2deg)}
.peek-photo:nth-child(even){transform:rotate(2deg)}
.peek-photo-art{aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,var(--pk-a),var(--pk-b));color:rgba(0,0,0,.45)}
.peek-photo-art svg{width:34px;height:34px;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;opacity:.8}
.peek-photo-art.big{border-radius:2px;aspect-ratio:4/3;margin-bottom:14px}
.peek-photo-cap{display:flex;flex-direction:column;gap:2px;padding:9px 2px 0}.peek-photo-cap b{font-size:12.5px;color:#2a2a2a}.peek-photo-cap span{font-size:10.5px;color:#777}
.peek-pal-mist{--pk-a:#dfe6ef;--pk-b:#eef1f5}.peek-pal-dusk{--pk-a:#cdd6e4;--pk-b:#e6dfeb}.peek-pal-sage{--pk-a:#d5e5da;--pk-b:#e6edf4}
.peek-pal-sand{--pk-a:#ece4d8;--pk-b:#f3eee6}.peek-pal-rosegrey{--pk-a:#ecdde2;--pk-b:#eef0f3}.peek-pal-lavender{--pk-a:#e0ddf0;--pk-b:#e6edf4}
.peek-detail{border-radius:20px;padding:18px 16px}
.peek-detail h2{font-size:19px;font-weight:700;margin:0 0 6px}
.peek-detail-meta{font-size:11.5px;color:var(--pk-t3);margin-bottom:12px}
.peek-detail-body{font-size:14px;line-height:1.85;overflow-wrap:anywhere}
.peek-mention{display:block;width:100%;margin-top:16px;padding:12px;min-height:44px}   /* photos only */

/* ── 屏幕使用时间 (§3) ── */
.pk-usage-today{display:flex;flex-direction:column;align-items:center;margin:18px 0 22px}
.pk-usage-today b{font-size:42px;line-height:1;font-weight:400}
.pk-usage-today span{font-size:13px;color:var(--pk-t2);margin-top:4px}
.pk-usage-chart{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;height:120px;padding:0 4px}
.pk-usage-col{flex:1;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px}
.pk-usage-col span{font-size:11px;color:var(--pk-t3)}
.pk-usage-col.today span{color:var(--pk-t1);font-weight:600}
.pk-usage-bar{width:100%;max-width:26px;border-radius:6px 6px 2px 2px;background:var(--pk-gl2)}
.pk-usage-col.today .pk-usage-bar{background:var(--pk-acc)}

/* ── 消息 ── */
.pk-mpin{display:flex;gap:14px;align-items:center;width:100%;margin-top:16px;padding:16px;border-radius:22px;font:inherit;color:inherit;text-align:left;cursor:pointer}
.pk-mpin-av{position:relative;width:58px;height:58px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;background:linear-gradient(160deg,var(--pk-you-d),var(--pk-you-l));color:#fff;font-size:22px;font-weight:600;overflow:hidden}
.pk-mpin-av i{position:absolute;right:-2px;top:-2px;width:14px;height:14px;border-radius:50%;background:var(--pk-acc);border:2px solid var(--pk-pale)}
.pk-mpin-m{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.pk-mpin-m b{font-size:17px;font-weight:600}
.pk-mpin-m span{font-size:14px;color:var(--pk-t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk-mpin small{align-self:flex-start;font-size:12px;color:var(--pk-t3)}
.pk-mi{display:flex;gap:12px;align-items:center;width:100%;padding:13px 16px;background:none;border:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
.pk-mi-ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;flex-shrink:0;background:var(--pk-gl2);color:var(--pk-acc);font-weight:600;overflow:hidden}
.pk-mi-m{flex:1;min-width:0}
.pk-thread-who{display:flex;align-items:center;gap:10px;min-width:0}
.pk-thread-who .pk-mi-ic{width:32px;height:32px;border-radius:50%}
.pk-thread-who b{font-size:16px;font-weight:600}
.pk-thread-who small{font-size:11.5px;color:var(--pk-t3)}
.pk-thread-time{text-align:center;font-size:12px;color:var(--pk-t3);margin:18px 0 10px}
.pk-bubble{max-width:78%;padding:10px 14px;border-radius:18px 18px 18px 6px;font-size:15px;line-height:1.55;overflow-wrap:anywhere}
.pk-notice-row{cursor:default}

/* ── 电话: a floating tab bar (最近 / 通讯录 / 拨号), search in the first two, a T9 dial pad ── */
.pk-call-miss{color:#d4553f}
.pk-phone .pk-scroll{padding-bottom:calc(112px + var(--sab))}
.pk-tabbar{position:absolute;left:16px;right:16px;bottom:calc(14px + var(--sab));z-index:3;border-radius:30px;padding:6px;display:grid;grid-auto-flow:column;grid-auto-columns:1fr}
.pk-tabbar button{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 0 7px;background:none;border:0;font:inherit;font-size:11.5px;color:var(--pk-t2);cursor:pointer;transition:color .25s}
.pk-tabbar button.on{color:var(--pk-t1)}
.pk-tabbar svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pk-tabbar svg.pk-fill{fill:currentColor;stroke:none}
.pk-thumb-tab{position:absolute;top:6px;bottom:6px;left:6px;width:calc((100% - 12px) / var(--n));border-radius:24px;background:var(--pk-gl2);border:1px solid var(--pk-edge);box-sizing:border-box;transform:translateX(calc(var(--i) * 100%))}
.pk-dial{display:flex;flex-direction:column;align-items:center;padding-top:6px}
.pk-dnum{height:46px;max-width:100%;display:flex;align-items:center;justify-content:center;overflow:hidden;white-space:nowrap;font-family:var(--pk-clock-font);font-size:34px;letter-spacing:2px;color:var(--pk-t1)}
.pk-dnum i{display:inline-block;font-style:normal}
.pk-dph{font-family:var(--font-body);font-size:14px;letter-spacing:0;color:var(--pk-t3)}
.pk-dmatch{height:44px;margin-top:4px;display:flex;align-items:center}
.pk-dm{display:flex;align-items:center;gap:10px;padding:5px 16px 5px 5px;border-radius:999px;font:inherit;font-size:14px;color:var(--pk-t1);cursor:pointer}
.pk-dm .pk-mi-ic{width:30px;height:30px;border-radius:50%;font-size:12px}
.pk-dm b{font-weight:600}.pk-dm em{font-style:normal;color:var(--pk-acc)}
.pk-dkeys{display:grid;grid-template-columns:repeat(3,74px);gap:14px 22px;margin-top:12px}
.pk-dkey{position:relative;overflow:hidden;width:74px;height:74px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:0;font:inherit;color:var(--pk-t1);cursor:pointer;
  background:var(--pk-gl2);border:1px solid var(--pk-edge);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);transition:background .35s,box-shadow .35s}
.pk-dkey:active{background:color-mix(in srgb,var(--pk-t1) 22%,transparent);box-shadow:0 0 0 6px color-mix(in srgb,var(--pk-t1) 7%,transparent);transition-duration:.08s}
.pk-dkey b{font-size:30px;font-weight:400;line-height:1}
.pk-dkey small{height:11px;font-size:9.5px;letter-spacing:2px;color:var(--pk-t2)}
.pk-drow{display:grid;grid-template-columns:repeat(3,74px);gap:0 22px;margin-top:16px;align-items:center;justify-items:center}
.pk-dcall{position:relative;width:74px;height:74px;border-radius:50%;display:grid;place-items:center;padding:0;cursor:pointer;color:#fff;border:1px solid rgba(255,255,255,.35);
  background:linear-gradient(160deg,color-mix(in srgb,var(--pk-mid) 80%,#fff),var(--pk-deep));box-shadow:0 10px 26px -10px rgba(0,0,0,.6)}
.pk-dcall svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.pk-halo{position:absolute;inset:-2px;border-radius:50%;border:2px solid color-mix(in srgb,var(--pk-acc) 70%,transparent);opacity:0;pointer-events:none}
.pk-ddel{width:48px;height:48px;border:0;background:none;padding:0;color:var(--pk-t2);cursor:pointer;display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .2s}
.pk-ddel.on{opacity:1;pointer-events:auto}
.pk-ddel svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.peek-contact-head{display:flex;flex-direction:column;align-items:center;text-align:center;padding:28px 16px 18px}
.peek-contact-av{width:72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:600;overflow:hidden;margin-bottom:12px}
.peek-contact-name{font-size:20px;font-weight:700;display:flex;align-items:center;gap:6px}
.peek-contact-star{display:inline-flex;color:#d9a441}
.peek-contact-star svg{width:16px;height:16px;fill:currentColor;stroke:none}

/* ── 圈子 thread: two-sided bubbles, TA's own lines on the right ── */
.pk-circle-thread{display:flex;flex-direction:column;gap:10px}
.pk-circle-row{display:flex;flex-direction:column;align-items:flex-start;max-width:100%}
.pk-circle-row.mine{align-items:flex-end}
.pk-circle-from{font-size:11.5px;color:var(--pk-t3);margin:0 2px 3px}
.pk-circle-row .pk-bubble{margin:0}
/* #peek-app-root prefix needed: .pk-bubble also carries .pk-glass, whose #peek-app-root .pk-glass
   background rule (an ID selector) otherwise wins over this plain-class one and leaves the accent
   background unset while color: var(--pk-on-acc) still applies - dark-mode text then reads as
   near-black on the glass's own near-black translucent fill, almost unreadable. */
/* his own lines: the same glass tinted with his accent, in the page's own text colour (white at night, black by day) */
#peek-app-root .pk-circle-row .pk-bubble.mine{background:color-mix(in srgb,var(--pk-acc) 20%,transparent);border-color:color-mix(in srgb,var(--pk-acc) 30%,transparent);color:var(--pk-t1);border-radius:18px 18px 6px 18px}
#peek-app-root:not([data-mode="dark"]) .pk-circle-row .pk-bubble.mine{background:color-mix(in srgb,var(--pk-acc) 14%,rgba(255,255,255,.35));border-color:color-mix(in srgb,var(--pk-acc) 22%,transparent)}
.pk-circle-row:not(.mine) .pk-bubble{border-radius:18px 18px 18px 6px}
/* a conversation: the messages scroll under a soft fade at the top (same recipe as 信息's own chat) */
.pk-thread .pk-top{position:absolute;left:0;right:0;top:0;z-index:2}
.pk-thread .pk-top::before{content:'';position:absolute;left:0;right:0;top:0;height:calc(118px + env(safe-area-inset-top,0px));z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--pk-pg) 94%,transparent) 0%,color-mix(in srgb,var(--pk-pg) 75%,transparent) 50%,transparent 100%);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);-webkit-mask-image:linear-gradient(180deg,#000 45%,transparent);mask-image:linear-gradient(180deg,#000 45%,transparent)}
.pk-thread .pk-scroll{padding-top:calc(64px + env(safe-area-inset-top,0px))}

/* §4 草稿箱: a draft bubble above the reply it was never sent instead of - grayed out, strikethrough,
   tap to reveal when it was typed. */
.pk-draft-bubble{display:flex;flex-direction:column;align-items:flex-end;gap:4px;max-width:78%;padding:0;border:none;background:none;font:inherit;color:inherit;cursor:pointer;text-align:left}
.pk-draft-line{padding:9px 14px;border-radius:18px 18px 6px 18px;border:1px dashed color-mix(in srgb,var(--pk-t1) 30%,transparent);color:var(--pk-t3);font-size:14px;line-height:1.5}
.pk-draft-text{overflow-wrap:anywhere;background:linear-gradient(currentColor,currentColor) no-repeat 0 58%/var(--st,100%) 1px}
.pk-draft-meta{display:flex;align-items:center;gap:6px}
.pk-draft-meta .pk-tag{margin:0}
.pk-draft-time{font-size:11px;color:var(--pk-t3);white-space:nowrap}
.pk-caret{display:inline-block;width:1.5px;height:1em;background:var(--pk-t2);vertical-align:-2px;margin-left:1px;animation:pkBlink .9s steps(1) infinite}

@media(max-width:360px){.pk-lock-time{font-size:80px}.pk-date-d{font-size:66px}.peek-app-icon{width:54px;height:54px}.pk-dkeys,.pk-drow{gap:12px 16px}}
/* short screens: the 6 rows keep their 84px floor and the page scrolls a little instead of icons overlapping */
@media(max-height:740px){.peek-app-grid{grid-template-rows:repeat(6,minmax(64px,1fr));gap:8px 10px}.pk-dock{height:80px;border-radius:30px}.peek-home-nav{min-height:38px}.pk-today-nx{padding-top:8px}.pk-bar{margin:10px 0 4px}.peek-app{gap:5px}.peek-app-icon{width:52px;height:52px;border-radius:15px}.pk-today{padding:12px 16px}.pk-today-d{font-size:38px}.peek-pass-pad{margin-top:26px;gap:12px 16px}.pk-dkeys{gap:10px 22px}.pk-dkey,.pk-dcall{width:68px;height:68px}}
@media(prefers-reduced-motion:reduce){.pk-wall-blur::before{filter:none}.pk-live-dot,.peek-unlock svg,.pk-shim,.pk-caret,.pk-nowrow .pk-ev-k i{animation:none}.pk-shim{color:var(--pk-wall-t);background:none}}

/* ── 第二批 (js/apps/phone-peek-apps.js) ── */
/* 朋友圈: his view of the same moments - cover, his name + avatar (no signature on the feed), cards */
.pk-moments .pk-top{position:absolute;left:0;right:0;top:0;z-index:3}
.pk-moments .pk-top .peek-back{color:#fff;background:rgba(20,26,34,.32);border-color:rgba(255,255,255,.28)}
.pk-mscroll{padding:0 0 calc(40px + var(--sab))}
.pk-mcover{position:relative;height:250px;background:var(--pk-cover,radial-gradient(120% 80% at 20% 10%,var(--pk-mid),transparent 60%),linear-gradient(160deg,var(--pk-mid),var(--pk-deep) 70%));background-size:cover;background-position:center}
.pk-mcover::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.35))}
.pk-mhead{position:relative;z-index:2;display:flex;align-items:flex-end;justify-content:flex-end;gap:12px;margin:-46px 16px 14px}
.pk-mhead b{font-size:18px;color:#fff;margin-bottom:28px;text-shadow:0 1px 6px rgba(0,0,0,.4)}
/* the 朋友圈 header above shares the class name with 日历's month header - keep the calendar's own look (the month title was hidden) */
#peek-app-root [data-screen="calendar"] .pk-mhead{position:static;align-items:center;justify-content:space-between;margin:0;padding:10px 0 12px}
#peek-app-root [data-screen="calendar"] .pk-mhead b{font-size:20px;color:var(--pk-t1);margin:0;text-shadow:none}
.pk-mav-big{border:0;background:none;padding:0;cursor:pointer}
.pk-mav{width:42px;height:42px;border-radius:12px;overflow:hidden;flex-shrink:0;display:grid;place-items:center;background:var(--pk-gl2);color:var(--pk-t1);font-size:16px}
.pk-mav img,.pk-mav .avatar-img{width:100%;height:100%;object-fit:cover}
.pk-mav.big{width:74px;height:74px;border-radius:20px;font-size:28px;border:3px solid var(--pk-pg);box-shadow:0 6px 18px rgba(0,0,0,.25)}
.pk-mav.ct{width:68px;height:68px;border-radius:18px;font-size:26px}
.pk-msign{text-align:right;font-size:12.5px;color:var(--pk-t3);margin:-4px 16px 8px}
.pk-mfeed{padding:0 16px}
.pk-mp{display:grid;grid-template-columns:42px minmax(0,1fr);gap:12px;padding:16px 0;border-bottom:1px solid var(--pk-hair)}
.pk-mp-av{border:0;background:none;padding:0;cursor:pointer;align-self:start}
.pk-mp-n{border:0;background:none;padding:0;font:inherit;font-size:15px;font-weight:600;color:var(--pk-acc);cursor:pointer;text-align:left}
.pk-mp-t{font-size:15px;line-height:1.6;margin:4px 0 0;overflow-wrap:anywhere;white-space:pre-line}
.pk-mph{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:8px;max-width:230px}
.pk-mph img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:6px;display:block}
.pk-mph.one{grid-template-columns:1fr;max-width:170px}.pk-mph.one img{aspect-ratio:4/3}
.pk-mloc{display:flex;align-items:center;gap:4px;margin-top:8px;font-size:12.5px;color:var(--pk-acc);opacity:.85}
.pk-mloc svg,.pk-mvis svg,.pk-mlk svg{width:13px;height:13px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pk-mmeta{display:flex;align-items:center;gap:8px;margin-top:6px;font-size:12px;color:var(--pk-t3)}
.pk-mvis{display:inline-flex;align-items:center;gap:3px;color:var(--pk-t2)}.pk-mvis.lock{color:var(--pk-you)}
.pk-mso{margin-top:10px;border-radius:10px;padding:8px 10px;font-size:13.5px;background:color-mix(in srgb,var(--pk-t1) 6%,transparent)}
.pk-mlk{display:flex;align-items:center;gap:6px;flex-wrap:wrap;color:var(--pk-acc)}
.pk-mcm{margin-top:5px;line-height:1.55;overflow-wrap:anywhere}.pk-mcm b{color:var(--pk-acc);font-weight:600}
.pk-mlk+.pk-mcm{border-top:1px solid var(--pk-hair);padding-top:6px;margin-top:6px}
/* 联系人详情 */
.pk-ct-h{display:flex;align-items:center;gap:16px;margin-top:12px}
.pk-ct-h b{display:block;font-size:23px}
.pk-ct-h small{display:block;font-size:12.5px;color:var(--pk-t2);margin-top:4px}
.pk-ct-list{margin-top:18px}
.pk-ct-mo{display:block;width:100%;padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
.pk-ct-row{display:flex;align-items:center;gap:12px;padding:14px 18px;font-size:14.5px}
.pk-ct-row+.pk-ct-row{border-top:1px solid var(--pk-hair)}
.pk-ct-row>span:first-child{width:56px;flex-shrink:0;font-size:13.5px;color:var(--pk-t2)}
.pk-ct-row>svg{width:15px;height:15px;flex-shrink:0;fill:none;stroke:var(--pk-t3);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pk-ct-strip{display:flex;gap:6px;margin-left:auto}
.pk-ct-strip i{width:52px;height:52px;flex-shrink:0;border-radius:9px;background:center/cover no-repeat var(--pk-gl2)}
.pk-ct-strip i.tx{font-style:normal;font-size:11px;line-height:1.45;padding:6px;box-sizing:border-box;color:var(--pk-t2);overflow:hidden;word-break:break-all;background:color-mix(in srgb,var(--pk-t1) 8%,transparent)}
.pk-ct-strip em{font-style:normal;font-size:12.5px;color:var(--pk-t3)}
/* 情侣空间: her own page styles (couple.css), told from his side */
.pk-couple-shell{display:flex;flex-direction:column}
.pk-couple .couple-topbar .peek-back{background:color-mix(in srgb,var(--surface) 70%,transparent);border:1px solid var(--couple-glass-line);color:var(--couple-accent-deep)}
.pk-cp-src{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--ink2);background:color-mix(in srgb,var(--surface) 70%,transparent);border:1px solid var(--couple-glass-line);border-radius:999px;padding:5px 11px 5px 6px}
.pk-cp-src i{width:16px;height:16px;border-radius:50%;box-shadow:0 0 0 2px #fff}
.pk-cp-count{font-size:12px;font-weight:400;color:var(--ink2)}
.pk-cp-ro{text-align:center;font-size:11.5px;color:var(--ink2);opacity:.7;margin:4px 0 12px}
.pk-cp-mini{position:absolute;left:50%;top:44px;font-style:normal;font-size:14px;color:var(--couple-accent-deep);pointer-events:none;z-index:4}
.pk-couple .cr-row{cursor:default}
/* 健康 */
.pk-health{--pk-h1:#9db8d6;--pk-h2:#a7c4b0;--pk-h3:#cfa6b2}
#peek-app-root:not([data-mode="dark"]) .pk-health{--pk-h1:#5f7fa6;--pk-h2:#5f8c6f;--pk-h3:#a86b7d}
.pk-hc{display:block;width:100%;box-sizing:border-box;margin-top:14px;padding:16px 18px;border-radius:24px;font:inherit;color:var(--pk-t1);text-align:left}
.pk-hcard{cursor:pointer}
.pk-hh{display:flex;justify-content:space-between;align-items:baseline}
.pk-hh b{font-size:15px}.pk-hh span{font-size:12px;color:var(--pk-t3)}
.pk-hrings{display:flex;align-items:center;gap:18px;margin-top:14px}
.pk-rings{width:120px;height:120px;flex-shrink:0;transform:rotate(-90deg)}
.pk-rings circle{fill:none;stroke-width:10;stroke-linecap:round}
.pk-rings .c1{--c:var(--pk-h1)}.pk-rings .c2{--c:var(--pk-h2)}.pk-rings .c3{--c:var(--pk-h3)}
.pk-rings .rbg{stroke:color-mix(in srgb,var(--c) 18%,transparent)}.pk-rings .rfg{stroke:var(--c)}
.pk-rleg{display:flex;flex-direction:column;gap:9px;min-width:0}
.pk-rleg div{display:grid;grid-template-columns:10px auto;column-gap:8px;align-items:center}
.pk-rleg i{width:8px;height:8px;border-radius:50%;grid-row:span 3}
.pk-rleg i.c1{background:var(--pk-h1)}.pk-rleg i.c2{background:var(--pk-h2)}.pk-rleg i.c3{background:var(--pk-h3)}
.pk-rleg span{font-size:12px;color:var(--pk-t2)}
.pk-rleg b{font-size:22px;font-weight:300;line-height:1.1}
.pk-rleg small{font-size:11px;color:var(--pk-t3)}
.pk-hbig{display:flex;align-items:baseline;gap:4px;margin-top:6px}
.pk-hbig b{font-size:36px;font-weight:200}.pk-hbig small{font-size:13px;color:var(--pk-t2);margin-right:6px}
.pk-sbar{position:relative;height:16px;margin-top:12px;border-radius:8px;overflow:hidden;background:color-mix(in srgb,var(--pk-t1) 8%,transparent)}
.pk-sbar i{position:absolute;top:0;bottom:0}
.pk-sbar .s-awake{background:color-mix(in srgb,var(--pk-h3) 70%,transparent)}.pk-sbar .s-light{background:color-mix(in srgb,var(--pk-h1) 55%,transparent)}
.pk-sbar .s-deep{background:var(--pk-h1)}.pk-sbar .s-rem{background:color-mix(in srgb,var(--pk-h2) 80%,transparent)}
.pk-sticks{display:flex;justify-content:space-between;margin-top:6px;font-size:11px;color:var(--pk-t3)}
.pk-hx{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s cubic-bezier(.2,.8,.2,1)}
.open>.pk-hx{grid-template-rows:1fr}
.pk-hx>div{overflow:hidden;min-height:0}
.pk-hnote{margin:10px 0 0;padding-top:10px;border-top:1px solid var(--pk-hair);font-size:12.5px;line-height:1.6;color:var(--pk-t2)}
.pk-hnote+.pk-hnote{border-top:0;padding-top:0;margin-top:6px}
.pk-hnote b{font-weight:600;color:var(--pk-h3)}
.pk-hr{display:block;width:100%;height:80px;margin-top:10px;overflow:visible}
.pk-hr path{fill:none;stroke:var(--pk-h3);stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.pk-hr circle{fill:var(--pk-h3);transform-box:fill-box;transform-origin:center}
/* 闹钟 */
.pk-wclk{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.pk-wc{display:flex;flex-direction:column;padding:14px 16px;border-radius:22px;min-width:0}
.pk-wc small{font-size:12px;color:var(--pk-t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk-wc b{font-size:36px;font-weight:200;line-height:1;margin-top:6px}
.pk-wc span{font-size:11.5px;color:var(--pk-t3);margin-top:6px}
.pk-wc.her small,.pk-wc.her span{color:var(--pk-you)}
.pk-alist{margin-top:14px}
.pk-al{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 12px;padding:14px 18px;cursor:pointer}
.pk-al+.pk-al{border-top:1px solid var(--pk-hair)}
.pk-al b{font-size:40px;font-weight:200;line-height:1;transition:opacity .3s}
.pk-al-lb{grid-column:1;font-size:13px;color:var(--pk-t2);transition:opacity .3s}
.pk-al.off b,.pk-al.off .pk-al-lb{opacity:.38}
.pk-al.her .pk-al-lb{color:var(--pk-you)}
.pk-al .pk-hx{grid-column:1/-1}
.pk-al .pk-hnote{border-top:0;padding:8px 10px;border-radius:10px;background:color-mix(in srgb,var(--pk-t1) 6%,transparent)}
.pk-sw{grid-row:1/3;grid-column:2;position:relative;width:52px;height:31px;border-radius:16px;border:0;padding:0;cursor:pointer;background:color-mix(in srgb,var(--pk-t1) 16%,transparent);transition:background .3s}
.pk-sw::after{content:'';position:absolute;top:3px;left:3px;width:25px;height:25px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:transform .4s cubic-bezier(.3,1.5,.5,1)}
.pk-sw.on{background:var(--pk-acc)}
#peek-app-root:not([data-mode="dark"]) .pk-sw.on{background:var(--pk-acc-l)}
.pk-al.her .pk-sw.on{background:color-mix(in srgb,var(--pk-you) 75%,#888)}
.pk-sw.on::after{transform:translateX(21px)}
/* the couple glyph on his home screen: the same drawing as her desktop, coloured for his glass */
.peek-app-icon svg.glass-glyph{width:62.5%;height:62.5%;overflow:visible;--ln:color-mix(in srgb,var(--pk-deep) 85%,#000);--pri-pale:color-mix(in srgb,var(--pk-pale) 70%,var(--pk-mid))}
.peek-app-icon .glass-glyph .ln{fill:none;stroke:var(--ln);stroke-linecap:round;stroke-linejoin:round}
.peek-app-icon .glass-glyph .f1{fill:rgb(255 255 255/95%);stroke:var(--ln);stroke-linejoin:round}
.peek-app-icon .glass-glyph .f2{fill:var(--pri-pale);stroke:var(--ln);stroke-linejoin:round}
.peek-app-icon .glass-glyph .ac{fill:#F7D27A;stroke:none}
.peek-app-icon .glass-glyph .w1{stroke-width:2.4}.peek-app-icon .glass-glyph .w2{stroke-width:2}
#peek-app-root[data-mode="dark"] .peek-app-icon svg.glass-glyph{--ln:rgba(238,242,247,.9)}
#peek-app-root[data-mode="dark"] .peek-app-icon .glass-glyph .f1{fill:rgb(255 255 255/28%)}
#peek-app-root[data-mode="dark"] .peek-app-icon .glass-glyph .f2{fill:rgb(255 255 255/12%)}

/* 外卖 / 商城: his orders; the ones that went to her differ only in their address (rose) */
.pk-addr{display:flex;gap:8px;margin-top:14px;overflow-x:auto;scrollbar-width:none}
.pk-addr::-webkit-scrollbar{display:none}
.pk-adr{flex-shrink:0;display:flex;align-items:center;gap:8px;padding:9px 14px 9px 10px;border-radius:16px;font-size:13px;color:var(--pk-t1)}
.pk-adr svg{width:16px;height:16px;fill:none;stroke:var(--pk-t2);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pk-adr small{display:block;font-size:11px;color:var(--pk-t3)}
.pk-adr.her svg{stroke:var(--pk-you)}
.pk-shop-seg{margin:16px 0 0;width:100%;box-sizing:border-box}
.pk-shop-seg button{padding:7px 0;font-size:14px}
.pk-ord-first{margin-top:16px}
.pk-ord{display:block;width:100%;box-sizing:border-box;padding:14px 16px;border:0;background:none;font:inherit;color:var(--pk-t1);text-align:left;cursor:default}
.pk-ord[data-peek-x]{cursor:pointer}
.pk-ord+.pk-ord{border-top:1px solid var(--pk-hair)}
.pk-ord-r{display:flex;align-items:center;gap:12px}
.pk-ord-ic{width:40px;height:40px;flex-shrink:0;display:grid;place-items:center;border-radius:12px;background:var(--pk-gl2);border:1px solid var(--pk-edge)}
.pk-ord-ic svg{width:20px;height:20px;fill:none;stroke:var(--pk-t1);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pk-ord.her .pk-ord-ic{background:color-mix(in srgb,var(--pk-you) 22%,transparent);border-color:color-mix(in srgb,var(--pk-you) 35%,transparent)}
.pk-ord.her .pk-ord-ic svg{stroke:var(--pk-you)}
.pk-ord-b{flex:1;min-width:0}
.pk-ord-b b{display:block;font-size:15px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk-ord-b>span{display:block;margin-top:3px;font-size:12.5px;color:var(--pk-t2)}
.pk-to-her{font-style:normal;color:var(--pk-you)}
.pk-ord-st{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:999px;border:1px solid var(--pk-edge);font-size:11px;font-style:normal;color:var(--pk-t2);vertical-align:1px}
.pk-ord-st.going{color:var(--pk-acc);border-color:color-mix(in srgb,var(--pk-acc) 45%,transparent)}
.pk-cart-q{display:block;margin-top:3px;font-size:11.5px;color:var(--pk-t3)}
.pk-ord-p{flex-shrink:0;text-align:right}
.pk-ord-p b{font-size:16px;font-weight:300}
.pk-ord-p small{display:block;margin-top:3px;font-size:11.5px;color:var(--pk-t3)}
.pk-ord-prog{position:relative;height:3px;margin:12px 0 2px 52px;border-radius:3px;overflow:hidden;background:color-mix(in srgb,var(--pk-t1) 12%,transparent)}
.pk-ord-prog i{position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--pk-acc)}
.pk-ord-prog i::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent) no-repeat;background-size:60% 100%;animation:pkOrdRun 1.8s linear infinite}
@keyframes pkOrdRun{from{background-position:-60% 0}to{background-position:160% 0}}
.pk-ord-steps{display:flex;justify-content:space-between;margin:4px 0 0 52px;font-size:11px;color:var(--pk-t3)}
.pk-ord-steps .on{color:var(--pk-t1)}
.pk-ord .pk-hx{margin-left:52px}
.pk-hx>span{display:block;overflow:hidden;min-height:0}
.pk-kv{display:flex;justify-content:space-between;gap:12px;padding-top:9px;font-size:13px;color:var(--pk-t2)}
.pk-kv:first-child{margin-top:12px;padding-top:12px;border-top:1px solid var(--pk-hair)}
.pk-kv span:last-child{color:var(--pk-t1);text-align:right}
@media(prefers-reduced-motion:reduce){.pk-ord-prog i::after{animation:none}}

/* 论坛 on his phone: the layout of her 论坛, in his own colours (follows his day / night) */
.pk-forum .pk-top{justify-content:space-between}
.pk-fm-ti{font-size:19px;font-weight:500;letter-spacing:.12em}
.pk-fm-me{width:40px;height:40px;padding:0;border-radius:50%;border:1px solid var(--pk-edge);background:var(--pk-gl);display:grid;place-items:center;cursor:pointer}
.pk-fm-sw{margin-left:auto;height:36px;padding:0 14px;border-radius:18px;font:inherit;font-size:13px;color:var(--pk-t1);cursor:pointer}
.pk-fm-head{padding:14px 6px 0}
.pk-fm-head small{font-size:12px;letter-spacing:.1em;color:var(--pk-t2)}
.pk-fm-head b{display:block;margin-top:6px;font-size:28px;font-weight:500;line-height:1.2}
.pk-fm-list{display:flex;flex-direction:column;gap:14px;margin-top:14px}
.pk-fm-card{display:flex;flex-direction:column;gap:10px;border-radius:22px;padding:16px 16px 14px}
.pk-fm-who{display:flex;align-items:center;gap:10px}
.pk-fm-who b{display:block;font-size:13px;font-weight:500}.pk-fm-who small{font-size:11px;color:var(--pk-t3)}
.pk-fm-t{font-size:17px;font-weight:500;line-height:1.45}
.pk-fm-b{font-size:13.5px;line-height:1.65;color:var(--pk-t2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pk-fm-meta{display:flex;align-items:center;gap:16px;font-size:12px;color:var(--pk-t3)}
.pk-fm-meta em{margin-left:auto;padding:3px 9px;border-radius:10px;border:1px solid var(--pk-edge);font-size:11px;font-style:normal;color:var(--pk-t2)}
.pk-fm-orb{display:inline-block;width:34px;height:34px;flex-shrink:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.9) 0%,var(--o) 48%,transparent 100%);box-shadow:0 0 12px color-mix(in srgb,var(--o) 60%,transparent);filter:saturate(.55);animation:pkFmBreathe 4.5s ease-in-out infinite}
@keyframes pkFmBreathe{50%{transform:scale(1.06)}}
.pk-fm-orb.sm,.pk-fm-av.sm{width:26px;height:26px}
.pk-fm-orb.xl,.pk-fm-av.xl{width:84px;height:84px}
.pk-fm-av{display:inline-grid;place-items:center;width:34px;height:34px;flex-shrink:0;border-radius:50%;overflow:hidden;background:var(--pk-gl2)}
.pk-fm-av img,.pk-fm-av .avatar-img{width:100%;height:100%;object-fit:cover}
.pk-fme-id{display:flex;align-items:center;gap:16px;margin-top:10px;padding:0 6px}
.pk-fme-id small{font-size:12px;color:var(--pk-t2)}.pk-fme-id b{display:block;margin-top:2px;font-size:22px;font-weight:500}.pk-fme-id span{display:block;margin-top:4px;font-size:12px;color:var(--pk-t2)}
.pk-fme-reveal{margin-top:16px;padding:16px 18px;border-radius:22px;background:color-mix(in srgb,var(--pk-acc) 14%,transparent);border:1px solid color-mix(in srgb,var(--pk-acc) 30%,transparent)}
.pk-fme-reveal small{font-size:12px;color:var(--pk-t2)}.pk-fme-reveal b{display:block;margin-top:6px;font-size:16px;font-weight:500}.pk-fme-reveal span{display:block;margin-top:6px;font-size:12px;color:var(--pk-t2)}
.pk-fme-list{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.pk-fme-it{border-radius:20px;padding:14px 16px}
.pk-fme-it .h{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--pk-t2)}
.pk-fme-it p{margin:5px 0 0;font-size:14px;line-height:1.6;overflow-wrap:anywhere}
.pk-fme-it .q{margin-top:8px;padding:8px 10px;border-radius:12px;font-size:12px;line-height:1.5;color:var(--pk-t2);background:color-mix(in srgb,var(--pk-t1) 7%,transparent)}
.pk-fme-her{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:8px;font-size:10.5px;font-style:normal;color:var(--pk-you);background:color-mix(in srgb,var(--pk-you) 22%,transparent);vertical-align:1px}
/* 设置 / 密码 */
.pk-set-row{width:100%;border:0;background:none;font:inherit;color:var(--pk-t1);text-align:left;cursor:pointer}
.pk-set-row em{margin-left:auto;font-style:normal;font-size:12.5px;color:var(--pk-t3)}
.pk-set-row>svg{margin-left:auto}.pk-set-row em+svg{margin-left:0}
.pk-ct-row>.pk-set-ic{width:34px;height:34px;flex-shrink:0;display:grid;place-items:center;border-radius:10px;background:var(--pk-gl2);border:1px solid var(--pk-edge)}
.pk-set-ic svg{width:18px;height:18px;fill:none;stroke:var(--pk-t1);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.pk-pw-t{flex:1;min-width:0;width:auto!important;color:var(--pk-t1)!important}
.pk-pw-t b{display:block;font-size:15px}.pk-pw-t small{display:block;font-size:12px;color:var(--pk-t3)}
/* centred dialog inside the phone */
.pk-modal-ov{position:absolute;inset:0;z-index:20;display:grid;place-items:center;padding:28px;background:color-mix(in srgb,#000 30%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
#peek-app-root .pk-modal{width:100%;max-width:340px;box-sizing:border-box;border-radius:28px;padding:20px 16px 14px;color:var(--pk-t1);background:color-mix(in srgb,var(--pk-pg) 88%,transparent)}
.pk-modal h3{margin:0 4px 12px;font-size:16px;font-weight:500;text-align:center}
.pk-modal p{margin:0 4px 16px;font-size:13.5px;line-height:1.6;color:var(--pk-t2);text-align:center}
.pk-modal-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pk-modal-btns button{padding:11px 0;border-radius:16px;border:1px solid var(--pk-edge);background:var(--pk-gl2);font:inherit;font-size:15px;color:var(--pk-t1);cursor:pointer}
.pk-modal-btns button.on{background:var(--pk-t1);color:var(--pk-pg);border-color:transparent}
.pk-fm-acc{display:flex;align-items:center;gap:12px;width:100%;margin-bottom:8px;padding:10px 12px;border-radius:18px;border:0;background:var(--pk-gl2);font:inherit;color:var(--pk-t1);text-align:left;cursor:pointer}
.pk-fm-acc b{font-size:15px;font-weight:500}.pk-fm-acc small{display:block;font-size:11.5px;color:var(--pk-t2)}
.pk-fm-acc em{margin-left:auto;font-size:11.5px;font-style:normal;color:var(--pk-t2)}
.pk-fm-acc.add{justify-content:center;background:transparent;border:1px dashed var(--pk-edge);color:var(--pk-t2)}
.pk-modal-x{display:block;margin:6px auto 0;padding:8px 20px;border:0;background:none;font:inherit;font-size:13px;color:var(--pk-t2);cursor:pointer}
@media(prefers-reduced-motion:reduce){.pk-fm-orb{animation:none}}

/* focus polish (hand-written, keep LAST): 查手机 联系人/消息搜索 (.pk-search, shared by #peek-search and
   #peek-messages-search) - same bug/fix as character.css's search box. */
.pk-search input{-webkit-appearance:none;appearance:none}
.pk-search input:focus{outline:none!important;border-color:transparent!important;box-shadow:none!important}
.pk-search:focus-within{box-shadow:0 0 0 3px color-mix(in srgb,var(--pk-acc-d) 22%,transparent)}