:root{
  --bg:#FFF7EE; --card:#FFFFFF; --pink:#F7A8C4; --pink-d:#E87FA8; --pink-l:#FDECF2;
  --mint:#BFE5D6; --mint-l:#EAF7F1; --yellow:#FFE3A9; --yellow-l:#FFF6E3;
  --purple:#D9CFF2; --purple-l:#F1ECFB; --text:#5B4A44; --muted:#A38F86; --line:#F3E3D8;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{font-size:15px;}
body{
  font-family:"PingFang SC","Microsoft YaHei","Segoe UI",system-ui,sans-serif;
  background:var(--bg); color:var(--text); min-height:100vh; padding-bottom:60px;
}
/* 背景猫爪装饰 */
.pawbg{position:fixed; font-size:44px; opacity:.07; pointer-events:none; z-index:0; user-select:none;}
/* ===== 开屏动画 ===== */
#splash{
  position:fixed; inset:0; z-index:999; background:linear-gradient(160deg,#FFF3E6 0%,#FDECF2 60%,#F1ECFB 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  transition:opacity .6s ease; opacity:1;
}
#splash.hide{opacity:0; pointer-events:none;}
#splash .spin-cat{width:170px; animation:catSpin 2.2s linear infinite; transform-origin:50% 52%;}
@keyframes catSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
#splash .splash-paw{position:absolute; font-size:34px; opacity:.25; animation:floatPaw 3s ease-in-out infinite;}
@keyframes floatPaw{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-12px) rotate(var(--r,0deg))}}
#splash p{font-size:17px; letter-spacing:3px; color:var(--pink-d); font-weight:bold;}
/* ===== 头部 ===== */
header{
  position:sticky; top:0; z-index:50; background:rgba(255,247,238,.97);
  border-bottom:2px dashed var(--line); padding:12px 20px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.logo{display:flex; align-items:center; gap:10px; font-weight:bold; font-size:19px; color:var(--pink-d);}
.logo svg{width:38px; height:38px; flex:none;}
#syncChip{
  font-size:11.5px; color:var(--muted); background:#F6EFE9; border-radius:999px; padding:3px 10px; cursor:pointer; white-space:nowrap;
}
#syncChip.ok{background:var(--mint-l); color:#3E7A62;}
#syncChip.busy{background:var(--yellow-l); color:#B07A1E; animation:pulse 1.2s ease infinite;}
#syncChip.err{background:#FDECEC; color:#D66A6A;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}
nav{display:flex; gap:8px; flex-wrap:wrap; margin-left:auto;}
nav button{
  border:none; background:transparent; padding:8px 14px; border-radius:999px; cursor:pointer;
  font-size:14.5px; color:var(--muted); font-family:inherit; transition:all .2s; white-space:nowrap;
}
nav button:hover{background:var(--pink-l); color:var(--pink-d);}
nav button.active{background:var(--pink); color:#fff; font-weight:bold; box-shadow:0 3px 8px rgba(247,168,196,.45);}
main{position:relative; z-index:1; max-width:1080px; margin:22px auto 0; padding:0 18px;}
.view{display:none; animation:fadeIn .35s ease;}
.view.active{display:block;}
@keyframes fadeIn{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
/* ===== 通用卡片/组件 ===== */
.card{background:var(--card); border-radius:20px; padding:18px 20px; box-shadow:0 5px 16px rgba(230,180,160,.16); margin-bottom:18px;}
.card h2{font-size:16.5px; margin-bottom:12px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.card h2 .ico{font-size:19px;}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
@media(max-width:820px){.grid2{grid-template-columns:1fr}}
.muted{color:var(--muted); font-size:13.5px;}
.form{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; align-items:end;}
.form label{display:block; font-size:12.5px; color:var(--muted); margin-bottom:4px;}
.form .full{grid-column:1/-1;}
input,select,textarea{
  width:100%; border:2px solid var(--line); border-radius:12px; padding:8px 11px; font-size:14px;
  font-family:inherit; background:#FFFDFA; color:var(--text); outline:none; transition:border .2s;
}
input:focus,select:focus,textarea:focus{border-color:var(--pink);}
textarea{resize:vertical; min-height:70px;}
.btn{
  border:none; background:var(--pink); color:#fff; font-family:inherit; font-size:14.5px; font-weight:bold;
  padding:9px 20px; border-radius:999px; cursor:pointer; transition:all .2s; white-space:nowrap;
}
.btn:hover{background:var(--pink-d); transform:translateY(-1px); box-shadow:0 4px 10px rgba(232,127,168,.4);}
.btn.ghost{background:var(--pink-l); color:var(--pink-d);}
.btn.ghost:hover{background:#FBDAE7;}
.btn.small{padding:5px 12px; font-size:12.5px;}
.btn.green{background:var(--mint); color:#3E7A62;}
.btn.green:hover{background:#A8DCC7;}
.btn.danger{background:transparent; color:#E58A8A;}
.btn.danger:hover{background:#FDECEC;}
table{width:100%; border-collapse:collapse; font-size:13.5px;}
th{color:var(--muted); font-weight:normal; text-align:left; padding:8px 6px; border-bottom:2px dashed var(--line); white-space:nowrap;}
td{padding:8px 6px; border-bottom:1px solid #FBF2EA; vertical-align:middle;}
tr:last-child td{border-bottom:none;}
.tag{display:inline-block; padding:2px 10px; border-radius:999px; font-size:12px; white-space:nowrap;}
.tag.pink{background:var(--pink-l); color:var(--pink-d);}
.tag.mint{background:var(--mint-l); color:#3E7A62;}
.tag.yellow{background:var(--yellow-l); color:#B07A1E;}
.tag.purple{background:var(--purple-l); color:#7A5FB8;}
.tag.red{background:#FDECEC; color:#D66A6A;}
.tag.gray{background:#F4F0ED; color:var(--muted);}
/* 首页猫卡片 */
.cat-cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:14px;}
.cat-card{background:linear-gradient(150deg,#FFF,#FFF6F9); border:2px solid var(--pink-l); border-radius:18px; padding:14px; display:flex; gap:12px; align-items:center;}
.cat-avatar{width:56px; height:56px; border-radius:50%; object-fit:cover; border:3px solid var(--pink-l); background:var(--pink-l); flex:none;}
.cat-avatar.ph{display:flex; align-items:center; justify-content:center; font-size:26px;}
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px;}
.stat{border-radius:16px; padding:13px 15px;}
.stat .num{font-size:22px; font-weight:bold;}
.stat .lbl{font-size:12.5px; opacity:.75; margin-top:2px;}
.stat.p1{background:var(--pink-l);} .stat.p1 .num{color:var(--pink-d);}
.stat.p2{background:var(--mint-l);} .stat.p2 .num{color:#3E7A62;}
.stat.p3{background:var(--yellow-l);} .stat.p3 .num{color:#B07A1E;}
.stat.p4{background:var(--purple-l);} .stat.p4 .num{color:#7A5FB8;}
/* 库存条 */
.stockbar{height:9px; background:#F6EDE5; border-radius:99px; overflow:hidden; min-width:80px;}
.stockbar i{display:block; height:100%; background:linear-gradient(90deg,var(--pink),#FBC4D9); border-radius:99px;}
.stockbar.low i{background:linear-gradient(90deg,#F0B37E,#F6CFA4);}
/* 月度柱状图 */
.bars{display:flex; align-items:flex-end; gap:16px; height:130px; padding:6px 4px 0;}
.bar{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:5px; font-size:11.5px; color:var(--muted);}
.bar .bar-fill{width:70%; max-width:46px; background:linear-gradient(180deg,#FBC4D9,var(--pink)); border-radius:10px 10px 4px 4px; min-height:5px;}
.bar b{font-size:11.5px; color:var(--text); font-weight:normal;}
/* 体重曲线 */
.spark{width:100%; max-width:320px; height:84px; background:var(--pink-l); border-radius:14px; padding:6px;}
/* 喜爱度星星按钮 */
.like-btns{display:flex; gap:8px; flex-wrap:wrap;}
.like-btns label{margin:0; cursor:pointer;}
.like-btns input{display:none;}
.like-btns span{display:inline-block; padding:7px 15px; border-radius:999px; border:2px solid var(--line); font-size:13.5px; background:#FFFDFA; transition:all .2s;}
.like-btns input:checked+span{border-color:var(--pink); background:var(--pink-l); font-weight:bold;}
/* 成长时间线 */
.timeline{position:relative; padding-left:26px;}
.timeline::before{content:""; position:absolute; left:8px; top:6px; bottom:6px; width:3px; border-radius:3px; background:var(--line);}
.tl-item{position:relative; margin-bottom:16px;}
.tl-item::before{content:"🐾"; position:absolute; left:-26px; top:0; font-size:15px; background:var(--bg); padding:2px 0;}
.tl-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:5px;}
.tl-head b{font-size:15px;}
.photo-grid{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px;}
.photo-grid img{width:92px; height:92px; object-fit:cover; border-radius:14px; cursor:zoom-in; border:2px solid #fff; box-shadow:0 3px 8px rgba(0,0,0,.1); transition:transform .2s; background:#F3E3D8;}
.photo-grid img:hover{transform:scale(1.05);}
.pending-thumbs{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px;}
.pending-thumbs .th{position:relative;}
.pending-thumbs img{width:74px; height:74px; object-fit:cover; border-radius:12px;}
.pending-thumbs .rm{position:absolute; top:-7px; right:-7px; width:22px; height:22px; border-radius:50%; border:none; background:#E58A8A; color:#fff; cursor:pointer; font-size:12px; line-height:1;}
/* 弹窗 */
#lightbox{position:fixed; inset:0; z-index:900; background:rgba(91,74,68,.75); display:none; align-items:center; justify-content:center; cursor:zoom-out;}
#lightbox.show{display:flex;}
#lightbox img{max-width:88vw; max-height:88vh; border-radius:16px; border:5px solid #fff;}
.empty{padding:26px 10px; text-align:center; color:var(--muted); font-size:13.5px;}
.empty .big{font-size:38px; display:block; margin-bottom:8px;}
.remind{border-left:4px solid var(--pink); background:var(--pink-l); border-radius:0 14px 14px 0; padding:10px 14px; margin-bottom:10px; font-size:13.5px;}
.remind.overdue{border-color:#E58A8A; background:#FDECEC;}
footer{text-align:center; color:var(--muted); font-size:12.5px; margin-top:30px;}
footer .pawline{letter-spacing:6px; opacity:.5;}
.del-link{color:#E58A8A; cursor:pointer; font-size:12.5px; white-space:nowrap;}
.del-link:hover{text-decoration:underline;}
.edit-link{color:#7A5FB8; cursor:pointer; font-size:12.5px; white-space:nowrap; margin-right:8px;}
.edit-link:hover{text-decoration:underline;}
.scroll-x{overflow-x:auto;}
/* 云同步帮助 */
.steps{font-size:13.5px; line-height:1.9; background:var(--pink-l); border-radius:14px; padding:12px 16px; margin:10px 0;}
.housecode{font-size:26px; font-weight:bold; letter-spacing:4px; color:var(--pink-d); background:var(--pink-l); border:2px dashed var(--pink); border-radius:14px; padding:8px 18px; display:inline-block; margin:8px 0;}
/* ===== 手机适配：底部导航 ===== */
@media(max-width:640px){
  body{padding-bottom:96px;}
  header{padding:10px 14px; gap:8px;}
  nav{
    position:fixed; bottom:0; left:0; right:0; margin:0; z-index:100;
    background:rgba(255,255,255,.97); backdrop-filter:blur(8px);
    border-top:2px dashed var(--line); border-radius:20px 20px 0 0;
    padding:8px 10px calc(8px + env(safe-area-inset-bottom));
    flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start;
    box-shadow:0 -6px 18px rgba(150,110,90,.10);
  }
  nav::-webkit-scrollbar{display:none;}
  main{padding:0 12px; margin-top:14px;}
  .card{padding:14px 14px;}
  html{font-size:14px;}
}