:root{
  --bg:#FDF8F1; --surface:#FFFFFF; --card:#FFFDF9;
  --ink:#3D2B1F; --ink2:#6B5445; --ink3:#A08D7E;
  --line:#EADFD1; --line2:#F2E9DE;
  --brand:#8B5E3C; --brand-soft:#F3E7DA; --brand-ink:#6E4527;
  --danger:#B33A2B; --danger-soft:#FBEAE6;
  --ok:#3F7A54; --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Segoe UI",sans-serif;
  font-size:15px; line-height:1.65; -webkit-font-smoothing:antialiased;
}
a{color:var(--brand);text-decoration:none}
img{display:block;max-width:100%}

.topbar{
  position:sticky; top:0; z-index:30; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:12px 18px; background:rgba(253,248,241,.92);
  backdrop-filter:saturate(160%) blur(8px); border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--ink);font-size:16px;letter-spacing:.02em}
.brand .paw{width:22px;height:22px;fill:var(--brand)}
.brand em{font-style:normal;font-weight:400;font-size:12px;color:var(--ink3);letter-spacing:.08em}
.topbar nav{display:flex;gap:16px;font-size:14px}
.topbar nav a{color:var(--ink2)}
.topbar nav a:hover{color:var(--brand)}

main{max-width:760px;margin:0 auto;padding:20px 18px 56px}
.loading{padding:60px 0;text-align:center;color:var(--ink3)}
.foot{text-align:center;padding:24px 16px 40px;color:var(--ink3);font-size:12px}

