/* 2026 visual system: nature photography, readable type and clear touch targets. */
:root{--green:#204c3e;--ink:#223b32;--muted:#61736a;--line:#e9e3d7;--paper:#fffefb;color:var(--ink);background:#eeeae1}
body{background:radial-gradient(circle at 50% 0,#faf7f0,#eae6dc 72%)}
button{min-height:48px;border-radius:12px;font-weight:600;transition:transform .15s,background .15s}
button:active{transform:scale(.985)}
button:focus-visible,a:focus-visible{outline:3px solid #b58b45;outline-offset:3px}
.phone{max-width:430px;margin:22px auto;min-height:780px;border:1px solid #ddd6ca;border-radius:24px;background:#f8f5ef;box-shadow:0 24px 65px #34483c25}
.phone.nature{background-color:#f8f5ef;background-image:linear-gradient(to bottom,transparent 0,transparent 230px,#f8f5ef 425px),url('/assets/hero-20260924.jpg');background-position:top center,top center;background-size:100% 100%,100% auto;background-repeat:no-repeat}
.appbar{position:relative;height:61px;padding:8px 16px;background:#fffefb99;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
/* 顶栏：返回只留箭头，标题绝对居中（设计稿 02-records），避免箭头+文字+标题挤成一团。 */
.appbar>strong{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;align-items:center;justify-content:center;padding:0 76px;font-size:17px;color:#18392f;letter-spacing:.04em;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appbar button{font-weight:600;color:var(--green)}
.appbar>button.back{font-size:22px;line-height:1;padding:8px 14px;margin-left:-12px}
.capsule{color:#61736a;background:#fffef988;border-color:#e1d9c6}
.content{padding:16px 16px 28px}
.phone.nature:not(.route-home):not(.route-packages):not(.route-package):not(.route-admin):not(.route-staffLogin) .content{padding-top:120px}
.route-packages .content,.route-package .content{padding-top:15px}
h1,h2,h3,.title{color:#183b31;letter-spacing:.025em}
h1{font-family:STSong,SimSun,serif;font-size:23px;line-height:1.27;font-weight:600}
h2{font-size:23px;font-weight:650}
h3{font-size:17px;font-weight:650}
.muted,small{color:var(--muted)}
.hero{min-height:365px;position:relative;padding:14px 6px 0}
.hero h1{font-size:28px;line-height:1.25;letter-spacing:.04em;margin:11px 0 7px;max-width:310px}
.hero p{font-size:16px;color:#4c6257}
.hero .badge{background:#fffdf0d9;color:#285142;border:1px solid #e7dcc5}
.actions{margin-top:139px;padding:8px;background:#fffdfa;border:1px solid #e9e2d5;border-radius:18px;box-shadow:0 13px 30px #42534a22}
.actions button{min-height:107px;grid-template-columns:56px 1fr;gap:6px;background:transparent;border-radius:12px;padding:10px 6px}
.actions button+button{border-left:1px solid var(--line)}
.actions .icon{transform:scale(1.08)}
.actions b{font-size:18px;color:#173d33}
.actions small{white-space:normal;line-height:1.35;font-size:12px}
.panel,.profile-summary{border:1px solid #ede6d9;background:#fffefa;border-radius:18px;box-shadow:0 7px 22px #5260460d}
.panel{padding:16px;margin-top:15px}
.panel:first-child{margin-top:0}
.panel h3{margin-bottom:5px}
.package-entry{padding:21px}
.package-entry h2{font-size:23px;line-height:1.3;margin:15px 0 7px}
.package-entry .primary{margin-top:17px}
.package-entry small{margin-top:8px}
.badge{background:#edf3ec;color:#2b5547;border:1px solid #dfe9de;font-size:12px;padding:5px 10px}
.hint{background:#f3efe6;border:1px solid #e9e1d1;color:#645d4e;font-size:12px;line-height:1.55;border-radius:12px}
.primary{background:linear-gradient(135deg,#28594b,#1c473b);color:white;box-shadow:0 5px 14px #244c3d22}
.primary:hover{background:#1b4338}
.block{width:100%;margin-top:11px}
.head{gap:10px}
.menu{min-height:56px;padding:14px 4px;border-color:#eee8dd;font-size:16px;color:#263f34}
.menu>span:first-child{font-weight:600}
.menu small{font-size:12px;color:#708176}
.info{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0;margin-top:10px}
.info dt,.info dd{padding:14px 0;border-bottom:1px solid #f0e9de}
.info dt{font-weight:600}
.info dd{color:#6d7a70;text-align:right}
.field{margin:19px 0}
.field>span,.field>label>span{display:block;margin-bottom:8px;font-size:14px;font-weight:600}
/* 多选列表：设计稿 02-records 的胶囊框。选中态用 is-on 类（不用 :has，老微信 webview 不支持） */
.field .choices label.is-on{border-color:#8aa37c;background:#f2f6ef;color:#2c4a26}
.field .choices label span{flex:none;font-size:16px;font-weight:400;display:inline;margin:0}
input,select,textarea{border-color:#dedfd7;background:#fff;min-height:48px}
/* 复选框不受上面 min-height 影响，否则多选胶囊框会被撑高 */
input[type=checkbox]{min-height:0;width:20px;height:20px;padding:0;flex-shrink:0}
.tabs button{background:#f1f3ee;border:1px solid #e3e9df}
.tabs .on{background:#e0ece4;border-color:#90b49e;color:#164b39}
.profile-summary{margin-top:0;padding:16px}
.route-me .profile-summary,.route-profile .profile-summary{margin-top:0}
.route-home .profile-summary{margin-top:0}
.package-hero{min-height:182px;padding:25px 20px;border:1px solid #e9e1d5;border-radius:20px;background:linear-gradient(to bottom,#fffdf966,#fffaf0b0),url('/assets/hero-20260924.jpg') center 56%/cover;box-shadow:0 9px 22px #52604616}
.package-hero h1{margin:15px 0 8px}
.package-hero p{max-width:260px;font-size:16px}
.package-card{position:relative;overflow:hidden;padding:20px 21px;border-left:4px solid #577d6a}
.package-photo{height:116px;margin:-20px -21px 16px;background-image:url('/assets/package-strip-20260924.jpg');background-size:400% auto;background-repeat:no-repeat;border-radius:16px 16px 0 0}
.photo-0{background-position:0 50%}.photo-1{background-position:33.333% 50%}.photo-2{background-position:66.667% 50%}.photo-3{background-position:100% 50%}
.package-card:nth-of-type(2){border-left-color:#9baa81}
.package-card:nth-of-type(3){border-left-color:#b49c6c}
.package-card:nth-of-type(4){border-left-color:#4b7567}
.package-card h2{font-size:17px;line-height:1.35}
.package-card .muted{line-height:1.55}
.package-number{color:#b29c73;font-size:23px}
.package-price{color:#20533e;font-family:Georgia,'Microsoft YaHei',serif;font-size:28px;font-weight:700}
.package-footer{background:#f8f5ef}
.package-footer button{color:#68736c;background:#e6e9e4}
.owned-package .head{align-items:flex-start}
.owned-package .head h3{flex:1}
.owned-package .package-price{margin:13px 0}
.owned-package .primary{margin-top:17px}
.bottom{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:6px 4px 6px;background:#fffefa;border-color:#e7e1d6;box-shadow:0 -4px 20px #4054430c}
.bottom button{min-height:52px;gap:4px;padding:5px 1px;font-size:13px;color:#667269;border-radius:10px}
.bottom .on{color:#174838;background:#eef4ee}
.nav-art{height:24px;width:24px;object-fit:contain;opacity:.58}
.bottom .on .nav-art{opacity:1}
.small{font-size:12px;color:var(--muted)}
@media(max-width:350px){.content{padding:16px}.actions button{grid-template-columns:45px 1fr}.actions b{font-size:18px}.bottom button{font-size:13px}}
@media(max-width:600px){.phone{margin:0 auto;border:0;border-radius:0;max-width:none;min-height:100vh}.phone.nature{background-size:100% 100%,100% auto}}
.admin{max-width:1260px;margin:25px auto;background:#fbfaf6;border-color:#e4dfd5;border-radius:20px;box-shadow:0 18px 50px #34483c17}
.adminbar{min-height:91px;padding:17px 27px;background:linear-gradient(90deg,#fffcf5ed,#fffdf8ad),url('/assets/hero-20260924.jpg') center 32%/cover;border-bottom:1px solid #ebe3d5}
.adminbrand{display:flex;align-items:center;gap:13px}
.adminbrand strong{display:block;font:600 22px/1.3 SimSun,'Microsoft YaHei',serif;color:#19483b}
.adminbrand small{display:block;font-size:12px;letter-spacing:.12em;color:#597366}
.brandmark{display:grid;place-items:center;width:46px;height:46px;border:1px solid #c3d6c7;border-radius:13px;background:#eaf1e9;color:#2d6851;font-size:28px}
.adminbody{grid-template-columns:190px minmax(0,1fr);min-height:650px}
.admin aside{padding:20px 12px;background:#204c3e;display:block}
.admin aside button{display:flex;align-items:center;gap:12px;width:100%;min-height:54px;margin:0 0 8px;padding:12px 14px;border-radius:11px;color:#ecf3ec;font-size:14px;text-align:left;background:transparent}
.admin aside button.on,.admin aside button:hover{color:#183f31;background:#f0f5ed}
.admin-nav-icon{width:24px;height:24px;object-fit:contain;filter:brightness(0) invert(1);opacity:.85}
.admin aside button.on .admin-nav-icon,.admin aside button:hover .admin-nav-icon{filter:none;opacity:1}
.adminmain{padding:30px 34px 55px;background:linear-gradient(#f6f9f6,#fbfaf6 220px)}
.adminmain>.head:first-child h2,.adminmain>h2:first-child{font:600 27px/1.3 SimSun,'Microsoft YaHei',serif}
.adminmain .panel{padding:22px;margin-top:16px}
.adminmain .hint{background:#f7f2e8}
.adminmain table{background:#fffefa;border:1px solid #e8e5db;border-radius:13px;overflow:hidden;font-size:13px}
.adminmain th{background:#eaf1ea;color:#284f3f;font-weight:700}
.adminmain th,.adminmain td{padding:14px 12px;border-color:#edf0e9}
.adminmain tr:hover td{background:#fbfcf8}
.adminmain .filters{gap:12px}
.adminmain .filters input,.adminmain .filters select{min-height:46px}
@media(max-width:760px){.admin{margin:0;border-radius:0}.adminbar{padding:14px}.adminbody{display:block}.admin aside{display:flex;gap:6px;padding:9px;overflow-x:auto;white-space:nowrap}.admin aside button{width:auto;min-width:max-content;margin:0;padding:9px 11px}.admin-nav-icon{width:20px;height:20px}.adminmain{padding:20px 13px}.adminmain table{font-size:13px}.adminmain td,.adminmain th{padding:9px 5px}}
/* 页面骨架：内容区撑开，底部导航贴底；底部导航列数与三个 tab 一致 */
.phone{display:flex;flex-direction:column}
.content{flex:1 0 auto}
.bottom{grid-template-columns:repeat(3,minmax(0,1fr))}
/* hero 文案压在风景图上，加白色描边阴影保证任何底色下都能看清 */
.hero h1,.hero p{text-shadow:0 1px 4px rgba(255,255,255,.92),0 0 12px rgba(255,255,255,.75)}
/* 图标尺寸由 --icon-h 统一控制：宽高与精灵图定位按原生尺寸等比推导 */
.icon{--icon-h:var(--ih);height:var(--icon-h);width:calc(var(--icon-h) * var(--ar));background-size:calc(var(--sw) * var(--icon-h)) calc(var(--sh) * var(--icon-h));background-position:calc(var(--ix) * var(--icon-h)) calc(var(--iy) * var(--icon-h))}
/* 页面标题区（设计稿 01-main / 02-records） */
.page-head{padding:6px 3px 14px}
.page-title{font-family:STSong,SimSun,serif;font-size:23px;font-weight:600;color:#183b31;letter-spacing:1px;line-height:1.25}
.page-sub{font-size:17px;font-weight:600;color:#1d3f33;margin-top:8px}
.page-desc{font-size:12px;color:var(--muted);margin-top:5px;line-height:1.5}
/* 标题压在风景图上，加白色描边阴影保证任何底色下都能看清 */
.page-title,.page-sub,.page-desc{text-shadow:0 1px 4px rgba(255,255,255,.92),0 0 12px rgba(255,255,255,.75)}
/* 健康记录页：四个指标入口大卡（2×2），点击切换当前指标 */
.metric-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 15px}
.metric-card{display:flex;align-items:center;gap:9px;width:100%;padding:12px;text-align:left;font-weight:400;color:#183b31;background:#fffefa;border:1px solid #ede6d9;border-radius:14px;box-shadow:0 4px 12px #5260460d}
.metric-card.on{background:#f1f7f1;border-color:#cbded1;box-shadow:0 4px 12px #52604614}
.metric-icon{width:40px;height:40px;flex:none;mix-blend-mode:multiply}
.metric-text{flex:1;min-width:0}
.metric-name{display:block;font-size:16px;font-weight:600;color:#183b31;line-height:1.3}
.metric-desc{display:block;font-size:12px;color:var(--muted);margin-top:3px;line-height:1.35}
.metric-arrow{color:#8d9a8b;font-size:17px;flex:none;line-height:1}
/* 趋势图例：收缩压 / 舒张压两色圆点 */
.legend{display:flex;gap:15px;margin:6px 0 2px}
.legend-item{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--muted)}
.legend-dot{width:9px;height:9px;border-radius:50%;flex:none}
.legend-dot.high{background:#d9574f}
.legend-dot.low{background:#4b9b6b}
/* 明细行：数值在上、日期在下，便于扫读 */
.row-value{font-size:16px;font-weight:600;color:#183b31}
.row-value .row-period{font-size:12px;font-weight:400;color:var(--muted)}
.row-time{display:block;font-size:12px;color:var(--muted);margin-top:3px}
/* 血糖「全部时段」：不混连曲线，只按条列出明细 */
.period-list{list-style:none;margin:10px 0 0;padding:0}
.period-list li{display:grid;grid-template-columns:auto auto 1fr;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid var(--line)}
.period-list li:last-child{border-bottom:0}
.period-list b{font-size:16px;color:#183b31}
.period-list .period-tag{font-size:12px;color:#2b5547;background:#edf3ec;border:1px solid #dfe9de;border-radius:11px;padding:2px 9px}
.period-list small{justify-self:end;text-align:right;font-size:12px;color:var(--muted)}
/* 访客锁定态：输入框可见但锁定，提示「登录后显示」 */
.locked-input{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:48px;margin-top:0;padding:12px;border:1px solid #e6e2d8;border-radius:12px;background:#f2f0e9;color:#9aa39a;font-weight:400;text-align:left}
.locked-input .lock-text{font-size:16px;color:#9aa39a}
.locked-input .lock-icon{font-size:12px;opacity:.75}
.locked-option .locked-name{font-size:16px;color:#6f7a72;font-weight:600}
.form-foot{margin:14px 4px 0;font-size:12px;color:var(--muted);line-height:1.6;text-align:center}
/* 离开脏表单：保存并继续 / 放弃修改 / 继续编辑 */
.leave-dialog{border:1px solid var(--line);border-radius:18px;padding:22px;max-width:360px;width:calc(100% - 32px);color:var(--ink);background:var(--paper)}
.leave-dialog::backdrop{background:#26352177}
.leave-dialog h3{font-size:17px;font-weight:650;color:#183b31}
.leave-dialog p{margin:10px 0 16px;font-size:12px}
.leave-actions{display:grid;gap:9px}
.leave-actions button{width:100%}
.leave-actions button[data-choice="save"]{background:linear-gradient(135deg,#28594b,#1c473b);color:#fff}
/* =====================================================================
   设计稿还原 v2（2026-11-04）
   色板收敛：主绿 --g-900/#1c473b，强调绿 --g-700/#28594b，文字绿 --g-600/#2b5547，
             印章红 --seal/#a0352e。原先散落的 #204c3e/#183b31/#1d3f33/#20533e/#405a36 并入。
   ===================================================================== */
.phone{--g-900:#1c473b;--g-700:#28594b;--g-600:#2b5547;--g-100:#edf3ec;--seal:#a0352e;--disc:#f3efe6}
/* 满幅国画：首页整屏铺满 + 底部柔和过渡到米色。
   关键：渐变必须在图片自身高度之前就完全不透明，否则图片底边会露出一道硬断。 */
.phone.nature{background-image:linear-gradient(to bottom,rgba(248,245,239,0) 0%,rgba(248,245,239,0) 6%,rgba(248,245,239,.45) 20%,rgba(248,245,239,.9) 32%,#f8f5ef 40%),url('/assets/hero-20260924.jpg');background-position:top center,top center;background-size:100% 100%,100% auto;background-repeat:no-repeat}
/* 二级页：国画只留顶部横幅，卡片浮在画上 */
.phone.nature:not(.route-home):not(.route-packages):not(.route-package):not(.route-admin):not(.route-staffLogin){background-image:linear-gradient(to bottom,rgba(248,245,239,0) 0%,rgba(248,245,239,0) 3%,rgba(248,245,239,.92) 10%,#f8f5ef 16%),url('/assets/hero-20260924.jpg');background-position:top center,top center;background-size:100% 100%,100% auto;background-repeat:no-repeat}
/* 卡片浮起：纯白纸面 + 更强柔光投影 + 统一圆角 */
.panel,.profile-summary{background:#fffefb;border:1px solid #ede6d9;border-radius:16px;box-shadow:0 10px 28px #42534a26}
.actions{border-radius:16px;box-shadow:0 13px 30px #42534a2e}
/* 主按钮渐变（设计稿深绿渐变胶囊） */
.primary{background:linear-gradient(135deg,#28594b,#1c473b)}
/* 底部导航：选中态不再铺浅绿底块（设计稿无底色块） */
.bottom .on{background:none;color:#174838}
/* 静态书法标题图 */
.page-title-art{display:block;max-width:100%;margin:2px 0 8px}/* 语义标题视觉隐藏：读屏与自动化测试仍能取到 heading，视觉上只显示书法图 */
.page-title-art-h{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* 档案菜单图标：圆形米色底（设计稿 05-profile），与小程序 .menu-icon 同款 */
.menu-left{display:flex;align-items:center;gap:10px}
.menu-disc{width:40px;height:40px;flex:none;border-radius:50%;background:#f3efe6;display:inline-grid;place-items:center;overflow:hidden}
.menu-disc .icon{--ih:22px !important}