:root{
  --bg:#FBF5EC;
  --card:#FFFFFF;
  --ink:#3D2E23;
  --ink-2:#8A7A6B;
  --accent:#E8582A;
  --accent-soft:#FBE3D8;
  --ok:#5A9E6F;
  --warn:#D9432F;
  --line:#EFE5D6;
  --radius:18px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg);color:var(--ink);
  max-width:520px;margin:0 auto;
  padding:calc(env(safe-area-inset-top) + 14px) 16px calc(env(safe-area-inset-bottom) + 28px);
  min-height:100vh;
}
#app{display:flex;flex-direction:column;gap:14px}

/* 顶栏 */
.topbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.brand{font-size:22px;font-weight:800;letter-spacing:.5px}
.brand span{color:var(--accent)}
.pet-chips{display:flex;gap:8px;flex:1;overflow-x:auto;padding:2px}
.chip{
  display:flex;align-items:center;gap:6px;white-space:nowrap;
  background:var(--card);border:1.5px solid var(--line);border-radius:999px;
  padding:6px 14px;font-size:14px;color:var(--ink-2);cursor:pointer;transition:.15s;
}
.chip.active{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);font-weight:700}
.btn-icon{
  width:36px;height:36px;border-radius:50%;border:1.5px dashed var(--accent);
  background:transparent;color:var(--accent);font-size:20px;cursor:pointer;flex-shrink:0;
}

