﻿/* 查手机：iPhone 级仿真 */
.ph-view{ position:relative; overflow:hidden; background:#0b0f1a; }
.ph-view::before,.ph-view::after{ display:none; }
.ph-topbar{ flex:0 0 auto; display:flex; align-items:center; gap:12px; padding:calc(12px + env(safe-area-inset-top,0px)) 16px 12px; z-index:2; position:relative; background:#fff; border-bottom:1px solid #E5E7EB; }
html[data-theme="dark"] .ph-topbar{ background:#111827; border-bottom-color:#1f2937; }
.ph-top-title{ flex:1; min-width:0; }
.ph-top-title b{ display:block; font-size:17px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#111827; }
html[data-theme="dark"] .ph-top-title b{ color:#F9FAFB; }
.ph-top-title span{ display:block; margin-top:2px; font-size:12px; color:#9CA3AF; }
.ph-topbar .back-btn{ color:#111827; width:38px; height:38px; background:#F3F4F6; border-radius:12px; }
html[data-theme="dark"] .ph-topbar .back-btn{ color:#F9FAFB; background:#1f2937; }
.ph-gen-btn{ height:38px; padding:0 18px; border:0; border-radius:20px; background:linear-gradient(135deg,#3B82F6,#8B5CF6); color:#fff; font:700 13px/1 var(--font-body); cursor:pointer; box-shadow:0 4px 14px rgba(59,130,246,.4); }
.ph-gen-btn:disabled{ opacity:.5; box-shadow:none; }
.ph-body{ flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column; padding:14px; position:relative; z-index:1; }
.ph-pick{ flex:1; min-height:0; overflow-y:auto; padding-bottom:16px; }
.ph-pick::-webkit-scrollbar{ width:0; }
.ph-pick-hero{ margin-bottom:14px; padding:20px; background:#fff; border-radius:20px; box-shadow:0 2px 12px rgba(0,0,0,.2); }
html[data-theme="dark"] .ph-pick-hero{ background:#1F2937; }
.ph-pick-hero b{ display:block; font-size:16px; }
.ph-pick-hero p{ margin:8px 0 0; font-size:13px; line-height:1.6; color:#6B7280; }
.ph-pick-row{ width:100%; display:flex; align-items:center; gap:14px; padding:14px 16px; margin-bottom:10px; border:0; border-radius:16px; background:#fff; text-align:left; font:inherit; cursor:pointer; color:#111; }
html[data-theme="dark"] .ph-pick-row{ background:#1F2937; color:#F9FAFB; }
.ph-pick-row img{ width:50px; height:50px; border-radius:14px; object-fit:cover; background:#E5E7EB; }
.ph-pick-row b{ display:block; font-size:15px; }
.ph-pick-row>div{ flex:1; } .ph-pick-row>div span{ font-size:12px; color:#9CA3AF; }
.ph-pick-tag{ font-size:12px; color:#9CA3AF; } .ph-pick-tag.on{ color:#10B981; font-weight:700; }
.ph-empty{ padding:50px 20px; text-align:center; color:#9CA3AF; font-size:14px; line-height:1.8; }

/* 手机舞台 = iPhone 机身 */
.ph-stage{ flex:1; min-height:0; display:flex; flex-direction:column; position:relative; border-radius:44px; overflow:hidden; background:#000; box-shadow:0 20px 60px rgba(0,0,0,.5), inset 0 0 0 3px #2a2f3a, inset 0 0 0 6px #000; max-width:400px; width:100%; margin:0 auto; }
.ph-screen{ flex:1; min-height:0; display:flex; flex-direction:column; position:relative; overflow:hidden; border-radius:38px; background:#F2F3F7; }
/* 状态栏 */
.ph-status{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; padding:14px 26px 4px; font:600 13px/1 var(--font-num); color:#111; background:transparent; position:relative; z-index:5; }
.ph-status.dark{ color:#fff; }
.ph-st-notch{ position:absolute; left:50%; top:10px; transform:translateX(-50%); width:110px; height:26px; background:#000; border-radius:14px; }
.ph-st-icons{ display:flex; align-items:center; gap:5px; }
.ph-st-icons svg{ width:17px; height:12px; fill:currentColor; }
.ph-batt{ width:24px; height:12px; border:1px solid currentColor; border-radius:4px; padding:1px; display:inline-block; }
.ph-batt span{ display:block; height:100%; background:currentColor; border-radius:2px; }
.ph-homebar{ flex:0 0 auto; display:grid; place-items:center; padding:8px 0 9px; background:transparent; }
.ph-homebar span{ width:130px; height:5px; border-radius:3px; background:rgba(120,120,128,.5); }
.ph-lock .ph-homebar span, .ph-wall .ph-homebar span{ background:rgba(255,255,255,.85); }

/* 锁屏 */
.ph-lock{ flex:1; display:flex; flex-direction:column; background:linear-gradient(180deg,#1b2a6b 0%,#7b2ff7 45%,#f72f8b 75%,#ff8a3d 100%); color:#fff; position:relative; }
.ph-lock::before{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 70% 20%,rgba(255,255,255,.35),transparent 45%),radial-gradient(circle at 20% 80%,rgba(255,220,150,.4),transparent 50%); }
.ph-lock-clock{ text-align:center; padding:44px 0 10px; position:relative; }
.ph-lock-clock span{ font-size:15px; opacity:.95; font-weight:600; }
.ph-lock-clock b{ display:block; font-family:var(--font-num); font-size:76px; font-weight:700; letter-spacing:-.04em; line-height:1; margin-top:2px; }
.ph-notif{ position:relative; margin:14px 14px 0; background:rgba(255,255,255,.22); backdrop-filter:blur(20px); border-radius:22px; padding:12px 14px; }
.ph-notif-app{ display:flex; align-items:center; gap:8px; font-size:11px; opacity:.9; margin-bottom:4px; }
.ph-notif-app .ph-app-ico{ width:22px; height:22px; border-radius:6px; }
.ph-notif-app .ph-app-ico svg{ width:12px; height:12px; }
.ph-notif b{ display:block; font-size:14px; } .ph-notif span{ font-size:12px; opacity:.85; }
.ph-lock-bottom{ margin-top:auto; position:relative; display:flex; flex-direction:column; align-items:center; gap:14px; padding-bottom:4px; }
.ph-unlock{ border:0; background:rgba(255,255,255,.25); backdrop-filter:blur(10px); color:#fff; border-radius:24px; padding:12px 26px; font:600 14px/1 var(--font-body); cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:2px; animation:phFloat 2s ease-in-out infinite; }
@keyframes phFloat{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-6px);} }
.ph-lock-tools{ width:100%; display:flex; justify-content:space-between; padding:0 44px 6px; font-size:22px; }

/* 主屏壁纸 */
.ph-wall{ flex:1; display:flex; flex-direction:column; background:linear-gradient(180deg,#0f2027 0%,#203a43 35%,#7b4397 70%,#dc2430 100%); color:#fff; position:relative; }
.ph-wall::before{ content:''; position:absolute; inset:0; background:radial-gradient(circle at 80% 10%,rgba(255,200,120,.5),transparent 40%),radial-gradient(circle at 15% 85%,rgba(120,200,255,.4),transparent 45%); }
.ph-wall-widget{ position:relative; padding:20px 22px 8px; }
.ph-wall-widget b{ display:block; font-family:var(--font-num); font-size:30px; font-weight:700; }
.ph-wall-widget span{ font-size:13px; opacity:.9; }
.ph-wall-grid{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:16px 8px; padding:14px 18px; }
.ph-ios-app{ border:0; background:transparent; color:#fff; display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer; font:500 11px/1 var(--font-body); }
.ph-ios-app:active{ transform:scale(.92); }
.ph-ios-wrap{ position:relative; }
.ph-app-ico{ width:56px; height:56px; border-radius:15px; display:grid; place-items:center; box-shadow:0 6px 16px -6px rgba(0,0,0,.4); }
.ph-app-ico svg{ width:28px; height:28px; fill:#fff; stroke:none; }
.ph-app-ico.wx,.ph-app-ico.wechat{ background:linear-gradient(180deg,#2bd576,#0fa84a); }
.ph-app-ico.album{ background:linear-gradient(180deg,#fefefe,#e8e8ec); }
.ph-app-ico.album svg{ fill:none; stroke:#f59e0b; stroke-width:1.8; }
.ph-app-ico.safari{ background:linear-gradient(180deg,#3ec6ff,#1a73e8); }
.ph-app-ico.notes{ background:linear-gradient(180deg,#fff,#f5f5f7); }
.ph-app-ico.notes svg{ fill:none; stroke:#eab308; stroke-width:1.8; }
.ph-app-ico.phone,.ph-app-ico.dialer{ background:linear-gradient(180deg,#4ade80,#16a34a); }
.ph-app-ico.dialer svg,.ph-app-ico.phone svg,.ph-app-ico.sms svg,.ph-app-ico.camera svg,.ph-app-ico.clock svg,.ph-app-ico.wallet svg,.ph-app-ico.settings svg,.ph-app-ico.music svg,.ph-app-ico.moments svg{ fill:#fff; stroke:none; }
.ph-app-ico.sms{ background:linear-gradient(180deg,#4ade80,#16a34a); }
.ph-app-ico.camera{ background:linear-gradient(180deg,#9ca3af,#4b5563); }
.ph-app-ico.clock{ background:linear-gradient(180deg,#fbbf24,#f97316); }
.ph-app-ico.wallet{ background:linear-gradient(180deg,#60a5fa,#1d4ed8); }
.ph-app-ico.settings{ background:linear-gradient(180deg,#9ca3af,#374151); }
.ph-app-ico.music{ background:linear-gradient(180deg,#fb7185,#e11d48); }
.ph-app-ico.moments{ background:linear-gradient(180deg,#34d399,#059669); }
.ph-ios-label{ text-shadow:0 1px 4px rgba(0,0,0,.5); }
.ph-badge{ position:absolute; top:-6px; right:-8px; min-width:20px; height:20px; padding:0 5px; border-radius:10px; background:#ff3b30; color:#fff; font:700 12px/20px var(--font-num); font-style:normal; text-align:center; }
.ph-dots{ display:flex; gap:6px; justify-content:center; padding:4px; }
.ph-dots i{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.4); } .ph-dots i.on{ background:#fff; }
.ph-dock{ position:relative; margin:auto 12px 8px; background:rgba(255,255,255,.28); backdrop-filter:blur(20px); border-radius:26px; display:flex; justify-content:space-around; padding:10px 6px; }
.ph-dock button{ border:0; background:transparent; cursor:pointer; } .ph-dock button:active{ transform:scale(.9); }

/* App 通用 */
.ph-app-page{ flex:1; min-height:0; display:flex; flex-direction:column; background:#F2F3F7; color:#111; }
.ph-app-bar{ flex:0 0 auto; display:flex; align-items:center; gap:8px; padding:10px 12px; background:rgba(255,255,255,.92); backdrop-filter:blur(12px); border-bottom:1px solid #E5E7EB; }
.ph-app-bar.trans{ background:transparent; border:0; color:#fff; }
.ph-app-bar.trans b{ color:#fff; }
.ph-app-bar b{ flex:1; font-size:16px; font-weight:700; text-align:center; }
.ph-app-bar .ph-mini{ width:32px; height:32px; border:0; border-radius:50%; background:#E9EBF0; color:#111; font-size:20px; cursor:pointer; }
.ph-app-scroll{ flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.ph-app-scroll::-webkit-scrollbar{ width:0; }
.ph-wx-search{ margin:10px 12px; background:#E9EBF0; border-radius:10px; text-align:center; padding:8px; font-size:13px; color:#8E8E93; }
.ph-wx-tabs{ flex:0 0 auto; display:flex; background:rgba(255,255,255,.95); border-top:1px solid #E5E7EB; padding:8px 0 14px; }
.ph-wx-tab{ flex:1; border:0; background:transparent; font:500 11px/1 var(--font-body); color:#8E8E93; cursor:pointer; }
.ph-wx-tab.on{ color:#07C160; font-weight:700; }
.ph-wx-row{ width:100%; display:flex; align-items:center; gap:12px; padding:11px 14px; border:0; background:#fff; border-bottom:1px solid #F1F1F4; text-align:left; font:inherit; cursor:pointer; color:#111; }
.ph-wx-ava{ width:46px; height:46px; border-radius:10px; background:#E5E7EB; flex-shrink:0; display:grid; place-items:center; font-size:22px; overflow:hidden; }
.ph-wx-ava img{ width:100%; height:100%; object-fit:cover; }
.ph-wx-meta{ flex:1; min-width:0; }
.ph-wx-meta b{ display:flex; justify-content:space-between; gap:8px; font-size:15px; }
.ph-wx-meta b small{ font-weight:400; font-size:11px; color:#999; }
.ph-wx-meta span{ display:block; margin-top:3px; font-size:13px; color:#888; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ph-wx-pin{ display:inline-block; margin-right:4px; font-size:10px; font-weight:700; color:#07C160; border:1px solid #07C160; border-radius:4px; padding:0 3px; font-style:normal; }
.ph-unread{ min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:#FA5151; color:#fff; font:700 11px/18px var(--font-num); font-style:normal; text-align:center; }
.ph-sec{ padding:12px 16px 6px; font-size:12px; color:#999; }
.ph-wx-thread{ flex:1; min-height:0; overflow-y:auto; padding:14px 12px 20px; background:#EDEDED; }
.ph-wx-thread.sms{ background:#fff; }
.ph-wx-thread::-webkit-scrollbar{ width:0; }
.ph-time-div{ text-align:center; font-size:11px; color:#999; margin:8px 0 12px; }
.ph-bubble{ display:flex; gap:8px; margin-bottom:12px; align-items:flex-start; }
.ph-bubble.mine{ flex-direction:row-reverse; }
.ph-bubble .ph-wx-ava{ width:36px; height:36px; border-radius:8px; font-size:16px; }
.ph-bubble .ph-btext{ max-width:68%; padding:9px 12px; border-radius:6px; background:#fff; font-size:15px; line-height:1.5; word-break:break-word; white-space:pre-wrap; position:relative; }
.ph-bubble.mine .ph-btext{ background:#95EC69; }
.ph-btext.blue{ background:#007AFF; color:#fff; border-radius:18px; }
.ph-btext.gray{ background:#E9E9EB; color:#111; border-radius:18px; }
.ph-btext small{ display:block; font-size:10px; opacity:.6; margin-top:4px; }
.ph-wx-input{ flex:0 0 auto; display:flex; align-items:center; gap:10px; padding:10px 12px 16px; background:#F7F7F7; border-top:1px solid #E5E5E5; font-size:20px; }
.ph-wx-fakeinput{ flex:1; background:#fff; border-radius:6px; padding:8px 12px; font-size:13px; color:#999; }
.ph-wx-readonly{ display:none; }
.ph-me-card{ margin:12px; padding:16px; border-radius:14px; background:#fff; display:flex; gap:14px; align-items:center; }
.ph-me-card .ph-wx-ava{ width:58px; height:58px; border-radius:12px; font-size:28px; }
.ph-me-card b{ display:block; font-size:17px; } .ph-me-card span{ display:block; margin-top:3px; font-size:12px; color:#999; }
.ph-me-row{ width:100%; margin:0 0 1px; padding:15px 16px; background:#fff; display:flex; justify-content:space-between; align-items:center; font-size:15px; border:0; cursor:pointer; color:#111; text-align:left; font-family:inherit; }
.ph-me-row em{ font-style:normal; color:#07C160; font-weight:700; font-family:var(--font-num); }
.ph-moments-cover{ height:170px; background:linear-gradient(135deg,#667eea,#764ba2); position:relative; margin-bottom:40px; }
.ph-moments-cover img{ position:absolute; right:16px; bottom:-24px; width:64px; height:64px; border-radius:12px; object-fit:cover; border:2px solid #fff; }
.ph-moments-cover b{ position:absolute; right:90px; bottom:-18px; color:#fff; font-size:16px; text-shadow:0 1px 4px rgba(0,0,0,.5); }
.ph-post{ display:flex; gap:10px; padding:14px; background:#fff; border-bottom:8px solid #F2F3F7; }
.ph-post b{ font-size:14px; color:#576B95; }
.ph-post p{ margin:6px 0; font-size:15px; color:#111; line-height:1.5; }
.ph-post small{ color:#999; font-size:11px; }
.ph-post-likes{ margin-top:8px; background:#F7F7F7; border-radius:6px; padding:6px 10px; font-size:12px; color:#576B95; }
.ph-post-cm{ background:#F7F7F7; padding:4px 10px; font-size:13px; }
.ph-album-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:2px; padding:2px; background:#fff; }
.ph-photo{ aspect-ratio:1; border:0; padding:0; cursor:pointer; display:flex; flex-direction:column; justify-content:flex-end; background:linear-gradient(155deg,var(--ph-a,#89a),var(--ph-b,#456)); color:#fff; position:relative; overflow:hidden; }
.ph-photo-emo{ position:absolute; inset:0; display:grid; place-items:center; font-size:34px; }
.ph-photo-cap{ position:relative; padding:6px; font-size:10px; background:linear-gradient(transparent,rgba(0,0,0,.65)); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ph-photo-view{ flex:1; display:flex; flex-direction:column; background:linear-gradient(180deg,var(--ph-a),var(--ph-b)); color:#fff; }
.ph-photo-big{ flex:1; display:grid; place-items:center; font-size:110px; }
.ph-photo-info{ padding:12px 16px; background:rgba(0,0,0,.35); backdrop-filter:blur(10px); }
.ph-photo-info b{ display:block; font-size:16px; } .ph-photo-info span{ font-size:12px; opacity:.85; }
.ph-photo-actions{ display:flex; gap:18px; margin-top:10px; font-size:14px; }
.ph-photo-actions span{ cursor:pointer; }
.ph-photo-nav{ display:flex; justify-content:space-between; align-items:center; padding:10px 16px 14px; background:rgba(0,0,0,.45); font-size:13px; }
.ph-photo-nav button{ border:0; background:rgba(255,255,255,.2); color:#fff; border-radius:14px; padding:7px 14px; cursor:pointer; }
.ph-urlbar{ margin:8px 12px; background:#E9EBF0; border-radius:12px; padding:10px; font-size:13px; color:#555; text-align:center; }
.ph-urlbar.small{ font-size:11px; text-align:left; }
.ph-br-row{ width:100%; display:flex; gap:12px; align-items:center; padding:13px 14px; background:#fff; border-bottom:1px solid #F1F1F4; border-left:0; border-right:0; border-top:0; text-align:left; cursor:pointer; font:inherit; color:#111; }
.ph-br-badge{ flex-shrink:0; height:24px; padding:0 9px; border-radius:7px; font:700 11px/24px var(--font-body); color:#fff; }
.ph-br-badge.zhihu{ background:#0066FF; } .ph-br-badge.baidu{ background:#306EFF; } .ph-br-badge.douyin{ background:#111; } .ph-br-badge.bilibili{ background:#FB7299; } .ph-br-badge.av{ background:#EF4444; }
.ph-br-meta{ flex:1; min-width:0; } .ph-br-meta b{ display:block; font-size:14px; } .ph-br-meta span{ font-size:11px; color:#999; }
.ph-article{ padding:18px; background:#fff; } .ph-article h2{ font-size:19px; line-height:1.4; margin:0 0 8px; } .ph-article small{ color:#999; } .ph-article p{ font-size:15px; line-height:1.9; color:#333; margin-top:14px; }
.ph-app-page.notes{ background:#FFFDF4; }
.ph-note-row{ width:100%; display:block; text-align:left; border:0; background:#fff; margin:0 12px 8px; width:calc(100% - 24px); border-radius:12px; padding:12px 14px; cursor:pointer; font:inherit; box-shadow:0 1px 4px rgba(0,0,0,.06); color:#111; }
.ph-note-row b{ display:block; font-size:15px; } .ph-note-row span{ display:block; font-size:13px; color:#888; margin-top:4px; } .ph-note-row small{ font-size:11px; color:#aaa; }
.ph-note-full{ padding:20px; background:#FFFDF4; min-height:300px; } .ph-note-full h2{ margin:10px 0; font-size:20px; } .ph-note-full p{ white-space:pre-wrap; font-size:15px; line-height:1.9; color:#333; } .ph-note-full small{ color:#999; }
.ph-note,.ph-busy-mask,.ph-call-row,.ph-dialpad,.ph-dial-num,.ph-call-dir,.ph-call-info{ box-sizing:border-box; }
.ph-dial-num{ text-align:center; font:600 26px/1.4 var(--font-num); padding:16px; min-height:60px; background:#fff; }
.ph-call-row{ display:flex; gap:12px; align-items:center; padding:11px 14px; background:#fff; border-bottom:1px solid #F1F1F4; }
.ph-call-row b{ display:block; font-size:15px; } .ph-call-row b em{ color:#FA5151; font-style:normal; font-size:11px; } .ph-call-row span{ font-size:12px; color:#999; }
.ph-call-dir{ font-size:18px; } .ph-call-info{ margin-left:auto; color:#007AFF; font-size:18px; }
.ph-dialpad{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; padding:10px 30px 12px; background:#F7F7F7; }
.ph-dialpad button{ height:52px; border:0; border-radius:26px; background:#fff; font:600 20px/1 var(--font-num); cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.ph-busy-mask{ position:absolute; inset:0; z-index:8; background:rgba(0,0,0,.55); display:flex; gap:10px; align-items:center; justify-content:center; color:#fff; font-size:14px; backdrop-filter:blur(4px); }
.ph-spin{ width:20px; height:20px; border-radius:50%; border:2px solid rgba(255,255,255,.4); border-top-color:#fff; animation:phSpin 1s linear infinite; display:inline-block; }
@keyframes phSpin{ to{ transform:rotate(360deg);} }
