jone/mama-box
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

「我的资料」改「孕期档案」：照数胎动改成一行一项白卡，头像放第一行；孕周 / 预产期点开滚轮选择 v26101025

Browse Source 
Co-Authored-By: AI 助手
This commit is contained in:
karlcarlo
2026-10-11 14:59:27 +00:00
parent cc97ee2b6c
commit b3f13468a9
3 changed files with 230 additions and 122 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
index.html
View File

@@ -7,7 +7,7 @@
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>兜爸心选 · 孕育陪伴</title>
<!-- V:26101024 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
<!-- V:26101025 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
<link rel="stylesheet" href="mama-box.css">
<link rel="stylesheet" href="night.css">
<!-- 夜晚模式：首屏绘制前就按上次的选择加 class，避免先白后黑闪一下（开关在首页右上角 #nightBtn，逻辑见 app.js） -->
@@ -1957,134 +1957,76 @@
</div>
</section>
<!-- 2026-10-11 用户：「我的资料」改名「孕期档案」，样式照数胎动的孕期档案弹层：一张白卡、一行一项，头像放第一行；
点「当前孕周」「预产期」从底部再弹一层滚轮（#pkSheet）。表单 id 全部沿用（#pgDue/#pgWeek/#pgDay/#pgName/#pgSex/#pfName/#avPick），
#pfSave 的校验与落库逻辑一行没改；三种填法切换 / 步进器 / 末次月经 / 小名建议已随改版去掉。 -->
<section class="modal pf-modal" id="modalProfile" data-autofocus="off" role="dialog" aria-modal="true" aria-labelledby="modalProfileTitle">
<div class="modal-head">
<h3 id="modalProfileTitle">我的资料</h3>
<button class="modal-x" data-modal="close" aria-label="关闭">
<svg viewBox="0 0 24 24" width="15" height="15" aria-hidden="true">
<path d="M6 6l12 12M18 6L6 18" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"/>
</svg>
</button>
</div>
<!-- 2026-10-01 资料弹窗改版（用户：「现在填写比较困难，让用户很轻松地就能填写完」）：
① 顶部一条实时结果「孕 N 周 +D 天 · 还有 X 天见面」—— 填的每一步都立刻看到算出了什么；
② 预产期三种填法（分段切换）：知道预产期 / 按当前孕周（大号 −/＋ 步进，不用敲键盘）/ 按末次月经；
三种最后都落到 #pgDue（唯一的数据源），保存逻辑一行没改；
③ 头像缩到昵称左边，和昵称同一行；宝宝小名下面给几个一点即填的小名；
④ 弹窗不再自动聚焦昵称（data-autofocus="off"）—— 一打开就弹键盘，正好盖住要填的预产期。 -->
<div class="pf-grip" aria-hidden="true"></div>
<h3 class="pf-title" id="modalProfileTitle">孕期档案</h3>
<p class="pf-lead">填好预产期，孕周和倒计时都会自动算好</p>
<div class="pf-sum" id="pgSum">
<span class="ps-ico" aria-hidden="true">
<svg viewBox="0 0 24 24" width="22" height="22"><path d="M12 20.5s-7.5-4.4-7.5-10A4.3 4.3 0 0 1 12 8a4.3 4.3 0 0 1 7.5 2.5c0 5.6-7.5 10-7.5 10z" fill="currentColor"/></svg>
</span>
<span class="ps-main"><b id="pgSumT">还没填预产期</b><span id="pgSumS">选一种方式填一下，马上就好</span></span>
</div>
<div class="pf-card">
<div class="pf-ct">孕期信息<em>必填</em></div>
<div class="seg" id="pgMode" role="tablist">
<button type="button" class="seg-b is-active" data-mode="due">知道预产期</button>
<button type="button" class="seg-b" data-mode="week">按当前孕周</button>
<button type="button" class="seg-b" data-mode="lmp">按末次月经</button>
</div>
<div class="pg-pane is-on" data-pane="due">
<label class="date-btn">
<span class="db-ico" aria-hidden="true"><svg viewBox="0 0 24 24" width="20" height="20"><rect x="4" y="5.5" width="16" height="14.5" rx="3" fill="none" stroke="currentColor" stroke-width="1.8"/><path d="M4 10h16M8.5 3.5v4M15.5 3.5v4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg></span>
<span class="db-txt" id="pgDueTxt">点这里选预产期</span>
<i class="chev">›</i>
<input id="pgDue" type="date" aria-label="预产期">
</label>
<p class="pg-tip">产检单 / B 超单上写的「预产期」</p>
</div>
<div class="pg-pane" data-pane="week">
<div class="stp-row">
<div class="stp">
<span class="stp-l">孕周</span>
<div class="stp-ctl">
<button type="button" class="stp-b" data-stp="w" data-d="-1" aria-label="孕周减一">−</button>
<input id="pgWeek" type="number" inputmode="numeric" min="0" max="42" placeholder="—">
<button type="button" class="stp-b" data-stp="w" data-d="1" aria-label="孕周加一">＋</button>
</div>
</div>
<div class="stp">
<span class="stp-l">又几天</span>
<div class="stp-ctl">
<button type="button" class="stp-b" data-stp="d" data-d="-1" aria-label="天数减一">−</button>
<input id="pgDay" type="number" inputmode="numeric" min="0" max="6" placeholder="—">
<button type="button" class="stp-b" data-stp="d" data-d="1" aria-label="天数加一">＋</button>
</div>
</div>
</div>
<p class="pg-tip" id="pgHint">比如「孕 24 周 +3 天」，就选 24 和 3</p>
</div>
<div class="pg-pane" data-pane="lmp">
<label class="date-btn">
<span class="db-ico" aria-hidden="true"><svg viewBox="0 0 24 24" width="20" height="20"><rect x="4" y="5.5" width="16" height="14.5" rx="3" fill="none" stroke="currentColor" stroke-width="1.8"/><path d="M4 10h16M8.5 3.5v4M15.5 3.5v4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg></span>
<span class="db-txt" id="pgLmpTxt">点这里选末次月经第一天</span>
<i class="chev">›</i>
<input id="pgLmp" type="date" aria-label="末次月经第一天">
</label>
<p class="pg-tip">按末次月经第一天 + 280 天推算预产期</p>
</div>
</div>
<div class="pf-card">
<!-- 2026-10-05 用户：「小名」这行字挪到「宝宝」后面、放进括号 → 标题写成「宝宝（小名）」，输入框上方不再单独一行「小名」（读屏仍念「宝宝小名」） -->
<div class="pf-ct">宝宝（小名）</div>
<label class="fld pf-fld"><span class="sr-only">宝宝小名</span><input id="pgName" type="text" maxlength="12" placeholder="给宝宝起个小名"></label>
<div class="nm-chips" id="pgNameChips">
<button type="button" class="nm-c">小汤圆</button><button type="button" class="nm-c">豆豆</button><button type="button" class="nm-c">糖糖</button><button type="button" class="nm-c">小米粒</button><button type="button" class="nm-c">乐乐</button>
</div>
<div class="fld pf-fld">
<span>性别</span>
<div class="pick-row" id="pgSex">
<button type="button" class="pick is-active" data-sex="unknown">还不知道</button>
<button type="button" class="pick" data-sex="boy">男孩</button>
<button type="button" class="pick" data-sex="girl">女孩</button>
</div>
</div>
</div>
<div class="pf-card">
<div class="pf-ct">妈妈</div>
<!-- 2026-10-10 方案A：未授权（含退出登录后）不显示旧昵称/头像，换成授权提示；点它去授权。宝宝那栏不受影响 -->
<!-- 未授权（含退出登录后）不显示旧昵称/头像，换成授权提示；宝宝那几行不受影响 -->
<button type="button" class="pf-unauth ripple" id="pfUnauth" style="display:none">授权登录后显示你的昵称和头像<b>去授权 ›</b></button>
<div class="pf-me" id="pfMe">
<div class="av-pick">
<button class="av-big" id="avPick" aria-label="更换头像">
<div class="pf-list">
<div class="pf-row pf-row-av" id="pfMe" role="button" tabindex="0">
<span class="pr-l"><b>头像</b><em>点一下换张照片</em></span>
<button type="button" class="av-big" id="avPick" aria-label="更换头像">
<svg viewBox="0 0 40 40" aria-hidden="true">
<circle cx="20" cy="14.5" r="7" fill="#fff"/>
<path d="M6.5 35c0-7.2 6-11.5 13.5-11.5S33.5 27.8 33.5 35z" fill="#fff"/>
</svg>
<img id="avPreview" alt="">
<span class="av-cam">
<svg viewBox="0 0 24 24" width="15" height="15" aria-hidden="true">
<path d="M3 8.6A2.6 2.6 0 0 1 5.6 6h1.9l1.3-2h6.4L16.5 6h1.9A2.6 2.6 0 0 1 21 8.6v8.8a2.6 2.6 0 0 1-2.6 2.6H5.6A2.6 2.6 0 0 1 3 17.4z" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linejoin="round"/>
<circle cx="12" cy="13" r="3.6" fill="none" stroke="currentColor" stroke-width="1.9"/>
</svg>
</span>
</button>
<input type="file" id="avFile" accept="image/*" class="av-file">
<i class="chev" aria-hidden="true">›</i>
<!-- file input 藏起来但不能 display:none，否则部分安卓 WebView 点不动（0 尺寸 + opacity） -->
<input type="file" id="avFile" accept="image/*" class="av-file">
</div>
<label class="fld pf-fld"><span>怎么称呼你</span><input id="pfName" type="text" maxlength="16" placeholder="妈妈"></label>
<button type="button" class="pf-row" id="pfWeekRow">
<span class="pr-l"><b>当前孕周</b><em>改孕周会同步更新预产期</em></span>
<span class="pr-v hot" id="pgWeekTxt">去填写</span><i class="chev" aria-hidden="true">›</i>
</button>
<button type="button" class="pf-row" id="pfDueRow">
<span class="pr-l"><b>预产期</b><em>以产检单 / B 超单为准</em></span>
<span class="pr-v hot" id="pgDueTxt">去填写</span><i class="chev" aria-hidden="true">›</i>
</button>
<div class="pf-row">
<span class="pr-l"><b>宝宝性别</b></span>
<div class="pf-seg" id="pgSex" role="group" aria-label="宝宝性别">
<button type="button" class="pick" data-sex="boy">男孩</button>
<button type="button" class="pick" data-sex="girl">女孩</button>
</div>
<p class="pg-tip" id="pfMeTip">点头像换张照片</p>
</div>
<label class="pf-row" id="pfMeTip">
<span class="pr-l"><b>妈妈昵称</b><em>选填</em></span>
<input class="pr-in" id="pfName" type="text" maxlength="16" placeholder="妈妈">
</label>
<label class="pf-row">
<span class="pr-l"><b>宝宝小名</b><em>选填</em></span>
<input class="pr-in" id="pgName" type="text" maxlength="12" placeholder="给宝宝起个小名">
</label>
</div>
<!-- 预产期 / 孕周的唯一数据源，滚轮确定后写这里，再 dispatch change 走原来的换算 -->
<input type="hidden" id="pgDue"><input type="hidden" id="pgWeek"><input type="hidden" id="pgDay">
<!-- 2026-10-10 用户：「我的资料」里也要有「退出登录」。显示规则同「我的」页 #meLogoutCard（已授权才显示），共用 doLogout -->
<button type="button" class="pf-logout ripple" id="pfLogout" style="display:none">退出登录</button>
<p class="pf-note">孕周和预产期会同步到各个孕期工具</p>
<div class="modal-foot pf-foot">
<button class="dl-btn ghost" data-modal="close">取消</button>
<button class="dl-btn main" id="pfSave">保存</button>
<button class="dl-btn main" id="pfSave">保存资料</button>
</div>
<!-- 显示规则同「我的」页 #meLogoutCard（已授权才显示），共用 doLogout -->
<button type="button" class="pf-logout" id="pfLogout" style="display:none">退出登录</button>
</section>
<!-- 孕期档案里的滚轮（2026-10-11）：week = 孕周 + 天，due = 年 / 月 / 日；底下一行文字可互相切换 -->
<div class="pk-scrim" id="pkScrim"></div>
<section class="pk-sheet" id="pkSheet" role="dialog" aria-modal="true" aria-labelledby="pkT">
<h3 id="pkT">你现在怀孕多久了？</h3>
<p class="pk-sub" id="pkSub">按孕周推算预产期</p>
<div class="pk-wheels" id="pkWheels"></div>
<div class="pk-res"><span id="pkResL">预产期</span><b id="pkResV">—</b></div>
<button type="button" class="dl-btn main pk-ok" id="pkOk">确定</button>
<button type="button" class="pk-alt" id="pkAlt">知道预产期？直接选日期</button>
</section>
<div class="toast" id="toast"></div>