/* 横幅 */
.banner{
  border-radius:var(--radius);padding:13px 16px;font-size:15px;line-height:1.5;
  background:var(--accent-soft);color:var(--ink);
}
.banner.good{background:#E3F0E7;color:#2F5E40}
.banner b{color:var(--warn)}
.banner.good b{color:var(--ok)}

/* 宠物卡 */
.pet-card{
  background:var(--card);border-radius:var(--radius);padding:16px;
  display:flex;align-items:center;gap:14px;box-shadow:0 2px 10px rgba(61,46,35,.05);
}
.avatar{
  width:64px;height:64px;border-radius:50%;flex-shrink:0;
  background:var(--accent-soft);display:flex;align-items:center;justify-content:center;
  font-size:34px;overflow:hidden;border:2px solid #F3D9C8;
}
.avatar img{width:100%;height:100%;object-fit:cover}
.pet-meta{flex:1;min-width:0}
.pet-name{font-size:19px;font-weight:800}
.pet-sub{font-size:13px;color:var(--ink-2);margin-top:3px}
.streak-box{text-align:center;flex-shrink:0;padding:0 4px}
.streak-num{font-size:26px;font-weight:800;color:var(--accent);line-height:1}
.streak-label{font-size:11px;color:var(--ink-2);margin-top:4px}

/* 分节 */
.section{display:flex;flex-direction:column;gap:10px}
.section-title{font-size:16px;font-weight:800}
.section-title .date{font-size:12px;color:var(--ink-2);font-weight:400;margin-left:8px}
.section-title .sub{font-size:12px;color:var(--ink-2);font-weight:400}

/* 打卡格 */
.task-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.task{
  background:var(--card);border-radius:var(--radius);border:1.5px solid transparent;
  padding:14px 6px;text-align:center;cursor:pointer;transition:.15s;
  display:flex;flex-direction:column;align-items:center;gap:6px;
}
.task .t-icon{font-size:26px;filter:grayscale(1) opacity(.45);transition:.15s}
.task .t-label{font-size:13px;color:var(--ink-2)}
.task.done{border-color:var(--ok);background:#F2F8F4}
.task.done .t-icon{filter:none}
.task.done .t-label{color:var(--ok);font-weight:700}
.task .t-check{font-size:11px;color:var(--ok);height:14px}

/* 周期任务 */
.p-task{
  background:var(--card);border-radius:var(--radius);padding:13px 15px;
  display:flex;align-items:center;gap:12px;margin-bottom:9px;
}
.p-task .p-icon{font-size:22px}
.p-task .p-body{flex:1;min-width:0}
.p-task .p-name{font-size:15px;font-weight:700}
.p-task .p-info{font-size:12px;color:var(--ink-2);margin-top:2px}
.p-task .p-info.overdue{color:var(--warn);font-weight:700}
.p-task .p-info.ok{color:var(--ok)}
.btn-sm{
  border:none;border-radius:999px;padding:8px 15px;font-size:13px;font-weight:700;
  background:var(--accent);color:#fff;cursor:pointer;
}
.btn-sm:active{opacity:.8}

/* 周报预览 */
.weekly-preview{
  background:var(--card);border-radius:var(--radius);padding:14px 16px;
  display:flex;gap:10px;align-items:center;justify-content:space-between;
}
.wp-stat{text-align:center;flex:1}
.wp-num{font-size:21px;font-weight:800}
.wp-num.hot{color:var(--accent)}
.wp-label{font-size:11px;color:var(--ink-2);margin-top:3px}
.wp-div{width:1px;height:32px;background:var(--line)}

.btn-primary{
  border:none;border-radius:999px;background:var(--accent);color:#fff;
  padding:14px;font-size:16px;font-weight:800;cursor:pointer;letter-spacing:1px;
}
.btn-primary:active{opacity:.85}
.btn-ghost{
  border:1.5px solid var(--line);background:var(--card);border-radius:999px;
  padding:11px;font-size:14px;color:var(--ink-2);cursor:pointer;width:100%;
}

.footer{text-align:center;font-size:13px;color:var(--ink-2);margin-top:6px}
.link{background:none;border:none;color:var(--ink-2);text-decoration:underline;font-size:13px;cursor:pointer}

/* 弹层 */
.mask{
  position:fixed;inset:0;background:rgba(61,46,35,.45);z-index:50;
  display:none;align-items:flex-end;justify-content:center;
}
.mask.show{display:flex}
.modal{
  background:var(--bg);border-radius:22px 22px 0 0;width:100%;max-width:520px;
  padding:22px 18px calc(env(safe-area-inset-bottom) + 22px);
  max-height:82vh;overflow-y:auto;
}
.modal h3{font-size:17px;margin-bottom:16px}
.field{margin-bottom:14px}
.field label{display:block;font-size:13px;color:var(--ink-2);margin-bottom:7px}
.field input[type=text],.field input[type=number],.field textarea{
  width:100%;border:1.5px solid var(--line);border-radius:12px;background:#fff;
  padding:11px 13px;font-size:15px;color:var(--ink);outline:none;font-family:inherit;
}
.field input:focus,.field textarea:focus{border-color:var(--accent)}
.seg{display:flex;gap:8px}
.seg button{
  flex:1;border:1.5px solid var(--line);background:#fff;border-radius:12px;
  padding:10px;font-size:14px;color:var(--ink-2);cursor:pointer;
}
.seg button.active{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);font-weight:700}
.emoji-row{display:flex;gap:8px;flex-wrap:wrap}
.emoji-row button{
  width:46px;height:46px;border-radius:12px;border:1.5px solid var(--line);
  background:#fff;font-size:24px;cursor:pointer;
}
.emoji-row button.active{border-color:var(--accent);background:var(--accent-soft)}
.photo-row{display:flex;align-items:center;gap:12px}
.photo-row .avatar{cursor:pointer;position:relative}
.photo-row .avatar::after{
  content:"换";position:absolute;bottom:-4px;right:-4px;background:var(--accent);
  color:#fff;font-size:10px;border-radius:999px;padding:2px 6px;
}
.modal-actions{display:flex;gap:10px;margin-top:18px}
.modal-actions .btn-primary{flex:1}
.modal-actions .btn-ghost{flex:1;width:auto}
.danger{color:var(--warn);font-size:13px;text-align:center;margin-top:14px;background:none;border:none;text-decoration:underline;cursor:pointer;width:100%}

/* 分享浮层 */
.share-mask{
  position:fixed;inset:0;background:rgba(40,28,20,.82);z-index:99;
  display:none;flex-direction:column;align-items:center;justify-content:center;padding:20px;
}
.share-mask.show{display:flex}
.share-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;max-height:88vh}
.share-wrap img{max-width:82vw;max-height:70vh;border-radius:14px;box-shadow:0 10px 40px rgba(0,0,0,.4)}
.share-tip{color:#F5E8DA;font-size:14px}
.share-actions{display:flex;gap:12px}
.share-wrap .btn-ghost{width:auto;padding:11px 34px;background:transparent;color:#F5E8DA;border-color:rgba(255,255,255,.35)}

.empty{
  text-align:center;padding:60px 20px;color:var(--ink-2);
}

/* 打卡月历 */
.calendar{background:var(--card);border-radius:var(--radius);padding:14px}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;font-size:15px}
.cal-nav{width:30px;height:30px;border-radius:50%;border:1.5px solid var(--line);background:#fff;color:var(--ink-2);font-size:16px;cursor:pointer;padding:0}
.cal-nav:disabled{opacity:.3}
.cal-week,.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal-week{margin-bottom:6px}
.cal-week span{text-align:center;font-size:11px;color:var(--ink-2)}
.cal-cell{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:9px;font-size:12px;color:var(--ink-2);background:#F6EFE7}
.cal-cell.h1{background:#F7DFCE}
.cal-cell.h2{background:#F3BC98;color:#fff}
.cal-cell.h3{background:#EE8D5A;color:#fff}
.cal-cell.h4{background:var(--accent);color:#fff;font-weight:700}
.cal-cell.f{opacity:.28}
.cal-cell.today{outline:2px solid var(--accent);outline-offset:1px;font-weight:700;color:var(--accent)}
.cal-cell.blank{background:transparent}
.empty .e-icon{font-size:52px;margin-bottom:14px}
.empty h2{font-size:19px;color:var(--ink);margin-bottom:8px}
.empty p{font-size:14px;line-height:1.6;margin-bottom:22px}