/* 查手机：iOS 质感重制版 —— 液态壁纸 / 磨砂 / 分组 / 动效 */
.ph-view{ position:relative; overflow:hidden; background:var(--bg); }
.ph-body{ flex:1; min-height:0; overflow:hidden; display:flex; flex-direction:column; position:relative; z-index:1; padding-top:var(--sat); }

/* —— 手机内右上角悬浮球 + 菜单（生成 / 退出） —— */
.ph-fab-gen{ position:absolute; top:44px; right:12px; z-index:7; width:34px; height:34px; padding:0; border:0; border-radius:50%; background:rgba(11,11,15,.78); color:#fff; cursor:pointer; display:grid; place-items:center; box-shadow:0 6px 18px -6px rgba(0,0,0,.45); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); transition:transform .18s var(--spring), opacity .18s; }
html[data-theme="dark"] .ph-fab-gen{ background:rgba(255,255,255,.88); color:#111; }
.ph-fab-gen::before{ content:'✦'; font-size:15px; line-height:1; transition:transform .2s; }
.ph-fab-gen.open::before{ content:'✕'; font-size:14px; }
.ph-fab-gen:active{ transform:scale(.9); }
.ph-fab-gen:disabled{ opacity:.45; pointer-events:none; }
.ph-fab-gen.busy::before{ content:''; width:14px; height:14px; border-radius:50%; border:2px solid rgba(255,255,255,.35); border-top-color:currentColor; animation:phSpin .8s linear infinite; }
.ph-wall .ph-fab-gen, .ph-lock .ph-fab-gen{ top:48px; }
.ph-fab-mask{ position:absolute; inset:0; z-index:8; background:transparent; border:0; }
.ph-fab-menu{ position:absolute; top:84px; right:12px; z-index:9; min-width:158px; padding:6px; border-radius:16px; background:rgba(20,20,24,.92); box-shadow:0 16px 40px -10px rgba(0,0,0,.5); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); display:flex; flex-direction:column; gap:2px; animation:phFabPop .18s var(--spring); }
html[data-theme="dark"] .ph-fab-menu{ background:rgba(255,255,255,.96); }
.ph-fab-menu button{ border:0; background:transparent; color:#fff; font:600 13.5px/1.4 inherit; text-align:left; padding:10px 12px; border-radius:11px; cursor:pointer; display:flex; align-items:center; gap:8px; }
html[data-theme="dark"] .ph-fab-menu button{ color:#111; }
.ph-fab-menu button:active{ background:rgba(255,255,255,.14); }
html[data-theme="dark"] .ph-fab-menu button:active{ background:rgba(0,0,0,.07); }
@keyframes phFabPop{ from{ opacity:0; transform:translateY(-6px) scale(.96); } to{ opacity:1; transform:none; } }

/* —— 选人页：分组 + 大标题 —— */
.ph-pick{ flex:1; min-height:0; overflow-y:auto; padding:12px 16px 24px; }
.ph-pick::-webkit-scrollbar{ width:0; }
.ph-pick-hero{ margin-bottom:14px; position:relative; padding-left:44px; }
.ph-pick-back{ position:absolute; left:0; top:2px; width:34px; height:34px; border:0; border-radius:50%; background:var(--fill); color:var(--ink); display:grid; place-items:center; cursor:pointer; font-size:22px; line-height:1; }
.ph-pick-back:active{ transform:scale(.94); }
.ph-pick-hero b{ display:block; font-size:26px; font-weight:800; letter-spacing:-.02em; }
.ph-pick-hero p{ margin:6px 0 0; font-size:13px; line-height:1.6; color:var(--gray-1); }
.ph-pick-sec{ font-size:12px; font-weight:700; color:var(--gray-2); margin:18px 2px 8px; letter-spacing:.06em; }
.ph-pick-row{ width:100%; display:flex; align-items:center; gap:12px; padding:10px 12px; margin-bottom:8px; border:1px solid var(--hairline); border-radius:18px; background:var(--card); text-align:left; font:inherit; cursor:pointer; color:var(--ink); transition:transform .18s var(--spring); animation:viewIn .3s var(--ease-out) both; }
.ph-pick-row:active{ transform:scale(.97); }
.ph-pick-row img{ width:48px; height:48px; border-radius:50%; object-fit:cover; background:var(--fill); }
.ph-pick-row>div{ flex:1; min-width:0; } .ph-pick-row>div b{ font-size:15px; } .ph-pick-row>div span{ display:block; font-size:12px; color:var(--gray-2); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ph-pick-tag{ font-size:11px; font-weight:700; padding:5px 10px; border-radius:999px; background:var(--fill); color:var(--gray-2); }
.ph-pick-tag.on{ background:rgba(16,185,129,.14); color:#059669; }
.ph-empty{ padding:50px 20px; text-align:center; color:var(--gray-2); font-size:13px; line-height:1.9; }

/* —— 机身 —— */
.ph-stage{ flex:1; min-height:0; display:flex; flex-direction:column; position:relative; border-radius:32px; overflow:hidden; background:#000; box-shadow:0 24px 60px -18px rgba(0,0,0,.45), inset 0 0 0 2px rgba(255,255,255,.14); max-width:392px; width:100%; margin:12px auto; }
.ph-screen{ flex:1; min-height:0; display:flex; flex-direction:column; position:relative; overflow:hidden; border-radius:30px; background:#F2F3F7; }
.ph-status{ flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; padding:16px 28px 4px; font:600 13px/1 var(--font-num); color:#111; position:relative; z-index:5; }
.ph-status.dark{ color:#fff; }
.ph-st-notch{ position:absolute; left:50%; top:11px; transform:translateX(-50%); width:100px; height:25px; background:#000; border-radius:14px; }
.ph-st-icons{ display:flex; align-items:center; gap:5px; }
.ph-st-icons svg{ width:16px; height:11px; fill:currentColor; }
.ph-batt{ width:23px; height:11px; border:1px solid currentColor; border-radius:4px; padding:1px; display:inline-block; opacity:.9; }
.ph-batt span{ display:block; height:100%; background:currentColor; border-radius:2px; }
.ph-homebar{ flex:0 0 auto; display:grid; place-items:center; padding:9px 0 calc(9px + env(safe-area-inset-bottom,0px)); }
.ph-homebar span{ width:120px; height:5px; border-radius:3px; background:rgba(120,120,128,.45); }

/* —— 锁屏：浅色高级渐变 + 深色字 —— */
.ph-lock{ flex:1; display:flex; flex-direction:column; background:linear-gradient(165deg,#fdfbf7 0%,#f3ece4 22%,#e6e4f2 48%,#d9e9f0 72%,#e8f3ec 100%); color:#1c1c1e; position:relative; }
.ph-lock::before{ content:''; position:absolute; inset:-20%; background:radial-gradient(38% 28% at 78% 12%,rgba(255,255,255,.9),transparent 60%),radial-gradient(46% 34% at 12% 88%,rgba(255,255,255,.55),transparent 60%),radial-gradient(30% 24% at 50% 55%,rgba(255,255,255,.35),transparent 65%); }
.ph-lock-clock{ text-align:center; padding:40px 0 6px; position:relative; }
.ph-lock-clock span{ font-size:14px; opacity:.7; font-weight:600; color:#3a3a3c; }
.ph-lock-clock b{ display:block; font-family:var(--font-num); font-size:82px; font-weight:700; letter-spacing:-.05em; line-height:1; margin-top:2px; color:#111; text-shadow:0 2px 20px rgba(255,255,255,.8); }
.ph-notif-stack{ position:relative; margin:12px 12px 0; display:flex; flex-direction:column; gap:8px; }
.ph-notif{ background:rgba(255,255,255,.62); backdrop-filter:blur(22px) saturate(1.4); -webkit-backdrop-filter:blur(22px) saturate(1.4); border:1px solid rgba(255,255,255,.8); box-shadow:0 8px 24px -10px rgba(90,100,140,.25); border-radius:20px; padding:11px 13px; animation:viewIn .4s var(--ease-out) both; color:#1c1c1e; }
.ph-notif-app{ display:flex; align-items:center; gap:7px; font-size:11px; opacity:.9; margin-bottom:3px; }
.ph-notif-app .ph-app-ico{ width:20px; height:20px; border-radius:6px; }
.ph-notif-app .ph-app-ico svg{ width:11px; height:11px; }
.ph-notif b{ display:block; font-size:13.5px; } .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:12px; padding-bottom:2px; }
.ph-unlock{ border:0; background:rgba(255,255,255,.7); backdrop-filter:blur(10px); color:#111; border:1px solid rgba(255,255,255,.9); box-shadow:0 8px 22px -10px rgba(90,100,140,.35); border-radius:999px; padding:11px 24px; font:600 13px/1 var(--font-body); cursor:pointer; animation:phFloat 2.4s ease-in-out infinite; }
@keyframes phFloat{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-5px);} }
.ph-lock-tools{ width:100%; display:flex; justify-content:space-between; padding:0 46px 4px; font-size:20px; opacity:.95; }
.ph-lock-tools i{ width:44px; height:44px; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.65); border:1px solid rgba(255,255,255,.9); backdrop-filter:blur(8px); font-style:normal; font-size:19px; color:#333; }

/* —— 主屏：浅色高级渐变 + 毛玻璃图标 —— */
.ph-wall{ flex:1; display:flex; flex-direction:column; background:linear-gradient(168deg,#fbf7f1 0%,#f0ebe6 24%,#e3e3f0 50%,#d5e7f2 74%,#dcefe4 100%); color:#1c1c1e; position:relative; }
.ph-wall::before{ content:''; position:absolute; inset:-20%; background:radial-gradient(44% 30% at 82% 8%,rgba(255,255,255,.85),transparent 60%),radial-gradient(48% 34% at 12% 88%,rgba(255,255,255,.5),transparent 60%); }
.ph-wall-widget{ position:relative; padding:18px 22px 6px; }
.ph-wall-widget b{ display:block; font-family:var(--font-num); font-size:32px; font-weight:700; letter-spacing:-.02em; color:#111; }
.ph-wall-widget span{ font-size:12.5px; opacity:.7; color:#3a3a3c; }
.ph-wall-grid{ position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:15px 6px; padding:12px 16px; }
.ph-ios-app{ border:0; background:transparent; color:#1c1c1e; display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer; font:500 11px/1 var(--font-body); transition:transform .15s; }
.ph-ios-app:active{ transform:scale(.88); }
.ph-ios-wrap{ position:relative; }
.ph-app-ico{ width:55px; height:55px; border-radius:16px; display:grid; place-items:center; background:rgba(255,255,255,.6); backdrop-filter:blur(16px) saturate(1.4); -webkit-backdrop-filter:blur(16px) saturate(1.4); border:1px solid rgba(255,255,255,.85); box-shadow:0 8px 20px -10px rgba(90,100,140,.35), inset 0 1px 0 rgba(255,255,255,.9); }
.ph-app-ico svg{ width:26px; height:26px; fill:none; stroke-width:1.8; }
.ph-app-ico.wx,.ph-app-ico.wechat{ color:#0da84c; } .ph-app-ico.wx svg,.ph-app-ico.wechat svg{ fill:#0da84c; stroke:none; }
.ph-app-ico.album{ color:#b97f1f; }
.ph-app-ico.album svg{ fill:none; stroke:#d99a26; stroke-width:1.8; }
.ph-app-ico.safari{ color:#1663e8; } .ph-app-ico.safari svg{ fill:#1663e8; stroke:none; }
.ph-app-ico.notes{ color:#c9930a; }
.ph-app-ico.notes svg{ fill:none; stroke:#d9a90a; stroke-width:1.8; }
.ph-app-ico.phone,.ph-app-ico.dialer{ color:#16a34a; }
.ph-app-ico.dialer svg,.ph-app-ico.phone svg{ fill:#16a34a; stroke:none; }
.ph-app-ico.sms{ color:#0da84c; } .ph-app-ico.sms svg{ fill:#0da84c; stroke:none; }
.ph-app-ico.camera{ color:#6b7280; }
.ph-app-ico.clock{ color:#1c1c1e; } .ph-app-ico.clock svg{ fill:#1c1c1e; stroke:none; }
.ph-app-ico.wallet{ color:#1d4ed8; } .ph-app-ico.wallet svg{ fill:#1d4ed8; stroke:none; }
.ph-app-ico.settings{ color:#55585f; } .ph-app-ico.settings svg{ fill:#55585f; stroke:none; }
.ph-app-ico.music{ color:#e11d48; } .ph-app-ico.music svg{ fill:#e11d48; stroke:none; }
.ph-app-ico.moments{ color:#059669; } .ph-app-ico.moments svg{ fill:#059669; stroke:none; }
.ph-notif-app .ph-app-ico{ background:rgba(255,255,255,.7); }
.ph-ios-label{ text-shadow:0 1px 6px rgba(255,255,255,.8); font-weight:500; }
.ph-badge{ position:absolute; top:-6px; right:-8px; min-width:19px; height:19px; padding:0 5px; border-radius:10px; background:#ff3b30; color:#fff; font:700 11px/19px var(--font-num); font-style:normal; text-align:center; box-shadow:0 2px 8px rgba(255,59,48,.5); }
.ph-dots{ display:flex; gap:6px; justify-content:center; padding:2px; }
.ph-dots i{ width:6px; height:6px; border-radius:50%; background:rgba(60,60,70,.25); } .ph-dots i.on{ background:#333; }
.ph-dock{ position:relative; margin:auto 12px 6px; background:rgba(255,255,255,.55); backdrop-filter:blur(24px) saturate(1.5); -webkit-backdrop-filter:blur(24px) saturate(1.5); border:1px solid rgba(255,255,255,.85); box-shadow:0 10px 26px -12px rgba(90,100,140,.35); border-radius:26px; display:flex; justify-content:space-around; padding:10px 6px; }
.ph-dock button{ border:0; background:transparent; cursor:pointer; transition:transform .15s; } .ph-dock button:active{ transform:scale(.88); }

/* —— App 通用壳 —— */
.ph-app-page{ flex:1; min-height:0; display:flex; flex-direction:column; background:#F2F3F7; color:#111; animation:viewIn .25s var(--ease-out) both; }
.ph-app-bar{ flex:0 0 auto; display:flex; align-items:center; gap:8px; padding:8px 10px; background:rgba(255,255,255,.88); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid rgba(0,0,0,.06); }
.ph-app-bar.trans{ background:linear-gradient(rgba(0,0,0,.25),transparent); border:0; color:#fff; }
.ph-app-bar.trans b{ color:#fff; }
.ph-app-bar b{ flex:1; font-size:15.5px; font-weight:700; text-align:center; }
.ph-app-bar .ph-mini{ width:30px; height:30px; border:0; border-radius:50%; background:rgba(120,120,128,.14); color:inherit; font-size:19px; line-height:1; cursor:pointer; display:grid; place-items:center; }
.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 6px; background:#E6E7EC; border-radius:10px; text-align:center; padding:7px; font-size:12.5px; color:#8E8E93; }
.ph-wx-tabs{ flex:0 0 auto; display:flex; background:rgba(255,255,255,.96); border-top:1px solid rgba(0,0,0,.06); padding:7px 0 calc(10px + env(safe-area-inset-bottom,0px)); }
.ph-wx-tab{ flex:1; border:0; background:transparent; font:500 11px/1.5 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:11px; padding:10px 14px; border:0; background:#fff; border-bottom:1px solid #F1F1F4; text-align:left; font:inherit; cursor:pointer; color:#111; }
.ph-wx-row:active{ background:#F6F6F8; }
.ph-wx-ava{ width:44px; height:44px; border-radius:12px; background:#E5E7EB; flex-shrink:0; display:grid; place-items:center; font-size:21px; 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:14.5px; font-weight:600; }
.ph-wx-meta b small{ font-weight:400; font-size:11px; color:#999; }
.ph-wx-meta span{ display:block; margin-top:2px; font-size:12.5px; 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:14px 16px 6px; font-size:11.5px; font-weight:700; letter-spacing:.05em; color:#9AA0AA; }
.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-end; animation:viewIn .25s var(--ease-out) both; }
.ph-bubble.mine{ flex-direction:row-reverse; }
.ph-bubble .ph-wx-ava{ width:34px; height:34px; border-radius:9px; font-size:15px; }
.ph-bubble .ph-btext{ max-width:68%; padding:9px 12px; border-radius:16px; border-top-left-radius:5px; background:#fff; font-size:14.5px; line-height:1.55; word-break:break-word; white-space:pre-wrap; box-shadow:0 1px 2px rgba(0,0,0,.07); }
.ph-bubble.mine .ph-btext{ background:#95EC69; border-radius:16px; border-top-right-radius:5px; }
.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:.55; margin-top:4px; }
.ph-wx-input{ flex:0 0 auto; display:flex; align-items:center; gap:10px; padding:9px 12px calc(12px + env(safe-area-inset-bottom,0px)); background:#F7F7F7; border-top:1px solid #E5E5E5; font-size:19px; }
.ph-wx-fakeinput{ flex:1; background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:999px; padding:8px 14px; font-size:12.5px; color:#999; }
.ph-me-card{ margin:12px; padding:14px; border-radius:18px; background:#fff; display:flex; gap:13px; align-items:center; box-shadow:0 2px 10px rgba(0,0,0,.05); }
.ph-me-card .ph-wx-ava{ width:56px; height:56px; border-radius:14px; font-size:27px; }
.ph-me-card b{ display:block; font-size:16.5px; } .ph-me-card span{ display:block; margin-top:2px; font-size:12px; color:#999; }
.ph-me-row{ width:calc(100% - 24px); margin:0 12px 8px; padding:14px 15px; background:#fff; display:flex; justify-content:space-between; align-items:center; font-size:14.5px; border:0; border-radius:14px; cursor:pointer; color:#111; text-align:left; font-family:inherit; box-shadow:0 1px 4px rgba(0,0,0,.04); }
.ph-me-row em{ font-style:normal; color:#07C160; font-weight:700; font-family:var(--font-num); }
.ph-moments-cover{ height:168px; background:linear-gradient(135deg,#667eea,#764ba2); position:relative; margin-bottom:42px; }
.ph-moments-cover img{ position:absolute; right:16px; bottom:-24px; width:62px; height:62px; border-radius:14px; object-fit:cover; border:2px solid #fff; box-shadow:0 4px 14px rgba(0,0,0,.2); }
.ph-moments-cover b{ position:absolute; right:88px; bottom:-16px; color:#fff; font-size:15.5px; 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:13.5px; color:#576B95; }
.ph-post p{ margin:6px 0; font-size:14.5px; color:#111; line-height:1.55; }
.ph-post small{ color:#999; font-size:11px; }
.ph-post-likes{ margin-top:8px; background:#F7F7F7; border-radius:8px; padding:6px 10px; font-size:12px; color:#576B95; }
.ph-post-cm{ background:#F7F7F7; padding:4px 10px; font-size:12.5px; border-radius:0 0 8px 8px; }
.ph-album-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:3px; padding:3px; 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; border-radius:6px; transition:transform .15s; }
.ph-photo:active{ transform:scale(.95); }
.ph-photo-emo{ position:absolute; inset:0; display:grid; place-items:center; font-size:32px; }
.ph-photo-cap{ position:relative; padding:14px 6px 6px; font-size:10px; background:linear-gradient(transparent,rgba(0,0,0,.6)); 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:104px; filter:drop-shadow(0 10px 30px rgba(0,0,0,.3)); }
.ph-photo-info{ padding:12px 16px; background:rgba(0,0,0,.32); backdrop-filter:blur(12px); border-radius:20px 20px 0 0; }
.ph-photo-info b{ display:block; font-size:15px; } .ph-photo-info span{ font-size:12px; opacity:.85; }
.ph-photo-actions{ display:flex; gap:16px; margin-top:10px; font-size:13px; }
.ph-photo-actions span{ cursor:pointer; background:rgba(255,255,255,.18); padding:6px 12px; border-radius:999px; }
.ph-photo-nav{ display:flex; justify-content:space-between; align-items:center; padding:10px 16px calc(12px + env(safe-area-inset-bottom,0px)); background:rgba(0,0,0,.42); font-size:12.5px; }
.ph-photo-nav button{ border:0; background:rgba(255,255,255,.2); color:#fff; border-radius:999px; padding:7px 14px; cursor:pointer; }
.ph-urlbar{ margin:8px 12px; background:#E6E7EC; border-radius:999px; padding:9px; font-size:12.5px; color:#555; text-align:center; }
.ph-urlbar.small{ font-size:11px; text-align:left; border-radius:10px; }
.ph-br-row{ width:100%; display:flex; gap:11px; align-items:center; padding:12px 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-row:active{ background:#F6F6F8; }
.ph-br-badge{ flex-shrink:0; height:23px; padding:0 9px; border-radius:7px; font:700 11px/23px 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:13.5px; font-weight:600; } .ph-br-meta span{ font-size:11px; color:#999; }
.ph-article{ padding:18px; background:#fff; } .ph-article h2{ font-size:18px; line-height:1.45; margin:0 0 8px; letter-spacing:-.01em; } .ph-article small{ color:#999; } .ph-article p{ font-size:14.5px; line-height:1.9; color:#333; margin-top:14px; }
.ph-app-page.notes{ background:#FFFDF4; }
.ph-note-row{ width:calc(100% - 24px); display:block; text-align:left; border:0; background:#fff; margin:0 12px 8px; border-radius:14px; 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:14.5px; } .ph-note-row span{ display:block; font-size:12.5px; 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:19px; } .ph-note-full p{ white-space:pre-wrap; font-size:14.5px; 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 25px/1.4 var(--font-num); padding:16px; min-height:58px; background:#fff; letter-spacing:.04em; }
.ph-call-row{ display:flex; gap:11px; align-items:center; padding:10px 14px; background:#fff; border-bottom:1px solid #F1F1F4; }
.ph-call-row b{ display:block; font-size:14.5px; } .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:17px; width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:var(--fill); } .ph-call-info{ margin-left:auto; color:#007AFF; font-size:17px; }
.ph-dialpad{ display:grid; grid-template-columns:repeat(3,72px); justify-content:center; gap:10px 18px; padding:12px 20px calc(12px + env(safe-area-inset-bottom,0px)); background:#F7F7F7; }
.ph-dialpad button{ height:56px; width:72px; border:0; border-radius:999px; background:#fff; font:600 20px/1 var(--font-num); cursor:pointer; box-shadow:0 1px 3px rgba(0,0,0,.08); transition:transform .12s; }
.ph-dialpad button:active{ transform:scale(.92); background:#E9E9EE; }
.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:13.5px; backdrop-filter:blur(4px); border-radius:inherit; }
.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);} }
@media (max-width:768px){ .ph-stage{ margin:0; border-radius:0; max-width:none; } .ph-screen{ border-radius:0; } }