/* 家庭健康档案 · 松绿手账（token 与组件样式源自 docs/design/ui-screens-v1.html） */
:root{
  --paper:#F6F4EE; --card:#FFFFFF; --ink:#22302A; --ink-2:#5C6B63; --ink-3:#93A098;
  --pine:#2F6B4F; --pine-deep:#1E4D37; --pine-soft:#E7F0EA;
  --alert:#D96C47; --alert-soft:#FBEDE6;
  --line:#E4E0D4; --line-2:#EFECE2;
  --wk:'LXGW WenKai Screen','Kaiti SC','STKaiti','KaiTi',serif;
  --body:-apple-system,'PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper);font-family:var(--body);color:var(--ink);-webkit-font-smoothing:antialiased}
[v-cloak]{display:none}
button{font-family:var(--body)}

/* ===== 顶栏 ===== */
.m-top{background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:0 26px;height:60px;position:sticky;top:0;z-index:20}
.m-top .logo{display:flex;align-items:center;gap:10px;font-family:var(--wk);font-size:19px;cursor:pointer}
.m-top .logo .strip{display:flex;width:40px;height:12px;border-radius:3px;overflow:hidden}
.m-top .logo .strip i{flex:1}
.m-top .sp{flex:1}
.btn{border:none;cursor:pointer;font-weight:600;border-radius:8px;display:inline-flex;align-items:center;gap:7px;font-size:13.5px}
.btn-pri{background:var(--pine);color:#fff;padding:9px 16px}
.btn-pri:hover{background:var(--pine-deep)}
.btn-pri.ghost{background:#fff;color:var(--pine);border:1.5px solid var(--pine)}
.btn-txt{background:none;color:var(--ink-2);font-size:13.5px;font-weight:500;padding:6px 8px}
.btn-txt:hover{color:var(--ink)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.band{display:flex;height:7px}
.band i{flex:1}
a{color:var(--pine)}

/* ===== 通用 ===== */
.page-wrap{max-width:1180px;margin:0 auto;padding:22px 26px 60px}
.m-sec-title{display:flex;align-items:center;gap:10px;margin:22px 0 12px}
.m-sec-title h3{font-family:var(--wk);font-size:18px;font-weight:600}
.m-sec-title .sp{flex:1}
.m-sec-title a,.link{font-size:13px;color:var(--pine);text-decoration:none;cursor:pointer}
.avatar{width:44px;height:44px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--wk);font-size:19px;flex:none}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:4px 11px;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--ink-2);cursor:pointer}
.chip.on{background:var(--pine);border-color:var(--pine);color:#fff}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none}
.tag{display:inline-block;font-size:11.5px;padding:2.5px 9px;border-radius:5px;margin-right:6px}
.tag.warn{background:var(--alert-soft);color:var(--alert)}
.tag.ok{background:var(--pine-soft);color:var(--pine)}
.empty{padding:40px 20px;text-align:center;color:var(--ink-3);font-size:14px;line-height:2}
.empty .btn{margin-top:8px}

/* ===== 卡片 ===== */
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:17px 19px}
.card h3{font-family:var(--wk);font-size:16.5px;margin-bottom:12px;display:flex;align-items:center;gap:8px}
.card h3 .sp{flex:1;font-family:var(--body);font-size:12.5px;font-weight:400}

/* ===== 登录 ===== */
.login-bg{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;position:relative}
.login-bg::after{content:'家人共用一个密码';position:absolute;bottom:22px;right:28px;font-size:12px;color:var(--ink-3)}
.login-card{width:100%;max-width:420px;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 14px 40px rgba(34,48,42,.08)}
.login-card .inner{padding:40px 44px 36px}
.login-card h1{font-family:var(--wk);font-size:29px;text-align:center;margin:18px 0 6px}
.login-card .sub{text-align:center;color:var(--ink-2);font-size:13.5px;letter-spacing:.32em;margin-bottom:30px}
.field{margin-bottom:16px}
.field label{display:block;font-size:12.5px;color:var(--ink-2);margin-bottom:7px}
.field input,.field select,.field textarea{width:100%;border:1.5px solid var(--line);border-radius:9px;padding:11px 13px;font-size:15px;font-family:var(--body);color:var(--ink);background:#fff}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--pine)}
.field textarea{resize:vertical;min-height:70px}
.field-row{display:flex;gap:12px}
.field-row .field{flex:1}
.login-card .btn-pri{width:100%;justify-content:center;padding:13px;font-size:15.5px;margin-top:10px;font-family:var(--wk)}

/* ===== 总览 ===== */
.ov-date{display:flex;align-items:baseline;gap:12px;margin-bottom:18px}
.ov-date h2{font-family:var(--wk);font-size:25px}
.ov-date span{color:var(--ink-2);font-size:13.5px}
.ov-date .sp{flex:1}
.board{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.b-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:15px 17px 13px}
.b-card h4{font-size:13px;color:var(--ink-2);display:flex;align-items:center;gap:8px;margin-bottom:11px;font-weight:600}
.b-card h4 .n{font-family:var(--wk);font-size:20px;color:var(--ink);margin-left:auto}
.b-card.today{border-top:3px solid var(--pine)}
.b-card.soon{border-top:3px solid #C9A227}
.b-card.late{border-top:3px solid var(--alert)}
.b-item{display:flex;align-items:center;gap:9px;padding:7px 0;font-size:13.5px;border-top:1px dashed var(--line-2)}
.b-item:first-of-type{border-top:none}
.b-item .t{color:var(--ink-3);font-size:12px;margin-left:auto;flex:none}
.b-item.done>span.txt{color:var(--ink-3);text-decoration:line-through}
.b-item .txt{cursor:pointer}
.ckbox{width:19px;height:19px;border-radius:6px;border:1.5px solid #C6CFC8;flex:none;display:flex;align-items:center;justify-content:center;color:#fff;cursor:pointer;background:#fff}
.ckbox.on{background:var(--pine);border-color:var(--pine)}
.b-item.late-item{background:var(--alert-soft);border-radius:7px;padding:7px 9px;border:none;margin-top:4px}
.b-item.late-item .late-tag{color:var(--alert);font-size:12px;margin-left:auto;font-weight:600}
.reading{margin-top:16px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 22px;display:flex;align-items:center;gap:20px}
.reading .who{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2)}
.reading .num{font-family:var(--wk);font-size:41px;color:var(--ink);white-space:nowrap}
.reading .num em{font-style:normal;font-size:15px;color:var(--ink-3);margin-left:7px;font-family:var(--body)}
.reading .meta{color:var(--ink-3);font-size:12.5px;line-height:1.9}
.reading .sp{flex:1}
.fam-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.fam-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:15px 16px;display:flex;gap:12px;cursor:pointer}
.fam-card:hover{box-shadow:0 6px 18px rgba(34,48,42,.09)}
.fam-card .nm{font-family:var(--wk);font-size:16.5px;display:flex;align-items:center;gap:8px}
.fam-card .age{font-size:12px;color:var(--ink-3)}
.fam-card .st{font-size:12.5px;color:var(--ink-2);margin-top:5px;line-height:1.55}
.tl{padding-top:6px}
.tl-item{display:flex;gap:14px;position:relative;padding:0 0 19px 4px}
.tl-item::before{content:'';position:absolute;left:8px;top:18px;bottom:-2px;width:1.5px;background:var(--line-2)}
.tl-item:last-child::before{display:none}
.tl-item .pt{width:17px;height:17px;border-radius:50%;border:3.5px solid #fff;box-shadow:0 0 0 1.5px var(--line);flex:none;margin-top:2px}
.tl-item .bd{font-size:13.5px;line-height:1.65;flex:1}
.tl-item .bd b{font-family:var(--wk);font-weight:600}
.tl-item .bd .d{color:var(--ink-3);font-size:12px;margin-left:8px}
.tl-item .op{flex:none;font-size:12px;color:var(--ink-3);cursor:pointer}
.tl-item .op:hover{color:var(--alert)}
.type-tag{display:inline-block;font-size:11px;color:var(--ink-2);background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:1px 7px;margin-left:8px;vertical-align:1px}

/* ===== 成员详情 ===== */
.md-head{display:flex;align-items:center;gap:18px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 22px;margin-bottom:16px}
.md-head .avatar{width:58px;height:58px;font-size:26px}
.md-head h2{font-family:var(--wk);font-size:24px;display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.md-head h2 span{font-size:13.5px;color:var(--ink-2);font-family:var(--body);font-weight:400}
.md-head .facts{display:flex;gap:18px;color:var(--ink-2);font-size:13px;margin-top:7px;flex-wrap:wrap}
.md-head .facts b{color:var(--ink);font-weight:600}
.md-head .sp{flex:1}
.md-grid{display:grid;grid-template-columns:330px 1fr;gap:16px;align-items:start}
.sum-row{display:flex;gap:10px;padding:9px 0;border-top:1px dashed var(--line-2);font-size:13px;line-height:1.7}
.sum-row:first-of-type{border-top:none}
.sum-row .k{width:44px;color:var(--ink-3);flex:none}
.file-row{display:flex;align-items:center;gap:11px;padding:10px 6px;border-top:1px dashed var(--line-2);font-size:13px}
.file-row:first-of-type{border-top:none}
.file-row .ft-ic{width:34px;height:40px;border-radius:5px;background:var(--alert-soft);color:var(--alert);display:flex;align-items:center;justify-content:center;font-family:var(--wk);font-size:10.5px;flex:none}
.file-row img{width:34px;height:40px;object-fit:cover;border-radius:5px;flex:none}
.file-row .meta{color:var(--ink-3);font-size:11.5px;margin-top:2px}
.file-row .sp{flex:1}
.file-row .op{color:var(--ink-3);cursor:pointer;font-size:12.5px}
.file-row .op:hover{color:var(--alert)}
.chart-legend{display:flex;gap:18px;font-size:12px;color:var(--ink-2);margin:2px 0 8px;flex-wrap:wrap}
.chart-legend i{width:18px;height:3px;border-radius:2px;display:inline-block;vertical-align:3px;margin-right:5px}
.chart-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.chart-tools select{border:1px solid var(--line);border-radius:7px;padding:6px 9px;font-size:13px;background:#fff;color:var(--ink)}

/* ===== 提醒页 ===== */
.rm-grid{display:grid;grid-template-columns:400px 1fr;gap:16px;align-items:start}
.r-item{display:flex;align-items:center;gap:12px;padding:13px 4px;border-top:1px dashed var(--line-2);font-size:14px}
.r-item:first-of-type{border-top:none}
.r-item .med{flex:1;line-height:1.5}
.r-item .med .sub{font-size:12px;color:var(--ink-3);margin-top:2px}
.r-item.done .med b{color:var(--ink-3);text-decoration:line-through;font-weight:500}
.r-item .tm{font-family:var(--wk);font-size:15px;color:var(--ink-2);flex:none}
.switch{width:38px;height:21px;border-radius:999px;background:#D4D9D2;position:relative;flex:none;cursor:pointer;transition:background .15s}
.switch::after{content:'';position:absolute;width:17px;height:17px;border-radius:50%;background:#fff;top:2px;left:2px;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:left .15s}
.switch.on{background:var(--pine)}
.switch.on::after{left:19px}
.rule-row{display:flex;align-items:center;gap:12px;padding:13px 4px;border-top:1px dashed var(--line-2);font-size:13.5px}
.rule-row:first-of-type{border-top:none}
.rule-row .nm{width:150px;font-weight:600;font-size:13.5px}
.rule-row .who{display:flex;align-items:center;gap:6px;color:var(--ink-2);font-size:12.5px;width:86px}
.rule-row .rule{color:var(--ink-2);font-size:12.5px;flex:1}
.rule-row .edit{color:var(--ink-3);font-size:12.5px;text-decoration:none;cursor:pointer}
.off{opacity:.55}

/* ===== 弹窗 ===== */
.modal-mask{position:fixed;inset:0;background:rgba(34,48,42,.4);z-index:50;display:flex;align-items:flex-start;justify-content:center;padding:6vh 16px;overflow:auto}
.modal{background:#fff;border-radius:14px;width:100%;max-width:520px;padding:24px 26px;box-shadow:0 20px 60px rgba(30,46,39,.25)}
.modal h3{font-family:var(--wk);font-size:19px;margin-bottom:16px}
.modal .modal-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}
.tabs{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
.tabs .chip{padding:6px 13px;font-size:13px}

/* ===== toast ===== */
.toast-wrap{position:fixed;top:74px;left:50%;transform:translateX(-50%);z-index:99;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{background:var(--ink);color:#fff;font-size:13.5px;padding:10px 18px;border-radius:9px;box-shadow:0 8px 24px rgba(34,48,42,.3);animation:tin .2s ease}
.toast.err{background:var(--alert)}
@keyframes tin{from{opacity:0;transform:translateY(-8px)}to{opacity:1}}

/* ===== 移动端 ===== */
.p-tabbar{display:none}
@media (max-width: 768px) {
  .m-top{padding:0 14px;gap:8px}
  .m-top .logo span.logo-txt{display:none}
  .m-top .btn-txt{display:none}
  .page-wrap{padding:16px 14px 90px}
  .board{grid-template-columns:1fr}
  .fam-row{grid-template-columns:1fr 1fr;gap:10px}
  .fam-card{padding:12px 13px}
  .fam-card .avatar{width:38px;height:38px;font-size:16px}
  .fam-card .st{display:none}
  .reading{flex-wrap:wrap;gap:12px;padding:14px 16px}
  .reading .num{font-size:32px}
  .reading .meta{display:none}
  .md-grid{grid-template-columns:1fr}
  .rm-grid{grid-template-columns:1fr}
  .rule-row .nm{width:110px}
  .p-tabbar{display:flex;position:fixed;bottom:0;left:0;right:0;background:#fff;border-top:1px solid var(--line);padding:9px 0 calc(9px + env(safe-area-inset-bottom));z-index:30}
  .p-tabbar .tb{flex:1;text-align:center;font-size:10.5px;color:var(--ink-3);text-decoration:none;display:flex;flex-direction:column;gap:3px;align-items:center}
  .p-tabbar .tb.on{color:var(--pine);font-weight:600}
  .p-tabbar .tb svg{width:21px;height:21px}
  .b-item .t{display:none}
  .field-row{flex-direction:column;gap:0}
}