h1{font-size:24px;line-height:1.35;margin:0 0 8px;font-weight:600;letter-spacing:.01em}
h2{font-size:17px;margin:28px 0 12px;font-weight:600}
h3{font-size:15px;margin:0 0 6px;font-weight:600}
p{margin:0 0 12px}
.muted{color:var(--ink3);font-size:13px}
.lead{color:var(--ink2);font-size:15px}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:16px}
.card.flat{background:var(--surface)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.grid{display:grid;gap:12px}
@media(min-width:600px){.grid.two{grid-template-columns:1fr 1fr}}

label{display:block;font-size:13px;color:var(--ink2);margin:0 0 5px}
input,textarea,select{
  width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;
  background:#fff;color:var(--ink);font:inherit;font-size:15px;outline:none;
}
input:focus,textarea:focus,select:focus{border-color:var(--brand)}
textarea{min-height:88px;resize:vertical}
.field{margin-bottom:14px}

button{font:inherit;cursor:pointer;border-radius:10px;border:1px solid transparent;padding:11px 18px;font-size:15px}
.btn{background:var(--brand);color:#fff}
.btn:hover{background:var(--brand-ink)}
.btn.ghost{background:transparent;border-color:var(--line);color:var(--ink2)}
.btn.ghost:hover{border-color:var(--brand);color:var(--brand)}
.btn.wide{width:100%}
.btn.danger{background:var(--danger-soft);color:var(--danger);border-color:#F0CFC8}
.btn.sm{padding:7px 12px;font-size:13px}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.linkbtn{background:none;border:none;padding:0;color:var(--brand);font-size:13px}

.tag{display:inline-block;background:var(--brand-soft);color:var(--brand-ink);border-radius:999px;padding:3px 10px;font-size:12px;margin:0 6px 6px 0}
.empty{padding:28px 16px;text-align:center;color:var(--ink3);border:1px dashed var(--line);border-radius:var(--radius);background:var(--surface)}

/* 档案卡 */
.profile{display:flex;gap:16px;align-items:flex-start}
.avatar{width:88px;height:88px;border-radius:50%;object-fit:cover;background:var(--brand-soft);flex:none;border:2px solid #fff;box-shadow:0 0 0 1px var(--line)}
.avatar-ph{width:88px;height:88px;border-radius:50%;background:var(--brand-soft);flex:none;display:flex;align-items:center;justify-content:center}
.avatar-ph svg{width:40px;height:40px;fill:var(--brand);opacity:.5}
.meta{list-style:none;margin:8px 0 0;padding:0;font-size:13px;color:var(--ink2)}
.meta li{padding:2px 0}

/* 走失横幅 */
.lost{background:var(--danger-soft);border:1px solid #EFC9C1;color:#8A2B1E;border-radius:var(--radius);padding:14px 16px;margin-bottom:16px}
.lost strong{display:block;font-size:15px;margin-bottom:4px}
.callbtn{display:inline-block;margin-top:8px;background:var(--danger);color:#fff;padding:9px 18px;border-radius:10px;font-weight:600}

/* 时间轴 */
.tl{position:relative;padding-left:22px}
.tl:before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:var(--line)}
.item{position:relative;margin-bottom:22px}
.item:before{content:"";position:absolute;left:-20px;top:8px;width:10px;height:10px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 3px var(--bg)}
.item .date{font-size:12px;color:var(--ink3);margin-bottom:4px}
.item .body{white-space:pre-wrap}
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px}
.shots img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;background:var(--line2);cursor:zoom-in}
.videobtn{margin-top:10px;display:flex;align-items:center;gap:8px;width:100%;background:var(--brand-soft);color:var(--brand-ink);border:1px solid var(--line);border-radius:10px;padding:12px;font-size:14px;text-align:left}
.videobtn svg{width:18px;height:18px;fill:var(--brand);flex:none}

/* 留言 */
.msg{border-top:1px solid var(--line2);padding:12px 0}
.msg:first-child{border-top:none}
.msg .who{font-size:13px;color:var(--ink2);font-weight:600}
.msg .when{font-size:12px;color:var(--ink3);font-weight:400;margin-left:6px}

/* 宠物列表 */
.petrow{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:12px;border:1px solid var(--line);border-radius:12px;background:#fff;margin-bottom:10px}
.petrow .left{display:flex;gap:12px;align-items:center;min-width:0}
.petrow .ava{width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--brand-soft);flex:none}
.petrow .nm{font-weight:600}
.petrow .sub{font-size:12px;color:var(--ink3)}
.switch{display:inline-flex;align-items:center;gap:6px;font-size:13px}

/* 模态 */
.modal{position:fixed;inset:0;background:rgba(61,43,31,.45);display:flex;align-items:flex-end;justify-content:center;z-index:60;padding:0}
.modal-box{background:var(--bg);width:100%;max-width:560px;max-height:88vh;overflow:auto;border-radius:16px 16px 0 0;padding:20px}
@media(min-width:640px){.modal{align-items:center;padding:20px}.modal-box{border-radius:16px}}
.modal h3{margin-bottom:12px}
.hidden{display:none!important}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:28px;background:var(--ink);color:#fff;padding:11px 18px;border-radius:999px;font-size:14px;z-index:90;max-width:88vw;text-align:center}

/* 吊牌 */
.tagcard{background:#fff;border:2px solid var(--brand);border-radius:12px;padding:18px;text-align:center;max-width:320px;margin:0 auto}
.tagcard .qr{width:200px;height:200px;margin:10px auto}
.tagcard .qr img,.tagcard .qr canvas{width:200px!important;height:200px!important;display:block}
.tagcard .tname{font-size:20px;font-weight:600;margin-top:6px}
.tagcard .tcode{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em;font-size:15px;color:var(--brand-ink);margin-top:2px}
.tagcard .tsub{font-size:13px;color:var(--ink2);margin-top:8px}
.print-hint{font-size:12px;color:var(--ink3);text-align:center;margin-top:12px}
@media print{.topbar,.foot,.noprint{display:none!important}main{padding:0}body{background:#fff}}

.tabs{display:flex;gap:6px;background:var(--brand-soft);padding:4px;border-radius:10px;margin-bottom:16px}
.tabs button{flex:1;background:transparent;border:none;padding:8px;font-size:14px;color:var(--ink2);border-radius:8px}
.tabs button.on{background:#fff;color:var(--brand-ink);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.06)}