128
js/app.js
View File

@@ -3,7 +3,7 @@
(function () {
'use strict';
/* 页面版本号（YYMMDD+序号）：显示在「关于兜爸心选」页底部；bump 时同步 head 注释与 ?v= */
var VER = '26101024';
var VER = '26101025';
const $ = (s, c) => (c || document).querySelector(s);
const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));
@@ -1302,7 +1302,15 @@
function syncDuePh() {
const due = parseDay(pgDue.value);
const t = $('#pgDueTxt');
if (t) { t.textContent = due ? fmtDay(due) : '点这里选预产期'; t.parentNode.classList.toggle('is-set', !!due); }
/* 孕期档案两行（2026-10-11 改版）：右侧值都从 #pgDue 现算 */
if (t) { t.textContent = due ? due.getFullYear() + ' 年 ' + (due.getMonth() + 1) + ' 月 ' + due.getDate() + ' 日' : '去填写'; t.classList.toggle('is-empty', !due); }
const wt = $('#pgWeekTxt');
if (wt) {
const lf = due ? Math.round((midnight(due) - midnight(new Date())) / DAY_MS) : null;
const g = due ? gaFromDue(due) : 0;
wt.textContent = !due ? '去填写' : lf < 0 ? '宝宝已出生' : '孕 ' + Math.floor(g / 7) + ' 周' + (g % 7 ? ' +' + (g % 7) + ' 天' : '');
wt.classList.toggle('is-empty', !due);
}
const sum = $('#pgSum');
if (!sum) return;
sum.classList.toggle('is-set', !!due);
@@ -1382,11 +1390,112 @@
}));
/* 性别三选一 */
/* 性别：男孩 / 女孩二选一，再点一下已选的就取消（= 还不知道，保存成 unknown） */
$$('#pgSex .pick').forEach(b => b.addEventListener('click', () => {
$$('#pgSex .pick').forEach(x => x.classList.toggle('is-active', x === b));
const on = !b.classList.contains('is-active');
$$('#pgSex .pick').forEach(x => x.classList.toggle('is-active', on && x === b));
haptic();
}));
/* ---------- 孕期档案 · 滚轮选择（2026-10-11，照数胎动的孕期档案） ----------
week：孕 0–42 周 × 0–6 天，下面实时显示对应预产期；due：年 / 月 / 日，下面显示对应孕周。
确定后写 #pgWeek/#pgDay 或 #pgDue 并 dispatch change —— 换算、行内文字都走原来那两个监听，不另算一套。 */
const PK_H = 40; /* 每行高度，CSS .pk-col i 同值 */
const pkSheet = $('#pkSheet'), pkScrim = $('#pkScrim'), pkWheels = $('#pkWheels');
let pkMode = 'week';
function pkCol(key, items, sel) {
return '<div class="pk-col" data-k="' + key + '">' + items.map((t, i) => '<i data-i="' + i + '">' + t + '</i>').join('') + '</div>';
}
function pkIdx(col) { return Math.max(0, Math.min(col.children.length - 1, Math.round(col.scrollTop / PK_H))); }
function pkSet(col, i) {
col.scrollTop = i * PK_H;
$$('i', col).forEach((x, k) => x.classList.toggle('on', k === i));
}
function pkGet(k) { const c = $('.pk-col[data-k="' + k + '"]', pkWheels); return c ? pkIdx(c) : 0; }
const pkYears = () => { const y = new Date().getFullYear(); return [y - 1, y, y + 1]; };
function pkDayCol(keep) {
const ys = pkYears(), y = ys[pkGet('y')], m = pkGet('m');
const n = new Date(y, m + 1, 0).getDate();
const old = $('.pk-col[data-k="d"]', pkWheels);
const tmp = document.createElement('div');
tmp.innerHTML = pkCol('d', Array.from({ length: n }, (_, i) => (i + 1) + ' 日'));
const col = tmp.firstChild;
old.replaceWith(col);
pkBind(col);
pkSet(col, Math.min(keep, n - 1));
}
function pkResult() {
if (pkMode === 'week') {
const due = dueFromGA(pkGet('w') * 7 + pkGet('dd'));
$('#pkResL').textContent = '预产期';
$('#pkResV').textContent = toISO(due);
} else {
const ys = pkYears(), due = new Date(ys[pkGet('y')], pkGet('m'), pkGet('d') + 1);
const left = Math.round((midnight(due) - midnight(new Date())) / DAY_MS), g = gaFromDue(due);
$('#pkResL').textContent = '对应孕周';
$('#pkResV').textContent = left < 0 ? '已过预产期' : left > TERM ? '还没怀上哦' : '孕 ' + Math.floor(g / 7) + ' 周' + (g % 7 ? ' +' + (g % 7) + ' 天' : '');
}
}
function pkBind(col) {
let tm = 0;
col.addEventListener('scroll', () => {
clearTimeout(tm);
tm = setTimeout(() => {
const i = pkIdx(col);
$$('i', col).forEach((x, k) => x.classList.toggle('on', k === i));
if (col.dataset.k === 'y' || col.dataset.k === 'm') pkDayCol(pkGet('d'));
pkResult();
}, 90);
}, { passive: true });
col.addEventListener('click', e => { const it = e.target.closest('i'); if (it) col.scrollTo({ top: +it.dataset.i * PK_H, behavior: 'smooth' }); });
}
function openPicker(mode) {
pkMode = mode;
const cur = parseDay(pgDue.value);
if (mode === 'week') {
$('#pkT').textContent = '你现在怀孕多久了？';
$('#pkSub').textContent = '按孕周推算预产期';
$('#pkAlt').textContent = '知道预产期？直接选日期';
pkWheels.innerHTML = pkCol('w', Array.from({ length: 43 }, (_, i) => '孕 ' + i + ' 周')) + pkCol('dd', Array.from({ length: 7 }, (_, i) => i + ' 天'));
const g = cur ? gaFromDue(cur) : 12 * 7;
$$('.pk-col', pkWheels).forEach(pkBind);
pkSet($('.pk-col[data-k="w"]', pkWheels), Math.floor(g / 7));
pkSet($('.pk-col[data-k="dd"]', pkWheels), g % 7);
} else {
$('#pkT').textContent = '预产期是哪一天？';
$('#pkSub').textContent = '以产检单 / B 超单上写的为准';
$('#pkAlt').textContent = '不知道预产期？按孕周填';
const d = cur || dueFromGA(12 * 7), ys = pkYears();
pkWheels.innerHTML = pkCol('y', ys.map(y => y + ' 年')) + pkCol('m', Array.from({ length: 12 }, (_, i) => (i + 1) + ' 月')) + pkCol('d', ['1 日']);
$$('.pk-col', pkWheels).forEach(pkBind);
pkSet($('.pk-col[data-k="y"]', pkWheels), Math.max(0, ys.indexOf(d.getFullYear())));
pkSet($('.pk-col[data-k="m"]', pkWheels), d.getMonth());
pkDayCol(d.getDate() - 1);
}
pkWheels.className = 'pk-wheels n' + $$('.pk-col', pkWheels).length;
pkResult();
pkScrim.classList.add('show');
pkSheet.classList.add('show');
haptic();
}
function closePicker() { pkScrim.classList.remove('show'); pkSheet.classList.remove('show'); }
$('#pfWeekRow').addEventListener('click', () => openPicker('week'));
$('#pfDueRow').addEventListener('click', () => openPicker('due'));
$('#pkAlt').addEventListener('click', () => openPicker(pkMode === 'week' ? 'due' : 'week'));
pkScrim.addEventListener('click', closePicker);
$('#pkOk').addEventListener('click', () => {
if (pkMode === 'week') {
pgWeek.value = pkGet('w'); pgDay.value = pkGet('dd');
pgWeek.dispatchEvent(new Event('change'));
} else {
const ys = pkYears();
pgDue.value = toISO(new Date(ys[pkGet('y')], pkGet('m'), pkGet('d') + 1));
pgDue.dispatchEvent(new Event('change'));
}
closePicker();
haptic();
});
/* 环的目标值改了要顺手清掉上一轮动画的终值，否则 animateRings 不会重跑 */
function setRing(el, p) {
if (!el) return;
@@ -1575,7 +1684,7 @@
$('#arTitleName').textContent = nm;
$('#arLine1').textContent = '完善孕期信息后开启';
$('#arDays').textContent = '--';
$('#arLine2').textContent = '先去「我的资料」填预产期';
$('#arLine2').textContent = '先去「孕期档案」填预产期';
$('#arPct').textContent = '0%';
setArBar(0);
$('#genWeekTag').textContent = '--';
@@ -1761,7 +1870,13 @@
/* 点大圆 → 转交给隐藏的 file input。openModal 里会 focus 第一个输入框，
这里 avFile 排在 pfName 前面，所以 openModal 用的选择器只取 .modal-ta/input
可能命中 file input——用 :not([type=file]) 排除掉，见 openModal */
avBig.addEventListener('click', () => avFile.click());
avBig.addEventListener('click', e => { e.stopPropagation(); avFile.click(); });
/* 孕期档案里头像是一整行，点行上任何地方都换头像 */
const pfMeRow = $('#pfMe');
if (pfMeRow) {
pfMeRow.addEventListener('click', e => { if (e.target !== avFile) avFile.click(); });
pfMeRow.addEventListener('keydown', e => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); avFile.click(); } });
}
avFile.addEventListener('change', () => {
const f = avFile.files && avFile.files[0];
@@ -1786,8 +1901,7 @@
/* 预产期是一切的源头：孕周、剩余天数、信里的日期全从它算。没有它没什么可存的。 */
if (!parseDay(pgDue.value)) {
toast('先填一下预产期，孕周会自动算出来');
setPgMode('due');
pgDue.focus();
openPicker('week');
return;
}
const name = $('#pfName').value.trim() || '妈妈';

52
mama-box.css
View File

@@ -4785,3 +4785,55 @@ a.skip:focus{left:16px;top:16px}
/* 首页工具卡自动换成替补（swapHomeCards）：尺寸、底色沿用坑位原样，只换内容；插画是白色线稿 svg */
.mini-card .sw-art{height:auto;aspect-ratio:1;opacity:.95}
/* ================= 孕期档案弹窗（2026-10-11 改版，原「我的资料」）=================
照数胎动的孕期档案：居中标题 + 一张白卡一行一项，右侧值橘色；点孕周 / 预产期再弹滚轮 #pkSheet。 */
.pf-modal{padding-top:10px}
.pf-grip{width:38px;height:4px;border-radius:2px;background:#E2D6CE;margin:0 auto 12px}
.pf-title{text-align:center;font-size:18px;font-weight:900;letter-spacing:-.2px}
.pf-modal .pf-lead{text-align:center;font-size:12px;color:var(--muted);margin-top:4px}
.pf-list{margin-top:14px;border-radius:20px;background:#fff;box-shadow:0 4px 14px rgba(160,110,90,.08);overflow:hidden}
.pf-row{display:flex;align-items:center;gap:10px;width:100%;min-height:62px;padding:12px 14px 12px 16px;text-align:left;position:relative;cursor:pointer}
.pf-row+.pf-row::before{content:"";position:absolute;left:16px;right:0;top:0;height:1px;background:#F2EAE4}
.pf-row:active{background:#FBF6F2}
.pf-row .pr-l{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.pf-row .pr-l b{font-size:15px;font-weight:800;color:var(--ink)}
.pf-row .pr-l em{font-style:normal;font-size:11.5px;color:var(--muted)}
.pf-row .pr-v{flex:none;font-size:15px;font-weight:800;color:var(--ink)}
.pf-row .pr-v.hot{color:var(--brand)}
.pf-row .pr-v.is-empty{color:#B9ABA2;font-weight:700}
.pf-row .chev{flex:none;margin-left:-4px}
.pf-row .pr-in{flex:0 1 52%;min-width:0;border:0;background:none;text-align:right;font:inherit;font-size:15px;font-weight:800;color:var(--ink);padding:6px 0}
.pf-row .pr-in::placeholder{color:#B9ABA2;font-weight:700}
.pf-row .pr-in:focus{outline:none}
.pf-row-av .av-big{width:46px;height:46px;margin:0;flex:none}
.pf-row-av .av-big>svg{width:26px;height:26px}
.pf-seg{flex:none;display:flex;gap:4px;padding:3px;border-radius:12px;background:#F3ECE6}
.pf-seg .pick{flex:none;padding:6px 16px;border-radius:9px;background:none;font-size:13.5px;font-weight:700;color:var(--ink-2);box-shadow:none}
.pf-seg .pick.is-active{background:#fff;color:var(--brand);box-shadow:0 2px 6px rgba(160,110,90,.14)}
.pf-modal .pf-unauth{margin-top:14px}
.pf-note{margin-top:12px;text-align:center;font-size:11.5px;color:var(--muted)}
.pf-modal .pf-foot{margin-top:12px}
.pf-modal .pf-logout{background:none;color:var(--muted);font-size:13px;font-weight:600;margin:0 auto;padding:4px 12px calc(10px + env(safe-area-inset-bottom));width:auto}
.pk-scrim{position:absolute;inset:0;z-index:130;background:rgba(50,30,22,.32);opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.pk-scrim.show{opacity:1;visibility:visible}
.pk-sheet{position:absolute;left:0;right:0;bottom:0;z-index:131;background:#FAF5F1;border-radius:28px 28px 0 0;
padding:24px 22px calc(14px + env(safe-area-inset-bottom));text-align:center;
transform:translateY(102%);transition:transform .36s var(--ease)}
.pk-sheet.show{transform:none;box-shadow:0 -10px 40px rgba(90,50,35,.22)}
.pk-sheet h3{font-size:18px;font-weight:900}
.pk-sub{margin-top:4px;font-size:12px;color:var(--muted)}
.pk-wheels{position:relative;display:flex;height:200px;margin:16px 0 0}
.pk-wheels::before{content:"";position:absolute;left:0;right:0;top:80px;height:40px;border-radius:12px;background:#fff;box-shadow:0 2px 10px rgba(160,110,90,.08);z-index:0}
.pk-wheels::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
background:linear-gradient(#FAF5F1,rgba(250,245,241,0) 34%,rgba(250,245,241,0) 66%,#FAF5F1)}
.pk-col{position:relative;z-index:1;flex:1;height:200px;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:contain;
padding:80px 0;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.pk-col::-webkit-scrollbar{display:none}
.pk-col i{display:block;height:40px;line-height:40px;font-style:normal;font-size:15px;color:var(--ink-2);scroll-snap-align:center;transition:color .15s,font-size .15s}
.pk-col i.on{font-size:17px;font-weight:800;color:var(--brand)}
.pk-res{margin-top:14px;font-size:13px;color:var(--muted)}
.pk-res b{margin-left:8px;font-size:16px;font-weight:900;color:var(--brand)}
.pk-ok{display:block;width:100%;margin-top:16px}
.pk-alt{margin-top:12px;font-size:12.5px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}