:root{
  --bg:#fff8f1;
  --surface:#fffdfa;
  --ink:#4b2a18;
  --muted:#8b7a6f;
  --coral:#ff745e;
  --coral-soft:#fff0ea;
  --line:#f0dfd1;
  --green:#5aa36c;
  --orange:#f3a536;
  --purple:#a776d2;
  --shadow:0 10px 28px rgba(116,74,42,.12);
  --status-strip:clamp(36px,10vw,46px);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#f4eee8;color:var(--ink)}
button,input,select,textarea{font:inherit}
button{border:0}

body{
  display:flex;
  justify-content:center;
  min-height:100dvh;
}

#app-shell{
  position:relative;
  width:min(100%,480px);
  min-height:100dvh;
  background:var(--bg);
  overflow-x:hidden;
  overflow-y:visible;
  box-shadow:0 0 40px rgba(59,35,22,.12);
}

#page-root{
  min-height:100dvh;
  padding-bottom:calc(118px + env(safe-area-inset-bottom));
  background:var(--bg);
}

.bottom-nav{
  position:fixed;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:min(100%,480px);
  height:calc(76px + env(safe-area-inset-bottom));
  padding:5px 6px env(safe-area-inset-bottom);
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:2px;
  background:rgba(255,253,250,.96);
  backdrop-filter:blur(16px);
  border-top:1px solid rgba(226,207,190,.75);
  z-index:50;
}

.nav-item{
  color:#746b65;
  background:transparent;
  border-radius:20px 20px 0 0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  font-size:11px;
  cursor:pointer;
  transition:.18s ease;
  -webkit-tap-highlight-color:transparent;
}

.nav-item .nav-icon{
  font-size:21px;
  line-height:1;
  font-weight:700;
}

.nav-item.active{
  color:var(--coral);
  background:linear-gradient(180deg,#fff6f1 0%,#fff0eb 100%);
  transform:translateY(-2px);
}

.nav-item:active{transform:scale(.94)}
.nav-item.active:active{transform:translateY(-2px) scale(.94)}

.home{
  box-shadow:inset 0 var(--status-strip) 0 var(--bg);
  position:relative;
  width:100%;
  aspect-ratio:941/1535;
  overflow:hidden;
  background-color:var(--bg);
  background-image:none;
}

.hotspot{
  position:absolute;
  background:transparent;
  border-radius:24px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .12s ease,background .12s ease;
}
.hotspot:active{
  background:rgba(255,116,94,.14);
  transform:scale(.975);
}
.hotspot:focus-visible{
  outline:3px solid rgba(255,116,94,.75);
  outline-offset:2px;
}

.notification-bell{overflow:visible}
.notification-bell::before{content:none;}
.notification-badge{
  position:absolute;
  top:-10%;
  right:-12%;
  min-width:22px;
  height:22px;
  padding:0 6px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:#ff745e;
  color:#fff;
  font-size:12px;
  font-weight:800;
  line-height:1;
  box-shadow:0 3px 8px rgba(217,95,73,.28);
  pointer-events:none;
}

.page{
  padding:calc(18px + env(safe-area-inset-top)) 18px 28px;
  min-height:calc(100dvh - 76px);
}

.page-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:18px;
}
.page-title{
  margin:0;
  font-size:28px;
  letter-spacing:.02em;
}
.avatar-chip{
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--surface);
  border:1px solid var(--line);
  padding:8px 12px;
  border-radius:999px;
  box-shadow:0 6px 18px rgba(110,75,48,.08);
}
.pet-avatar{
  width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;
  background:#fff1db;
  font-size:24px;
}
.switch-pet{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--ink);
  background:var(--surface);
  border:1.5px solid #e9cdb6;
  border-radius:999px;
  padding:10px 14px;
  cursor:pointer;
  transition:.15s;
}
.switch-pet:active{transform:scale(.96);background:#fff3eb}

.card{
  background:var(--surface);
  border:1px solid rgba(236,216,199,.9);
  border-radius:24px;
  padding:18px;
  box-shadow:var(--shadow);
}
.stack{display:grid;gap:14px}
.section-title{
  display:flex;align-items:center;gap:8px;
  margin:4px 0 10px;
  font-size:18px;font-weight:800;
}
.action-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.action-btn{
  min-height:86px;
  padding:14px;
  border-radius:20px;
  background:linear-gradient(145deg,#fff,#fff8f1);
  border:1px solid var(--line);
  color:var(--ink);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  cursor:pointer;
  box-shadow:0 6px 16px rgba(116,74,42,.07);
  transition:.15s;
}
.action-btn strong{font-size:16px}
.action-btn span{font-size:26px}
.action-btn:active{transform:scale(.96);box-shadow:none}

.list{display:grid;gap:10px}
.list-item{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 0;border-bottom:1px solid #f1e4d8;
}
.list-item:last-child{border-bottom:0}
.item-main{display:flex;align-items:center;gap:12px}
.item-icon{
  width:44px;height:44px;border-radius:14px;
  display:grid;place-items:center;font-size:23px;
  background:#fff0e9;
}
.item-copy strong{display:block;font-size:16px}
.item-copy small{color:var(--muted)}
.chevron{font-size:24px;color:#b8967f}

.calendar-box{
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:7px;
  text-align:center;
  margin-top:14px;
}
.day-name{font-size:12px;color:var(--muted)}
.day{
  aspect-ratio:1;
  display:grid;place-items:center;
  border-radius:50%;
  background:#fff;
  border:1px solid #f0e2d6;
}
.day.today{background:#fff0d8;border-color:#f2a53a;color:#8a4a12;font-weight:800}

.setting-row{
  width:100%;
  display:flex;align-items:center;justify-content:space-between;
  padding:15px 2px;
  background:transparent;
  color:var(--ink);
  border-bottom:1px solid #f0e2d6;
  cursor:pointer;
}
.setting-row:last-child{border-bottom:0}

.empty-hero{
  text-align:center;
  padding:32px 18px;
}
.empty-hero .big{font-size:58px}
.empty-hero h2{margin:10px 0 6px}
.empty-hero p{color:var(--muted);line-height:1.65;margin:0}

.toast{
  position:fixed;
  left:50%;bottom:96px;
  transform:translate(-50%,14px);
  background:rgba(55,39,29,.92);
  color:#fff;
  padding:10px 16px;
  border-radius:999px;
  font-size:14px;
  opacity:0;
  pointer-events:none;
  transition:.2s;
  z-index:100;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (min-width:481px){
  #app-shell{border-left:1px solid #ead9ca;border-right:1px solid #ead9ca}
}

@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important}
}

.bell{left:86.4%;top:4.6%;width:8.8%;height:5.7%}
.view-all{left:77%;top:24.5%;width:18%;height:4.4%}
.pet-1{left:5.5%;top:29%;width:31%;height:31.8%}
.pet-2{left:37.8%;top:29%;width:27.5%;height:31.8%}
.pet-3{left:67%;top:29%;width:27.2%;height:31.8%}
.reminder-1{left:5.2%;top:84.6%;width:70%;height:5.8%}
.reminder-2{left:5.2%;top:90.6%;width:70%;height:5.8%}




.records-screen{
  box-shadow:inset 0 var(--status-strip) 0 var(--bg);
  position:relative;
  width:100%;
  aspect-ratio:941/1535;
  margin:0;
  background:url("./assets/records-artwork.jpg") top center/100% 100% no-repeat;
}

.record-control{
  position:absolute;
  display:block;
  padding:0;
  border:0;
  background:transparent;
  border-radius:24px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .12s ease, box-shadow .15s ease, background .15s ease;
}

.record-control:active{transform:scale(.965)}
.record-control:focus-visible{
  outline:3px solid rgba(255,116,94,.85);
  outline-offset:2px;
}

.record-control.selected{
  background:transparent;
  box-shadow:inset 0 0 0 4px rgba(255,116,94,.78),0 5px 14px rgba(116,74,42,.13);
}

.rec-food-normal.selected,.rec-food-less.selected{
  box-shadow:inset 0 0 0 4px rgba(243,165,54,.9),0 5px 14px rgba(116,74,42,.13)
}
.rec-poop-normal.selected,.rec-poop-soft.selected,
.rec-pee-normal.selected,.rec-smell.selected{
  box-shadow:inset 0 0 0 4px rgba(76,151,91,.78),0 5px 14px rgba(116,74,42,.13)
}
.rec-bad-mood.selected,.rec-vomit.selected,.rec-diarrhea.selected,
.rec-skin.selected,.rec-cough.selected,.rec-other.selected{
  box-shadow:inset 0 0 0 4px rgba(255,116,94,.78),0 5px 14px rgba(116,74,42,.13)
}

.rec-back{left:3.8%;top:5.7%;width:10.5%;height:5.8%;border-radius:50%}
.rec-switch{left:69.4%;top:14.6%;width:25.6%;height:5.8%;border-radius:999px}

.rec-food-normal{left:30.6%;top:24.8%;width:30.3%;height:8.4%}
.rec-food-less{left:63.2%;top:24.8%;width:31.2%;height:8.4%}
.rec-water-normal{left:30.6%;top:34.2%;width:30.3%;height:8.4%}
.rec-water-less{left:63.2%;top:34.2%;width:31.2%;height:8.4%}

.rec-poop-normal{left:30.6%;top:45.7%;width:30.3%;height:8.4%}
.rec-poop-soft{left:63.2%;top:45.7%;width:31.2%;height:8.4%}
.rec-pee-normal{left:30.6%;top:55.2%;width:30.3%;height:8.4%}
.rec-smell{left:63.2%;top:55.2%;width:31.2%;height:8.4%}

.rec-bad-mood{left:30.6%;top:66.3%;width:20.2%;height:6.7%}
.rec-vomit{left:52.5%;top:66.3%;width:20.2%;height:6.7%}
.rec-diarrhea{left:74.4%;top:66.3%;width:20.1%;height:6.7%}
.rec-skin{left:30.6%;top:74.3%;width:20.2%;height:6.7%}
.rec-cough{left:52.5%;top:74.3%;width:20.2%;height:6.7%}
.rec-other{left:74.4%;top:74.3%;width:20.1%;height:6.7%}

.record-note-wrap{
  position:absolute;
  left:18.4%;
  top:82.6%;
  width:75.5%;
  height:5.5%;
  display:block;
}
.record-note-wrap textarea{
  width:100%;
  height:100%;
  resize:none;
  border:0;
  outline:0;
  background:rgba(255,253,250,.94);
  color:#4b2a18;
  border-radius:18px;
  padding:13px 58px 8px 15px;
  font-size:15px;
  line-height:1.4;
  box-shadow:inset 0 0 0 1.5px rgba(234,201,177,.78);
}
.record-note-wrap textarea:focus{
  box-shadow:inset 0 0 0 2.5px rgba(255,116,94,.72);
}
.record-note-wrap textarea::placeholder{color:#bba99d}
.record-count{
  position:absolute;
  right:13px;
  bottom:9px;
  color:#b49c8e;
  font-size:12px;
  pointer-events:none;
}

.rec-cancel{left:3.4%;top:91.5%;width:43.8%;height:5.8%;border-radius:999px}
.rec-save{left:50.6%;top:91.5%;width:44.8%;height:5.8%;border-radius:999px}

.rec-save:active{background:rgba(197,66,45,.14)}
.rec-cancel:active{background:rgba(120,90,70,.08)}

.record-pet-live{
  position:absolute;
  z-index:2;
  left:6.0%;
  top:12.8%;
  width:43%;
  min-height:7%;
  display:flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-radius:22px;
  background:rgba(255,253,250,.88);
  backdrop-filter:blur(4px);
  pointer-events:none;
}
.record-pet-emoji{
  width:46px;height:46px;
  border-radius:50%;
  display:grid;place-items:center;
  background:#fff2e3;
  font-size:29px;
}
.record-pet-live strong{display:block;font-size:17px}
.record-pet-live small{display:block;color:#7f7168;font-size:11px;margin-top:2px}

.sr-only{
  position:absolute!important;
  width:1px!important;height:1px!important;
  padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;border:0!important;
}



.health-screen{
  box-shadow:inset 0 var(--status-strip) 0 var(--bg);
  position:relative;
  width:100%;
  aspect-ratio:941/1535;
  background:url("./assets/health-artwork.jpg") top center/100% 100% no-repeat;
}

.health-hotspot{
  position:absolute;
  display:block;
  padding:0;
  border:0;
  background:transparent;
  border-radius:24px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .12s ease, background .12s ease, box-shadow .15s ease;
}
.health-hotspot:active{
  transform:scale(.97);
  background:rgba(255,116,94,.12);
}
.health-hotspot:focus-visible{
  outline:3px solid rgba(255,116,94,.82);
  outline-offset:2px;
}

/* 熱區定位：以裁切後的健康護照設計圖為基準 */
.he-switch{left:73.5%;top:4.5%;width:22.5%;height:5.6%;border-radius:999px}

.he-history-card{left:5.8%;top:28.7%;width:42.8%;height:16.8%}
.he-history-detail{left:18.2%;top:40.5%;width:28.4%;height:5.0%;border-radius:999px}

.he-visit-card{left:52.3%;top:28.7%;width:42.0%;height:16.8%}
.he-visit-detail{left:65.2%;top:40.5%;width:28.2%;height:5.0%;border-radius:999px}

.he-summary-overall{left:7.2%;top:51.7%;width:19.3%;height:9.6%}
.he-summary-vaccine{left:30.4%;top:51.7%;width:18.7%;height:9.6%}
.he-summary-deworm{left:52.8%;top:51.7%;width:18.8%;height:9.6%}
.he-summary-allergy{left:75.3%;top:51.7%;width:18.7%;height:9.6%}

.he-log-1{left:7.0%;top:68.8%;width:86.2%;height:6.0%}
.he-log-2{left:7.0%;top:75.0%;width:86.2%;height:6.0%}
.he-log-3{left:7.0%;top:81.0%;width:86.2%;height:6.3%}
.he-log-4{left:7.0%;top:87.3%;width:86.2%;height:6.1%}
.he-log-5{left:7.0%;top:93.4%;width:86.2%;height:5.5%}

.he-export{left:4.5%;top:99.0%;width:56.0%;height:5.3%;border-radius:999px}


.health-pet-live{
  position:absolute;
  z-index:2;
  left:5.5%;
  top:10.2%;
  width:46%;
  min-height:11%;
  display:flex;
  align-items:center;
  gap:8px;
  padding:9px 10px;
  border-radius:24px;
  background:rgba(255,253,250,.88);
  backdrop-filter:blur(5px);
  pointer-events:none;
}
.health-pet-emoji{
  width:54px;height:54px;
  border-radius:50%;
  display:grid;place-items:center;
  background:#fff1e3;
  font-size:33px;
}
.health-pet-live strong{display:block;font-size:18px}
.health-pet-live small{display:block;color:#7f7168;font-size:11px;margin-top:3px}

.health-detail-panel{
  margin:-6px 14px 16px;
  max-height:0;
  overflow:hidden;
  opacity:0;
  transition:max-height .25s ease,opacity .2s ease;
}
.health-detail-panel.open{
  max-height:380px;
  opacity:1;
}
.health-detail-card{
  background:#fffdfa;
  border:1px solid #eedacb;
  border-radius:24px;
  padding:18px;
  box-shadow:0 12px 28px rgba(116,74,42,.12);
}
.health-detail-head{
  display:flex;
  align-items:center;
  gap:12px;
}
.health-detail-icon{
  width:48px;height:48px;
  display:grid;place-items:center;
  background:#fff0e7;
  border-radius:15px;
  font-size:26px;
}
.health-detail-head strong{display:block;font-size:18px}
.health-detail-head small{display:block;color:#8b7a6f;margin-top:3px}
.detail-close{
  margin-left:auto;
  width:36px;height:36px;
  border-radius:50%;
  background:#fff0ea;
  color:#81513a;
  font-size:24px;
  cursor:pointer;
}
.health-detail-card p{
  margin:14px 0;
  color:#6f6158;
  line-height:1.7;
}
.detail-action{
  width:100%;
  padding:12px;
  border-radius:16px;
  background:#fff1eb;
  color:#d95f49;
  font-weight:700;
  cursor:pointer;
}

.health-subpage{
  min-height:calc(100dvh - 76px);
  padding:calc(18px + env(safe-area-inset-top)) 16px 30px;
  background:linear-gradient(180deg,#fffaf5 0%,#fff6ef 100%);
}
.subpage-header{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:18px;
}
.subpage-header h1{margin:0;font-size:25px}
.subpage-header p{margin:4px 0 0;color:#8b7a6f}
.subpage-back{
  width:45px;height:45px;
  border-radius:50%;
  background:#fffdfa;
  border:1px solid #ead6c5;
  color:#75462d;
  font-size:33px;
  line-height:1;
  cursor:pointer;
  box-shadow:0 5px 14px rgba(116,74,42,.08);
}
.history-filter{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  padding:5px;
  margin-bottom:14px;
  background:#f3e6dc;
  border-radius:18px;
}
.history-filter button{
  padding:11px;
  border-radius:14px;
  background:transparent;
  color:#76675d;
  cursor:pointer;
}
.history-filter button.active{
  background:#fff;
  color:#e56650;
  font-weight:800;
  box-shadow:0 4px 12px rgba(116,74,42,.08);
}
.history-list{display:grid;gap:12px}
.history-card{
  display:flex;
  gap:13px;
  padding:16px;
  border-radius:22px;
  background:#fffdfa;
  border:1px solid #eedccf;
  box-shadow:0 8px 20px rgba(116,74,42,.08);
}
.history-card-icon{
  flex:0 0 auto;
  width:48px;height:48px;
  display:grid;place-items:center;
  border-radius:15px;
  background:#fff0e8;
  font-size:21px;
}
.history-card-copy{min-width:0;flex:1}
.history-card-title{
  display:flex;
  justify-content:space-between;
  gap:8px;
}
.history-card-title strong{font-size:17px}
.history-card-title span{font-size:12px;color:#9a8779;white-space:nowrap}
.history-card-copy small{display:block;margin-top:3px;color:#e27656}
.history-card-copy p{
  margin:9px 0 0;
  color:#74665d;
  line-height:1.6;
  font-size:14px;
}
.history-empty{
  text-align:center;
  padding:48px 20px;
  border-radius:24px;
  background:#fffdfa;
  color:#817167;
}
.history-empty div{font-size:52px}
.history-empty h2{font-size:20px;margin:12px 0 5px}
.history-empty p{margin:0}

.export-modal{
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  background:rgba(51,35,25,.38);
  padding:16px;
}
.export-sheet{
  width:min(100%,460px);
  padding:10px 18px calc(18px + env(safe-area-inset-bottom));
  border-radius:28px 28px 20px 20px;
  background:#fffdfa;
  box-shadow:0 -12px 40px rgba(42,27,18,.2);
  animation:sheetUp .2s ease-out;
}
@keyframes sheetUp{
  from{transform:translateY(24px);opacity:0}
}
.export-grabber{
  width:44px;height:5px;
  margin:0 auto 16px;
  border-radius:99px;
  background:#dbcabc;
}
.export-sheet h2{margin:0;text-align:center}
.export-sheet p{text-align:center;color:#8b7a6f}
.export-sheet button{
  width:100%;
  padding:15px;
  margin-top:10px;
  border-radius:17px;
  background:#fff1e9;
  color:#5d3a27;
  font-weight:800;
  cursor:pointer;
}
.export-sheet button:nth-of-type(2){
  background:#ff745e;
  color:#fff;
}
.export-sheet .export-cancel{
  background:#f3eee9;
  color:#71655d;
}
.export-sheet button:disabled{opacity:.6}



.calendar-screen{
  box-shadow:inset 0 var(--status-strip) 0 var(--bg);
  position:relative;
  width:100%;
  aspect-ratio:941/1535;
  background:url("./assets/calendar-artwork.jpg") top center/100% 100% no-repeat;
}

.calendar-hotspot,
.calendar-day-btn{
  position:absolute;
  display:block;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .12s ease, background .12s ease, box-shadow .15s ease;
}

.calendar-hotspot{border-radius:24px}
.calendar-day-btn{border-radius:14px}

.calendar-hotspot:active,
.calendar-day-btn:active{
  transform:scale(.97);
  background:rgba(255,116,94,.12);
}

.calendar-hotspot:focus-visible,
.calendar-day-btn:focus-visible{
  outline:3px solid rgba(255,116,94,.82);
  outline-offset:2px;
}

.calendar-pet-live{
  position:absolute;
  z-index:2;
  left:6.1%;
  top:24.8%;
  width:29%;
  min-height:7.8%;
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:24px;
  background:rgba(255,253,250,.78);
  backdrop-filter:blur(4px);
  pointer-events:none;
}

.calendar-pet-emoji{
  width:48px;height:48px;
  border-radius:50%;
  display:grid;place-items:center;
  background:#fff1e3;
  font-size:30px;
}
.calendar-pet-live strong{display:block;font-size:17px}
.calendar-pet-live small{display:block;color:#7f7168;font-size:11px;margin-top:2px}

.ca-bell{left:86.2%;top:4.8%;width:8.5%;height:5.4%;border-radius:50%}

.ca-pet-main{left:5.0%;top:24.4%;width:31.8%;height:8.5%;border-radius:999px}
.ca-pet-0{left:41.2%;top:25.0%;width:9.6%;height:6.7%;border-radius:50%}
.ca-pet-1{left:50.7%;top:25.0%;width:9.6%;height:6.7%;border-radius:50%}
.ca-pet-2{left:60.2%;top:25.0%;width:9.6%;height:6.7%;border-radius:50%}
.ca-switch{left:70.5%;top:24.5%;width:25.0%;height:8.4%;border-radius:999px}

.ca-prev-month{left:23.8%;top:35.1%;width:7.0%;height:4.5%;border-radius:50%}
.ca-next-month{left:66.0%;top:35.1%;width:7.0%;height:4.5%;border-radius:50%}
.ca-today{left:81.3%;top:35.0%;width:14.0%;height:5.4%;border-radius:999px}

.ca-add-schedule{left:4.0%;top:79.2%;width:91.0%;height:8.4%;border-radius:24px}
.ca-view-all{left:78.2%;top:90.7%;width:17.2%;height:4.0%}

.ca-row-1{left:4.5%;top:94.0%;width:90.7%;height:8.0%}
.ca-row-2{left:4.5%;top:102.2%;width:90.7%;height:8.0%}
.ca-row-3{left:4.5%;top:110.3%;width:90.7%;height:7.2%}

.ca-remind-1{left:72.3%;top:95.2%;width:18.3%;height:4.8%;border-radius:999px}
.ca-remind-2{left:72.3%;top:103.4%;width:18.3%;height:4.8%;border-radius:999px}
.ca-remind-3{left:72.3%;top:111.4%;width:18.3%;height:4.8%;border-radius:999px}


.calendar-day-btn.selected{
  background:rgba(255,185,94,.22);
  box-shadow:inset 0 0 0 2px rgba(241,157,47,.95);
}
.calendar-day-btn.has-schedule::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:2px;
  width:5px;height:5px;
  transform:translateX(-50%);
  border-radius:50%;
  background:#ff745e;
}

.calendar-hotspot.reminder-active{
  background:rgba(255,189,77,.2);
  box-shadow:inset 0 0 0 2px rgba(240,153,28,.72);
}

.day-agenda{
  margin:12px 14px 20px;
  padding:17px;
  border-radius:24px;
  background:#fffdfa;
  border:1px solid #eedbcd;
  box-shadow:0 10px 26px rgba(116,74,42,.1);
}
.day-agenda-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:13px;
}
.day-agenda-head small{color:#9b887a}
.day-agenda-head h2{margin:2px 0 0;font-size:22px}
.day-agenda-head button,
.all-add-btn{
  padding:10px 13px;
  border-radius:999px;
  background:#fff0e9;
  color:#de624c;
  font-weight:800;
  cursor:pointer;
}
.day-agenda-list{display:grid;gap:10px}
.day-empty{
  text-align:center;
  padding:24px 10px;
  color:#7e6d62;
}
.day-empty div{font-size:42px}
.day-empty strong{display:block;margin-top:6px}
.day-empty p{margin:6px 0 0;font-size:13px;line-height:1.5}

.schedule-card{
  display:flex;
  gap:11px;
  align-items:flex-start;
  padding:13px;
  border-radius:18px;
  background:#fff8f2;
  border:1px solid #f1dfd1;
}
.schedule-card-icon{
  width:43px;height:43px;
  flex:0 0 auto;
  border-radius:14px;
  background:#fff0e8;
  display:grid;place-items:center;
  font-size:22px;
}

.schedule-card-main{
  flex:1;
  min-width:0;
  display:flex;
  gap:11px;
  align-items:flex-start;
  padding:0;
  margin:0;
  background:transparent;
  border:0;
  text-align:left;
  color:inherit;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.schedule-card-main:focus-visible{
  outline:2px solid #ef8b72;
  outline-offset:2px;
  border-radius:14px;
}
.schedule-card-main:active{
  transform:scale(.99);
}
.schedule-card-copy{flex:1;min-width:0}
.schedule-card-title{
  display:flex;
  justify-content:space-between;
  gap:8px;
}
.schedule-card-title strong{font-size:16px}
.schedule-card-title span{font-size:12px;color:#a08778}
.schedule-card-copy small{display:block;margin-top:2px;color:#e06c51}
.schedule-card-copy p{margin:7px 0 0;color:#776960;font-size:13px;line-height:1.5}
.schedule-reminder-toggle{
  width:38px;height:38px;
  flex:0 0 auto;
  border-radius:50%;
  background:#f2ece7;
  cursor:pointer;
}
.schedule-reminder-toggle.active{background:#fff0cf}

.schedule-modal{
  position:fixed;
  inset:0;
  z-index:240;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:14px;
  background:rgba(48,32,23,.42);
}
.schedule-form{
  width:min(100%,470px);
  max-height:92dvh;
  overflow:auto;
  padding:19px;
  border-radius:28px 28px 20px 20px;
  background:#fffdfa;
  box-shadow:0 -14px 40px rgba(43,27,18,.22);
  animation:sheetUp .2s ease-out;
}
.schedule-form-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:14px;
}
.schedule-form-head h2{margin:0}
.schedule-form-head p{margin:4px 0 0;color:#8b7a6f}
.modal-close{
  width:38px;height:38px;
  border-radius:50%;
  background:#f4ece6;
  color:#6f5342;
  font-size:24px;
  cursor:pointer;
}
.schedule-form label{
  display:grid;
  gap:6px;
  margin-top:12px;
  color:#684a39;
  font-weight:700;
}
.schedule-form input,
.schedule-form select,
.schedule-form textarea{
  width:100%;
  padding:12px 13px;
  border:1px solid #ead7c7;
  border-radius:14px;
  background:#fffaf6;
  color:#4b2a18;
  outline:none;
}
.schedule-form textarea{min-height:78px;resize:vertical}
.schedule-form input:focus,
.schedule-form select:focus,
.schedule-form textarea:focus{border-color:#ff8c76;box-shadow:0 0 0 3px rgba(255,116,94,.12)}
.reminder-check{
  grid-template-columns:auto 1fr!important;
  align-items:center;
}
.reminder-check input{width:20px;height:20px}
.schedule-form-actions{
  display:flex;
  gap:8px;
  margin-top:18px;
}
.schedule-form-actions button{
  flex:1;
  padding:12px 10px;
  border-radius:15px;
  font-weight:800;
  cursor:pointer;
}
.primary-btn{background:#ff745e;color:#fff}
.secondary-btn{background:#f2ece7;color:#66564c}
.danger-btn{background:#fff0ee;color:#d84e45}

.all-schedules-page{
  min-height:calc(100dvh - 76px);
  padding:calc(18px + env(safe-area-inset-top)) 15px 28px;
  background:linear-gradient(180deg,#fffaf5 0%,#fff5ee 100%);
}
.all-add-btn{
  margin-left:auto;
  width:43px;height:43px;
  padding:0;
  font-size:24px;
}
.all-schedules-list{display:grid;gap:10px}
.all-schedule-row{
  width:100%;
  display:flex;
  align-items:center;
  gap:11px;
  padding:13px;
  border-radius:20px;
  background:#fffdfa;
  border:1px solid #eedbce;
  box-shadow:0 7px 18px rgba(116,74,42,.07);
  text-align:left;
  cursor:pointer;
}
.all-date{
  width:47px;
  text-align:center;
}
.all-date strong{display:block;font-size:17px;color:#e16c51}
.all-date small{color:#8f7e72}
.all-icon{
  width:42px;height:42px;
  display:grid;place-items:center;
  border-radius:13px;
  background:#fff0e8;
  font-size:21px;
}
.all-copy{flex:1;min-width:0}
.all-copy strong{display:block}
.all-copy small{color:#8f7e72}
.all-reminder{font-size:21px}



.settings-screen{
  box-shadow:inset 0 var(--status-strip) 0 var(--bg);
  position:relative;
  width:100%;
  aspect-ratio:941/1535;
  background:url("./assets/settings-artwork.jpg") top center/100% 100% no-repeat;
}

.settings-hotspot{
  position:absolute;
  display:block;
  padding:0;
  border:0;
  background:transparent;
  border-radius:24px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:transform .12s ease, background .12s ease, box-shadow .15s ease;
}
.settings-hotspot:active{
  transform:scale(.97);
  background:rgba(255,116,94,.12);
}
.settings-hotspot:focus-visible{
  outline:3px solid rgba(255,116,94,.82);
  outline-offset:2px;
}

.se-bell{left:86.2%;top:4.8%;width:8.5%;height:5.4%;border-radius:50%}
.se-profile-card{left:3.0%;top:28.1%;width:94.0%;height:13.5%;border-radius:32px}

.se-account-title{left:3.5%;top:43.0%;width:25%;height:3.2%}
.se-personal{left:3.2%;top:47.1%;width:92.4%;height:4.9%}
.se-pets{left:3.2%;top:52.0%;width:92.4%;height:4.9%}
.se-notify{left:3.2%;top:56.9%;width:92.4%;height:4.9%}

.se-pref-title{left:3.5%;top:62.0%;width:22%;height:3.2%}
.se-theme{left:3.2%;top:66.1%;width:92.4%;height:4.9%}
.se-language{left:3.2%;top:71.0%;width:92.4%;height:4.9%}
.se-sync{left:3.2%;top:75.9%;width:92.4%;height:4.9%}
.se-export{left:3.2%;top:80.8%;width:92.4%;height:4.9%}
.se-clear{left:3.2%;top:85.7%;width:92.4%;height:4.9%}

.se-about-title{left:3.5%;top:90.5%;width:22%;height:3.2%}
.se-about-app{left:3.2%;top:94.4%;width:92.4%;height:4.9%}
.se-terms{left:3.2%;top:99.3%;width:92.4%;height:4.9%}
.se-privacy{left:3.2%;top:104.2%;width:92.4%;height:4.9%}
.se-contact{left:3.2%;top:109.1%;width:92.4%;height:4.9%}


:root[data-theme="green"]{--coral:#58a56f;--coral-soft:#edf8f0}
:root[data-theme="blue"]{--coral:#5d91c9;--coral-soft:#edf5fc}
:root[data-theme="purple"]{--coral:#9671c4;--coral-soft:#f3eef9}

.settings-profile-live{
  position:absolute;z-index:2;left:7%;top:29%;width:52%;min-height:10%;
  display:flex;align-items:center;gap:12px;padding:10px;border-radius:24px;
  background:rgba(255,253,250,.82);backdrop-filter:blur(5px);pointer-events:none;
}
.settings-profile-avatar{
  width:54px;height:54px;display:grid;place-items:center;border-radius:50%;
  background:#fff1e4;font-size:21px;
}
.settings-profile-live strong{display:block;font-size:18px}
.settings-profile-live small{display:block;color:#817167;margin-top:4px;font-size:11px}

.settings-modal{
  position:fixed;inset:0;z-index:260;display:flex;justify-content:center;
  align-items:flex-end;padding:14px;background:rgba(49,32,22,.42);
}
.settings-sheet{
  width:min(100%,470px);max-height:90dvh;overflow:auto;padding:19px;
  border-radius:28px 28px 20px 20px;background:#fffdfa;
  box-shadow:0 -14px 42px rgba(44,27,17,.22);animation:sheetUp .2s ease-out;
}
.settings-sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}
.settings-sheet-head h2{margin:0}
.settings-sheet-head button{
  width:38px;height:38px;border-radius:50%;background:#f3ebe5;color:#73533f;
  font-size:24px;cursor:pointer;
}

.settings-form{display:grid;gap:13px}
.settings-form label{display:grid;gap:6px;color:#674a39;font-weight:700}
.settings-form input,.settings-form select,.settings-form textarea{
  width:100%;padding:12px 13px;border:1px solid #ead7c7;border-radius:14px;
  background:#fffaf6;color:#4b2a18;outline:none;
}
.settings-form input:focus,.settings-form select:focus,.settings-form textarea:focus{
  border-color:var(--coral);box-shadow:0 0 0 3px rgba(255,116,94,.12);
}
.settings-primary{
  width:100%;padding:13px;margin-top:4px;border-radius:15px;
  background:var(--coral);color:#fff;font-weight:800;cursor:pointer;
}

.pet-manager-list{display:grid;gap:8px;margin-bottom:14px}
.pet-manager-row{
  display:flex;align-items:center;gap:9px;padding:11px;border:1px solid #eedbcf;
  border-radius:18px;background:#fff9f4;
}
.pet-manager-emoji{
  width:42px;height:42px;display:grid;place-items:center;border-radius:13px;
  background:#fff0e7;font-size:21px;
}
.pet-manager-copy{flex:1;min-width:0}
.pet-manager-copy strong,.pet-manager-copy small{display:block}
.pet-manager-copy small{color:#8d7b70;font-size:11px}
.pet-manager-row button{
  padding:8px 9px;border-radius:12px;background:#f2ebe5;color:#67564b;cursor:pointer;
}
.pet-manager-row button.active{background:var(--coral-soft);color:var(--coral)}
.pet-manager-row button:disabled{opacity:.4}

.theme-options,.language-options,.export-data-options{display:grid;gap:10px}
.theme-options button,.language-options button,.export-data-options button{
  display:flex;align-items:center;gap:11px;width:100%;padding:14px;border-radius:16px;
  background:#fff8f3;border:1px solid #eedbcf;color:#574033;text-align:left;cursor:pointer;
}
.theme-options button.active,.language-options button.active{
  border-color:var(--coral);box-shadow:0 0 0 2px rgba(255,116,94,.12);
}
.theme-options span{
  width:26px;height:26px;border-radius:50%;box-shadow:inset 0 0 0 2px rgba(255,255,255,.7);
}
.settings-hint{color:#8d7b70;font-size:13px;line-height:1.6}

.setting-toggle{
  grid-template-columns:1fr auto!important;align-items:center;padding:12px;
  border-radius:14px;background:#fff8f3;
}
.setting-toggle input{width:22px;height:22px}

.danger-panel{text-align:center}
.danger-panel p{color:#7d6b60;line-height:1.7}
.settings-danger{
  width:100%;padding:13px;border-radius:15px;background:#d9504a;
  color:#fff;font-weight:800;cursor:pointer;
}
.settings-info p{line-height:1.8;color:#6f6057}


/* 修正頂部圖片來源殘留的黑角 */
.home,
.records-screen,
.health-screen,
.calendar-screen,
.settings-screen{
  box-shadow:inset 0 var(--status-strip) 0 var(--bg);
  isolation:isolate;
}

.home::before,
.home::after,
.records-screen::before,
.records-screen::after,
.settings-screen::before,
.settings-screen::after{
  content:"";
  position:absolute;
  top:0;
  width:28px;
  height:28px;
  background:var(--bg);
  z-index:1;
  pointer-events:none;
}

.home::before,
.records-screen::before,
.settings-screen::before{
  left:0;
}

.home::after,
.records-screen::after,
.settings-screen::after{
  right:0;
}


/* v72：首頁全頁穩定拆層，頂部元素改為獨立圖層 */
.home-title-art,
.home-logo-art,
.home-hero-art{
  position:absolute;
  z-index:4;
  display:block;
  height:auto;
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}
.home-title-art{
  left:50%;
  top:5.6%;
  width:8.8%;
  transform:translateX(-50%);
}
.home-logo-art{
  left:5.1%;
  top:10.0%;
  width:42.6%;
}
.home-hero-art{
  right:5.3%;
  top:11.2%;
  width:42.3%;
}
.home-top-bell{
  position:absolute;
  z-index:8;
  right:5.2%;
  top:5.3%;
  width:6.9%;
  aspect-ratio:67/70;
  border-radius:50%;
  background:transparent;
  cursor:pointer;
}
.home-top-bell::after{
  content:"";
  position:absolute;
  inset:0;
  background:url("./assets/home-bell.png") center/contain no-repeat;
  pointer-events:none;
}
.home-top-bell:active::after{transform:scale(.97)}
.home-top-bell .notification-badge,
.home-top-bell.notification-badge{z-index:2}

/* v15 首頁毛孩總覽：真實橫向滑動元件 */
.home-pet-overview{
  position:absolute;
  z-index:5;
  left:3.2%;
  top:25.8%;
  width:93.6%;
  height:39.8%;
  padding:3.2% 4.2% 2.2%;
  border-radius:32px;
  background:rgba(255,253,250,.985);
  border:1px solid rgba(234,216,203,.95);
  box-shadow:0 8px 24px rgba(116,74,42,.10);
  overflow:hidden;
}
.home-pet-heading{
  height:9.5%;
  display:flex;
  align-items:center;
  gap:7px;
  color:#4b2a18;
  font-size:clamp(14px,4.2vw,20px);
}
.home-pet-heading span{font-size:1.05em}
.home-pet-heading strong{font-weight:900}
.home-pet-viewport{
  position:absolute;
  left:6.6%;
  right:6.6%;
  top:13%;
  bottom:10.5%;
  overflow:hidden;
  touch-action:pan-y;
}
.home-pet-track{
  height:100%;
  display:flex;
  transform:translateX(var(--pet-offset));
  transition:transform .28s ease;
}
.home-pet-card{
  position:relative;
  flex:0 0 var(--pet-card-width);
  height:100%;
  margin:0;
  padding:8% 3% 4%;
  display:flex;
  flex-direction:column;
  align-items:center;
  color:#4b2a18;
  background:transparent;
  cursor:pointer;
  border-radius:22px;
  -webkit-tap-highlight-color:transparent;
}
.home-pet-card::before{
  content:"";
  position:absolute;
  inset:2px 4px;
  z-index:-1;
  border-radius:22px;
  border:1.5px solid rgba(138,115,98,.14);
  background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,250,245,.72));
}
.home-pet-card.tone-green::before{background:linear-gradient(180deg,#f5fcf7,#eff8f1);border-color:#c7e0cd}
.home-pet-card.tone-orange::before{background:linear-gradient(180deg,#fffaf0,#fff5e5);border-color:#ecd9ae}
.home-pet-card.tone-purple::before{background:linear-gradient(180deg,#fbf8ff,#f5effc);border-color:#dbc9ec}
.home-pet-card.tone-blue::before{background:linear-gradient(180deg,#f6fbff,#edf5fb);border-color:#cbdce9}
.home-pet-card:active{transform:scale(.98)}
.home-pet-card.is-active::before{box-shadow:inset 0 0 0 2px rgba(90,163,108,.28),0 5px 14px rgba(116,74,42,.08)}
.home-current-badge{
  position:absolute;
  top:2.5%;
  left:6%;
  z-index:3;
  padding:3px 8px;
  border-radius:999px;
  background:#58a56f;
  color:#fff;
  font-size:clamp(9px,2.5vw,12px);
  box-shadow:0 3px 8px rgba(63,134,82,.2);
}
.home-pet-avatar{
  width:clamp(58px,17vw,82px);
  height:clamp(58px,17vw,82px);
  margin-top:1%;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(255,255,255,.95);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.9),0 5px 14px rgba(116,74,42,.10);
  font-size:clamp(35px,10vw,50px);
}
.home-pet-card strong{margin-top:5%;font-size:clamp(14px,4.1vw,20px);line-height:1.1}
.home-pet-card small{margin-top:2%;font-size:clamp(9px,2.6vw,12px);color:#5f5047}
.home-record-state{
  width:88%;
  margin-top:auto;
  padding:7px 3px;
  border-radius:12px;
  background:rgba(255,255,255,.62);
  font-size:clamp(8px,2.4vw,11px);
  white-space:nowrap;
}
.home-health-state{
  margin-top:5%;
  max-width:92%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:clamp(8px,2.5vw,12px);
  color:#4d8f5c;
}
.home-carousel-arrow{
  position:absolute;
  z-index:8;
  top:47%;
  width:30px;
  height:48px;
  transform:translateY(-50%);
  display:grid;
  place-items:center;
  border-radius:999px;
  background:rgba(255,249,243,.94);
  color:#875735;
  border:1px solid rgba(217,183,153,.85);
  box-shadow:0 5px 12px rgba(116,74,42,.10);
  font-size:30px;
  line-height:1;
  cursor:pointer;
}
.home-carousel-prev{left:1.2%}
.home-carousel-next{right:1.2%}
.home-carousel-arrow:active{transform:translateY(-50%) scale(.92)}
.home-pet-dots{
  position:absolute;
  left:50%;
  bottom:2.4%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  max-width:72%;
  overflow:hidden;
}
.home-pet-dot{
  width:7px;
  height:7px;
  flex:0 0 auto;
  padding:0;
  border-radius:50%;
  background:#efe0d1;
  cursor:pointer;
}
.home-pet-dot.active{width:9px;height:9px;background:#f28a50}

@media (max-width:370px){
  .home-pet-overview{padding-left:3.4%;padding-right:3.4%}
  .home-pet-viewport{left:7.5%;right:7.5%}
  .home-carousel-arrow{width:26px;height:42px;font-size:26px}
  .home-pet-card{padding-left:1.5%;padding-right:1.5%}
}

/* v18：移除按壓粉紅遮罩，並依目前正式素材重新校正熱區 */
button,
.hotspot,
.record-control,
.health-hotspot,
.calendar-hotspot,
.calendar-day-btn,
.settings-hotspot,
.home-pet-card,
.home-carousel-arrow,
.home-pet-dot{
  -webkit-tap-highlight-color:transparent!important;
}
.hotspot:active,
.health-hotspot:active,
.calendar-hotspot:active,
.calendar-day-btn:active,
.settings-hotspot:active{
  background:transparent!important;
  box-shadow:none!important;
  transform:none!important;
}
.home-pet-card:active,
.home-carousel-arrow:active,
.record-control:active{
  transform:none!important;
}

/* 已重新製作且沒有系統狀態列的三個頁面，不再用頂部遮罩，避免切到鈴鐺與線條 */
.home,
.calendar-screen,
.settings-screen{
  box-shadow:none!important;
}

/* 首頁：鈴鐺、四個快捷入口、近期提醒列 */
.bell{left:86.8%!important;top:5.7%!important;width:7.2%!important;height:4.6%!important;border-radius:50%!important}
.reminder-1{left:5.3%!important;top:86.0%!important;width:68.0%!important;height:5.8%!important;border-radius:999px!important}
.reminder-2{left:5.3%!important;top:92.1%!important;width:68.0%!important;height:5.8%!important;border-radius:999px!important}

/* 行事曆：上方控制列 */
.ca-bell{left:87.2%!important;top:3.0%!important;width:7.0%!important;height:5.5%!important}
.ca-pet-main{left:5.3%!important;top:22.8%!important;width:33.5%!important;height:6.3%!important}
.ca-pet-0{left:40.6%!important;top:23.2%!important;width:9.8%!important;height:6.0%!important}
.ca-pet-1{left:50.4%!important;top:23.2%!important;width:9.8%!important;height:6.0%!important}
.ca-pet-2{left:60.2%!important;top:23.2%!important;width:9.8%!important;height:6.0%!important}
.ca-switch{left:70.1%!important;top:23.8%!important;width:22.0%!important;height:4.9%!important;border-radius:999px!important}
.ca-prev-month{left:25.2%!important;top:33.0%!important;width:5.0%!important;height:3.5%!important}
.ca-next-month{left:64.4%!important;top:33.0%!important;width:5.0%!important;height:3.5%!important}
.ca-today{left:80.6%!important;top:32.7%!important;width:11.2%!important;height:3.7%!important}
.ca-add-schedule{left:5.0%!important;top:65.3%!important;width:87.0%!important;height:7.3%!important;border-radius:24px!important}
.ca-view-all{left:76.2%!important;top:74.7%!important;width:15.2%!important;height:3.5%!important}
.ca-row-1{left:5.0%!important;top:78.3%!important;width:87.0%!important;height:7.2%!important}
.ca-row-2{left:5.0%!important;top:86.0%!important;width:87.0%!important;height:7.2%!important}
.ca-row-3{left:5.0%!important;top:93.6%!important;width:87.0%!important;height:6.4%!important}
.ca-remind-1{left:67.4%!important;top:80.2%!important;width:16.6%!important;height:4.1%!important}
.ca-remind-2{left:67.4%!important;top:87.9%!important;width:16.6%!important;height:4.1%!important}
.ca-remind-3{left:67.4%!important;top:95.4%!important;width:16.6%!important;height:4.1%!important}

/* 紀錄頁：返回、切換毛孩與底部按鈕 */
.rec-back{left:4.0%!important;top:6.1%!important;width:8.5%!important;height:5.2%!important}
.rec-switch{left:68.8%!important;top:15.7%!important;width:25.0%!important;height:4.8%!important}
.rec-cancel{left:3.8%!important;top:93.2%!important;width:42.7%!important;height:5.4%!important}
.rec-save{left:50.5%!important;top:93.2%!important;width:44.5%!important;height:5.4%!important}

/* 設定頁：鈴鐺、個人主卡與各列 */
.se-bell{left:87.2%!important;top:4.0%!important;width:7.0%!important;height:5.2%!important}
.se-profile-card{left:3.0%!important;top:23.4%!important;width:94.0%!important;height:10.7%!important}
.se-personal{left:3.2%!important;top:39.4%!important;width:92.4%!important;height:4.3%!important}
.se-pets{left:3.2%!important;top:43.8%!important;width:92.4%!important;height:4.3%!important}
.se-notify{left:3.2%!important;top:48.2%!important;width:92.4%!important;height:4.3%!important}
.se-theme{left:3.2%!important;top:57.4%!important;width:92.4%!important;height:4.1%!important}
.se-language{left:3.2%!important;top:61.6%!important;width:92.4%!important;height:4.1%!important}
.se-sync{left:3.2%!important;top:65.8%!important;width:92.4%!important;height:4.1%!important}
.se-export{left:3.2%!important;top:70.0%!important;width:92.4%!important;height:4.1%!important}
.se-clear{left:3.2%!important;top:74.2%!important;width:92.4%!important;height:4.1%!important}
.se-about-app{left:3.2%!important;top:83.1%!important;width:92.4%!important;height:4.1%!important}
.se-terms{left:3.2%!important;top:87.3%!important;width:92.4%!important;height:4.1%!important}
.se-privacy{left:3.2%!important;top:91.5%!important;width:92.4%!important;height:4.1%!important}
.se-contact{left:3.2%!important;top:95.7%!important;width:92.4%!important;height:4.1%!important}


/* v19 修正：首頁上角方塊、切換毛孩邊框、近期提醒熱區 */
.home::before,
.home::after{
  content:none!important;
}

.ca-switch{
  border:1.5px solid rgba(233,205,182,.98)!important;
  border-radius:999px!important;
  box-shadow:0 0 0 1px rgba(255,251,246,.45) inset!important;
}

.reminder-1{
  left:4.8%!important;
  top:85.2%!important;
  width:72.2%!important;
  height:5.8%!important;
  border-radius:20px!important;
}
.reminder-2{
  left:4.8%!important;
  top:91.1%!important;
  width:72.2%!important;
  height:5.8%!important;
  border-radius:20px!important;
}


/* v20 修正：健康護照上角黑弧線、切換毛孩邊框、小白/胖橘提醒熱區 */
.health-screen::before,
.health-screen::after{
  content:""!important;
  position:absolute!important;
  top:0!important;
  width:32px!important;
  height:32px!important;
  background:var(--bg)!important;
  z-index:3!important;
  pointer-events:none!important;
}
.health-screen::before{left:0!important;}
.health-screen::after{right:0!important;}

.switch-pet{
  position:relative;
  z-index:2;
  box-shadow:0 0 0 1px rgba(233,205,182,.9) inset, 0 4px 10px rgba(110,75,48,.05);
}

.reminder-1{
  left:4.8%!important;
  top:86.1%!important;
  width:72.2%!important;
  height:5.6%!important;
  border-radius:20px!important;
}
.reminder-2{
  left:4.8%!important;
  top:92.2%!important;
  width:72.2%!important;
  height:5.6%!important;
  border-radius:20px!important;
}


/* v21 重做：直接修正首頁圖檔角落、健康護照切換框、近期提醒熱區 */
.home::before,
.home::after{
  content:none!important;
  display:none!important;
}

/* 健康護照頁右上「切換毛孩」：用獨立完整描邊，不再依賴底圖那條細線 */
.he-switch{
  z-index:9!important;
  border:1.8px solid rgba(222,174,132,.98)!important;
  border-radius:999px!important;
  background:rgba(255,252,248,.06)!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.55) inset!important;
  overflow:visible!important;
}

/* 首頁近期提醒：熱區重新依照實際兩列位置定位，整體再往下 */
.reminder-1{
  left:4.9%!important;
  top:86.9%!important;
  width:72.8%!important;
  height:5.2%!important;
  border-radius:22px!important;
}
.reminder-2{
  left:4.9%!important;
  top:92.8%!important;
  width:72.8%!important;
  height:5.2%!important;
  border-radius:22px!important;
}

/* 移除先前誤加在健康護照頁頂角的遮罩 */
.health-screen::before,
.health-screen::after{
  content:none!important;
  display:none!important;
}


/* v22 重做：首頁近期提醒熱區，明確下移並加大覆蓋範圍 */
.reminder-1,
.reminder-2{
  z-index:12!important;
}
.reminder-1{
  left:4.4%!important;
  top:86.8%!important;
  width:74.0%!important;
  height:6.0%!important;
  border-radius:24px!important;
}
.reminder-2{
  left:4.4%!important;
  top:92.9%!important;
  width:74.0%!important;
  height:6.0%!important;
  border-radius:24px!important;
}


/* v23 重整未完成需求：移除健康護照切換毛孩遮罩式補框，重新校正首頁近期提醒熱區 */
.hotspot:active,
.health-hotspot:active,
.calendar-hotspot:active,
.records-hotspot:active,
.settings-hotspot:active{
  background:transparent!important;
  transform:none!important;
  box-shadow:none!important;
}

/* 健康護照頁：切換毛孩只保留原底圖按鈕，取消額外補框/遮罩效果 */
.he-switch{
  z-index:9!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  outline:none!important;
  overflow:visible!important;
}

/* 首頁近期提醒：兩列熱區整體下移，並覆蓋整列含右側日期箭頭 */
.reminder-1,
.reminder-2{
  z-index:14!important;
  background:transparent!important;
}
.reminder-1{
  left:4.6%!important;
  top:87.05%!important;
  width:76.4%!important;
  height:5.15%!important;
  border-radius:24px!important;
}
.reminder-2{
  left:4.6%!important;
  top:93.15%!important;
  width:76.4%!important;
  height:5.15%!important;
  border-radius:24px!important;
}


/* v24 根本修正：健康護照與行事曆上方不再使用遮罩或額外補框 */
.health-screen,
.calendar-screen{
  box-shadow:none!important;
}
.health-screen::before,
.health-screen::after,
.calendar-screen::before,
.calendar-screen::after{
  content:none!important;
  display:none!important;
}
.he-switch,
.ca-switch{
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
  outline:none!important;
}
.he-switch:active,
.ca-switch:active{
  background:transparent!important;
  transform:none!important;
  box-shadow:none!important;
}


/* v25 首頁五個快捷按鈕與移除毛孩功能 */
.home-pet-empty{
  position:absolute;
  left:6.6%;
  right:6.6%;
  top:17%;
  bottom:11.5%;
  border-radius:24px;
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,250,245,.72));
  border:1px dashed rgba(217,183,153,.9);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:20px;
  color:#6d5849;
}
.home-pet-empty-icon{font-size:21px;line-height:1;margin-bottom:10px}
.home-pet-empty strong{font-size:18px;margin-bottom:8px;color:#4b2a18}
.home-pet-empty p{margin:0;font-size:13px;line-height:1.6}

.pet-remove-note{
  margin-bottom:14px;
  padding:12px 14px;
  border-radius:16px;
  background:#fff7f2;
  color:#6a5648;
  line-height:1.65;
}
.pet-remove-list{display:grid;gap:12px;margin-bottom:14px}
.pet-remove-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px;
  border:1px solid #f0e2d6;
  border-radius:18px;
  background:#fffdfa;
}
.pet-remove-main{display:flex;align-items:center;gap:12px;min-width:0}
.pet-remove-avatar{
  width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;
  background:#fff2e8;font-size:28px;flex:0 0 auto;
}
.pet-remove-copy{display:grid;min-width:0}
.pet-remove-copy strong{font-size:16px;color:#4b2a18}
.pet-remove-copy small{font-size:12px;color:#8b7a6f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pet-remove-btn{padding:10px 14px;border-radius:14px;flex:0 0 auto}
.empty-card p{margin:0;color:#7a6a5e;line-height:1.7}
.empty-actions .action-btn{min-height:78px}



/* v26 移除毛孩視窗重新排版與二次確認 */
.remove-pet-modal .settings-sheet,
.remove-pet-confirm-modal .settings-sheet{
  padding:20px;
}
.pet-remove-list{
  display:grid;
  gap:12px;
  margin:0 0 16px;
}
.pet-remove-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  min-height:82px;
  padding:12px 14px;
  border:1px solid #ecd8c9;
  border-radius:20px;
  background:#fffdfa;
}
.pet-remove-main{
  display:flex;
  align-items:center;
  gap:12px;
  flex:1 1 auto;
  min-width:0;
}
.pet-remove-avatar{
  width:56px;
  height:56px;
  flex:0 0 56px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#fff1e7;
  font-size:21px;
}
.pet-remove-copy{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
.pet-remove-copy strong{
  display:block;
  font-size:17px;
  color:#4b2a18;
}
.pet-remove-copy small{
  display:block;
  color:#8b7a6f;
  font-size:12px;
  line-height:1.4;
  white-space:normal;
}
.pet-remove-btn{
  width:auto!important;
  min-width:76px;
  flex:0 0 auto;
  padding:10px 16px!important;
  border-radius:14px!important;
  background:#d9504a!important;
  color:#fff!important;
  font-weight:800!important;
  cursor:pointer;
}
.settings-secondary{
  width:100%;
  padding:13px;
  border-radius:15px;
  background:#f2ebe5;
  color:#67564b;
  font-weight:800;
  cursor:pointer;
}
.pet-remove-confirm{
  text-align:center;
}
.pet-remove-confirm-avatar{
  width:84px;
  height:84px;
  margin:4px auto 14px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#fff1e7;
  font-size:46px;
}
.pet-remove-confirm h3{
  margin:0 0 10px;
  font-size:21px;
  color:#4b2a18;
}
.pet-remove-confirm p{
  margin:0 0 18px;
  color:#7b695d;
  line-height:1.75;
}
.pet-remove-confirm-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.pet-remove-confirm-actions .settings-danger,
.pet-remove-confirm-actions .settings-secondary{
  width:100%;
  margin:0;
}


/* v27 最後一隻毛孩可刪除，首頁近期提醒改為動態同步 */
.home-shell{
  position:relative;
  width:100%;
  padding-bottom:calc(18px + env(safe-area-inset-bottom));
}
.home-reminders-wrap{
  position:relative;
  z-index:12;
  width:100%;
  margin-top:calc(-1 * clamp(88px, 22vw, 108px));
  padding:0 3.2% calc(8px + env(safe-area-inset-bottom));
}
.home-reminders-live{
  position:relative;
  z-index:12;
  width:100%;
  min-height:178px;
  padding:14px 14px 16px;
  border-radius:28px;
  background:rgba(255,253,250,.988);
  border:1px solid rgba(234,216,203,.96);
  box-shadow:0 8px 24px rgba(116,74,42,.08);
}
.home-reminders-head{display:flex;align-items:center;gap:7px;margin-bottom:10px;font-size:clamp(12px,3.3vw,16px);color:#4b2a18}
.home-reminders-list{display:grid;grid-template-columns:1fr;gap:10px}
.home-reminder-row{
  width:100%;min-width:0;padding:10px 12px;min-height:48px;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:8px;
  background:linear-gradient(90deg,#fffaf6,#fff7ef);border:1px solid rgba(239,220,204,.88);border-radius:18px;color:#4b2a18;text-align:left;cursor:pointer;
}
.home-reminder-avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#fff;font-size:20px}
.home-reminder-copy{display:flex;flex-direction:column;justify-content:center;min-width:0;line-height:1.4;padding:1px 0;gap:4px}
.home-reminder-copy strong{font-size:clamp(11px,2.9vw,14px);line-height:1.2}
.home-reminder-copy small{display:block;font-size:clamp(8px,2.2vw,11px);line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#80695a}
.home-reminder-date{font-size:clamp(10px,2.7vw,13px);white-space:nowrap;align-self:center}
.home-reminder-arrow{font-size:22px;color:#aa744e;align-self:center}
.home-reminders-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#7a685b;line-height:1.4;min-height:146px}
.home-reminders-empty span{font-size:22px}
.home-reminders-empty strong{font-size:13px;margin-top:2px}
.home-reminders-empty small{font-size:10px;margin-top:2px}


/* v28 新增毛孩流程與照片上傳 */
.pet-avatar-media{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border-radius:inherit;
}
.home-pet-avatar > span.pet-avatar-media,
.record-pet-emoji > span.pet-avatar-media,
.health-pet-emoji > span.pet-avatar-media,
.calendar-pet-emoji > span.pet-avatar-media,
.settings-profile-avatar > span.pet-avatar-media,
.pet-manager-emoji > span.pet-avatar-media,
.pet-remove-avatar > span.pet-avatar-media,
.pet-remove-confirm-avatar > span.pet-avatar-media,
.home-reminder-avatar > span.pet-avatar-media{
  display:grid;
  place-items:center;
  font-size:inherit;
}
.pet-photo-preview{
  min-height:110px;
  border:1px dashed #e4c8b4;
  border-radius:18px;
  background:#fff8f3;
  display:grid;
  place-items:center;
  overflow:hidden;
  color:#8b7a6f;
  text-align:center;
  padding:12px;
}
.pet-photo-preview img{
  width:104px;
  height:104px;
  object-fit:cover;
  border-radius:50%;
  box-shadow:0 6px 18px rgba(116,74,42,.14);
}
.pet-photo-placeholder{font-size:13px;line-height:1.6;max-width:280px}
.settings-form input[type="file"]{
  padding:10px;
  background:#fffdfa;
}


/* v29 手機拍照、相簿選擇與固定圓形頭像 */
.home-pet-avatar,
.record-pet-emoji,
.health-pet-emoji,
.calendar-pet-emoji,
.settings-profile-avatar,
.pet-manager-emoji,
.pet-remove-avatar,
.pet-remove-confirm-avatar,
.home-reminder-avatar,
.pet-avatar{
  overflow:hidden!important;
  border-radius:50%!important;
  aspect-ratio:1/1!important;
  flex:0 0 auto!important;
}

.home-pet-avatar img.pet-avatar-media,
.record-pet-emoji img.pet-avatar-media,
.health-pet-emoji img.pet-avatar-media,
.calendar-pet-emoji img.pet-avatar-media,
.settings-profile-avatar img.pet-avatar-media,
.pet-manager-emoji img.pet-avatar-media,
.pet-remove-avatar img.pet-avatar-media,
.pet-remove-confirm-avatar img.pet-avatar-media,
.home-reminder-avatar img.pet-avatar-media,
.pet-avatar img.pet-avatar-media{
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  display:block!important;
  border-radius:50%!important;
}

.pet-photo-fieldset{
  margin:0;
  padding:0;
  border:0;
}
.pet-photo-fieldset legend{
  margin-bottom:8px;
  font-weight:700;
  color:#4b2a18;
}
.pet-photo-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.pet-photo-action{
  min-height:78px;
  border:1px solid #e9d2c0;
  border-radius:16px;
  background:#fffaf6;
  color:#4b2a18;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:9px 6px;
  text-align:center;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.pet-photo-action span{font-size:24px;line-height:1}
.pet-photo-action strong{font-size:13px;line-height:1.3}
.pet-photo-action small{font-size:10px;line-height:1.45;color:#7f6f64;max-width:180px}
.pet-photo-action input{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  opacity:0!important;
  pointer-events:none!important;
}
.pet-photo-camera{background:#fff2eb}
.pet-photo-gallery{background:#eef7ff}
.pet-photo-default-preview{
  width:78px;
  height:78px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#fff;
  font-size:46px;
  box-shadow:0 5px 14px rgba(116,74,42,.10);
}
.pet-photo-preview{
  gap:8px;
}
.pet-photo-preview img{
  width:104px!important;
  height:104px!important;
  aspect-ratio:1/1!important;
  object-fit:cover!important;
  object-position:center!important;
  border-radius:50%!important;
  display:block!important;
}
@media (max-width:370px){
  .pet-photo-actions{grid-template-columns:1fr}
  .pet-photo-action{min-height:38px;flex-direction:row}
}


/* v34：讓原生 file input 直接覆蓋拍照／相簿按鈕，避免間接 label 觸發被瀏覽器改成相簿 */
.pet-photo-action{position:relative!important;overflow:hidden!important}
.pet-photo-action input,.pet-photo-native-input{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;margin:0!important;padding:0!important;opacity:0!important;border:0!important;cursor:pointer!important;z-index:5!important;appearance:none!important;-webkit-appearance:none!important}

/* v35 編輯毛孩、生日與自動年齡 */
.home-edit-pet-label{
  position:absolute;
  z-index:12;
  left:79.2%;
  top:75.25%;
  width:15.0%;
  height:3.2%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#f3eafa;
  color:#5b3272;
  font-size:clamp(10px,3.05vw,15px);
  font-weight:900;
  line-height:1;
  pointer-events:none;
}
.pet-age-fieldset{
  margin:0;
  padding:12px;
  border:1px solid #ead7c7;
  border-radius:18px;
  background:#fffaf6;
}
.pet-age-fieldset legend{padding:0 6px;color:#4b2a18;font-weight:800}
.pet-age-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.pet-age-tabs button{
  padding:10px 8px;border-radius:12px;background:#f1e9e2;color:#746155;font-weight:800;cursor:pointer;
}
.pet-age-tabs button.active{background:var(--coral-soft);color:var(--coral);box-shadow:inset 0 0 0 1px rgba(255,116,94,.25)}
.pet-age-panel{display:none}
.pet-age-panel.active{display:grid;gap:8px}
.pet-age-panel>small{color:#8b7a6f;line-height:1.55}
.pet-age-inputs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pet-edit-row{
  width:100%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;
  min-height:82px;padding:12px 14px;border:1px solid #ecd8c9;border-radius:20px;background:#fffdfa;text-align:left;cursor:pointer;
}
.pet-edit-row:active{transform:scale(.99)}
.pet-edit-arrow{color:var(--coral);font-weight:900;white-space:nowrap}
.pet-edit-danger-zone{
  margin-top:8px;padding:16px;border:1px solid #efc5c2;border-radius:18px;background:#fff5f4;display:grid;gap:9px;
}
.pet-edit-danger-zone strong{color:#a83d38;font-size:16px}
.pet-edit-danger-zone small{color:#86645f;line-height:1.55}
.pet-edit-danger-zone .settings-danger{margin-top:2px}
.pet-form-modal .settings-sheet{max-height:94dvh}
@media (max-width:380px){
  .home-edit-pet-label{font-size:10px}
  .pet-age-inputs{grid-template-columns:1fr}
}


/* v36 首頁編輯毛孩標籤位置修正，設定頁毛孩資料管理導向編輯毛孩 */
.home-edit-pet-cover{
  position:absolute;
  z-index:11;
  left:79.0%;
  top:70.7%;
  width:15.1%;
  height:8.1%;
  border-radius:18px;
  background:#f3eafa;
  pointer-events:none;
}
.home-edit-pet-label{
  left:79.05%;
  top:75.65%;
  width:15.0%;
  height:2.35%;
  background:transparent;
  color:#5b3272;
  font-size:clamp(10px,2.75vw,14px);
  font-weight:900;
  line-height:1;
  letter-spacing:.2px;
}
@media (max-width:380px){
  .home-edit-pet-cover{top:70.5%;height:8.45%;}
  .home-edit-pet-label{top:75.9%;font-size:10px;}
}


/* v37：直接修正首頁底圖文字，恢復原本貓咪與兔子圖示，不再使用遮罩或額外文字覆蓋 */
.home-edit-pet-cover,.home-edit-pet-label{display:none!important;}

@media (max-width: 370px){
  .home-reminders-wrap{margin-top:calc(-1 * clamp(84px, 22vw, 96px));}
  .home-reminders-live{padding:12px 12px 14px;min-height:170px;}
  .home-reminder-row{padding:9px 10px;gap:8px;}
}


/* v57：右上角鈴鐺通知清單 */
.notification-list-modal .settings-sheet{
  max-height:min(88dvh,820px);
  padding-bottom:18px;
}
.notification-list-summary{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:end;
  gap:3px 12px;
  margin-bottom:13px;
  padding:13px 15px;
  border-radius:18px;
  background:linear-gradient(135deg,#fff4eb,#fff9f4);
  border:1px solid #f0d8c7;
}
.notification-list-summary span{font-size:12px;color:#8b6f5e;font-weight:800}
.notification-list-summary strong{grid-row:1/3;grid-column:2;font-size:17px;color:#e0644f;align-self:center}
.notification-list-summary small{font-size:11px;color:#8b7a6f}
.notification-event-list{display:grid;gap:10px}
.notification-event-row{
  width:100%;
  min-width:0;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto auto;
  align-items:center;
  gap:8px;
  padding:11px 10px;
  border:1px solid #eddccf;
  border-radius:19px;
  background:#fffaf6;
  color:#4b2a18;
  text-align:left;
  cursor:pointer;
  box-shadow:0 4px 12px rgba(116,74,42,.05);
}
.notification-event-row:active{transform:scale(.99);background:#fff5ee}
.notification-event-avatar{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  overflow:hidden;
  border-radius:50%;
  background:#fff0e6;
  font-size:21px;
  flex:0 0 auto;
}
.notification-event-avatar > .pet-avatar-media{width:100%;height:100%;object-fit:cover;border-radius:50%;display:grid;place-items:center}
.notification-event-copy{display:grid;gap:3px;min-width:0}
.notification-event-title{display:flex;align-items:center;gap:6px;min-width:0}
.notification-event-title strong{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notification-event-title em{font-style:normal;font-size:15px;flex:0 0 auto}
.notification-event-copy small{font-size:11px;color:#80695a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notification-event-note{font-size:10px;color:#9a8374;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notification-event-when{display:grid;gap:3px;text-align:right;white-space:nowrap}
.notification-event-when strong{font-size:12px;color:#5f4637}
.notification-event-when small{font-size:11px;color:#e0644f;font-weight:800}
.notification-event-arrow{font-size:24px;color:#b57d59}
.notification-list-empty{
  min-height:210px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:7px;
  color:#78675c;
}
.notification-list-empty span{font-size:42px}
.notification-list-empty strong{font-size:17px;color:#4b2a18}
.notification-list-empty small{font-size:12px}
@media (max-width:370px){
  .notification-event-row{grid-template-columns:auto minmax(0,1fr) auto;padding:10px 8px;gap:8px}
  .notification-event-arrow{display:none}
  .notification-event-avatar{width:40px;height:40px;font-size:22px}
  .notification-event-title strong{font-size:13px}
  .notification-event-when strong{font-size:11px}
}

/* v67：首頁快捷按鈕區完整穩定拆層 */
.home-split-mode .home-actions-card{
  position:absolute;
  z-index:16;
  left:3%;
  right:3%;
  top:65.9%;
  padding:clamp(8px,2.3vw,12px) clamp(7px,2vw,11px) clamp(10px,2.8vw,15px);
  border-radius:clamp(22px,6vw,32px);
  background:linear-gradient(180deg,rgba(255,254,252,.995),rgba(255,251,247,.992));
  border:1px solid rgba(235,219,207,.98);
  box-shadow:0 9px 24px rgba(116,74,42,.08),inset 0 1px 0 rgba(255,255,255,.96);
  overflow:visible;
}
.home-split-mode .home-actions-grid{
  width:100%;
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  align-items:stretch;
  gap:clamp(4px,1.45vw,8px);
}
.home-split-mode .home-action-tile{
  --tile-bg-top:#fff4f0;
  --tile-bg-bottom:#ffe9e4;
  --tile-border:#f5d8d0;
  --tile-label:#4b2a18;
  --icon-width:96%;
  --icon-height:102%;
  min-width:0;
  width:100%;
  aspect-ratio:.72;
  display:grid;
  grid-template-rows:minmax(0,1fr) auto;
  align-items:center;
  justify-items:center;
  gap:clamp(1px,.45vw,3px);
  margin:0;
  padding:clamp(4px,1.05vw,6px) clamp(3px,.9vw,5px) clamp(7px,1.45vw,9px);
  border:1px solid var(--tile-border);
  border-radius:clamp(15px,4.5vw,24px);
  background:linear-gradient(180deg,var(--tile-bg-top),var(--tile-bg-bottom));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.82),0 3px 8px rgba(95,63,43,.045);
  color:var(--tile-label);
  cursor:pointer;
  overflow:visible;
  -webkit-tap-highlight-color:transparent;
  transition:transform .12s ease,box-shadow .12s ease,filter .12s ease;
}
.home-split-mode .home-action-tile.tone-health{
  --tile-bg-top:#f2faf1;
  --tile-bg-bottom:#e4f2e2;
  --tile-border:#d6ead5;
  --tile-label:#28653a;
  --icon-width:88%;
  --icon-height:104%;
}
.home-split-mode .home-action-tile.tone-calendar{
  --tile-bg-top:#fff9eb;
  --tile-bg-bottom:#fff0d6;
  --tile-border:#f1e2bd;
  --tile-label:#4b2a18;
  --icon-width:89%;
  --icon-height:104%;
}
.home-split-mode .home-action-tile.tone-add{
  --tile-bg-top:#f3f8ff;
  --tile-bg-bottom:#deecfa;
  --tile-border:#d5e4f2;
  --tile-label:#24547f;
  --icon-width:108%;
  --icon-height:104%;
}
.home-split-mode .home-action-tile.tone-edit{
  --tile-bg-top:#f8f3fc;
  --tile-bg-bottom:#eadcf5;
  --tile-border:#e2d3ee;
  --tile-label:#563b78;
  --icon-width:110%;
  --icon-height:106%;
}
.home-split-mode .home-action-tile:active{
  transform:translateY(1px) scale(.97);
  filter:brightness(.985);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 1px 3px rgba(95,63,43,.04);
}
.home-split-mode .home-action-tile:focus-visible{
  outline:3px solid rgba(255,116,94,.78);
  outline-offset:3px;
}
.home-split-mode .home-action-icon{
  width:100%;
  min-height:0;
  display:grid;
  place-items:center;
  align-self:stretch;
  pointer-events:none;
}
.home-split-mode .home-action-icon img{
  display:block;
  width:auto;
  height:auto;
  max-width:var(--icon-width);
  max-height:var(--icon-height);
  object-fit:contain;
  user-select:none;
  -webkit-user-drag:none;
  pointer-events:none;
}
.home-split-mode .home-action-label{
  display:block;
  width:100%;
  color:var(--tile-label);
  font-size:clamp(9px,2.72vw,14px);
  font-weight:900;
  line-height:1.08;
  letter-spacing:-.055em;
  text-align:center;
  white-space:nowrap;
  pointer-events:none;
}
.home-split-mode .home-reminders-wrap{
  z-index:18;
  margin-top:calc(-1 * clamp(108px,26vw,126px));
  padding:0 3.2% calc(10px + env(safe-area-inset-bottom));
}
.home-split-mode .home-reminders-live{min-height:186px;}
@media (max-width:370px){
  .home-split-mode .home-actions-card{
    left:2.4%;
    right:2.4%;
    top:65.8%;
    padding:7px 6px 9px;
    border-radius:22px;
  }
  .home-split-mode .home-actions-grid{gap:3px;}
  .home-split-mode .home-action-tile{
    padding:5px 2px 6px;
    border-radius:14px;
  }
  .home-split-mode .home-action-label{
    font-size:clamp(8.5px,2.65vw,10px);
    letter-spacing:-.07em;
  }
  .home-split-mode .home-reminders-wrap{
    margin-top:calc(-1 * clamp(104px,27vw,112px));
  }
}


/* v75：保留原稿美術，僅針對動態區塊做穩定拆層與重疊修正 */
/* 紀錄頁：目前毛孩資料改為不透明獨立卡片，完整蓋住原稿中的舊資料 */
.record-pet-live{
  left:4.2%!important;
  top:12.3%!important;
  width:56.8%!important;
  min-height:9.2%!important;
  padding:10px 14px!important;
  gap:12px!important;
  border-radius:28px!important;
  background:#fffdfa!important;
  backdrop-filter:none!important;
  box-shadow:0 0 0 1px rgba(238,220,207,.98),0 7px 16px rgba(116,74,42,.05)!important;
}
.record-pet-emoji{width:64px!important;height:64px!important;font-size:36px!important;flex:0 0 auto!important;overflow:hidden!important}
.record-pet-live strong{font-size:21px!important;line-height:1.2!important;margin:0!important}
.record-pet-live small{font-size:12px!important;line-height:1.45!important;margin-top:5px!important;white-space:nowrap!important}
/* 備註輸入框完全獨立，避免底圖文字與輸入文字重疊 */
.record-note-wrap{
  left:18.9%!important;
  top:84.55%!important;
  width:75.0%!important;
  height:5.9%!important;
  z-index:8!important;
}
.record-note-wrap textarea{
  background:#fffdfa!important;
  padding:12px 62px 10px 15px!important;
  line-height:1.45!important;
  box-shadow:inset 0 0 0 1.5px rgba(231,199,174,.9),0 2px 8px rgba(116,74,42,.03)!important;
}
.record-count{right:14px!important;bottom:10px!important;background:#fffdfa!important;padding-left:5px!important}
/* 選項按鈕提高層級與不透明底色，防止底圖勾選狀態／文字疊影 */
.record-control[data-record-group]{
  z-index:6!important;
  background:rgba(255,253,250,.96)!important;
  box-shadow:inset 0 0 0 1.2px rgba(235,216,202,.82)!important;
}
.record-control[data-record-group].selected{
  background:rgba(255,249,241,.98)!important;
}
.rec-food-normal.selected,.rec-food-less.selected{
  box-shadow:inset 0 0 0 3px rgba(243,165,54,.88),0 5px 12px rgba(116,74,42,.07)!important;
}
.rec-poop-normal.selected,.rec-poop-soft.selected,
.rec-pee-normal.selected,.rec-smell.selected{
  box-shadow:inset 0 0 0 3px rgba(76,151,91,.74),0 5px 12px rgba(116,74,42,.07)!important;
}
.rec-bad-mood.selected,.rec-vomit.selected,.rec-diarrhea.selected,
.rec-skin.selected,.rec-cough.selected,.rec-other.selected{
  box-shadow:inset 0 0 0 3px rgba(255,116,94,.72),0 5px 12px rgba(116,74,42,.07)!important;
}
/* 保留原本圖示與文字可見，透明按鈕本身不加遮罩色塊 */
.record-control[data-record-group]{background:rgba(255,253,250,.08)!important}

/* 健康護照：目前毛孩卡片不透明，消除舊照片、舊文字疊影 */
.health-pet-live{
  left:4.3%!important;
  top:10.15%!important;
  width:47.8%!important;
  min-height:12.2%!important;
  padding:12px 14px!important;
  gap:12px!important;
  border-radius:30px!important;
  background:#fffdfa!important;
  backdrop-filter:none!important;
  box-shadow:0 0 0 1px rgba(237,219,205,.96),0 8px 18px rgba(116,74,42,.05)!important;
}
.health-pet-emoji{width:70px!important;height:70px!important;font-size:39px!important;flex:0 0 auto!important;overflow:hidden!important}
.health-pet-live strong{font-size:21px!important;line-height:1.2!important}
.health-pet-live small{font-size:12px!important;line-height:1.45!important;margin-top:5px!important;white-space:nowrap!important}

/* 行事曆：保留原稿美術，將固定兩三隻毛孩頭像改為單一目前毛孩卡片 */
.calendar-pet-live{
  left:4.5%!important;
  top:22.7%!important;
  width:64.5%!important;
  min-height:8.4%!important;
  padding:10px 14px!important;
  gap:12px!important;
  border-radius:28px!important;
  background:#fffdfa!important;
  backdrop-filter:none!important;
  box-shadow:0 0 0 1px rgba(238,220,207,.98),0 7px 16px rgba(116,74,42,.05)!important;
}
.calendar-pet-emoji{width:54px!important;height:54px!important;font-size:31px!important;flex:0 0 auto!important;overflow:hidden!important}
.calendar-pet-live strong{font-size:18px!important;line-height:1.2!important}
.calendar-pet-live small{font-size:11px!important;line-height:1.45!important;margin-top:4px!important;white-space:nowrap!important}
.ca-pet-main{left:4.5%!important;top:22.7%!important;width:64.5%!important;height:8.4%!important;z-index:7!important}
.ca-pet-0,.ca-pet-1,.ca-pet-2{display:none!important}
.ca-switch{
  left:72.0%!important;
  top:23.9%!important;
  width:23.0%!important;
  height:6.0%!important;
  z-index:9!important;
  border-radius:999px!important;
}
/* 新增排程按鈕保持原稿，僅修正按壓區域完全貼齊 */
.ca-add-schedule{left:4.8%!important;width:90.4%!important;border-radius:24px!important}

/* 設定頁：維持原稿清單樣式，只把個人資料區做成不透明獨立圖層 */
.settings-profile-live{
  left:5.0%!important;
  top:23.55%!important;
  width:58.5%!important;
  min-height:10.1%!important;
  padding:11px 14px!important;
  gap:12px!important;
  border-radius:28px!important;
  background:#fffdfa!important;
  backdrop-filter:none!important;
  box-shadow:0 0 0 1px rgba(238,220,207,.98),0 7px 16px rgba(116,74,42,.05)!important;
}
.settings-profile-avatar{width:58px!important;height:58px!important;font-size:33px!important;overflow:hidden!important;flex:0 0 auto!important}
.settings-profile-live strong{font-size:19px!important;line-height:1.25!important}
.settings-profile-live small{font-size:11px!important;line-height:1.45!important;margin-top:4px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;max-width:170px!important}

/* 所有頁面的動態頭像固定圓形裁切 */
.record-pet-emoji .pet-avatar-media,
.health-pet-emoji .pet-avatar-media,
.calendar-pet-emoji .pet-avatar-media,
.settings-profile-avatar .pet-avatar-media{
  width:100%!important;height:100%!important;display:block!important;object-fit:cover!important;border-radius:50%!important;
}

/* 小螢幕微調，避免文字與按鈕互相擠壓 */
@media (max-width:370px){
  .record-pet-live{width:58.5%!important;padding:9px 10px!important;gap:8px!important}
  .record-pet-emoji{width:56px!important;height:56px!important}
  .record-pet-live strong{font-size:18px!important}
  .health-pet-live{width:50%!important;padding:10px!important;gap:8px!important}
  .health-pet-emoji{width:60px!important;height:60px!important}
  .health-pet-live strong{font-size:18px!important}
  .calendar-pet-live{width:64%!important;padding:8px 10px!important;gap:8px!important}
  .calendar-pet-emoji{width:48px!important;height:48px!important}
  .ca-switch{left:71.5%!important;width:23.5%!important}
  .settings-profile-live{width:61%!important;padding:9px 10px!important;gap:8px!important}
  .settings-profile-avatar{width:52px!important;height:52px!important}
}


/* v76 真正穩定拆層：四個功能頁改為分離 PNG 疊層，保留原始可愛插畫與版面感 */
.records-screen,
.health-screen,
.calendar-screen,
.settings-screen{
  background:linear-gradient(180deg,#fffcf8 0%,#fff8f1 100%)!important;
  overflow:visible;
}
.calendar-screen,
.settings-screen{
  aspect-ratio:982 / 1602 !important;
}
.split-screen .page-art-img{
  position:absolute;
  z-index:0;
  display:block;
  max-width:none;
  pointer-events:none;
  user-select:none;
}
.records-screen .record-control,
.records-screen .record-note-wrap,
.records-screen .record-pet-live,
.health-screen .health-hotspot,
.health-screen .health-pet-live,
.calendar-screen .calendar-hotspot,
.calendar-screen .calendar-day-btn,
.calendar-screen .calendar-pet-live,
.settings-screen .settings-hotspot,
.settings-screen .settings-profile-live{z-index:4}
.records-screen .record-pet-live,
.health-screen .health-pet-live,
.calendar-screen .calendar-pet-live,
.settings-screen .settings-profile-live{
  background:transparent!important;
  backdrop-filter:none!important;
  box-shadow:none!important;
}
.rec-header-art{left:1.9%;top:3.8%;width:96.2%;height:8.1%}
.rec-pet-art{left:2.7%;top:12.6%;width:94.9%;height:11.2%}
.rec-food-art{left:3.3%;top:25.4%;width:94.5%;height:20.5%}
.rec-toilet-art{left:3.3%;top:47.4%;width:94.5%;height:20.5%}
.rec-symptom-art{left:3.3%;top:69.4%;width:94.5%;height:14.9%}
.rec-note-art{left:2.7%;top:85.2%;width:95.0%;height:7.7%}
.rec-actions-art{left:2.7%;top:94.5%;width:95.0%;height:5.5%}
.records-screen .record-pet-live{left:6.0%!important;top:13.1%!important;width:43%!important;min-height:6%!important;padding:8px 8px!important;gap:10px!important}
.records-screen .record-pet-emoji{width:56px!important;height:56px!important;background:#fff6f0!important}
.records-screen .record-pet-live strong{font-size:21px!important;line-height:1.2!important;margin:0!important}
.records-screen .record-pet-live small{font-size:12px!important;line-height:1.45!important;margin-top:5px!important;white-space:nowrap!important}
.records-screen .record-note-wrap{left:18.6%!important;top:83.0%!important;width:75.0%!important;height:4.8%!important}
.records-screen .record-note-wrap textarea{background:transparent!important;box-shadow:none!important;padding:14px 54px 8px 16px!important;border-radius:18px!important;line-height:1.45!important}
.records-screen .record-note-wrap textarea:focus{box-shadow:0 0 0 2px rgba(255,116,94,.28)!important;background:rgba(255,253,250,.18)!important}
.records-screen .record-count{right:14px!important;bottom:10px!important}

.he-top-art{left:2.1%;top:4.6%;width:95.9%;height:21.0%}
.he-history-art{left:5.3%;top:26.9%;width:43.4%;height:17.9%}
.he-visit-art{left:50.6%;top:26.9%;width:44.1%;height:17.9%}
.he-summary-art{left:5.7%;top:46.0%;width:88.6%;height:15.4%}
.he-logs-art{left:5.4%;top:62.9%;width:89.5%;height:36.9%}
.health-screen .health-pet-live{left:6.1%!important;top:11.4%!important;width:40%!important;min-height:10%!important;padding:8px 8px!important;gap:10px!important}
.health-screen .health-pet-emoji{width:60px!important;height:60px!important;background:#fff6f0!important}
.health-screen .health-pet-live strong{font-size:20px!important;line-height:1.2!important}
.health-screen .health-pet-live small{font-size:12px!important;line-height:1.45!important;margin-top:4px!important;white-space:nowrap!important}
.he-switch{left:73.4%!important;top:4.6%!important;width:22.8%!important;height:5.6%!important}
.he-summary-overall,.he-summary-vaccine,.he-summary-deworm,.he-summary-allergy{top:51.5%!important;height:9.2%!important}
.he-log-1{left:7.0%!important;top:66.1%!important;width:86.2%!important;height:5.8%!important}
.he-log-2{left:7.0%!important;top:72.0%!important;width:86.2%!important;height:5.8%!important}
.he-log-3{left:7.0%!important;top:77.9%!important;width:86.2%!important;height:5.9%!important}
.he-log-4{left:7.0%!important;top:83.8%!important;width:86.2%!important;height:5.9%!important}
.he-log-5{left:7.0%!important;top:89.7%!important;width:86.2%!important;height:5.9%!important}
.he-export{left:4.7%!important;top:94.5%!important;width:56.0%!important;height:4.8%!important;border-radius:999px!important}

.ca-top-art{left:2.0%;top:3.9%;width:95.9%;height:17.6%}
.ca-petstrip-art{left:2.1%;top:21.8%;width:95.4%;height:9.4%}
.ca-panel-art{left:2.7%;top:32.1%;width:94.6%;height:41.7%}
.ca-upcoming-art{left:2.3%;top:74.5%;width:95.2%;height:25.4%}
.calendar-screen .calendar-pet-live{left:5.8%!important;top:24.0%!important;width:30.5%!important;min-height:6.6%!important;padding:6px 8px!important;gap:10px!important}
.calendar-screen .calendar-pet-emoji{width:52px!important;height:52px!important;background:#fff6f0!important}
.calendar-screen .calendar-pet-live strong{font-size:18px!important;line-height:1.2!important}
.calendar-screen .calendar-pet-live small{font-size:11px!important;line-height:1.4!important;margin-top:4px!important;white-space:nowrap!important}
.ca-bell{left:86.0%!important;top:5.1%!important;width:8.4%!important;height:4.8%!important;border-radius:50%!important}
.ca-pet-main{left:4.4%!important;top:24.1%!important;width:34.0%!important;height:7.1%!important}
.ca-switch{left:69.7%!important;top:24.0%!important;width:25.8%!important;height:7.1%!important}
.ca-prev-month{left:23.8%!important;top:35.2%!important;width:7.2%!important;height:4.0%!important}
.ca-next-month{left:65.6%!important;top:35.2%!important;width:7.2%!important;height:4.0%!important}
.ca-today{left:81.2%!important;top:35.1%!important;width:14.0%!important;height:4.6%!important}
.ca-add-schedule{left:4.0%!important;top:65.6%!important;width:91.0%!important;height:6.8%!important;border-radius:24px!important}
.ca-view-all{left:77.7%!important;top:77.0%!important;width:17.5%!important;height:3.8%!important}
.ca-row-1{left:4.5%!important;top:79.8%!important;width:90.7%!important;height:6.8%!important}
.ca-row-2{left:4.5%!important;top:86.8%!important;width:90.7%!important;height:6.8%!important}
.ca-row-3{left:4.5%!important;top:93.7%!important;width:90.7%!important;height:6.3%!important}
.ca-remind-1{left:72.6%!important;top:81.1%!important;width:18.3%!important;height:4.2%!important;border-radius:999px!important}
.ca-remind-2{left:72.6%!important;top:88.0%!important;width:18.3%!important;height:4.2%!important;border-radius:999px!important}
.ca-remind-3{left:72.6%!important;top:94.9%!important;width:18.3%!important;height:4.2%!important;border-radius:999px!important}
.calendar-screen .calendar-day-btn{border-radius:50%!important}
.day-agenda{margin:14px 14px 20px!important}

.se-top-art{left:1.8%;top:3.9%;width:96.1%;height:19.7%}
.se-profile-art{left:2.9%;top:23.7%;width:94.4%;height:11.2%}
.se-account-art{left:2.9%;top:35.9%;width:94.7%;height:16.9%}
.se-use-art{left:2.7%;top:54.1%;width:94.8%;height:24.2%}
.se-about-art{left:2.6%;top:79.5%;width:94.9%;height:20.3%}
.settings-screen .settings-profile-live{left:6.7%!important;top:25.2%!important;width:57%!important;min-height:8.5%!important;padding:9px 9px!important;gap:13px!important}
.settings-screen .settings-profile-avatar{width:58px!important;height:58px!important;background:#fff6f0!important}
.settings-screen .settings-profile-live strong{font-size:21px!important;line-height:1.32!important}
.settings-screen .settings-profile-live small{font-size:13px!important;line-height:1.53!important;margin-top:5px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;max-width:210px!important}
.se-bell{left:86.2%!important;top:5.0%!important;width:8.2%!important;height:4.9%!important;border-radius:50%!important}
.se-profile-card{left:3.0%!important;top:23.8%!important;width:94.0%!important;height:11.3%!important;border-radius:32px!important}
.se-personal{left:3.2%!important;top:40.2%!important;width:92.4%!important;height:4.2%!important}
.se-pets{left:3.2%!important;top:44.5%!important;width:92.4%!important;height:4.2%!important}
.se-notify{left:3.2%!important;top:48.8%!important;width:92.4%!important;height:4.2%!important}
.se-theme{left:3.2%!important;top:57.7%!important;width:92.4%!important;height:4.2%!important}
.se-language{left:3.2%!important;top:62.0%!important;width:92.4%!important;height:4.2%!important}
.se-sync{left:3.2%!important;top:66.3%!important;width:92.4%!important;height:4.2%!important}
.se-export{left:3.2%!important;top:70.6%!important;width:92.4%!important;height:4.2%!important}
.se-clear{left:3.2%!important;top:74.9%!important;width:92.4%!important;height:4.2%!important}
.se-about-app{left:3.2%!important;top:83.0%!important;width:92.4%!important;height:4.2%!important}
.se-terms{left:3.2%!important;top:86.7%!important;width:92.4%!important;height:4.2%!important}
.se-privacy{left:3.2%!important;top:90.5%!important;width:92.4%!important;height:4.2%!important}
.se-contact{left:3.2%!important;top:94.2%!important;width:92.4%!important;height:4.2%!important}

@media (max-width:420px){
  .records-screen .record-pet-live strong{font-size:18px!important}
  .health-screen .health-pet-live strong{font-size:18px!important}
  .settings-screen .settings-profile-live strong{font-size:18px!important}
  .calendar-screen .calendar-pet-live strong{font-size:16px!important}
}


/* v77 修正：去除殘留底圖毛孩/文字、避免選取覆蓋、修復底部被切掉 */
.art-mask{
  position:absolute;
  display:block;
  z-index:2;
  pointer-events:none;
  background:#fffdfa;
}
.records-screen,
.health-screen,
.calendar-screen,
.settings-screen{
  margin-bottom:18px!important;
}
.records-screen .record-control.selected,
.records-screen .rec-food-normal.selected,.records-screen .rec-food-less.selected,
.records-screen .rec-poop-normal.selected,.records-screen .rec-poop-soft.selected,
.records-screen .rec-pee-normal.selected,.records-screen .rec-smell.selected,
.records-screen .rec-bad-mood.selected,.records-screen .rec-vomit.selected,.records-screen .rec-diarrhea.selected,
.records-screen .rec-skin.selected,.records-screen .rec-cough.selected,.records-screen .rec-other.selected{
  background:transparent!important;
}
.rec-pet-mask-avatar{left:5.0%;top:13.0%;width:15.2%;height:7.8%;border-radius:50%}
.rec-pet-mask-text{left:20.5%;top:14.0%;width:28.5%;height:5.7%;border-radius:20px}
.records-screen .record-pet-live{z-index:5!important}
.records-screen .record-control{z-index:6!important}

.he-pet-mask-avatar{left:5.3%;top:9.8%;width:16.0%;height:9.0%;border-radius:50%}
.he-pet-mask-text{left:22.4%;top:11.4%;width:20.5%;height:10.8%;border-radius:22px}
.health-screen .health-pet-live{z-index:5!important}
.health-screen .health-hotspot{z-index:6!important}

.ca-pet-mask-avatar{left:4.2%;top:23.5%;width:12.8%;height:7.7%;border-radius:50%}
.ca-pet-mask-text{left:17.0%;top:24.0%;width:22.0%;height:6.6%;border-radius:999px}
.calendar-screen .calendar-pet-live{z-index:5!important}
.calendar-screen .calendar-hotspot,
.calendar-screen .calendar-day-btn{z-index:6!important}

.se-profile-mask-avatar{left:6.0%;top:25.0%;width:13.0%;height:8.3%;border-radius:50%}
.se-profile-mask-text{left:19.8%;top:26.0%;width:45.0%;height:6.9%;border-radius:22px}
.settings-screen .settings-profile-live{z-index:5!important}
.settings-screen .settings-hotspot{z-index:6!important}

/* 額外底部空間，避免新增排程、近期排程、取消儲存被底部導覽切掉 */
.records-screen{margin-bottom:92px!important}
.calendar-screen{margin-bottom:96px!important}
.settings-screen{margin-bottom:0!important}
.health-screen{margin-bottom:44px!important}

/* 讓底部裝飾圖與按鈕完整顯示 */
.ca-panel-art{top:31.8%!important;height:42.5%!important}
.ca-upcoming-art{top:74.0%!important;height:26.0%!important}
.rec-actions-art{top:93.8%!important;height:6.2%!important}
.records-screen .rec-cancel,
.records-screen .rec-save{top:92.0%!important;height:5.4%!important}

/* 動態文字避免和底圖視覺撞到 */
.record-pet-live small,
.health-pet-live small,
.calendar-pet-live small,
.settings-profile-live small{
  text-shadow:0 1px 0 rgba(255,255,255,.85);
}


/* v78：清除上層毛孩資訊卡下方殘留的底圖人物／文字，只保留上層動態內容 */
.art-mask{background:#fffdf9!important;box-shadow:none!important}
/* 紀錄頁 */
.rec-pet-mask-avatar{left:3.8%!important;top:12.1%!important;width:17.4%!important;height:9.2%!important;border-radius:50%!important}
.rec-pet-mask-text{left:20.0%!important;top:12.7%!important;width:31.8%!important;height:7.6%!important;border-radius:24px!important}
.records-screen .record-pet-live{left:6.0%!important;top:13.0%!important;width:46%!important}
/* 健康護照頁 */
.he-pet-mask-avatar{left:3.9%!important;top:8.8%!important;width:18.0%!important;height:11.2%!important;border-radius:50%!important}
.he-pet-mask-text{left:21.5%!important;top:10.0%!important;width:27.5%!important;height:12.8%!important;border-radius:24px!important}
.health-screen .health-pet-live{left:6.0%!important;top:11.0%!important;width:43%!important}
/* 行事曆頁（預防同類問題） */
.ca-pet-mask-avatar{left:3.5%!important;top:22.8%!important;width:14.8%!important;height:8.9%!important;border-radius:50%!important}
.ca-pet-mask-text{left:16.8%!important;top:23.2%!important;width:24.8%!important;height:8.0%!important;border-radius:999px!important}
.calendar-screen .calendar-pet-live{left:5.7%!important;top:24.0%!important;width:33%!important}
/* 設定頁 */
.se-profile-mask-avatar{left:4.6%!important;top:24.2%!important;width:15.0%!important;height:9.8%!important;border-radius:50%!important}
.se-profile-mask-text{left:19.2%!important;top:24.9%!important;width:49.5%!important;height:8.8%!important;border-radius:24px!important}
.settings-screen .settings-profile-live{left:6.7%!important;top:25.1%!important;width:60%!important}
.record-pet-live small,.health-pet-live small,.calendar-pet-live small,.settings-profile-live small,.record-pet-live strong,.health-pet-live strong,.calendar-pet-live strong,.settings-profile-live strong{position:relative;z-index:1}


/* v79 根本修正：已直接修改來源 PNG，移除底層舊毛孩圖文；不再依賴補遮罩。 */


/* v80 修正：行事曆近期排程下緣裁切、紀錄頁備註區邏輯與遮擋 */
/* 行事曆近期排程往上收，避免最後一列被底部導覽區吃掉 */
.ca-view-all{top:76.5%!important;height:3.6%!important}
.ca-row-1{top:78.4%!important;height:6.4%!important}
.ca-row-2{top:84.9%!important;height:6.4%!important}
.ca-row-3{top:91.4%!important;height:6.2%!important}
.ca-remind-1{top:79.6%!important;height:4.0%!important}
.ca-remind-2{top:86.1%!important;height:4.0%!important}
.ca-remind-3{top:92.6%!important;height:4.0%!important}
.ca-upcoming-art{top:73.6%!important;height:25.8%!important}
.calendar-screen{margin-bottom:110px!important}

/* 紀錄頁備註區：改成清楚的提示文字，不再在輸入框右上角只露出一個 60 */
.records-screen .record-note-wrap{top:82.8%!important;height:7.2%!important;z-index:9!important}
.records-screen .record-note-wrap textarea{
  height:calc(100% - 18px)!important;
  padding:12px 16px 10px 16px!important;
  background:#fffdfa!important;
  box-shadow:inset 0 0 0 1.5px rgba(231,199,174,.9),0 2px 8px rgba(116,74,42,.03)!important;
}
.records-screen .record-count{
  position:absolute!important;
  right:4px!important;
  bottom:-1px!important;
  background:transparent!important;
  padding:0!important;
  font-size:11px!important;
  color:#9f8b7d!important;
}
.records-screen .rec-actions-art{top:92.5%!important;height:6.1%!important}
.records-screen .rec-cancel,
.records-screen .rec-save{top:91.1%!important;height:5.0%!important}
.records-screen{margin-bottom:116px!important}


/* v81：修正紀錄頁備註區壓到上方區塊，並修正儲存文字上緣被切掉 */
.records-screen .rec-note-art{top:85.0%!important;height:6.7%!important}
.records-screen .record-note-wrap{
  left:18.8%!important;
  top:85.1%!important;
  width:74.8%!important;
  height:4.4%!important;
  z-index:9!important;
}
.records-screen .record-note-wrap textarea{
  height:100%!important;
  padding:10px 16px 10px 16px!important;
  line-height:1.35!important;
  font-size:14px!important;
}
.records-screen .record-count{
  right:2px!important;
  bottom:-17px!important;
  font-size:11px!important;
}
.records-screen .rec-actions-art{top:93.3%!important;height:5.3%!important}
.records-screen .rec-cancel,
.records-screen .rec-save{top:93.5%!important;height:4.6%!important}
.records-screen{margin-bottom:124px!important}


/* v82：根本拉開紀錄頁備註與按鈕區，並再次上移行事曆近期排程，避免任何遮住或裁切 */
/* 紀錄頁：備註區與按鈕區分離，避免彼此重疊 */
.records-screen .rec-note-art{top:84.6%!important;height:6.1%!important}
.records-screen .record-note-wrap{
  left:18.8%!important;
  top:84.9%!important;
  width:74.6%!important;
  height:3.8%!important;
  z-index:8!important;
}
.records-screen .record-note-wrap textarea{
  height:100%!important;
  min-height:0!important;
  padding:9px 14px 9px 14px!important;
  line-height:1.25!important;
  font-size:14px!important;
  border-radius:16px!important;
}
.records-screen .record-count{
  right:2px!important;
  bottom:-15px!important;
  font-size:11px!important;
  line-height:1!important;
}
.records-screen .rec-actions-art{top:92.8%!important;height:5.5%!important}
.records-screen .rec-cancel,
.records-screen .rec-save{
  top:93.0%!important;
  height:4.9%!important;
}
.records-screen{margin-bottom:138px!important}

/* 行事曆：整個近期排程區再次上移，避免第三列下緣被遮住 */
.ca-upcoming-art{top:72.4%!important;height:25.2%!important}
.ca-view-all{top:75.3%!important;height:3.4%!important}
.ca-row-1{top:77.1%!important;height:5.8%!important}
.ca-row-2{top:83.2%!important;height:5.8%!important}
.ca-row-3{top:89.3%!important;height:5.8%!important}
.ca-remind-1{top:78.2%!important;height:3.6%!important}
.ca-remind-2{top:84.3%!important;height:3.6%!important}
.ca-remind-3{top:90.4%!important;height:3.6%!important}
.calendar-screen{margin-bottom:140px!important}


/* v84：以 v82 正常比例為基底，移植兩個根本重做區塊；不使用固定像素高度 */
.records-page-form{
  display:block;
  margin:0;
  padding:0 0 24px;
  background:var(--bg);
}
.records-page-form .records-screen{
  width:100%!important;
  min-height:0!important;
  padding-bottom:0!important;
  margin-bottom:0!important;
  aspect-ratio:941 / 1535!important;
}
.record-footer-live{
  position:relative;
  z-index:12;
  display:grid;
  gap:8px;
  margin:clamp(-78px,-16vw,-50px) 14px 12px;
  padding:14px;
  border:1px solid #edd9c9;
  border-radius:24px;
  background:#fffdfa;
  box-shadow:0 10px 24px rgba(116,74,42,.08);
}
.record-footer-title{display:flex;align-items:center;gap:8px;color:#5d3923;font-size:17px}
.record-footer-title span{color:#9a672e}
.record-note-field{display:grid;gap:6px}
.record-note-field textarea{
  width:100%;
  min-height:74px;
  resize:vertical;
  border:1px solid #e8cdb8;
  border-radius:17px;
  padding:12px 14px;
  background:#fffaf6;
  color:#4b2a18;
  line-height:1.5;
  outline:none;
}
.record-note-field textarea:focus{border-color:#ff8d75;box-shadow:0 0 0 3px rgba(255,116,94,.12)}
.record-note-field .record-count{
  position:static!important;
  justify-self:end;
  background:transparent!important;
  padding:0!important;
  color:#9d897c;
  font-size:11px;
}
.record-footer-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.record-footer-actions button{
  min-height:50px;
  border-radius:999px;
  font-weight:900;
  font-size:18px;
  cursor:pointer;
}
.record-footer-cancel{background:#fffaf5;color:#5b3a27;border:1px solid #ead6c7!important}
.record-footer-save{background:linear-gradient(180deg,#ff846c,#f66f57);color:#fff;box-shadow:0 8px 18px rgba(246,111,87,.2)}
.record-footer-save span{font-size:22px;vertical-align:-1px}
.record-actions-outside{
  margin:0 14px 14px;
}
.record-actions-outside button{
  width:100%;
}

.calendar-screen{
  min-height:0!important;
  padding-bottom:0!important;
  margin-bottom:0!important;
  aspect-ratio:982 / 1602!important;
}
.calendar-upcoming-live{
  position:relative;
  z-index:12;
  margin:clamp(-205px,-42vw,-132px) 13px 14px;
  padding:14px;
  border:1px solid #edd9c9;
  border-radius:28px;
  background:#fffdfa;
  box-shadow:0 10px 24px rgba(116,74,42,.08);
}
.calendar-upcoming-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.calendar-upcoming-head h2{margin:0;font-size:18px;color:#4b2a18}
.calendar-upcoming-head button{background:transparent;color:#a35b32;font-weight:800;cursor:pointer}
.calendar-upcoming-list{display:grid;gap:9px}
.calendar-upcoming-item{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  padding:10px;
  border:1px solid #efdfd3;
  border-radius:20px;
  background:#fffaf6;
}
.calendar-upcoming-main{
  display:grid;
  grid-template-columns:48px 44px minmax(0,1fr);
  align-items:center;
  gap:8px;
  background:transparent;
  text-align:left;
  min-width:0;
  cursor:pointer;
}
.calendar-upcoming-date{display:grid;justify-items:center;line-height:1.05}
.calendar-upcoming-date small{color:#e36e4e;font-size:12px}
.calendar-upcoming-date strong{font-size:23px;color:#4b2a18}
.calendar-upcoming-avatar{width:42px;height:42px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:#fff0e4;font-size:25px}
.calendar-upcoming-copy{display:grid;min-width:0;gap:2px}
.calendar-upcoming-copy em{width:fit-content;padding:2px 8px;border-radius:999px;background:#edf7ee;color:#4e9a60;font-style:normal;font-size:10px}
.calendar-upcoming-copy strong{font-size:15px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.calendar-upcoming-copy small{font-size:11px;color:#806c60;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.calendar-upcoming-remind{padding:9px 12px;border-radius:999px;background:#fff5ec;color:#7b4e33;font-size:12px;font-weight:800;white-space:nowrap;cursor:pointer}
.calendar-upcoming-remind.active{background:#fff0cf;color:#9c681b}
.calendar-upcoming-empty{text-align:center;padding:25px;color:#8b7a6f}

@media (max-width:360px){
  .calendar-upcoming-item{grid-template-columns:1fr;align-items:stretch}
  .calendar-upcoming-remind{justify-self:end}
  .calendar-upcoming-main{grid-template-columns:42px 38px minmax(0,1fr);gap:7px}
  .record-footer-live{margin-left:8px;margin-right:10px}
}

/* 毛毛日記_紀錄_v01：紀錄頁局部修正 */
/* 移除點選後額外疊上的粗橘／綠色外框，保留原始卡片美術與勾選圖示。 */
.records-screen .record-control[data-record-group].selected,
.records-screen .rec-food-normal.selected,
.records-screen .rec-food-less.selected,
.records-screen .rec-poop-normal.selected,
.records-screen .rec-poop-soft.selected,
.records-screen .rec-pee-normal.selected,
.records-screen .rec-smell.selected,
.records-screen .rec-bad-mood.selected,
.records-screen .rec-vomit.selected,
.records-screen .rec-diarrhea.selected,
.records-screen .rec-skin.selected,
.records-screen .rec-cough.selected,
.records-screen .rec-other.selected{
  box-shadow:none!important;
  background:transparent!important;
}

/* 六個異常選項的美術已下移，點擊熱區同步微調。 */
.records-screen .rec-bad-mood,
.records-screen .rec-vomit,
.records-screen .rec-diarrhea{top:66.8%!important}
.records-screen .rec-skin,
.records-screen .rec-cough,
.records-screen .rec-other{top:74.8%!important}


/* 毛毛日記_紀錄_v07：移除紀錄頁選項熱區的外框線，避免與底圖圓框重疊。 */
.records-screen .record-control[data-record-group],
.records-screen .record-control[data-record-group].selected,
.records-screen .rec-food-normal,
.records-screen .rec-food-less,
.records-screen .rec-water-normal,
.records-screen .rec-water-less,
.records-screen .rec-poop-normal,
.records-screen .rec-poop-soft,
.records-screen .rec-pee-normal,
.records-screen .rec-smell,
.records-screen .rec-bad-mood,
.records-screen .rec-vomit,
.records-screen .rec-diarrhea,
.records-screen .rec-skin,
.records-screen .rec-cough,
.records-screen .rec-other{
  background:transparent!important;
  box-shadow:none!important;
  border:0!important;
}

/* 毛毛日記_紀錄_v02：紀錄頁 Header 真正穩定拆層 */
.records-screen{
  overflow:visible!important;
}
.records-screen .rec-header-art{
  display:none!important;
}
.records-screen .rec-header-live{
  position:absolute;
  z-index:2;
  left:0;
  top:0;
  width:100%;
  height:16.2%;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top, 0px);
  background:linear-gradient(180deg,#fffdfa 0%,#fffaf6 100%);
  overflow:visible;
  pointer-events:none;
}
.records-screen .rec-header-title{
  position:absolute;
  z-index:2;
  left:50%;
  top:52%;
  transform:translate(-50%,-50%);
  margin:0;
  padding:0;
  color:#4b2a18;
  font-size:clamp(22px,5.3vw,31px);
  font-weight:900;
  line-height:1;
  letter-spacing:.04em;
  white-space:nowrap;
}
.records-screen .rec-header-pets{
  position:absolute;
  z-index:2;
  right:-2.6%;
  bottom:2.2%;
  width:36.8%;
  height:auto;
  max-width:none;
  display:block;
  object-fit:contain;
  overflow:visible;
}
.records-screen .rec-header-divider{
  display:none!important;
}
.records-screen .rec-back{
  z-index:7!important;
  left:3.8%!important;
  top:4.9%!important;
  width:9.5%!important;
  height:5.3%!important;
  border:1px solid #eadbcf!important;
  border-radius:50%!important;
  background:#fffdfa!important;
  box-shadow:0 2px 8px rgba(96,63,40,.05)!important;
}
.records-screen .rec-back::before{
  content:"‹";
  position:absolute;
  left:50%;
  top:48%;
  transform:translate(-50%,-50%);
  color:#80522f;
  font-size:clamp(28px,7vw,40px);
  font-weight:500;
  line-height:1;
}
@media (max-width:370px){
  .records-screen .rec-header-title{font-size:21px}
  .records-screen .rec-header-pets{right:-2.6%;bottom:2.2%;width:38.5%}
}


/* 毛毛日記_紀錄_v09：選項只在點選後顯示選取效果；不重畫文字與圖示。 */
.records-screen .record-control[data-record-group]{
  background:transparent!important;
  box-shadow:none!important;
  border:0!important;
  overflow:visible!important;
}
.records-screen .record-control[data-record-group]::after{
  content:"";
  position:absolute;
  inset:var(--sel-top,0px) var(--sel-right,0px) var(--sel-bottom,0px) var(--sel-left,0px);
  border-radius:var(--sel-radius, inherit);
  background:transparent;
  border:0;
  pointer-events:none;
  box-sizing:border-box;
}
.records-screen .record-control[data-record-group]::before{
  content:"✓";
  position:absolute;
  z-index:3;
  top:calc(var(--badge-top, var(--sel-top,0px)) - 2px);
  right:calc(var(--badge-right, var(--sel-right,0px)) - 2px);
  width:20px;
  height:20px;
  border-radius:50%;
  display:none;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:13px;
  font-weight:900;
  line-height:1;
  pointer-events:none;
}
.records-screen .record-control[data-record-group].selected::before{display:flex}

/* 毛毛日記_紀錄_v10：微調選取框線幾何，讓外框正好貼合原始底層按鈕框線。 */
.records-screen .rec-food-normal,
.records-screen .rec-water-normal,
.records-screen .rec-poop-normal,
.records-screen .rec-pee-normal{
  --sel-top:8px;
  --sel-right:5px;
  --sel-bottom:-3px;
  --sel-left:4px;
  --sel-radius:22px;
}
.records-screen .rec-food-less,
.records-screen .rec-water-less,
.records-screen .rec-poop-soft,
.records-screen .rec-smell{
  --sel-top:12px;
  --sel-right:8px;
  --sel-bottom:-7px;
  --sel-left:3px;
  --sel-radius:22px;
  --badge-top:12px;
  --badge-right:8px;
}
.records-screen .rec-bad-mood,
.records-screen .rec-vomit,
.records-screen .rec-diarrhea,
.records-screen .rec-skin,
.records-screen .rec-cough,
.records-screen .rec-other{
  --sel-top:11px;
  --sel-right:4px;
  --sel-bottom:-6px;
  --sel-left:3px;
  --sel-radius:16px;
  --badge-top:11px;
  --badge-right:4px;
}

/* 飲食類：橘色選取效果 */
.records-screen .rec-food-normal.selected::after,
.records-screen .rec-food-less.selected::after,
.records-screen .rec-water-normal.selected::after,
.records-screen .rec-water-less.selected::after{
  border:2px solid #e5a23c;
  background:rgba(255,246,226,.52);
}
.records-screen .rec-food-normal.selected::before,
.records-screen .rec-food-less.selected::before,
.records-screen .rec-water-normal.selected::before,
.records-screen .rec-water-less.selected::before{background:#f0b145}

/* 排泄類：綠色選取效果 */
.records-screen .rec-poop-normal.selected::after,
.records-screen .rec-poop-soft.selected::after,
.records-screen .rec-pee-normal.selected::after,
.records-screen .rec-smell.selected::after{
  border:2px solid #6f9f72;
  background:rgba(231,246,233,.52);
}
.records-screen .rec-poop-normal.selected::before,
.records-screen .rec-poop-soft.selected::before,
.records-screen .rec-pee-normal.selected::before,
.records-screen .rec-smell.selected::before{background:#5f9662}

/* 異常類：粉紅色選取效果 */
.records-screen .rec-bad-mood.selected::after,
.records-screen .rec-vomit.selected::after,
.records-screen .rec-diarrhea.selected::after,
.records-screen .rec-skin.selected::after,
.records-screen .rec-cough.selected::after,
.records-screen .rec-other.selected::after{
  border:2px solid #e7a095;
  background:rgba(255,241,238,.5);
}
.records-screen .rec-bad-mood.selected::before,
.records-screen .rec-vomit.selected::before,
.records-screen .rec-diarrhea.selected::before,
.records-screen .rec-skin.selected::before,
.records-screen .rec-cough.selected::before,
.records-screen .rec-other.selected::before{background:#eaa396}

/* 依原始卡片形狀調整圓角，未選取時完全不顯示額外外觀。 */
.records-screen .rec-food-normal,
.records-screen .rec-food-less,
.records-screen .rec-water-normal,
.records-screen .rec-water-less,
.records-screen .rec-poop-normal,
.records-screen .rec-poop-soft,
.records-screen .rec-pee-normal,
.records-screen .rec-smell{border-radius:24px!important}
.records-screen .rec-bad-mood,
.records-screen .rec-vomit,
.records-screen .rec-diarrhea,
.records-screen .rec-skin,
.records-screen .rec-cough,
.records-screen .rec-other{border-radius:18px!important}

/* 毛毛日記_紀錄_v10 small screen selection fit */
@media (max-width:370px){
  .records-screen .rec-food-less,
  .records-screen .rec-water-less,
  .records-screen .rec-poop-soft,
  .records-screen .rec-smell{
    --sel-right:7px;
    --sel-left:3px;
    --sel-top:12px;
    --sel-bottom:-7px;
    --badge-top:12px;
    --badge-right:7px;
  }
  .records-screen .rec-bad-mood,
  .records-screen .rec-vomit,
  .records-screen .rec-diarrhea,
  .records-screen .rec-skin,
  .records-screen .rec-cough,
  .records-screen .rec-other{
    --sel-right:3px;
    --sel-left:3px;
    --sel-top:11px;
    --sel-bottom:-6px;
    --badge-top:11px;
    --badge-right:3px;
  }
}


/* 毛毛日記_紀錄_v11：將所有選取外框整體下移，對齊底層按鈕原始框線。 */


/* 毛毛日記_紀錄_v12：將右側排泄按鈕與六個異常按鈕的選取外框再進一步下移。 */


/* 毛毛日記_紀錄_v13：進一步微調各選取外框與勾選徽章，改為更細的個別對位。 */
.records-screen .rec-food-normal,
.records-screen .rec-water-normal{
  --sel-top:9px;
  --sel-right:5px;
  --sel-bottom:-4px;
  --sel-left:4px;
  --badge-top:9px;
  --badge-right:5px;
}
.records-screen .rec-poop-normal,
.records-screen .rec-pee-normal{
  --sel-top:10px;
  --sel-right:5px;
  --sel-bottom:-5px;
  --sel-left:4px;
  --badge-top:10px;
  --badge-right:5px;
}
.records-screen .rec-food-less,
.records-screen .rec-water-less{
  --sel-top:13px;
  --sel-right:8px;
  --sel-bottom:-8px;
  --sel-left:3px;
  --badge-top:13px;
  --badge-right:8px;
}
.records-screen .rec-poop-soft,
.records-screen .rec-smell{
  --sel-top:14px;
  --sel-right:8px;
  --sel-bottom:-9px;
  --sel-left:3px;
  --badge-top:14px;
  --badge-right:8px;
}
.records-screen .rec-bad-mood,
.records-screen .rec-vomit,
.records-screen .rec-diarrhea,
.records-screen .rec-skin,
.records-screen .rec-cough,
.records-screen .rec-other{
  --sel-top:13px;
  --sel-right:4px;
  --sel-bottom:-8px;
  --sel-left:3px;
  --badge-top:13px;
  --badge-right:4px;
}
@media (max-width:370px){
  .records-screen .rec-food-less,
  .records-screen .rec-water-less{
    --sel-top:12px;
    --sel-right:7px;
    --sel-bottom:-7px;
    --sel-left:3px;
    --badge-top:12px;
    --badge-right:7px;
  }
  .records-screen .rec-poop-soft,
  .records-screen .rec-smell{
    --sel-top:13px;
    --sel-right:7px;
    --sel-bottom:-8px;
    --sel-left:3px;
    --badge-top:13px;
    --badge-right:7px;
  }
  .records-screen .rec-bad-mood,
  .records-screen .rec-vomit,
  .records-screen .rec-diarrhea,
  .records-screen .rec-skin,
  .records-screen .rec-cough,
  .records-screen .rec-other{
    --sel-top:12px;
    --sel-right:3px;
    --sel-bottom:-7px;
    --sel-left:3px;
    --badge-top:12px;
    --badge-right:3px;
  }
}


/* 毛毛日記_紀錄_v14：將第一排三個異常按鈕（精神不佳、嘔吐、拉肚子）的選取外框與勾選徽章再往下移。 */
.records-screen .rec-bad-mood,
.records-screen .rec-vomit,
.records-screen .rec-diarrhea{
  --sel-top:16px;
  --sel-right:4px;
  --sel-bottom:-11px;
  --sel-left:3px;
  --badge-top:16px;
  --badge-right:4px;
}
@media (max-width:370px){
  .records-screen .rec-bad-mood,
  .records-screen .rec-vomit,
  .records-screen .rec-diarrhea{
    --sel-top:15px;
    --sel-right:3px;
    --sel-bottom:-10px;
    --sel-left:3px;
    --badge-top:15px;
    --badge-right:3px;
  }
}


/* 毛毛日記_紀錄_v15：將「拉肚子」與「其他」兩個選取外框與勾選徽章再往左移。 */
.records-screen .rec-diarrhea,
.records-screen .rec-other{
  --sel-left:1px;
  --sel-right:6px;
  --badge-right:6px;
}
@media (max-width:370px){
  .records-screen .rec-diarrhea,
  .records-screen .rec-other{
    --sel-left:1px;
    --sel-right:5px;
    --badge-right:5px;
  }
}


/* 毛毛日記_紀錄_v30：將「便便正常」選取時的綠色框線與勾勾整體下移，對齊下方按鈕框線。 */
.records-screen .rec-poop-normal{
  --sel-top:15px;
  --sel-right:5px;
  --sel-bottom:-10px;
  --sel-left:4px;
  --badge-top:15px;
  --badge-right:5px;
}


/* 毛毛日記_紀錄_v36：增加異常區塊兩個橫排之間的行距。 */
.records-screen .rec-skin,
.records-screen .rec-cough,
.records-screen .rec-other{
  top:75.6%!important;
}


/* 毛毛日記_紀錄_v43：六個異常按鈕整組下移，避免碰到最上方外框；點擊熱區同步下移。 */
.records-screen .rec-bad-mood,
.records-screen .rec-vomit,
.records-screen .rec-diarrhea{
  top:67.3%!important;
}
.records-screen .rec-skin,
.records-screen .rec-cough,
.records-screen .rec-other{
  top:76.1%!important;
}


/* 毛毛日記_紀錄_v46：上排三個異常選項的選取框與勾勾再往下移，避免過度貼近按鈕上邊。 */
.records-screen .rec-bad-mood,
.records-screen .rec-vomit,
.records-screen .rec-diarrhea{
  --sel-top:18px;
  --sel-right:4px;
  --sel-bottom:-13px;
  --sel-left:3px;
  --sel-radius:16px;
  --badge-top:18px;
  --badge-right:4px;
}


/* 毛毛日記_紀錄_v47：將 Header 右側狗狗與貓咪插圖整體往右移，避免遮住「新增今日紀錄」標題。 */
.records-screen .rec-header-pets{right:-2.6%!important}
@media (max-width:370px){
  .records-screen .rec-header-pets{right:-2.6%!important}
}


/* 毛毛日記_紀錄_v48：縮小「異常」區塊與下方「備註」區塊之間的垂直間距。 */
.records-page-form .record-footer-live{
  margin-top:clamp(-100px,-21vw,-70px);
}


/* 毛毛日記_紀錄_v49：再縮小「異常」區塊與下方「備註」區塊之間的垂直間距。 */
.records-page-form .record-footer-live{
  margin-top:clamp(-114px,-24vw,-82px);
}

/* 毛毛日記_紀錄_v50：每日紀錄月曆與歷史資料編輯 */
.records-page-form{
  padding-bottom:110px!important;
}
.record-history-live{
  position:relative;
  z-index:12;
  margin:14px 14px 24px;
  padding:16px;
  border:1px solid #ead7c8;
  border-radius:26px;
  background:linear-gradient(180deg,#fffdfa 0%,#fff9f4 100%);
  box-shadow:0 10px 24px rgba(116,74,42,.08);
  color:#4b2a18;
}
.record-history-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.record-history-kicker{
  display:block;
  margin-bottom:3px;
  color:#a36b3d;
  font-size:13px;
  font-weight:900;
}
.record-history-title-row h2{
  margin:0;
  font-size:20px;
  line-height:1.2;
}
.record-history-today{
  flex:0 0 auto;
  padding:8px 13px;
  border:1px solid #efcbb9;
  border-radius:999px;
  background:#fff4ed;
  color:#9c5336;
  font-weight:900;
  cursor:pointer;
}
.record-history-month-head{
  display:grid;
  grid-template-columns:42px 1fr 42px;
  align-items:center;
  gap:8px;
  margin-bottom:9px;
}
.record-history-month-head strong{
  text-align:center;
  font-size:18px;
}
.record-history-month-head button{
  width:42px;
  height:38px;
  border:1px solid #ead8ca;
  border-radius:14px;
  background:#fffaf6;
  color:#75482e;
  font-size:27px;
  line-height:1;
  cursor:pointer;
}
.record-history-weekdays,
.record-history-grid{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:5px;
}
.record-history-weekdays{
  margin-bottom:5px;
  color:#9b877a;
  font-size:12px;
  font-weight:800;
  text-align:center;
}
.record-history-weekdays span{
  padding:4px 0;
}
.record-history-day{
  position:relative;
  aspect-ratio:1;
  min-width:0;
  display:grid;
  place-items:center;
  border:1px solid #eee0d5;
  border-radius:13px;
  background:#fff;
  color:#66564d;
  font-size:14px;
  cursor:pointer;
}
.record-history-day.is-empty{
  border:0;
  background:transparent;
  pointer-events:none;
}
.record-history-day.is-today{
  box-shadow:inset 0 0 0 1px #ee9c78;
  font-weight:900;
}
.record-history-day.is-selected{
  border-color:#f27f67;
  background:#f77f68;
  color:#fff;
  box-shadow:0 5px 12px rgba(232,104,80,.22);
}
.record-history-day.has-record:not(.is-selected){
  background:#fff4ec;
  border-color:#efc7b5;
  font-weight:900;
}
.record-history-day small{
  position:absolute;
  right:3px;
  bottom:2px;
  min-width:14px;
  height:14px;
  display:grid;
  place-items:center;
  padding:0 3px;
  border-radius:999px;
  background:#e98973;
  color:#fff;
  font-size:8px;
  line-height:1;
}
.record-history-day.is-selected small{
  background:#fff;
  color:#d95f49;
}
.record-history-hint{
  display:flex;
  align-items:center;
  gap:7px;
  margin:9px 2px 15px;
  color:#947f72;
  font-size:11px;
  line-height:1.4;
}
.record-history-hint span{
  width:9px;
  height:9px;
  border-radius:50%;
  background:#e98973;
}
.record-history-day-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  padding-top:13px;
  border-top:1px solid #f0dfd3;
}
.record-history-day-head small{
  color:#998478;
  font-size:11px;
}
.record-history-day-head h3{
  margin:3px 0 0;
  font-size:17px;
}
.record-history-day-head > span{
  padding:5px 9px;
  border-radius:999px;
  background:#fff0e9;
  color:#a35f42;
  font-size:12px;
  font-weight:900;
}
.record-history-list{
  display:grid;
  gap:9px;
  margin-top:11px;
}
.record-history-entry{
  border:1px solid #ead9cd;
  border-radius:18px;
  overflow:hidden;
  background:#fff;
}
.record-history-entry-main{
  width:100%;
  display:grid;
  grid-template-columns:48px minmax(0,1fr) auto;
  align-items:start;
  gap:8px;
  padding:12px;
  background:transparent;
  color:#4b2a18;
  text-align:left;
  cursor:pointer;
}
.record-history-time{
  display:grid;
  place-items:center;
  min-height:32px;
  border-radius:11px;
  background:#fff0e8;
  color:#a65d3f;
  font-size:12px;
  font-weight:900;
}
.record-history-summary{
  color:#67544a;
  font-size:12px;
  line-height:1.65;
}
.record-history-edit{
  align-self:center;
  color:#c66d4d;
  font-size:12px;
  font-weight:900;
  white-space:nowrap;
}
.record-history-empty{
  padding:22px 12px;
  border:1px dashed #ead6c8;
  border-radius:18px;
  background:#fffaf6;
  text-align:center;
}
.record-history-empty > span{
  display:block;
  margin-bottom:6px;
  font-size:27px;
}
.record-history-empty strong{
  display:block;
  margin-bottom:4px;
}
.record-history-empty p{
  margin:0;
  color:#927d70;
  font-size:12px;
  line-height:1.55;
}
.record-history-storage-note{
  margin:11px 2px 0;
  color:#a08b7e;
  font-size:10px;
  line-height:1.5;
  text-align:center;
}

.record-edit-modal{
  position:fixed;
  inset:0;
  z-index:220;
  display:grid;
  align-items:end;
  padding:18px 12px calc(18px + env(safe-area-inset-bottom));
  background:rgba(55,39,29,.42);
  backdrop-filter:blur(5px);
  overflow:auto;
}
.record-edit-form{
  width:min(100%,460px);
  max-height:calc(100dvh - 36px);
  margin:0 auto;
  overflow:auto;
  padding:18px;
  border:1px solid #ead8ca;
  border-radius:26px;
  background:#fffdfa;
  box-shadow:0 20px 46px rgba(60,39,26,.24);
  color:#4b2a18;
}
.record-edit-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.record-edit-head small{
  color:#9c7d6b;
  font-weight:800;
}
.record-edit-head h2{
  margin:2px 0 0;
  font-size:22px;
}
.record-edit-close{
  width:38px;
  height:38px;
  border-radius:50%;
  background:#fff1e9;
  color:#8b5437;
  font-size:21px;
  cursor:pointer;
}
.record-edit-date-row,
.record-edit-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.record-edit-date-row{
  margin-bottom:10px;
}
.record-edit-form label{
  display:grid;
  gap:5px;
  color:#6c4a37;
  font-size:12px;
  font-weight:900;
}
.record-edit-form input[type="date"],
.record-edit-form input[type="time"],
.record-edit-form select,
.record-edit-form textarea{
  width:100%;
  min-height:42px;
  padding:9px 10px;
  border:1px solid #e8d3c4;
  border-radius:13px;
  background:#fffaf6;
  color:#4b2a18;
  outline:none;
}
.record-edit-symptoms{
  margin:12px 0;
  padding:11px;
  border:1px solid #ead8ca;
  border-radius:16px;
}
.record-edit-symptoms legend{
  padding:0 5px;
  color:#6c4a37;
  font-size:12px;
  font-weight:900;
}
.record-edit-symptoms > div{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:7px;
}
.record-edit-symptoms label{
  display:flex;
  align-items:center;
  gap:5px;
  min-width:0;
  padding:7px;
  border-radius:11px;
  background:#fff5f1;
  font-size:11px;
}
.record-edit-symptoms input{
  flex:0 0 auto;
}
.record-edit-note textarea{
  min-height:76px;
  resize:vertical;
}
.record-edit-actions{
  display:grid;
  grid-template-columns:1fr 1fr 1.25fr;
  gap:8px;
  margin-top:14px;
}
.record-edit-actions button{
  min-height:44px;
  border-radius:999px;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
}
.record-edit-delete{
  border:1px solid #efb9b2!important;
  background:#fff3f2;
  color:#bd4f45;
}
.record-edit-cancel{
  border:1px solid #e7d5c8!important;
  background:#fffaf6;
  color:#6a4a38;
}
.record-edit-save{
  background:linear-gradient(180deg,#ff856e,#ef6f58);
  color:#fff;
  box-shadow:0 7px 15px rgba(239,111,88,.2);
}

@media (max-width:370px){
  .record-history-live{margin-left:8px;margin-right:10px;padding:13px}
  .record-history-day{border-radius:10px;font-size:12px}
  .record-history-entry-main{grid-template-columns:42px minmax(0,1fr);}
  .record-history-edit{grid-column:2;justify-self:end;margin-top:-2px}
  .record-edit-form{padding:14px}
  .record-edit-symptoms > div{grid-template-columns:repeat(2,1fr)}
  .record-edit-actions{grid-template-columns:1fr 1fr}
  .record-edit-save{grid-column:1 / -1}
}


/* 毛毛日記_紀錄_v51：飲食區改為六個按鈕（3x2），新增食量變多與喝水變多。 */
.records-screen .rec-food-normal,
.records-screen .rec-food-more,
.records-screen .rec-food-less,
.records-screen .rec-water-normal,
.records-screen .rec-water-more,
.records-screen .rec-water-less{
  width:20.8%!important;
  height:8.5%!important;
  border-radius:24px!important;
  --sel-top:9px;
  --sel-right:5px;
  --sel-bottom:-4px;
  --sel-left:4px;
  --badge-top:9px;
  --badge-right:5px;
}
.records-screen .rec-food-normal{left:29.0%!important;top:24.9%!important}
.records-screen .rec-food-more{left:51.3%!important;top:24.9%!important}
.records-screen .rec-food-less{left:73.6%!important;top:24.9%!important}
.records-screen .rec-water-normal{left:29.0%!important;top:34.4%!important}
.records-screen .rec-water-more{left:51.3%!important;top:34.4%!important}
.records-screen .rec-water-less{left:73.6%!important;top:34.4%!important}

.records-screen .rec-food-normal.selected::after,
.records-screen .rec-food-more.selected::after,
.records-screen .rec-food-less.selected::after,
.records-screen .rec-water-normal.selected::after,
.records-screen .rec-water-more.selected::after,
.records-screen .rec-water-less.selected::after{
  border:2px solid #e5a23c;
  background:rgba(255,246,226,.52);
}
.records-screen .rec-food-normal.selected::before,
.records-screen .rec-food-more.selected::before,
.records-screen .rec-food-less.selected::before,
.records-screen .rec-water-normal.selected::before,
.records-screen .rec-water-more.selected::before,
.records-screen .rec-water-less.selected::before{background:#f0b145}

@media (max-width:370px){
  .records-screen .rec-food-normal,
  .records-screen .rec-food-more,
  .records-screen .rec-food-less,
  .records-screen .rec-water-normal,
  .records-screen .rec-water-more,
  .records-screen .rec-water-less{
    --sel-top:8px;
    --sel-right:4px;
    --sel-bottom:-3px;
    --sel-left:3px;
    --badge-top:8px;
    --badge-right:4px;
  }
}


/* 毛毛日記_紀錄_v52：排泄區改為六個按鈕（3x2），新增異味明顯、尿量偏少、尿色異常。 */
.records-screen .rec-poop-smell,
.records-screen .rec-urine-low,
.records-screen .rec-urine-color{
  background:transparent!important;
  box-shadow:none!important;
  border:0!important;
  border-radius:24px!important;
}
.records-screen .rec-poop-normal,
.records-screen .rec-poop-soft,
.records-screen .rec-poop-smell,
.records-screen .rec-pee-normal,
.records-screen .rec-urine-low,
.records-screen .rec-urine-color{
  width:20.8%!important;
  height:8.5%!important;
  border-radius:24px!important;
  --sel-top:10px;
  --sel-right:5px;
  --sel-bottom:-5px;
  --sel-left:4px;
  --sel-radius:22px;
  --badge-top:10px;
  --badge-right:5px;
}
.records-screen .rec-poop-normal{left:29.0%!important;top:45.8%!important}
.records-screen .rec-poop-soft{left:51.3%!important;top:45.8%!important}
.records-screen .rec-poop-smell{left:73.6%!important;top:45.8%!important}
.records-screen .rec-pee-normal{left:29.0%!important;top:55.3%!important}
.records-screen .rec-urine-low{left:51.3%!important;top:55.3%!important}
.records-screen .rec-urine-color{left:73.6%!important;top:55.3%!important}
.records-screen .rec-poop-normal.selected::after,
.records-screen .rec-poop-soft.selected::after,
.records-screen .rec-poop-smell.selected::after,
.records-screen .rec-pee-normal.selected::after,
.records-screen .rec-urine-low.selected::after,
.records-screen .rec-urine-color.selected::after{
  border:2px solid #6f9f72;
  background:rgba(231,246,233,.52);
}
.records-screen .rec-poop-normal.selected::before,
.records-screen .rec-poop-soft.selected::before,
.records-screen .rec-poop-smell.selected::before,
.records-screen .rec-pee-normal.selected::before,
.records-screen .rec-urine-low.selected::before,
.records-screen .rec-urine-color.selected::before{background:#5f9662}
@media (max-width:370px){
  .records-screen .rec-poop-normal,
  .records-screen .rec-poop-soft,
  .records-screen .rec-poop-smell,
  .records-screen .rec-pee-normal,
  .records-screen .rec-urine-low,
  .records-screen .rec-urine-color{
    --sel-top:9px;
    --sel-right:4px;
    --sel-bottom:-4px;
    --sel-left:3px;
    --badge-top:9px;
    --badge-right:4px;
  }
}


/* 毛毛日記_紀錄_v53：修正「便便正常」選取外框右側未覆蓋到底，將選取區塊往右延伸。 */
.records-screen .rec-poop-normal{
  --sel-right:-3px!important;
  --badge-right:-1px!important;
}
@media (max-width:370px){
  .records-screen .rec-poop-normal{
    --sel-right:-2px!important;
    --badge-right:0px!important;
  }
}


/* 毛毛日記_紀錄_v54：修正「便便偏軟」選取外框右側未覆蓋到底，將選取區塊往右延伸。 */
.records-screen .rec-poop-soft{
  --sel-right:-3px!important;
  --badge-right:-1px!important;
}
@media (max-width:370px){
  .records-screen .rec-poop-soft{
    --sel-right:-2px!important;
    --badge-right:0px!important;
  }
}


/* 毛毛日記_紀錄_v55：三個便便按鈕的選取顯示區塊整體再往下移，避免過度貼近上邊。 */
.records-screen .rec-poop-normal,
.records-screen .rec-poop-soft,
.records-screen .rec-poop-smell{
  --sel-top:16px!important;
  --badge-top:16px!important;
}
@media (max-width:370px){
  .records-screen .rec-poop-normal,
  .records-screen .rec-poop-soft,
  .records-screen .rec-poop-smell{
    --sel-top:14px!important;
    --badge-top:14px!important;
  }
}


/* 毛毛日記_紀錄_v56：新增「特別紀事／心情」區塊與月曆心情欄位。 */
.record-special-live{
  display:grid;
  gap:14px;
}
.record-mood-live{
  display:grid;
  grid-template-columns:110px minmax(0,1fr);
  gap:12px;
  align-items:stretch;
}
.record-mood-panel{
  border:1px solid #f0ddd0;
  border-radius:24px;
  background:linear-gradient(180deg,#fff8f3 0%, #fff2ea 100%);
  padding:12px 10px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  color:#5d3923;
}
.record-mood-panel-title{
  font-size:17px;
  font-weight:900;
  letter-spacing:.04em;
}
.record-mood-panel-pet{
  width:62px;
  height:62px;
  border-radius:20px;
  background:#fffdf9;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  box-shadow:inset 0 0 0 1px rgba(239,215,198,.75);
}
.record-mood-pet-media{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  font-size:42px;
  line-height:1;
}
span.record-mood-pet-media{
  display:flex;
  align-items:center;
  justify-content:center;
}
.record-mood-panel-sub{
  font-size:11px;
  line-height:1.4;
  color:#8d6752;
}
.record-mood-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:8px;
}
.record-mood-choice{
  min-height:54px;
  border:1px solid #ecd7ca;
  border-radius:18px;
  background:#fffdf9;
  color:#5d3923;
  font-weight:900;
  font-size:14px;
  line-height:1.2;
  box-shadow:0 2px 8px rgba(108,74,55,.05);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:10px 6px;
  cursor:pointer;
}
.record-mood-choice span{pointer-events:none}
.record-mood-choice.selected{
  border-color:#ef9c86;
  background:#fff2ee;
  box-shadow:0 0 0 2px rgba(239,156,134,.18) inset;
}
.record-mood-choice:active{transform:scale(.98)}
.record-mood-choice:focus-visible{
  outline:2px solid #ef9c86;
  outline-offset:2px;
}
.record-special-note textarea{
  min-height:96px;
}
@media (max-width:370px){
  .record-mood-live{
    grid-template-columns:96px minmax(0,1fr);
    gap:8px;
  }
  .record-mood-panel{
    padding:10px 8px;
    border-radius:20px;
  }
  .record-mood-panel-title{font-size:16px}
  .record-mood-panel-pet{width:54px;height:54px;border-radius:18px}
  .record-mood-grid{gap:8px}
  .record-mood-choice{
    min-height:48px;
    font-size:12px;
    border-radius:16px;
    padding:8px 4px;
  }
}


/* 毛毛日記_紀錄_v57：其他異常輸入、多選心情、笑容狗插畫 */
.record-mood-panel-pet{
  width:100%;
  min-height:76px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  background:none;
  box-shadow:none;
  overflow:visible;
}
.record-mood-dog{
  width:88px;
  max-width:100%;
  height:auto;
  display:block;
}
.record-mood-grid{
  align-content:start;
}
.record-other-modal{
  position:fixed;
  inset:0;
  z-index:240;
  display:grid;
  place-items:center;
  padding:18px;
  background:rgba(57,38,26,.34);
  backdrop-filter:blur(4px);
}
.record-other-sheet{
  width:min(100%, 430px);
  border:1px solid #ead8ca;
  border-radius:24px;
  background:#fffdfa;
  box-shadow:0 22px 44px rgba(56,37,26,.24);
  padding:18px;
  display:grid;
  gap:14px;
}
.record-other-head strong{
  display:block;
  color:#5b3826;
  font-size:20px;
  margin-bottom:5px;
}
.record-other-head p{
  margin:0;
  color:#8a6652;
  font-size:13px;
  line-height:1.5;
}
.record-other-input{
  width:100%;
  min-height:50px;
  padding:0 14px;
  border:1px solid #efd4c6;
  border-radius:16px;
  background:#fff8f4;
  color:#4b2a18;
  font-size:16px;
  outline:none;
}
.record-other-input:focus{
  border-color:#ef9c86;
  box-shadow:0 0 0 3px rgba(239,156,134,.16);
}
.record-other-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.record-other-actions button{
  min-height:38px;
  border-radius:999px;
  font-size:15px;
  font-weight:900;
  cursor:pointer;
}
.record-other-cancel{
  border:1px solid #e6d4c7;
  background:#fffaf6;
  color:#6a4a38;
}
.record-other-save{
  background:linear-gradient(180deg,#ff856e,#ef6f58);
  color:#fff;
  box-shadow:0 7px 15px rgba(239,111,88,.2);
}
.record-edit-other-field input[type="text"]{
  width:100%;
  min-height:42px;
  padding:9px 10px;
  border:1px solid #e8d3c4;
  border-radius:13px;
  background:#fffaf6;
  color:#4b2a18;
  outline:none;
}
.record-edit-options{
  margin:12px 0 0;
}
@media (max-width:370px){
  .record-mood-dog{width:72px}
  .record-other-sheet{padding:15px}
  .record-other-actions{grid-template-columns:1fr}
}


/* 毛毛日記_紀錄_v58：將上排異常按鈕與下排排泄按鈕的選取顯示區塊再往下移，並更換心情區可愛狗狗。 */
.records-screen .rec-bad-mood,
.records-screen .rec-vomit,
.records-screen .rec-diarrhea{
  --sel-top:22px!important;
  --sel-bottom:-17px!important;
  --badge-top:22px!important;
}
.records-screen .rec-pee-normal,
.records-screen .rec-urine-low,
.records-screen .rec-urine-color{
  --sel-top:17px!important;
  --sel-bottom:-12px!important;
  --badge-top:17px!important;
}
@media (max-width:370px){
  .records-screen .rec-bad-mood,
  .records-screen .rec-vomit,
  .records-screen .rec-diarrhea{
    --sel-top:20px!important;
    --sel-bottom:-15px!important;
    --badge-top:20px!important;
  }
  .records-screen .rec-pee-normal,
  .records-screen .rec-urine-low,
  .records-screen .rec-urine-color{
    --sel-top:15px!important;
    --sel-bottom:-10px!important;
    --badge-top:15px!important;
  }
}
.record-mood-dog{
  width:92px;
}


/* 毛毛日記_紀錄_v60：縮小上排三個異常按鈕按下後的顯示/感應高度，避免蓋到下排按鈕；寬度維持不變。 */
.records-screen .rec-bad-mood,
.records-screen .rec-vomit,
.records-screen .rec-diarrhea{
  top:68.6%!important;
  height:5.9%!important;
  z-index:30!important;
}
@media (max-width:370px){
  .records-screen .rec-bad-mood,
  .records-screen .rec-vomit,
  .records-screen .rec-diarrhea{
    top:68.4%!important;
    height:5.8%!important;
    z-index:30!important;
  }
}


/* 毛毛日記_紀錄_v61：縮小下排三個異常按鈕按下後的顯示/感應高度，避免往下蓋到太多；寬度維持不變。 */
.records-screen .rec-skin,
.records-screen .rec-cough,
.records-screen .rec-other{
  height:5.5%!important;
  z-index:30!important;
}
@media (max-width:370px){
  .records-screen .rec-skin,
  .records-screen .rec-cough,
  .records-screen .rec-other{
    height:5.4%!important;
    z-index:30!important;
  }
}


/* 毛毛日記_紀錄_v67：手機首頁快捷按鈕與近期提醒防重疊 */
/*
  首頁快捷卡片使用絕對定位；舊版近期提醒以約 26vw 的負 margin 往上拉，
  在手機瀏覽器字型與實際可視寬度下會壓住快捷卡片。手機版改為只上拉約 22vw，
  保留自然間距；桌機版維持原定位。
*/
@media (max-width:480px){
  .home-split-mode .home-reminders-wrap{
    margin-top:calc(-1 * clamp(82px,22vw,106px))!important;
  }
}
@media (max-width:370px){
  .home-split-mode .home-reminders-wrap{
    margin-top:calc(-1 * clamp(74px,21vw,82px))!important;
  }
}


/* 毛毛日記_紀錄_v85：心情文字改為程式切成固定兩行，不再依賴瀏覽器自動換行。 */
.record-mood-choice .record-mood-label{
  display:grid;
  grid-template-rows:auto auto;
  justify-items:center;
  align-items:center;
  inline-size:auto;
  max-inline-size:none;
  white-space:nowrap;
  word-break:keep-all;
  overflow-wrap:normal;
  writing-mode:horizontal-tb;
  text-orientation:mixed;
  line-height:1.22;
  pointer-events:none;
}
.record-mood-choice .record-mood-line{
  display:block;
  inline-size:auto;
  max-inline-size:none;
  min-inline-size:2em;
  white-space:nowrap;
  word-break:keep-all;
  overflow-wrap:normal;
  writing-mode:horizontal-tb;
  text-align:center;
  pointer-events:none;
}
@media (max-width:480px){
  .record-mood-choice .record-mood-label,
  .record-mood-choice .record-mood-line{
    inline-size:auto!important;
    max-inline-size:none!important;
    white-space:nowrap!important;
    word-break:keep-all!important;
    overflow-wrap:normal!important;
    writing-mode:horizontal-tb!important;
  }
}


/* 毛毛日記_紀錄_v69：
   1) 手機上「異常」六個按鈕的選取顯示區整體上移，避免整圈外框與勾勾過度下沉。
   2) 手機上「排泄」下排三個按鈕（尿尿正常／尿量偏少／尿色異常）的選取顯示區縮小高度，
      只減少往下延伸量，不改變寬度。 */
.records-screen .rec-bad-mood,
.records-screen .rec-vomit,
.records-screen .rec-diarrhea,
.records-screen .rec-skin,
.records-screen .rec-cough,
.records-screen .rec-other{
  --sel-top:14px!important;
  --sel-bottom:-9px!important;
  --badge-top:14px!important;
}
.records-screen .rec-pee-normal,
.records-screen .rec-urine-low,
.records-screen .rec-urine-color{
  --sel-top:12px!important;
  --sel-bottom:-4px!important;
  --badge-top:12px!important;
}
@media (max-width:370px){
  .records-screen .rec-bad-mood,
  .records-screen .rec-vomit,
  .records-screen .rec-diarrhea,
  .records-screen .rec-skin,
  .records-screen .rec-cough,
  .records-screen .rec-other{
    --sel-top:13px!important;
    --sel-bottom:-8px!important;
    --badge-top:13px!important;
  }
  .records-screen .rec-pee-normal,
  .records-screen .rec-urine-low,
  .records-screen .rec-urine-color{
    --sel-top:11px!important;
    --sel-bottom:-3px!important;
    --badge-top:11px!important;
  }
}


/* 毛毛日記_紀錄_v70：手機版選取框精準修正。
   - 異常六顆：框線與勾勾整體上移，框線落在原按鈕內，不再向下沉。
   - 尿尿三顆：只縮小選取框高度，左右寬度完全不改。 */
@media (max-width:600px){
  .records-screen .rec-bad-mood,
  .records-screen .rec-vomit,
  .records-screen .rec-diarrhea,
  .records-screen .rec-skin,
  .records-screen .rec-cough,
  .records-screen .rec-other{
    --sel-top:2px!important;
    --sel-bottom:3px!important;
    --badge-top:2px!important;
  }

  .records-screen .rec-pee-normal,
  .records-screen .rec-urine-low,
  .records-screen .rec-urine-color{
    --sel-top:3px!important;
    --sel-bottom:11px!important;
    --badge-top:3px!important;
  }
}


/* 毛毛日記_紀錄_v77：底部導覽列完全重建。
   圖示、文字、功能都由 data-route 單一資料來源產生，不再以第幾格判斷。 */
.bottom-nav .nav-item{
  order:initial!important;
}
.bottom-nav .nav-label{
  display:block;
  font-size:11px;
  line-height:1.25;
  white-space:nowrap;
}


/* 毛毛日記_紀錄_v80：手機版將「異常」與「特別紀事」區塊稍微拉開，避免過近。 */
@media (max-width: 480px){
  .records-page-form .record-footer-live{
    margin-top: clamp(-96px, -20vw, -68px)!important;
  }
}


/* 毛毛日記_紀錄_v81：手機版紀錄月曆下方只保留少量安全空間。
   移除紀錄表單原本額外的 110px 底部留白，並只保留底部導覽列所需高度。 */
@media (max-width:480px){
  #page-root[data-current-route="records"]{
    min-height:auto!important;
    padding-bottom:calc(84px + env(safe-area-inset-bottom))!important;
  }
  #page-root[data-current-route="records"] .records-page-form{
    padding-bottom:0!important;
  }
  #page-root[data-current-route="records"] .record-history-live{
    margin-bottom:6px!important;
  }
}


/* 毛毛日記_紀錄_v82：真正移除手機版月曆下方的大空白。
   舊版同時存在 #page-root 118px 與 records-page-form 110px 兩層底部留白；
   本版直接清除表單留白，頁面只保留「底部導覽高度＋8px」的安全距離。 */
@media (max-width:480px){
  #page-root[data-current-route="records"],
  #page-root:has(.records-page-form){
    min-height:auto!important;
    padding-bottom:calc(84px + env(safe-area-inset-bottom))!important;
  }
  .records-page-form{
    padding-bottom:0!important;
    margin-bottom:0!important;
  }
  .records-page-form .record-history-live{
    margin-bottom:8px!important;
  }
}


/* 毛毛日記_紀錄_v83：修正手機版毛孩卡片底部健康狀態被裁切。
   原因是卡片高度固定、外層 viewport 又設為 overflow:hidden；手機字級與比例下，
   「健康狀態」被推到卡片可視範圍之外。改為在手機版將「今日紀錄」與「健康狀態」
   固定定位在卡片底部，確保三張卡片都能完整顯示。 */
@media (max-width:480px){
  .home-pet-card{
    padding-bottom:0!important;
  }
  .home-pet-card .home-record-state{
    position:absolute!important;
    left:6%!important;
    right:6%!important;
    bottom:clamp(31px,8.2vw,38px)!important;
    width:auto!important;
    margin:0!important;
    box-sizing:border-box!important;
    z-index:2!important;
  }
  .home-pet-card .home-health-state{
    position:absolute!important;
    left:5%!important;
    right:5%!important;
    bottom:clamp(8px,2.2vw,11px)!important;
    width:auto!important;
    max-width:none!important;
    margin:0!important;
    display:block!important;
    line-height:1.2!important;
    text-align:center!important;
    z-index:2!important;
  }
}


/* 毛毛日記_紀錄_v84：根本修正手機版毛孩卡片健康狀態消失。
   不再依賴 record-state 的 auto margin 與手機 media query；
   將「今日紀錄＋健康狀態」包成固定卡片底部 footer，所有寬度都使用同一套結構。 */
.home-pet-card{
  padding-bottom:clamp(62px,18%,78px)!important;
  overflow:visible!important;
}
.home-pet-card .home-pet-footer{
  position:absolute!important;
  left:6%!important;
  right:6%!important;
  bottom:clamp(8px,3.3%,14px)!important;
  z-index:5!important;
  display:grid!important;
  grid-template-rows:auto auto!important;
  gap:clamp(4px,1.1vw,7px)!important;
  align-items:center!important;
  pointer-events:none!important;
  visibility:visible!important;
  opacity:1!important;
}
.home-pet-card .home-pet-footer .home-record-state{
  position:static!important;
  inset:auto!important;
  width:100%!important;
  margin:0!important;
  padding:clamp(5px,1.5vw,8px) 3px!important;
  box-sizing:border-box!important;
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  line-height:1.2!important;
  text-align:center!important;
}
.home-pet-card .home-pet-footer .home-health-state{
  position:static!important;
  inset:auto!important;
  width:100%!important;
  max-width:none!important;
  min-height:1.2em!important;
  margin:0!important;
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  overflow:visible!important;
  text-overflow:clip!important;
  white-space:nowrap!important;
  color:#4d8f5c!important;
  line-height:1.2!important;
  text-align:center!important;
  font-size:clamp(8px,2.5vw,12px)!important;
}
@media (max-width:480px){
  .home-pet-card{
    padding-top:7%!important;
    padding-bottom:clamp(60px,20%,72px)!important;
  }
  .home-pet-card .home-pet-footer{
    left:4%!important;
    right:4%!important;
    bottom:clamp(6px,2.5%,10px)!important;
    gap:4px!important;
  }
  .home-pet-card .home-pet-footer .home-record-state{
    padding:5px 2px!important;
    font-size:clamp(8px,2.35vw,10px)!important;
  }
  .home-pet-card .home-pet-footer .home-health-state{
    font-size:clamp(8px,2.35vw,10px)!important;
  }
}


/* 毛毛日記_紀錄_v86：將心情區左側「標題＋龍貓＋提示文字」整張卡片等比縮小為 75%。
   右側六個心情按鈕的尺寸與位置維持不變。 */
.record-mood-live .record-mood-panel{
  transform:scale(.75)!important;
  transform-origin:center center!important;
  justify-self:center!important;
  align-self:center!important;
}


/* 毛毛日記_紀錄_v87：手機版將縮小後的左側心情動物卡片往上對齊右側第一排按鈕。 */
@media (max-width:480px){
  .record-mood-live .record-mood-panel{
    align-self:start!important;
    transform-origin:top center!important;
  }
}


/* 毛毛日記_紀錄_v88：手機版加寬並縮短左側心情動物卡片。
   「今天感覺如何？」固定單行顯示，卡片高度同步壓縮，頂端維持與右側第一排按鈕對齊。 */
@media (max-width:480px){
  .record-mood-live{
    grid-template-columns:clamp(112px,31vw,124px) minmax(0,1fr)!important;
    column-gap:8px!important;
    align-items:start!important;
  }
  .record-mood-live .record-mood-panel{
    transform:none!important;
    transform-origin:top center!important;
    align-self:start!important;
    justify-self:stretch!important;
    width:100%!important;
    height:clamp(126px,35vw,142px)!important;
    min-height:0!important;
    box-sizing:border-box!important;
    padding:8px 6px!important;
    gap:4px!important;
    justify-content:space-between!important;
  }
  .record-mood-panel-title{
    font-size:15px!important;
    line-height:1.05!important;
  }
  .record-mood-panel-pet{
    width:100%!important;
    height:clamp(58px,17vw,68px)!important;
    min-height:0!important;
    flex:0 0 auto!important;
  }
  .record-mood-dog{
    width:clamp(60px,18vw,72px)!important;
    max-width:100%!important;
    max-height:100%!important;
    object-fit:contain!important;
  }
  .record-mood-panel-sub{
    display:block!important;
    width:100%!important;
    margin:0!important;
    font-size:10.5px!important;
    line-height:1!important;
    white-space:nowrap!important;
    word-break:keep-all!important;
    overflow-wrap:normal!important;
    text-align:center!important;
  }
}


/* 毛毛日記_紀錄_v89：手機版「異常」六個按鈕的粉紅選取框與勾勾整體下移，
   讓顯示外框與原始按鈕本體重疊，不再浮在按鈕上方。
   只調整垂直位置，不改變寬度。 */
@media (max-width:600px){
  .records-screen .rec-bad-mood,
  .records-screen .rec-vomit,
  .records-screen .rec-diarrhea,
  .records-screen .rec-skin,
  .records-screen .rec-cough,
  .records-screen .rec-other{
    --sel-top:14px!important;
    --sel-bottom:-9px!important;
    --badge-top:14px!important;
  }
}
@media (max-width:370px){
  .records-screen .rec-bad-mood,
  .records-screen .rec-vomit,
  .records-screen .rec-diarrhea,
  .records-screen .rec-skin,
  .records-screen .rec-cough,
  .records-screen .rec-other{
    --sel-top:13px!important;
    --sel-bottom:-8px!important;
    --badge-top:13px!important;
  }
}


/* 毛毛日記_紀錄_v91：手機版「排泄」下排三個按鈕（尿尿正常／尿量偏少／尿色異常）的
   綠色選取框與勾勾再往下移一些，讓顯示框與原始按鈕本體更精準重疊。
   只調整垂直位置，不改變寬度。 */
@media (max-width:600px){
  .records-screen .rec-pee-normal,
  .records-screen .rec-urine-low,
  .records-screen .rec-urine-color{
    --sel-top:16px!important;
    --sel-bottom:-2px!important;
    --badge-top:16px!important;
  }
}
@media (max-width:370px){
  .records-screen .rec-pee-normal,
  .records-screen .rec-urine-low,
  .records-screen .rec-urine-color{
    --sel-top:15px!important;
    --sel-bottom:-2px!important;
    --badge-top:15px!important;
  }
}


/* 毛毛日記_紀錄_v92：放大首頁「近期提醒」清單文字。
   放大毛孩名稱、提醒內容、日期與箭頭，並稍微增加列高，避免文字擁擠。 */
.home-reminders-head{
  font-size:clamp(15px,3.7vw,19px)!important;
}
.home-reminder-row{
  min-height:58px!important;
  padding:12px 14px!important;
  gap:12px!important;
}
.home-reminder-copy strong{
  font-size:clamp(14px,3.35vw,18px)!important;
  line-height:1.2!important;
}
.home-reminder-copy small{
  font-size:clamp(11px,2.75vw,14px)!important;
  line-height:1.4!important;
}
.home-reminder-date{
  font-size:clamp(13px,3.05vw,16px)!important;
}
.home-reminder-arrow{
  font-size:27px!important;
}
@media (max-width:370px){
  .home-reminder-row{
    min-height:56px!important;
    padding:11px 11px!important;
    gap:9px!important;
  }
  .home-reminder-copy strong{
    font-size:14px!important;
  }
  .home-reminder-copy small{
    font-size:11px!important;
  }
  .home-reminder-date{
    font-size:13px!important;
  }
}


/* 毛毛日記_紀錄_v93：電腦版將縮小後的左側心情動物卡片往上對齊右側第一排按鈕。
   保留原本 75% 尺寸，只修正垂直對齊；手機版沿用既有獨立設定。 */
@media (min-width:481px){
  .record-mood-live{
    align-items:start!important;
  }
  .record-mood-live .record-mood-panel{
    align-self:start!important;
    transform-origin:top center!important;
  }
}


/* 毛毛日記_紀錄_v95：以使用者上傳的 v93 為基底，
   將電腦版「今天感覺如何？」改為粗黑字；手機版維持不變。 */
@media (min-width:481px){
  .record-mood-panel-sub{
    color:#111!important;
    font-weight:900!important;
  }
}

/* 毛毛日記_紀錄_v96：修正電腦版「心情區塊」與下方特別紀事文字框之間的多餘空白。
   v86 用 transform 縮小左側動物卡片時，保留了原本的版面高度，造成上方心情區與下方輸入框之間出現一段空白。
   這裡只在電腦版把特別紀事文字框整體往上收，讓它貼齊上方區塊底部，不影響手機版。 */
@media (min-width:481px){
  .record-special-note{
    margin-top:-34px!important;
  }
}

/* 毛毛日記_紀錄_v97：縮小紀錄頁底部「取消／儲存」按鈕的字體與外框尺寸 */
.record-footer-actions{
  gap:10px!important;
}
.record-footer-actions button{
  min-height:44px!important;
  font-size:16px!important;
  border-radius:28px!important;
  padding:0 14px!important;
}
.record-footer-save span{
  font-size:18px!important;
  vertical-align:-1px;
}


/* 毛毛日記_行事曆_v02：將紀錄頁「取消／儲存」按鈕移到特別紀事框線外。
   按鈕保留原尺寸與樣式，改成獨立區塊放在特別紀事卡片下方，避免誤解為只屬於特別紀事。 */
.record-special-live{
  margin-bottom:10px!important;
}
.record-actions-outside{
  position:relative;
  z-index:12;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px!important;
}
@media (max-width:480px){
  .record-actions-outside{
    margin:0 14px 12px!important;
  }
}


/* 毛毛日記_行事曆_v03：壓縮「心情」左側龍貓卡片與右側心情按鈕的垂直節奏。
   1) 將「心情」標題下移、更靠近龍貓。
   2) 將「今天感覺如何？」上移、更靠近龍貓。
   3) 左側卡片高度縮短，右側六個心情按鈕同步略微變矮。
   4) 整個區塊頂部仍與右側按鈕列頂端對齊。 */
@media (min-width:481px){
  .record-mood-live{
    grid-template-columns:clamp(140px,16vw,154px) minmax(0,1fr)!important;
    gap:12px!important;
    align-items:start!important;
  }
  .record-mood-live .record-mood-panel{
    transform:none!important;
    transform-origin:top center!important;
    align-self:start!important;
    justify-self:stretch!important;
    width:100%!important;
    height:216px!important;
    min-height:0!important;
    box-sizing:border-box!important;
    padding:10px 10px 8px!important;
    gap:2px!important;
    justify-content:flex-start!important;
  }
  .record-mood-panel-title{
    margin:10px 0 2px!important;
    line-height:1.03!important;
  }
  .record-mood-panel-pet{
    width:100%!important;
    min-height:0!important;
    height:118px!important;
    flex:0 0 auto!important;
    align-items:center!important;
    margin:0!important;
  }
  .record-mood-dog{
    width:104px!important;
    max-width:100%!important;
    height:auto!important;
    object-fit:contain!important;
  }
  .record-mood-panel-sub{
    margin:-2px 0 0!important;
    font-size:12px!important;
    line-height:1.05!important;
  }
  .record-mood-grid{
    gap:10px!important;
    align-content:start!important;
  }
  .record-mood-choice{
    min-height:48px!important;
    padding:8px 6px!important;
    line-height:1.14!important;
  }
  .record-special-note{
    margin-top:-12px!important;
  }
}
@media (max-width:480px){
  .record-mood-live{
    align-items:start!important;
  }
  .record-mood-live .record-mood-panel{
    height:118px!important;
    padding:7px 6px 6px!important;
    gap:2px!important;
    justify-content:flex-start!important;
  }
  .record-mood-panel-title{
    margin:4px 0 1px!important;
  }
  .record-mood-panel-pet{
    height:52px!important;
    margin:0!important;
  }
  .record-mood-dog{
    width:clamp(58px,17vw,68px)!important;
  }
  .record-mood-panel-sub{
    margin:-1px 0 0!important;
    line-height:1!important;
  }
  .record-mood-choice{
    min-height:44px!important;
    padding:6px 4px!important;
    line-height:1.12!important;
  }
}


/* 毛毛日記_行事曆_v04：消除左側心情卡片底部多餘空白。
   將「今天感覺如何？」下方到框線之間的空白再收掉，讓卡片底部更貼近文字。 */
@media (min-width:481px){
  .record-mood-live .record-mood-panel{
    height:188px!important;
    padding:10px 10px 3px!important;
  }
  .record-mood-panel-pet{
    height:106px!important;
  }
  .record-mood-panel-sub{
    margin:-4px 0 0!important;
    line-height:1!important;
  }
}
@media (max-width:480px){
  .record-mood-live .record-mood-panel{
    height:104px!important;
    padding:7px 6px 3px!important;
  }
  .record-mood-panel-pet{
    height:46px!important;
  }
  .record-mood-panel-sub{
    margin:-3px 0 0!important;
    line-height:1!important;
  }
}


/* 毛毛日記_行事曆_v05：電腦版左側「心情」動物區塊等比縮小為約 75%，
   並進一步消除「今天感覺如何？」下方到底框之間的多餘空白。 */
@media (min-width:481px){
  .record-mood-live{
    grid-template-columns:clamp(106px,12vw,116px) minmax(0,1fr)!important;
    gap:10px!important;
    align-items:start!important;
  }
  .record-mood-live .record-mood-panel{
    height:142px!important;
    padding:7px 7px 1px!important;
    gap:1px!important;
    border-radius:20px!important;
  }
  .record-mood-panel-title{
    margin:5px 0 1px!important;
    font-size:13px!important;
    line-height:1.02!important;
  }
  .record-mood-panel-pet{
    height:76px!important;
    margin:0!important;
  }
  .record-mood-dog{
    width:78px!important;
  }
  .record-mood-panel-sub{
    margin:-4px 0 0!important;
    font-size:9px!important;
    line-height:1!important;
  }
}


/* 毛毛日記_行事曆_v06：修正電腦版左側心情卡片底部仍殘留的空白。
   取消固定高度，改由內容自動撐開卡片，讓「今天感覺如何？」下方到底框之間不再保留多餘空間。 */
@media (min-width:481px){
  .record-mood-live .record-mood-panel{
    height:auto!important;
    min-height:0!important;
    padding:7px 7px 0!important;
    gap:0!important;
  }
  .record-mood-panel-title{
    margin:5px 0 0!important;
  }
  .record-mood-panel-pet{
    height:72px!important;
    margin:-1px 0 0!important;
  }
  .record-mood-dog{
    width:76px!important;
  }
  .record-mood-panel-sub{
    margin:-6px 0 2px!important;
    line-height:1!important;
  }
}


/* 毛毛日記_行事曆_v07：把電腦版左側心情卡片底部留白微微加回來一點。
   在 v06 基礎上，只增加一點點「今天感覺如何？」下方到框線的距離，避免貼得太緊。 */
@media (min-width:481px){
  .record-mood-live .record-mood-panel{
    padding:7px 7px 3px!important;
  }
  .record-mood-panel-sub{
    margin:-5px 0 4px!important;
  }
}


/* 毛毛日記_行事曆_v08：電腦版左側心情卡片微調。
   1) 再增加一點「今天感覺如何？」下方到底框的留白。
   2) 將「心情」兩字放大，並改為粗黑字。 */
@media (min-width:481px){
  .record-mood-live .record-mood-panel{
    padding:7px 7px 5px!important;
  }
  .record-mood-panel-title{
    font-size:15px!important;
    font-weight:900!important;
    color:#000!important;
  }
  .record-mood-panel-sub{
    margin:-5px 0 6px!important;
  }
}


/* 毛毛日記_行事曆_v09：電腦版左側心情卡片再微調。
   1) 將「心情」兩字再加大一些。
   2) 將「今天感覺如何？」再往下移一些些。 */
@media (min-width:481px){
  .record-mood-panel-title{
    font-size:17px!important;
    font-weight:900!important;
    color:#000!important;
    line-height:1.02!important;
  }
  .record-mood-panel-sub{
    margin:-2px 0 8px!important;
    line-height:1!important;
  }
}


/* 毛毛日記_行事曆_v10：手機版修正首頁毛孩卡片的「今日未紀錄／今日已記錄」白框過寬問題，
   並縮小紀錄頁 header 右側動物插圖，避免壓到「新增今日紀錄」文字。 */
@media (max-width:480px){
  .home-pet-card .home-pet-footer .home-record-state{
    width:88%!important;
    justify-self:center!important;
    margin:0 auto!important;
    padding:5px 2px!important;
  }
  .records-screen .rec-header-pets{
    right:0.4%!important;
    bottom:2.8%!important;
    width:31.5%!important;
  }
}
@media (max-width:370px){
  .records-screen .rec-header-pets{
    right:0.2%!important;
    bottom:3.2%!important;
    width:30.5%!important;
  }
}


/* 毛毛日記_行事曆_v11：手機版將「新增今日紀錄」標題縮小為約原本的 75%。 */
@media (max-width:480px){
  .records-screen .rec-header-title{
    font-size:clamp(17px,4vw,23px)!important;
  }
}
@media (max-width:370px){
  .records-screen .rec-header-title{
    font-size:16px!important;
  }
}


/* 毛毛日記_行事曆_v12：電腦版將「新增今日紀錄」標題縮小為約原本的 75%。 */
@media (min-width:481px){
  .records-screen .rec-header-title{
    font-size:clamp(16.5px,4vw,23px)!important;
  }
}


/* 毛毛日記_行事曆_v13：電腦版紀錄選項文字取消粗黑。
   電腦版改用原本較細、深棕色的按鈕文字美術；手機版維持目前較粗黑的文字版本。 */
.rec-option-art-desktop{
  display:none!important;
}
@media (min-width:481px){
  .records-screen .rec-option-art-mobile{
    display:none!important;
  }
  .records-screen .rec-option-art-desktop{
    display:block!important;
  }
}


/* 毛毛日記_行事曆_v15：修正手機版行事曆頁版面。
   1) 將「近期排程」整塊往下移，避免壓到上方「新增排程」區。
   2) 將下方「當日排程」區往上補回，消除中間大段空白。 */
@media (max-width:480px){
  .calendar-upcoming-live{
    margin:clamp(-146px,-33vw,-118px) 13px 12px!important;
  }
  .day-agenda{
    position:relative;
    z-index:11;
    margin:clamp(-118px,-30vw,-92px) 14px 20px!important;
  }
}
@media (max-width:370px){
  .calendar-upcoming-live{
    margin:clamp(-132px,-31vw,-108px) 10px 10px!important;
  }
  .day-agenda{
    margin:clamp(-106px,-28vw,-86px) 10px 18px!important;
  }
}


/* 毛毛日記_行事曆_v16：手機版行事曆改用單一正常文流容器承載「近期排程＋當日排程」。
   不再分別用兩組負 margin 硬拉位置，避免近期排程壓住新增排程、
   以及兩個排程區塊中間出現大段空白或當日標題被遮住。 */
.calendar-flow-live{
  display:contents;
}
@media (max-width:480px){
  .calendar-flow-live{
    position:relative;
    z-index:12;
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:12px;
    margin-top:clamp(-125px,-28vw,-100px);
  }
  .calendar-flow-live .calendar-upcoming-live{
    position:relative!important;
    z-index:2!important;
    margin:0 13px!important;
  }
  .calendar-flow-live .day-agenda{
    position:relative!important;
    z-index:1!important;
    margin:0 14px 20px!important;
  }
}
@media (max-width:370px){
  .calendar-flow-live{
    gap:8px;
    margin-top:clamp(-112px,-27vw,-96px);
  }
  .calendar-flow-live .calendar-upcoming-live,
  .calendar-flow-live .day-agenda{
    margin-left:10px!important;
    margin-right:10px!important;
  }
}


/* 毛毛日記_行事曆_v17：根本修正手機版行事曆下半部。
   問題來源是 calendar-screen 仍保留整張舊版高度，先前只改外層負 margin，
   因此視覺位置幾乎不變，且當日排程仍可能被拉進舊畫面範圍內。
   本版保留月曆內所有百分比定位不變，但直接收合 calendar-screen 在文流中
   未使用的下半段，再讓「近期排程＋當日排程」以正常文流連續排列。 */
@media (max-width:480px){
  .calendar-screen{
    /* calendar-screen 高度約為寬度的 1.631 倍；新增排程底端約在 72.4%。
       收掉約 42vw 後，文流結尾落在新增排程下方，保留約 10～14px 間距。 */
    margin-bottom:-42vw!important;
  }
  .calendar-flow-live{
    position:relative!important;
    z-index:12!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:12px!important;
    margin:0!important;
    padding:0!important;
  }
  .calendar-flow-live .calendar-upcoming-live{
    position:relative!important;
    z-index:2!important;
    margin:0 13px!important;
  }
  .calendar-flow-live .day-agenda{
    position:relative!important;
    z-index:1!important;
    margin:0 14px 20px!important;
  }
}
@media (max-width:370px){
  .calendar-screen{
    margin-bottom:-42vw!important;
  }
  .calendar-flow-live{
    gap:10px!important;
    margin:0!important;
  }
  .calendar-flow-live .calendar-upcoming-live,
  .calendar-flow-live .day-agenda{
    margin-left:10px!important;
    margin-right:10px!important;
  }
}


/* 毛毛日記_行事曆_v18：真正重建手機版行事曆下半部文流。
   不再用負 margin 推拉原本整張 calendar-screen，而是新增可視裁切容器：
   calendar-screen 保留原始完整比例與內部百分比定位，外層只顯示到「新增排程」下方。
   「近期排程」與「當日排程」隨後以正常文流連續排列，因此不會重疊，也不會留下大段空白。 */
.calendar-stage-clip{
  display:contents;
}
@media (max-width:480px){
  .calendar-stage-clip{
    position:relative!important;
    display:block!important;
    width:100%!important;
    aspect-ratio:1 / 1.205!important;
    overflow:hidden!important;
    margin:0!important;
    padding:0!important;
  }
  .calendar-stage-clip .calendar-screen{
    position:absolute!important;
    inset:0 auto auto 0!important;
    width:100%!important;
    height:auto!important;
    aspect-ratio:982 / 1602!important;
    margin:0!important;
  }
  .calendar-flow-live{
    position:relative!important;
    z-index:12!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:12px!important;
    margin:10px 0 0!important;
    padding:0!important;
  }
  .calendar-flow-live .calendar-upcoming-live{
    position:relative!important;
    z-index:2!important;
    margin:0 13px!important;
  }
  .calendar-flow-live .day-agenda{
    position:relative!important;
    z-index:1!important;
    margin:0 14px 20px!important;
  }
}
@media (max-width:370px){
  .calendar-stage-clip{
    aspect-ratio:1 / 1.21!important;
  }
  .calendar-flow-live{
    gap:10px!important;
    margin-top:8px!important;
  }
  .calendar-flow-live .calendar-upcoming-live,
  .calendar-flow-live .day-agenda{
    margin-left:10px!important;
    margin-right:10px!important;
  }
}


/* 毛毛日記_行事曆_v19：修正手機版行事曆中「近期排程」壓到「新增排程」上方的問題。
   做法：提高 calendar-stage-clip 的可視高度，保留新增排程下方更多空間，
   並把後續文流區塊的起始間距再拉開一些，避免任何毛孩頁面出現重疊。 */
@media (max-width:480px){
  .calendar-stage-clip{
    aspect-ratio:1 / 1.255!important;
  }
  .calendar-flow-live{
    gap:14px!important;
    margin-top:14px!important;
  }
}
@media (max-width:370px){
  .calendar-stage-clip{
    aspect-ratio:1 / 1.265!important;
  }
  .calendar-flow-live{
    gap:12px!important;
    margin-top:12px!important;
  }
}


/* 毛毛日記_行事曆_v20：收尾修正行事曆區塊間距與版本標記。
   電腦版將「新增排程」與「近期排程」之間的距離增加到約 22～24px，
   手機版沿用 v19 已修正完成的正常文流與安全間距。 */
@media (min-width:481px){
  .calendar-upcoming-live{
    margin:-193px 13px 14px!important;
  }
}


/* 毛毛日記_行事曆_v21：同步修正電腦版行事曆下半部文流。
   不再讓桌機版的「近期排程」依賴負 margin 壓回月曆畫布；
   改成與手機版相同的裁切＋正常文流結構，避免上方留白或把「目前選取日期」卡片上緣吃掉。 */
@media (min-width:481px){
  .calendar-stage-clip{
    position:relative!important;
    display:block!important;
    width:100%!important;
    aspect-ratio:1 / 1.445!important;
    overflow:hidden!important;
    margin:0!important;
    padding:0!important;
  }
  .calendar-stage-clip .calendar-screen{
    position:absolute!important;
    inset:0 auto auto 0!important;
    width:100%!important;
    height:auto!important;
    aspect-ratio:982 / 1602!important;
    margin:0!important;
  }
  .calendar-flow-live{
    position:relative!important;
    z-index:12!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    gap:22px!important;
    margin:22px 0 0!important;
    padding:0!important;
  }
  .calendar-flow-live .calendar-upcoming-live{
    position:relative!important;
    z-index:2!important;
    margin:0 13px!important;
  }
  .calendar-flow-live .day-agenda{
    position:relative!important;
    z-index:1!important;
    margin:0 14px 20px!important;
  }
}
@media (min-width:1200px){
  .calendar-stage-clip{
    aspect-ratio:1 / 1.452!important;
  }
  .calendar-flow-live{
    gap:24px!important;
    margin-top:24px!important;
  }
}


/* 毛毛日記_行事曆_v22：縮短電腦版「新增排程」與「近期排程」之間的距離。
   v21 的桌機裁切容器高度過高，雖然不再互相遮擋，卻保留了大段空白。
   本版將裁切終點收回到新增排程下方，只保留正常安全間距；手機版沿用既有設定。 */
@media (min-width:481px){
  .calendar-stage-clip{
    aspect-ratio:1 / 1.205!important;
  }
  .calendar-flow-live{
    margin-top:10px!important;
  }
}
@media (min-width:1200px){
  .calendar-stage-clip{
    aspect-ratio:1 / 1.205!important;
  }
  .calendar-flow-live{
    margin-top:12px!important;
  }
}


/* 毛毛日記_行事曆_v24：修正新增排程區右側月曆鉛筆插圖。
   移除會遮住日期的整塊白色背景，改用透明背景獨立插圖；
   並等比縮小，讓整張圖完整待在粉色新增排程區塊內，不再超出。 */
.ca-panel-art{
  left:81.2%!important;
  top:65.9%!important;
  width:13.2%!important;
  height:auto!important;
  object-fit:contain!important;
}
@media (max-width:480px){
  .ca-panel-art{
    left:79.8%!important;
    top:65.7%!important;
    width:15.0%!important;
    height:auto!important;
  }
}
@media (min-width:1200px){
  .ca-panel-art{
    left:82.0%!important;
    top:65.95%!important;
    width:12.4%!important;
  }
}

/* 毛毛日記_行事曆_v25：將月份標題、星期與日期格改為真正的動態 HTML 元件。
   月曆區不再依賴畫死的 2025 年 6 月圖片，因此左右箭頭可切換任意月份，
   每個月份的所有日期都能選取並新增排程。手機版與電腦版共用同一套功能。 */
.calendar-grid-live{
  position:absolute;
  z-index:7;
  left:4.1%;
  top:32.35%;
  width:91.8%;
  height:32.55%;
  box-sizing:border-box;
  display:grid;
  grid-template-rows:auto auto minmax(0,1fr);
  row-gap:clamp(2px,.45vw,6px);
  padding:clamp(7px,1.35vw,14px) clamp(8px,1.8vw,18px) clamp(5px,1vw,11px);
  border-radius:clamp(18px,3vw,32px);
  background:linear-gradient(180deg,#fffdfa 0%,#fffaf7 100%);
  color:#4b2a18;
  overflow:hidden;
}
.calendar-month-toolbar{
  display:grid;
  grid-template-columns:clamp(30px,7%,48px) minmax(0,1fr) clamp(30px,7%,48px) clamp(48px,13%,76px);
  align-items:center;
  gap:clamp(2px,.7vw,8px);
  min-height:clamp(29px,5.7vw,45px);
}
.calendar-month-arrow,
.calendar-today-button,
.calendar-live-day{
  appearance:none;
  border:0;
  font:inherit;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.calendar-month-arrow{
  height:100%;
  display:grid;
  place-items:center;
  background:transparent;
  color:#9a6339;
  font-size:clamp(25px,5.6vw,39px);
  line-height:1;
  border-radius:50%;
}
.calendar-month-arrow:active{
  background:rgba(240,169,104,.14);
  transform:scale(.94);
}
.calendar-month-title{
  min-width:0;
  text-align:center;
  white-space:nowrap;
  font-size:clamp(16px,4.3vw,29px);
  line-height:1.1;
  font-weight:900;
  letter-spacing:.04em;
}
.calendar-today-button{
  justify-self:stretch;
  min-height:clamp(27px,5vw,40px);
  padding:0 clamp(5px,1vw,10px);
  border:1px solid #e7c7ac;
  border-radius:999px;
  background:#fffaf5;
  color:#72503a;
  font-size:clamp(10px,2.6vw,15px);
  font-weight:800;
  white-space:nowrap;
}
.calendar-weekdays{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  align-items:center;
  text-align:center;
  color:#523325;
  font-size:clamp(10px,2.55vw,15px);
  line-height:1;
}
.calendar-live-days{
  min-height:0;
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  grid-template-rows:repeat(6,minmax(0,1fr));
  align-items:stretch;
}
.calendar-live-day{
  position:relative;
  min-width:0;
  min-height:0;
  display:grid;
  place-items:center;
  padding:0;
  background:transparent;
  color:#35271f;
  font-size:clamp(10px,2.7vw,17px);
  line-height:1;
  border-radius:50%;
}
.calendar-live-day span{
  width:clamp(22px,5.7vw,36px);
  aspect-ratio:1;
  display:grid;
  place-items:center;
  border-radius:50%;
  transition:transform .12s ease,background .12s ease,box-shadow .12s ease;
}
.calendar-live-day:hover span{
  background:rgba(244,183,116,.12);
}
.calendar-live-day:active span{
  transform:scale(.9);
}
.calendar-live-day.is-adjacent{
  color:#bcb4ae;
}
.calendar-live-day.selected span{
  background:#fff0da;
  box-shadow:inset 0 0 0 1px #efbf82;
  color:#4b2a18;
}
.calendar-live-day.is-today:not(.selected) span{
  box-shadow:inset 0 0 0 2px #e8a63d;
}
.calendar-live-day.has-schedule::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:clamp(0px,.25vw,3px);
  width:clamp(4px,1vw,7px);
  height:clamp(4px,1vw,7px);
  transform:translateX(-50%);
  border-radius:50%;
  background:#f27a62;
  box-shadow:0 0 0 1px rgba(255,255,255,.9);
}
.calendar-grid-live button:focus-visible{
  outline:2px solid #ef8b72;
  outline-offset:1px;
}

@media (max-width:480px){
  .calendar-grid-live{
    left:4.2%;
    top:32.35%;
    width:91.6%;
    height:32.7%;
    padding:7px 7px 5px;
    row-gap:2px;
  }
  .calendar-month-toolbar{
    grid-template-columns:32px minmax(0,1fr) 32px 50px;
    min-height:30px;
  }
  .calendar-live-day span{
    width:clamp(21px,5.9vw,29px);
  }
}

@media (min-width:1200px){
  .calendar-grid-live{
    padding:14px 18px 10px;
  }
}


/* 毛毛日記_行事曆_v26：強化「今日」按鈕與今日日期選取狀態。
   今日按鈕永遠位於月曆互動層最上方；按下後，真正的本地今日日期會成為唯一選取日期。 */
.calendar-grid-live{
  z-index:20!important;
  pointer-events:auto!important;
}
.calendar-month-toolbar,
.calendar-today-button,
.calendar-month-arrow,
.calendar-live-day{
  pointer-events:auto!important;
}
.calendar-today-button{
  position:relative;
  z-index:3;
  touch-action:manipulation;
}
.calendar-live-day.selected span{
  background:#fff0da!important;
  box-shadow:inset 0 0 0 2px #e8a63d!important;
  font-weight:900;
}
.calendar-live-day.is-today.selected span{
  background:#ffe8c3!important;
  box-shadow:inset 0 0 0 3px #e59b2d!important;
}


/* 毛毛日記_行事曆_v29：本機提醒功能 */
.reminder-settings{
  display:grid;
  gap:8px;
  margin:2px 0 0;
  padding:14px;
  border:1px solid #ead6c7;
  border-radius:20px;
  background:#fffaf6;
}
.reminder-settings legend{padding:0 6px;color:#5b3823;font-weight:900}
.custom-reminder-row[hidden],
.notification-permission-panel[hidden]{display:none!important}
.reminder-preview{
  padding:10px 12px;
  border-radius:14px;
  background:#fff1e8;
  color:#7d4f35;
  font-size:13px;
  font-weight:800;
  line-height:1.45;
}
.notification-permission-panel{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:10px 12px;
  border-radius:14px;
  background:#f5f0ec;
  color:#75645a;
  font-size:11px;
  line-height:1.4;
}
.notification-permission-panel button{
  flex:0 0 auto;
  padding:8px 11px;
  border-radius:999px;
  background:#fff;
  color:#e0644f;
  font-weight:900;
  box-shadow:inset 0 0 0 1px #e9d7ca;
}
.reminder-alert-modal{
  position:fixed;
  inset:0;
  z-index:10050;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(61,42,31,.48);
  backdrop-filter:blur(4px);
}
.reminder-alert-sheet{
  width:min(94vw,520px);
  max-height:min(84vh,720px);
  overflow:auto;
  padding:22px;
  border-radius:28px;
  background:#fffdfa;
  box-shadow:0 24px 60px rgba(65,40,23,.25);
  text-align:center;
}
.reminder-alert-icon{font-size:42px}
.reminder-alert-sheet h2{margin:5px 0 4px;color:#4b2a18}
.reminder-alert-sheet>p{margin:0 0 14px;color:#806d61}
.reminder-alert-list{display:grid;gap:8px;text-align:left}
.reminder-alert-item{
  display:grid;
  gap:4px;
  width:100%;
  padding:14px;
  border:1px solid #edd9c9;
  border-radius:18px;
  background:#fff8f3;
  color:#4b2a18;
  text-align:left;
}
.reminder-alert-item strong{font-size:15px}
.reminder-alert-item small{color:#e0644f;font-weight:800}
.reminder-alert-item span{font-size:11px;color:#806d61}
.reminder-alert-dismiss{
  width:100%;
  margin-top:14px;
  padding:13px;
  border-radius:999px;
  background:linear-gradient(180deg,#ff846c,#f66f57);
  color:#fff;
  font-size:17px;
  font-weight:900;
}
@media (max-width:480px){
  .notification-permission-panel{align-items:stretch;flex-direction:column}
  .notification-permission-panel button{width:100%}
  .reminder-alert-sheet{padding:18px 14px;border-radius:24px}
}


/* 毛毛日記_行事曆_v30：修復「新增排程」橫幅。
   v24 之後只剩右側插圖，原本的粉色卡片、加號與文字消失。
   本版改為獨立 HTML／CSS 元件，手機版與電腦版共用，並保留完整透明月曆＋鉛筆插圖。 */
.calendar-add-banner{
  position:absolute;
  z-index:5;
  left:4.0%;
  top:65.6%;
  width:91.0%;
  height:6.8%;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(10px,1.9vw,20px);
  padding:0 16% 0 5%;
  overflow:hidden;
  border:1px solid rgba(231,193,158,.65);
  border-radius:clamp(18px,2.7vw,28px);
  background:linear-gradient(90deg,#fff4e6 0%,#fff1df 55%,#fff5e9 100%);
  box-shadow:0 7px 18px rgba(128,81,45,.06);
  color:#4b2a18;
  pointer-events:none;
}
.calendar-add-banner::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(255,255,255,.12),transparent 40%,rgba(255,255,255,.18));
  pointer-events:none;
}
.calendar-add-banner-plus{
  position:relative;
  z-index:2;
  flex:0 0 auto;
  width:clamp(36px,5.2vw,54px);
  aspect-ratio:1;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(180deg,#f7a455,#ef8736);
  color:#fff;
  font-size:clamp(28px,4.4vw,44px);
  font-weight:400;
  line-height:1;
  box-shadow:0 5px 12px rgba(219,120,43,.2);
}
.calendar-add-banner strong{
  position:relative;
  z-index:2;
  white-space:nowrap;
  font-size:clamp(20px,3.6vw,34px);
  line-height:1;
  font-weight:900;
  letter-spacing:.08em;
}
.calendar-add-banner img{
  position:absolute;
  z-index:2;
  right:2.2%;
  top:50%;
  width:13.4%;
  height:86%;
  transform:translateY(-50%);
  object-fit:contain;
  object-position:center;
}
.calendar-screen .ca-add-schedule{
  z-index:7!important;
}
@media (max-width:480px){
  .calendar-add-banner{
    left:4.0%;
    top:65.6%;
    width:91.0%;
    height:6.8%;
    gap:8px;
    padding-right:17%;
    border-radius:20px;
  }
  .calendar-add-banner-plus{
    width:clamp(34px,9vw,44px);
    font-size:clamp(27px,7.8vw,36px);
  }
  .calendar-add-banner strong{
    font-size:clamp(19px,5.4vw,25px);
  }
  .calendar-add-banner img{
    right:2.0%;
    width:14.8%;
    height:84%;
  }
}
@media (min-width:1200px){
  .calendar-add-banner{
    padding-right:15%;
  }
  .calendar-add-banner img{
    width:12.6%;
  }
}


/* 毛毛日記_行事曆_v31：縮小「新增排程」橫幅中的圓形加號與標題文字。
   將圓形、加號與「新增排程」文字都縮小為約原本的 75%，手機版與電腦版同步套用。 */
.calendar-add-banner-plus{
  width:clamp(27px,3.9vw,40.5px)!important;
  font-size:clamp(21px,3.3vw,33px)!important;
}
.calendar-add-banner strong{
  font-size:clamp(15px,2.7vw,25.5px)!important;
}
@media (max-width:480px){
  .calendar-add-banner-plus{
    width:clamp(25.5px,6.75vw,33px)!important;
    font-size:clamp(20.25px,5.85vw,27px)!important;
  }
  .calendar-add-banner strong{
    font-size:clamp(14.25px,4.05vw,18.75px)!important;
  }
}


/* 毛毛日記_行事曆_v35：避免月曆主體壓到上方毛孩描述區。
   將互動月曆區整體往下移，並同步微調高度，讓上方毛孩名稱／年齡／健康描述完整可見。 */
.calendar-grid-live{
  top:34.8%!important;
  height:30.2%!important;
}
@media (max-width:480px){
  .calendar-grid-live{
    top:36.9%!important;
    height:28.6%!important;
  }
}
@media (min-width:1200px){
  .calendar-grid-live{
    top:34.2%!important;
    height:30.8%!important;
  }
}

/* 毛毛日記_行事曆_v37：健康護照實用化。
   主畫面原有美術、卡片、圖示與位置維持不變；新增動態摘要、動態健康日誌、
   健康紀錄 CRUD、基本醫療資料、下次追蹤與行事曆提醒連動。 */
.health-summary-live{
  position:absolute;
  z-index:3;
  left:5.7%;
  top:46%;
  width:88.6%;
  height:15.4%;
  pointer-events:none;
}
.health-summary-live strong{
  position:absolute;
  top:68%;
  min-width:16%;
  padding:0 3px;
  transform:translate(-50%,-50%);
  background:#fff;
  color:#47945c;
  font-size:clamp(10px,2.6vw,17px);
  line-height:1.25;
  text-align:center;
  white-space:nowrap;
}
.health-summary-live-overall{left:12.5%}
.health-summary-live-vaccine{left:37.5%}
.health-summary-live-deworm{left:62.5%}
.health-summary-live-allergy{left:87.5%;color:#ef7b28!important}

.health-log-live{
  position:absolute;
  z-index:5;
  left:6.8%;
  top:calc(66.1% + var(--health-row) * 5.9%);
  width:86.4%;
  height:5.8%;
  display:grid;
  grid-template-columns:clamp(32px,7.2vw,54px) minmax(0,1fr) clamp(55px,14vw,95px) clamp(55px,15vw,100px) clamp(12px,3vw,22px);
  align-items:center;
  gap:clamp(3px,.8vw,8px);
  padding:0 clamp(2px,.8vw,8px);
  border:0;
  background:#fff;
  color:#4b2a18;
  text-align:left;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.health-log-live:active{transform:scale(.992)}
.health-log-live:focus-visible{
  outline:2px solid rgba(255,116,94,.8);
  outline-offset:1px;
  border-radius:12px;
}
.health-log-live-icon{
  width:clamp(28px,6.4vw,48px);
  aspect-ratio:1;
  display:grid;
  place-items:center;
  border-radius:clamp(8px,1.8vw,14px);
  background:#fff0e8;
  font-size:clamp(15px,3.7vw,26px);
}
.health-log-live-copy{min-width:0;display:grid;gap:1px}
.health-log-live-copy strong{
  overflow:hidden;
  color:#4b2a18;
  font-size:clamp(9px,2.3vw,15px);
  line-height:1.12;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.health-log-live-copy small{
  overflow:hidden;
  color:#7d6a5e;
  font-size:clamp(7px,1.75vw,11px);
  line-height:1.15;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.health-log-live-date,
.health-log-live-type{
  overflow:hidden;
  color:#7c6a5e;
  font-size:clamp(7px,1.75vw,11px);
  text-align:right;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.health-log-live-arrow{color:#af805c;font-size:clamp(15px,3.5vw,23px);text-align:right}
.health-log-live.is-empty{
  pointer-events:none;
  grid-template-columns:1fr;
  color:#b2a49a;
  font-size:clamp(8px,1.9vw,12px);
  text-align:center;
}
.health-log-live.is-empty span{justify-self:center}

.health-detail-extra{
  display:grid;
  gap:5px;
  margin:0 0 14px;
  padding:12px 14px;
  border-radius:14px;
  background:#fff7f1;
  color:#755f52;
  font-size:13px;
  line-height:1.45;
  list-style:none;
}
.health-add-log{
  margin-left:auto;
  width:45px;
  height:45px;
  border-radius:50%;
  background:#ff8069;
  color:#fff;
  font-size:27px;
  cursor:pointer;
  box-shadow:0 6px 14px rgba(239,111,88,.22);
}
.health-history-filter{
  grid-template-columns:repeat(5,minmax(0,1fr));
  overflow-x:auto;
}
.health-history-filter button{
  min-width:58px;
  white-space:nowrap;
}
button.history-card{
  width:100%;
  color:inherit;
  text-align:left;
  cursor:pointer;
}
button.history-card:active{transform:scale(.992)}
button.history-card:focus-visible{
  outline:2px solid #ef8b72;
  outline-offset:2px;
}
.history-card-copy em{
  display:block;
  margin-top:7px;
  color:#5b9870;
  font-size:12px;
  font-style:normal;
  font-weight:800;
}

.health-record-modal,
.health-summary-modal{
  position:fixed;
  inset:0;
  z-index:260;
  display:grid;
  align-items:end;
  padding:18px 12px calc(18px + env(safe-area-inset-bottom));
  overflow:auto;
  background:rgba(55,39,29,.44);
  backdrop-filter:blur(5px);
}
.health-record-form,
.health-summary-form{
  width:min(100%,500px);
  max-height:calc(100dvh - 36px);
  margin:0 auto;
  overflow:auto;
  padding:18px;
  border:1px solid #ead8ca;
  border-radius:27px;
  background:#fffdfa;
  box-shadow:0 20px 48px rgba(60,39,26,.25);
  color:#4b2a18;
}
.health-record-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.health-record-head small{color:#9c7d6b;font-weight:800}
.health-record-head h2{margin:2px 0 0;font-size:22px}
.health-record-close{
  width:38px;
  height:38px;
  border-radius:50%;
  background:#fff1e9;
  color:#8b5437;
  font-size:21px;
  cursor:pointer;
}
.health-record-form > label,
.health-summary-form > label,
.health-record-grid label{
  display:grid;
  gap:5px;
  margin-top:10px;
  color:#6c4a37;
  font-size:12px;
  font-weight:900;
}
.health-record-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
}
.health-record-form input,
.health-record-form select,
.health-record-form textarea,
.health-summary-form input,
.health-summary-form select,
.health-summary-form textarea{
  width:100%;
  min-height:43px;
  padding:9px 10px;
  border:1px solid #e8d3c4;
  border-radius:13px;
  background:#fffaf6;
  color:#4b2a18;
  outline:none;
}
.health-record-form textarea,
.health-summary-form textarea{min-height:88px;resize:vertical}
.health-record-form input:focus,
.health-record-form select:focus,
.health-record-form textarea:focus,
.health-summary-form input:focus,
.health-summary-form select:focus,
.health-summary-form textarea:focus{
  border-color:#ff8c76;
  box-shadow:0 0 0 3px rgba(255,116,94,.12);
}
.health-followup-fieldset{
  margin:13px 0 0;
  padding:12px;
  border:1px solid #ead8ca;
  border-radius:17px;
}
.health-followup-fieldset legend{
  padding:0 5px;
  color:#6c4a37;
  font-size:12px;
  font-weight:900;
}
.health-followup-check{
  display:flex!important;
  grid-template-columns:none!important;
  align-items:center;
  gap:8px!important;
  margin-top:11px!important;
  padding:10px;
  border-radius:13px;
  background:#fff5ef;
}
.health-followup-check input{width:20px!important;min-height:20px!important;height:20px}
.health-record-actions{
  display:grid;
  grid-template-columns:1fr 1fr 1.25fr;
  gap:8px;
  margin-top:16px;
}
.health-record-actions button{
  min-height:44px;
  border-radius:999px;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
}
.health-record-delete{border:1px solid #efb9b2!important;background:#fff3f2;color:#bd4f45}
.health-record-cancel{border:1px solid #e7d5c8!important;background:#fffaf6;color:#6a4a38}
.health-record-save{background:linear-gradient(180deg,#ff856e,#ef6f58);color:#fff;box-shadow:0 7px 15px rgba(239,111,88,.2)}
.health-summary-actions{grid-template-columns:1fr 1.25fr}

@media (max-width:480px){
  .health-summary-live strong{font-size:clamp(9px,2.9vw,13px)}
  .health-log-live{
    grid-template-columns:clamp(29px,8vw,38px) minmax(0,1fr) 55px 54px 12px;
    gap:2px;
    padding:0 1px;
  }
  .health-history-filter{grid-template-columns:repeat(5,64px)}
}
@media (max-width:370px){
  .health-record-grid{grid-template-columns:1fr}
  .health-record-actions{grid-template-columns:1fr 1fr}
  .health-record-save{grid-column:1 / -1}
}


/* 毛毛日記_行事曆_v38：放大左側毛孩頭像的粉紅圓背景，並讓動物完整置中顯示，避免耳朵被裁切。 */
.record-pet-emoji,
.health-pet-emoji,
.calendar-pet-emoji,
.settings-profile-avatar{
  display:grid!important;
  place-items:center!important;
  background:#fff1e4!important;
}
.record-pet-emoji{width:72px!important;height:72px!important;font-size:38px!important}
.health-pet-emoji{width:78px!important;height:78px!important;font-size:42px!important}
.calendar-pet-emoji{width:60px!important;height:60px!important;font-size:34px!important}
.settings-profile-avatar{width:66px!important;height:66px!important;font-size:36px!important}

.record-pet-emoji img.pet-avatar-media,
.health-pet-emoji img.pet-avatar-media,
.calendar-pet-emoji img.pet-avatar-media,
.settings-profile-avatar img.pet-avatar-media{
  width:88%!important;
  height:88%!important;
  min-width:88%!important;
  min-height:88%!important;
  max-width:88%!important;
  max-height:88%!important;
  object-fit:contain!important;
  object-position:center center!important;
  border-radius:0!important;
  display:block!important;
}
.record-pet-emoji > span.pet-avatar-media,
.health-pet-emoji > span.pet-avatar-media,
.calendar-pet-emoji > span.pet-avatar-media,
.settings-profile-avatar > span.pet-avatar-media{
  width:88%!important;
  height:88%!important;
  display:grid!important;
  place-items:center!important;
  line-height:1!important;
}

.record-pet-live{width:46.5%!important;gap:12px!important}
.health-pet-live{width:50.5%!important;gap:13px!important}
.calendar-pet-live{width:67.8%!important;gap:13px!important}
.settings-profile-live{width:61.8%!important;gap:13px!important}

@media (max-width:370px){
  .record-pet-emoji{width:64px!important;height:64px!important;font-size:34px!important}
  .health-pet-emoji{width:70px!important;height:70px!important;font-size:38px!important}
  .calendar-pet-emoji{width:56px!important;height:56px!important;font-size:31px!important}
  .settings-profile-avatar{width:60px!important;height:60px!important;font-size:33px!important}
  .record-pet-live{width:59.5%!important}
  .health-pet-live{width:53%!important}
  .calendar-pet-live{width:67.5%!important}
  .settings-profile-live{width:64%!important}
}

/* 毛毛日記_健康護照_v01：修正健康摘要與健康日誌的動態內容重疊。 */
.health-summary-live strong{
  top:76%!important;
  min-width:0!important;
  max-width:23%!important;
  padding:0 2px!important;
  background:transparent!important;
  font-size:clamp(10px,2.45vw,16px)!important;
  line-height:1.05!important;
  overflow:hidden;
  text-overflow:ellipsis;
}
.health-summary-live-overall{left:12.5%!important}
.health-summary-live-vaccine{left:37.5%!important}
.health-summary-live-deworm{left:62.5%!important}
.health-summary-live-allergy{left:87.5%!important}

/* 無資料的預留列不再以白色區塊覆蓋底圖，避免多個「尚無紀錄」彼此重疊。 */
.health-log-live.is-empty{
  display:none!important;
}

/* 日誌列與底部匯出區保留明確間隔，避免最後一列壓到按鈕。 */
.health-log-live{
  top:calc(66.0% + var(--health-row) * 5.82%)!important;
  height:5.55%!important;
}
.he-export{
  top:95.0%!important;
  height:4.45%!important;
}

@media (max-width:480px){
  .health-summary-live strong{
    top:76%!important;
    font-size:clamp(9px,2.7vw,13px)!important;
  }
  .health-log-live{
    top:calc(65.95% + var(--health-row) * 5.82%)!important;
    height:5.5%!important;
  }
}


/* 毛毛日記_健康護照_v05：健康日誌固定顯示 5 列，缺資料時以「無紀錄資料」補位，且空列背景樣式與有資料列一致。 */
.health-log-live{
  background:rgba(255,255,255,.98)!important;
}
.health-log-live.is-empty{
  display:grid!important;
  pointer-events:none!important;
  grid-template-columns:1fr!important;
  place-items:center!important;
  background:rgba(255,255,255,.98)!important;
  color:#b2a49a!important;
  font-size:clamp(9px,2.05vw,13px)!important;
  line-height:1.2!important;
  text-align:center!important;
}
.health-log-live.is-empty span{
  justify-self:center!important;
  align-self:center!important;
}


/* 毛毛日記_健康護照_v06：健康日誌改為明確 5 筆區塊，補上外框，並讓下方匯出與裝飾資訊完整露出。 */
.health-logs-heading{
  position:absolute;
  left:4.2%;
  top:61.1%;
  z-index:6;
  display:flex;
  align-items:flex-end;
  gap:6px;
  padding:1px 6px 3px 4px;
  border-radius:14px;
  background:#fffdfa;
  color:#4b2a18;
  font-size:clamp(18px,4.4vw,30px);
  font-weight:900;
  line-height:1.05;
  letter-spacing:.2px;
  pointer-events:none;
}
.health-logs-heading span{
  color:#8e7c70;
  font-size:clamp(10px,2.15vw,14px);
  font-weight:700;
  line-height:1.2;
  margin-bottom:2px;
}
.health-logs-panel{
  position:absolute;
  left:3.8%;
  top:65.0%;
  width:92.3%;
  height:24.8%;
  border-radius:24px;
  border:1.6px solid rgba(229,216,203,.95);
  background:rgba(255,255,255,.92);
  box-shadow:0 10px 20px rgba(91,67,51,.05);
  z-index:4;
  pointer-events:none;
}
.health-log-live{
  left:4.8%!important;
  width:90.4%!important;
  top:calc(66.35% + var(--health-row) * 4.78%)!important;
  height:4.45%!important;
  padding:0 clamp(2px,.6vw,8px)!important;
  background:transparent!important;
  z-index:5!important;
}
.health-log-live.is-empty{
  display:grid!important;
  grid-template-columns:1fr!important;
  place-items:center!important;
  background:transparent!important;
  color:#bea999!important;
  font-size:clamp(10px,2.1vw,14px)!important;
}
.health-log-live.is-empty span{
  justify-self:center!important;
  align-self:center!important;
}
.he-export{
  top:95.4%!important;
  height:4.1%!important;
}
@media (max-width:480px){
  .health-logs-heading{
    left:4.0%;
    top:61.3%;
    gap:4px;
    font-size:clamp(16px,4.7vw,24px);
    padding:1px 5px 3px 3px;
  }
  .health-logs-heading span{
    font-size:clamp(9px,2.3vw,12px);
    margin-bottom:1px;
  }
  .health-logs-panel{
    left:3.5%;
    width:92.8%;
    top:65.2%;
    height:24.6%;
    border-radius:22px;
  }
  .health-log-live{
    left:4.7%!important;
    width:90.6%!important;
    top:calc(66.55% + var(--health-row) * 4.72%)!important;
    height:4.38%!important;
  }
}


/* 毛毛日記_健康護照_v07：縮小健康日誌標題、拉開與框線距離、增加五筆資料行距、清除健康摘要底圖殘字重疊。 */
.health-logs-heading{
  top:60.9%!important;
  font-size:clamp(11px,2.65vw,18px)!important; /* 主標約縮小為原本 60% */
  gap:4px!important;
  padding:2px 6px 4px 4px!important;
}
.health-logs-heading span{
  font-size:clamp(9px,1.95vw,13px)!important;
  margin-bottom:1px!important;
}
.health-logs-panel{
  top:66.2%!important;   /* 往下移，與標題拉開 */
  height:25.2%!important;
}
.health-log-live{
  top:calc(67.1% + var(--health-row) * 4.92%)!important;
  height:4.32%!important;
}
.health-log-live-copy{gap:4px!important;}
.health-log-live-copy strong{line-height:1.16!important;}
.health-log-live-copy small{line-height:1.28!important;}
.health-log-live-date,
.health-log-live-type{line-height:1.2!important;}
.health-summary-live strong{
  top:75.6%!important;
}
@media (max-width:480px){
  .health-logs-heading{
    top:61.0%!important;
    font-size:clamp(10px,2.9vw,16px)!important;
  }
  .health-logs-heading span{
    font-size:clamp(8px,2.05vw,11px)!important;
  }
  .health-logs-panel{
    top:66.3%!important;
    height:25.4%!important;
  }
  .health-log-live{
    top:calc(67.25% + var(--health-row) * 4.92%)!important;
    height:4.3%!important;
  }
}


/* 毛毛日記_健康護照_v08：健康日誌標題更靠近外框，並修復健康摘要標籤下半部被裁切。 */
.health-logs-heading{
  top:61.15%!important;
}
.health-logs-panel{
  top:65.55%!important;
  height:25.55%!important;
}
.health-log-live{
  top:calc(66.45% + var(--health-row) * 4.95%)!important;
  height:4.35%!important;
}
.health-summary-live strong{
  top:77.2%!important;
  line-height:1.08!important;
}
@media (max-width:480px){
  .health-logs-heading{
    top:61.2%!important;
  }
  .health-logs-panel{
    top:65.65%!important;
    height:25.55%!important;
  }
  .health-log-live{
    top:calc(66.6% + var(--health-row) * 4.95%)!important;
    height:4.35%!important;
  }
  .health-summary-live strong{
    top:77.3%!important;
  }
}


/* 毛毛日記_健康護照_v09：健康日誌標題更貼近外框，並縮短外框高度，修復右下插圖上緣被切掉。 */
.health-logs-heading{
  top:61.55%!important;
}
.health-logs-panel{
  top:65.15%!important;
  height:24.20%!important;
}
.health-log-live{
  top:calc(66.05% + var(--health-row) * 4.72%)!important;
  height:4.18%!important;
}
@media (max-width:480px){
  .health-logs-heading{
    top:61.6%!important;
  }
  .health-logs-panel{
    top:65.2%!important;
    height:24.30%!important;
  }
  .health-log-live{
    top:calc(66.1% + var(--health-row) * 4.74%)!important;
    height:4.2%!important;
  }
}


/* 毛毛日記_健康護照_v19：以 v09 重做。健康日誌與底部匯出區完全拆層，禁止再互相重疊。 */
.health-screen{
  overflow:visible!important;
  margin-bottom:clamp(105px,15vw,165px)!important;
}
.he-logs-art{display:none!important;}
.health-logs-heading{
  top:61.55%!important;
}
.health-logs-panel{
  top:64.85%!important;
  height:27.75%!important;
}
.health-log-live{
  top:calc(65.75% + var(--health-row) * 5.55%)!important;
  height:4.00%!important;
}
.health-log-live-copy{gap:3px!important;}
.health-log-live-copy strong{line-height:1.12!important;}
.health-log-live-copy small{line-height:1.18!important;}
.health-log-live-date,.health-log-live-type{line-height:1.16!important;}
.he-footer-art{
  position:absolute!important;
  left:5.4%!important;
  top:94.0%!important;
  width:89.5%!important;
  height:auto!important;
  object-fit:contain!important;
  object-position:center top!important;
  z-index:3!important;
  pointer-events:none!important;
  transform:translateY(clamp(28px,4.5vw,52px))!important;
}
.he-export{
  left:5.0%!important;
  top:96.2%!important;
  width:55.5%!important;
  height:5.2%!important;
  z-index:6!important;
  transform:translateY(clamp(28px,4.5vw,52px))!important;
}
@media (max-width:480px){
  .health-screen{
    margin-bottom:clamp(92px,19vw,130px)!important;
  }
  .health-logs-panel{
    top:64.9%!important;
    height:27.9%!important;
  }
  .health-log-live{
    top:calc(65.85% + var(--health-row) * 5.58%)!important;
    height:4.02%!important;
  }
  .he-footer-art{
    left:5.1%!important;
    top:94.1%!important;
    width:89.8%!important;
    transform:translateY(clamp(24px,6vw,38px))!important;
  }
  .he-export{
    left:4.8%!important;
    top:96.25%!important;
    width:55.8%!important;
    height:5.25%!important;
    transform:translateY(clamp(24px,6vw,38px))!important;
  }
}


/* 毛毛日記_健康護照_v20：拉高健康日誌外框，讓最後一筆完整落在框線內。 */
.health-logs-panel{
  height:30.60%!important;
}
@media (max-width:480px){
  .health-logs-panel{
    height:30.85%!important;
  }
}


/* 毛毛日記_健康護照_v23：讓愛心/醫藥箱/藥瓶整組再往下，完整露出提把並消除上方白色殘留感。維持整組比例不變。 */
.health-screen{
  margin-bottom:clamp(145px,20vw,210px)!important;
}
.he-footer-art{
  top:95.3%!important;
  transform:translateY(clamp(42px,6.2vw,72px))!important;
}
.he-export{
  top:97.6%!important;
  transform:translateY(clamp(42px,6.2vw,72px))!important;
}
@media (max-width:480px){
  .health-screen{
    margin-bottom:clamp(132px,28vw,190px)!important;
  }
  .he-footer-art{
    top:95.5%!important;
    transform:translateY(clamp(34px,9vw,58px))!important;
  }
  .he-export{
    top:97.8%!important;
    transform:translateY(clamp(34px,9vw,58px))!important;
  }
}


/* 毛毛日記_健康護照_v26：縮小健康日誌與底部匯出/插圖區塊之間的過大空白。 */
.health-screen{
  margin-bottom:clamp(96px,14vw,138px)!important;
}
.he-footer-art{
  top:92.1%!important;
  transform:translateY(clamp(12px,2.2vw,24px))!important;
}
.he-export{
  top:94.2%!important;
  transform:translateY(clamp(12px,2.2vw,24px))!important;
}
@media (max-width:480px){
  .health-screen{
    margin-bottom:clamp(90px,18vw,128px)!important;
  }
  .he-footer-art{
    top:92.6%!important;
    transform:translateY(clamp(10px,3vw,18px))!important;
  }
  .he-export{
    top:94.8%!important;
    transform:translateY(clamp(10px,3vw,18px))!important;
  }
}


/* 毛毛日記_健康護照_v27：消除底部匯出區與下方紀錄詳情卡之間的過大空白。 */
.health-detail-panel.open{
  margin:-98px 14px 16px!important;
}
@media (max-width:480px){
  .health-detail-panel.open{
    margin:-92px 14px 16px!important;
  }
}


/* 毛毛日記_健康護照_v28：將底部匯出區與下方紀錄詳情卡之間距離稍微拉開一點。 */
.health-detail-panel.open{
  margin:-82px 14px 16px!important;
}
@media (max-width:480px){
  .health-detail-panel.open{
    margin:-76px 14px 16px!important;
  }
}


/* 毛毛日記_健康護照_v29：首頁近期提醒為空時，拉高提醒卡高度，讓下方只剩少量留白。 */
.home-reminders-live.is-empty{
  min-height:clamp(360px, 68vh, 470px)!important;
}
.home-reminders-live.is-empty .home-reminders-empty{
  min-height:clamp(300px, 58vh, 400px)!important;
}
@media (max-width:480px){
  .home-reminders-live.is-empty{
    min-height:clamp(340px, 62vh, 430px)!important;
  }
  .home-reminders-live.is-empty .home-reminders-empty{
    min-height:clamp(285px, 54vh, 360px)!important;
  }
}


/* 毛毛日記_健康護照_v30：首頁近期提醒為空時，將提醒卡高度縮為 v29 的約 60%。 */
.home-reminders-live.is-empty{
  min-height:clamp(216px, 41vh, 282px)!important;
}
.home-reminders-live.is-empty .home-reminders-empty{
  min-height:clamp(180px, 35vh, 240px)!important;
}
@media (max-width:480px){
  .home-reminders-live.is-empty{
    min-height:clamp(204px, 37vh, 258px)!important;
  }
  .home-reminders-live.is-empty .home-reminders-empty{
    min-height:clamp(171px, 32vh, 216px)!important;
  }
}


/* 毛毛日記_健康護照_v31：確保行事曆鈴鐺位於排程卡片上層且可點擊。 */
.schedule-card{position:relative!important;}
.schedule-reminder-toggle{
  position:relative!important;
  z-index:8!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
}


/* 毛毛日記_健康護照_v32：移除健康紀錄詳情卡左右下角的陰影角。 */
.health-detail-card{
  box-shadow:none!important;
}


/* 毛毛日記_健康護照_v33：確保行事曆鈴鐺可點擊，不被排程卡片覆蓋。 */
.schedule-card{position:relative!important;}
.schedule-card-main{position:relative!important;z-index:1!important;}
.schedule-reminder-toggle{
  position:relative!important;
  z-index:8!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
}


/* 毛毛日記_健康護照_v34：首頁近期提醒有資料時，拉高提醒卡，讓下方只剩少量留白。 */
.home-reminders-live:not(.is-empty){
  min-height:clamp(360px, 66vh, 470px)!important;
}
.home-reminders-live:not(.is-empty) .home-reminders-list{
  align-content:start!important;
}
@media (max-width:480px){
  .home-reminders-live:not(.is-empty){
    min-height:clamp(340px, 61vh, 430px)!important;
  }
}


/* 毛毛日記_健康護照_v35：將「新增排程」橫幅文字縮小成目前的 75%，手機版與電腦版同步。 */
.calendar-add-banner strong{
  font-size:clamp(11px,2.05vw,19px)!important;
}
@media (max-width:480px){
  .calendar-add-banner strong{
    font-size:clamp(10.5px,3.05vw,14px)!important;
  }
}


/* 毛毛日記_健康護照_v36：將「新增排程」橫幅左側加號圓形按鈕整體等比縮小成目前的 75%。 */
.calendar-add-banner-plus{
  width:clamp(20.25px,2.925vw,30.375px)!important;
  font-size:clamp(15.75px,2.475vw,24.75px)!important;
}
@media (max-width:480px){
  .calendar-add-banner-plus{
    width:clamp(19.125px,5.0625vw,24.75px)!important;
    font-size:clamp(15.1875px,4.3875vw,20.25px)!important;
  }
}


/* 毛毛日記_健康護照_v37：近期提醒預設最多 3 筆，因此把有資料時下方多餘空白收掉，只保留貼近內容的高度。 */
.home-reminders-live:not(.is-empty){
  min-height:clamp(214px, 38vh, 258px)!important;
  padding-bottom:12px!important;
}
.home-reminders-live:not(.is-empty) .home-reminders-list{
  align-content:start!important;
}
@media (max-width:480px){
  .home-reminders-live:not(.is-empty){
    min-height:clamp(208px, 35vh, 248px)!important;
    padding-bottom:12px!important;
  }
}


/* 毛毛日記_健康護照_v38：近期提醒有資料時取消固定高度，讓卡片高度緊貼最多三筆內容，下方只留極少空白。 */
.home-reminders-live:not(.is-empty){
  min-height:0!important;
  height:auto!important;
  padding-bottom:10px!important;
}
.home-reminders-live:not(.is-empty) .home-reminders-list{
  gap:10px!important;
}
@media (max-width:480px){
  .home-reminders-live:not(.is-empty){
    min-height:0!important;
    height:auto!important;
    padding-bottom:10px!important;
  }
}


/* 毛毛日記_健康護照_v39：同時修正手機版與電腦版首頁近期提醒下方的外部空白。
   問題不是提醒卡本身，而是首頁仍保留 page-root 118px + home-shell/提醒容器底部留白。
   改為只保留底部導覽所需高度，讓提醒卡下方只剩極少間距。 */
#page-root[data-current-route="home"]{
  padding-bottom:calc(78px + env(safe-area-inset-bottom))!important;
  min-height:auto!important;
}
#page-root[data-current-route="home"] .home-shell{
  padding-bottom:0!important;
}
#page-root[data-current-route="home"] .home-reminders-wrap,
#page-root[data-current-route="home"] .home-split-mode .home-reminders-wrap{
  padding-bottom:2px!important;
}
@media (max-width:480px){
  #page-root[data-current-route="home"]{
    padding-bottom:calc(78px + env(safe-area-inset-bottom))!important;
  }
  #page-root[data-current-route="home"] .home-shell{
    padding-bottom:0!important;
  }
  #page-root[data-current-route="home"] .home-reminders-wrap,
  #page-root[data-current-route="home"] .home-split-mode .home-reminders-wrap{
    padding-bottom:2px!important;
  }
}


/* 毛毛日記_健康護照_v43：以 v39 為基底，只調整手機版健康日誌下方詳情卡。
   1) 把詳情卡明顯往下移，避免被「匯出健康護照」區塊壓住。
   2) 詳情卡內所有文字約縮小為原本的 75%。
   3) 電腦版不調整。 */
@media (max-width:480px){
  .health-detail-panel.open{
    margin:72px 14px 16px!important;
    max-height:400px!important;
  }
  .health-detail-card{
    padding:14px!important;
  }
  .health-detail-head{
    gap:10px!important;
    align-items:flex-start!important;
  }
  .health-detail-icon{
    width:48px!important;
    height:48px!important;
    border-radius:14px!important;
  }
  .health-detail-head strong{
    font-size:15px!important;
    line-height:1.15!important;
  }
  .health-detail-head small{
    font-size:10px!important;
    line-height:1.25!important;
    margin-top:3px!important;
  }
  .health-detail-card p{
    font-size:12px!important;
    line-height:1.7!important;
    margin:10px 0 12px!important;
  }
  .detail-action{
    font-size:14px!important;
    line-height:1.2!important;
    padding:10px 12px!important;
  }
  .detail-close{
    width:36px!important;
    height:36px!important;
    font-size:20px!important;
  }
}


/* 毛毛日記_健康護照_v44：將手機版健康紀錄詳情卡（圖2）中的所有文字等比縮小成約 75%。 */
@media (max-width:480px){
  .health-detail-head strong{
    font-size:11.25px!important;
    line-height:1.15!important;
  }
  .health-detail-head small{
    font-size:7.5px!important;
    line-height:1.25!important;
  }
  .health-detail-card p{
    font-size:9px!important;
    line-height:1.7!important;
  }
  .detail-action{
    font-size:10.5px!important;
    line-height:1.2!important;
  }
}


/* 毛毛日記_健康護照_v45：只調整手機版
   1) 品種移到年齡下一行，拿掉中間黑點。
   2) 健康日誌下方詳情卡往上靠近，縮小與上方匯出區塊之間的空白。 */
.health-pet-live small{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:0;
}
.health-pet-live .health-pet-age::after{
  content:"・";
  margin:0 3px;
}
@media (max-width:480px){
  .health-screen .health-pet-live small{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    white-space:normal!important;
    gap:1px!important;
    margin-top:3px!important;
  }
  .health-pet-live .health-pet-age::after{
    content:""!important;
    margin:0!important;
  }
  .health-screen .health-pet-live .health-pet-age,
  .health-screen .health-pet-live .health-pet-breed{
    display:block!important;
    width:100%!important;
  }
  .health-screen .health-pet-live .health-pet-breed{
    margin-top:0!important;
  }
  .health-detail-panel.open{
    margin:26px 14px 16px!important;
    max-height:400px!important;
  }
}


/* 毛毛日記_健康護照_v46：手機版健康護照頁中，年齡需維持同一行顯示（如 3歲2個月），品種另起一行。 */
@media (max-width:480px){
  .health-screen .health-pet-live .health-pet-age{
    white-space:nowrap!important;
  }
}


/* 毛毛日記_健康護照_v47：手機版健康護照頁中，毛孩名字需維持同一行，不可換行。 */
@media (max-width:480px){
  .health-screen .health-pet-live{
    width:48%!important;
    gap:8px!important;
  }
  .health-screen .health-pet-live strong{
    white-space:nowrap!important;
    font-size:16px!important;
    line-height:1.15!important;
  }
}


/* 毛毛日記_健康護照_v48：只調整手機版，將匯出區塊與下方詳情卡之間的距離縮短為原來約 30%。 */
@media (max-width:480px){
  .health-detail-panel.open{
    margin:8px 14px 16px!important;
  }
}


/* 毛毛日記_健康護照_v49：只調整手機版，將匯出區塊與下方詳情卡之間的距離再縮短到原來約 10%。 */
@media (max-width:480px){
  .health-detail-panel.open{
    margin:2px 14px 16px!important;
  }
}


/* 毛毛日記_健康護照_v50：用正確做法縮短手機版「匯出健康護照」與下方詳情卡之間的距離。
   不再只調詳情卡 margin，而是直接收掉健康護照主畫面的底部保留空間，
   並同步把匯出按鈕/醫藥箱插圖往上收，讓下方詳情卡緊接在匯出區塊後方。 */
@media (max-width:480px){
  .health-screen{
    margin-bottom:14px!important;
  }
  .he-footer-art{
    top:91.7%!important;
    transform:translateY(0)!important;
  }
  .he-export{
    top:93.9%!important;
    transform:translateY(0)!important;
  }
  .health-detail-panel.open{
    margin:0 14px 16px!important;
  }
}


/* 毛毛日記_健康護照_v51：歷史紀錄分類補齊新增紀錄的所有種類，手機版與電腦版同步顯示。 */
.health-history-filter{
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  overflow:visible!important;
}
.health-history-filter button{
  min-width:0!important;
  font-size:14px!important;
  padding:10px 8px!important;
}
@media (max-width:480px){
  .health-history-filter{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
  .health-history-filter button{
    font-size:13px!important;
    line-height:1.25!important;
    padding:10px 6px!important;
  }
}


/* 毛毛日記_健康護照_v61：放大左側「歷史紀錄」卡，讓左右兩個上方功能區塊在手機版與電腦版都更接近相同大小。
   這次不只改素材，而是直接調整左卡在頁面上的顯示尺寸與對應熱區。 */
.he-history-art{
  left:4.3%!important;
  top:26.5%!important;
  width:46.3%!important;
  height:18.7%!important;
}
.he-history-card{
  left:5.0%!important;
  top:28.2%!important;
  width:44.8%!important;
  height:17.7%!important;
}
.he-history-detail{
  left:18.6%!important;
  top:40.5%!important;
  width:28.5%!important;
  height:5.1%!important;
}

@media (max-width:480px){
  .he-history-art{
    left:4.1%!important;
    top:26.4%!important;
    width:46.8%!important;
    height:18.9%!important;
  }
  .he-history-card{
    left:4.9%!important;
    top:28.1%!important;
    width:45.1%!important;
    height:17.9%!important;
  }
  .he-history-detail{
    left:18.5%!important;
    top:40.4%!important;
    width:28.8%!important;
    height:5.2%!important;
  }
}


/* 毛毛日記_健康護照_v62：將右側「新增紀錄」上方功能卡等比縮小，使其與左側「歷史紀錄」視覺尺寸一致。 */
.he-visit-art{
  left:52.0%!important;
  top:27.2%!important;
  width:40.8%!important;
  height:16.8%!important;
}
.he-visit-card{
  left:52.8%!important;
  top:28.6%!important;
  width:39.6%!important;
  height:15.8%!important;
}
.he-visit-detail{
  left:64.7%!important;
  top:39.8%!important;
  width:26.8%!important;
  height:4.8%!important;
}

@media (max-width:480px){
  .he-visit-art{
    left:51.8%!important;
    top:27.1%!important;
    width:40.4%!important;
    height:16.6%!important;
  }
  .he-visit-card{
    left:52.5%!important;
    top:28.5%!important;
    width:39.4%!important;
    height:15.6%!important;
  }
  .he-visit-detail{
    left:64.4%!important;
    top:39.7%!important;
    width:26.8%!important;
    height:4.7%!important;
  }
}


/* 毛毛日記_健康護照_v63：在健康摘要上方新增「健康月曆」與「目前紀錄」兩個實用區塊，
   讓健康護照的每筆資料可依日期顯示，點選月曆後即時查看當日摘要。 */
.health-screen{
  aspect-ratio:941 / 2420!important;
  margin-bottom:16px!important;
}
.he-top-art{left:2.1%!important;top:2.9%!important;width:95.9%!important;height:13.2%!important;}
.health-screen .health-pet-live{left:6.0%!important;top:6.7%!important;width:42.5%!important;min-height:6.4%!important;padding:8px 8px!important;}
.health-screen .health-pet-live strong{font-size:19px!important;}
.health-screen .health-pet-live small{font-size:12px!important;line-height:1.4!important;display:flex!important;flex-wrap:wrap!important;gap:0!important;align-items:center!important;}
.he-switch{left:73.4%!important;top:3.0%!important;width:22.8%!important;height:3.7%!important;}
.he-history-art{left:4.3%!important;top:16.4%!important;width:46.3%!important;height:11.9%!important;}
.he-history-card{left:5.0%!important;top:17.3%!important;width:44.8%!important;height:11.0%!important;}
.he-history-detail{left:18.7%!important;top:25.0%!important;width:28.7%!important;height:3.2%!important;}
.he-visit-art{left:52.0%!important;top:16.6%!important;width:40.6%!important;height:10.7%!important;}
.he-visit-card{left:52.7%!important;top:17.6%!important;width:39.3%!important;height:10.0%!important;}
.he-visit-detail{left:64.6%!important;top:24.8%!important;width:27.0%!important;height:3.0%!important;}

.health-calendar-panel,
.health-current-panel{
  position:absolute;
  left:4.0%;
  width:92.0%;
  border:1.6px solid rgba(227,213,200,.95);
  border-radius:26px;
  background:rgba(255,255,255,.92);
  box-shadow:0 12px 24px rgba(91,67,51,.06);
  z-index:5;
}
.health-calendar-panel{
  top:30.8%;
  height:18.6%;
  padding:18px 18px 16px;
}
.health-current-panel{
  top:51.7%;
  height:14.0%;
  padding:18px 18px 16px;
}
.health-calendar-head h2,
.health-current-head h2{
  margin:0;
  color:#4b2a18;
  font-size:clamp(9px,1.35vw,17px);
  line-height:1.15;
}
.health-calendar-head p{
  margin:6px 0 0;
  color:#8e7c70;
  font-size:clamp(11px,1.6vw,16px);
  line-height:1.45;
}
.health-calendar-toolbar,
.health-current-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.health-calendar-toolbar{margin-top:14px;}
.health-calendar-arrow,
.health-calendar-today,
.health-current-add{
  border:1.4px solid #ead6c4;
  background:#fff8f2;
  color:#8d5630;
  font-weight:800;
  cursor:pointer;
}
.health-calendar-arrow{
  width:40px;
  height:40px;
  border-radius:50%;
  font-size:24px;
  line-height:1;
}
.health-calendar-title{
  flex:1;
  text-align:center;
  color:#5a311a;
  font-size:clamp(10px,1.5vw,19px);
  line-height:1.1;
}
.health-calendar-today,
.health-current-add{
  border-radius:999px;
  padding:10px 16px;
  font-size:clamp(12px,1.6vw,16px);
  white-space:nowrap;
}
.health-calendar-weekdays,
.health-calendar-days{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
}
.health-calendar-weekdays{
  margin-top:14px;
  color:#6a4935;
  font-weight:700;
  font-size:clamp(12px,1.7vw,16px);
  text-align:center;
}
.health-calendar-days{
  margin-top:8px;
  gap:4px;
}
.health-calendar-day{
  position:relative;
  min-height:38px;
  border:0;
  border-radius:16px;
  background:transparent;
  color:#4b2a18;
  font-size:clamp(15px,2.2vw,24px);
  cursor:pointer;
}
.health-calendar-day.is-adjacent{color:#c7b9ad;}
.health-calendar-day span{position:relative;z-index:2;}
.health-calendar-day.has-record i{
  position:absolute;
  left:50%;
  bottom:7px;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#ff835f;
  transform:translateX(-50%);
}
.health-calendar-day.is-today:not(.selected){
  box-shadow:inset 0 0 0 2px rgba(229,157,45,.65);
}
.health-calendar-day.selected{
  background:rgba(229,157,45,.16);
  box-shadow:inset 0 0 0 3px rgba(229,157,45,.95);
  font-weight:900;
}
.health-calendar-day.selected.has-record i{background:#d96a2f;}

.health-current-head small{
  display:block;
  margin-bottom:6px;
  color:#8e7c70;
  font-size:clamp(11px,1.45vw,15px);
  font-weight:700;
}
.health-current-list{
  margin-top:14px;
  display:grid;
  gap:8px;
  max-height:calc(100% - 72px);
  overflow:auto;
  padding-right:2px;
}
.health-day-record-main{
  width:100%;
  display:grid;
  grid-template-columns:54px minmax(0,1fr) 18px;
  align-items:center;
  gap:12px;
  border:1px solid rgba(238,221,208,.9);
  border-radius:18px;
  background:#fffaf5;
  padding:12px 14px;
  text-align:left;
  cursor:pointer;
}
.health-day-record-icon{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:#fff2e8;
  font-size:30px;
}
.health-day-record-copy{min-width:0;display:grid;gap:4px;}
.health-day-record-copy strong{font-size:clamp(15px,2vw,21px);line-height:1.15;color:#4b2a18;}
.health-day-record-copy small{font-size:clamp(11px,1.5vw,14px);color:#af805c;line-height:1.25;}
.health-day-record-copy p{
  margin:0;
  color:#705647;
  font-size:clamp(12px,1.55vw,15px);
  line-height:1.45;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.health-day-record-arrow{font-size:22px;color:#af805c;text-align:right;}
.health-current-empty{
  display:grid;
  place-items:center;
  gap:8px;
  min-height:100%;
  color:#8f7562;
  text-align:center;
  padding:8px 12px;
}
.health-current-empty div{font-size:42px;}
.health-current-empty strong{font-size:clamp(17px,2.2vw,24px);color:#4b2a18;}
.health-current-empty p{margin:0;font-size:clamp(12px,1.55vw,15px);line-height:1.5;}

.he-summary-art,
.health-summary-live{left:5.4%!important;top:67.4%!important;width:88.8%!important;height:8.2%!important;}
.he-summary-overall,.he-summary-vaccine,.he-summary-deworm,.he-summary-allergy{top:68.5%!important;height:7.0%!important;}
.health-summary-live strong{top:66.8%!important;font-size:clamp(11px,2.0vw,16px)!important;}
.health-logs-heading{top:76.1%!important;left:4.2%!important;}
.health-logs-panel{top:79.4%!important;left:3.8%!important;width:92.4%!important;height:16.2%!important;border-radius:24px!important;}
.health-log-live{left:4.9%!important;width:90.4%!important;top:calc(80.15% + var(--health-row) * 3.05%)!important;height:2.72%!important;}
.he-footer-art{left:5.3%!important;top:95.6%!important;width:89.5%!important;transform:none!important;}
.he-export{left:4.9%!important;top:97.2%!important;width:55.7%!important;height:3.7%!important;transform:none!important;}
.health-detail-panel.open{margin:10px 14px 16px!important;max-height:460px!important;}

@media (max-width:480px){
  .health-screen{
    aspect-ratio:941 / 2500!important;
    margin-bottom:12px!important;
  }
  .he-top-art{top:2.8%!important;height:13.4%!important;}
  .health-screen .health-pet-live{left:6.0%!important;top:6.6%!important;width:46%!important;min-height:6.6%!important;padding:8px 8px!important;}
  .health-screen .health-pet-live strong{font-size:18px!important;}
  .health-screen .health-pet-live small{font-size:11px!important;line-height:1.35!important;}
  .he-switch{top:2.9%!important;height:3.9%!important;}
  .he-history-art{top:16.5%!important;width:46.8%!important;height:12.2%!important;}
  .he-history-card{top:17.5%!important;width:45.1%!important;height:11.2%!important;}
  .he-history-detail{top:25.4%!important;width:28.8%!important;height:3.25%!important;}
  .he-visit-art{top:16.8%!important;width:40.8%!important;height:10.8%!important;}
  .he-visit-card{top:17.8%!important;width:39.5%!important;height:10.15%!important;}
  .he-visit-detail{top:25.1%!important;width:27.2%!important;height:3.05%!important;}

  .health-calendar-panel{top:31.0%!important;height:19.4%!important;padding:14px 14px 12px!important;border-radius:22px!important;}
  .health-current-panel{top:52.2%!important;height:15.0%!important;padding:14px 14px 12px!important;border-radius:22px!important;}
  .health-calendar-head h2,.health-current-head h2{font-size:clamp(9px,2.5vw,12px)!important;}
  .health-calendar-head p{font-size:12px!important;line-height:1.42!important;}
  .health-calendar-toolbar{margin-top:10px!important;gap:8px!important;}
  .health-calendar-arrow{width:34px!important;height:34px!important;font-size:22px!important;}
  .health-calendar-title{font-size:clamp(8px,2.65vw,11px)!important;}
  .health-calendar-today,.health-current-add{padding:8px 12px!important;font-size:12px!important;}
  .health-calendar-weekdays{margin-top:10px!important;font-size:12px!important;}
  .health-calendar-days{gap:2px!important;}
  .health-calendar-day{min-height:34px!important;border-radius:12px!important;font-size:16px!important;}
  .health-calendar-day.has-record i{bottom:4px!important;width:6px!important;height:6px!important;}

  .health-current-head small{font-size:11px!important;margin-bottom:4px!important;}
  .health-current-list{margin-top:10px!important;max-height:calc(100% - 64px)!important;gap:8px!important;}
  .health-day-record-main{grid-template-columns:42px minmax(0,1fr) 14px!important;gap:10px!important;padding:10px 12px!important;border-radius:16px!important;}
  .health-day-record-icon{width:42px!important;height:42px!important;border-radius:12px!important;font-size:24px!important;}
  .health-day-record-copy{gap:2px!important;}
  .health-day-record-copy strong{font-size:15px!important;}
  .health-day-record-copy small{font-size:11px!important;}
  .health-day-record-copy p{font-size:12px!important;line-height:1.35!important;}
  .health-day-record-arrow{font-size:18px!important;}
  .health-current-empty div{font-size:32px!important;}
  .health-current-empty strong{font-size:16px!important;}
  .health-current-empty p{font-size:12px!important;}

  .he-summary-art,.health-summary-live{top:68.8%!important;height:8.6%!important;}
  .he-summary-overall,.he-summary-vaccine,.he-summary-deworm,.he-summary-allergy{top:70.0%!important;height:7.3%!important;}
  .health-summary-live strong{top:67.2%!important;font-size:11px!important;line-height:1.1!important;}
  .health-logs-heading{top:77.8%!important;left:4.0%!important;}
  .health-logs-panel{top:80.9%!important;left:3.4%!important;width:93.0%!important;height:15.5%!important;border-radius:22px!important;}
  .health-log-live{left:4.4%!important;width:91.2%!important;top:calc(81.8% + var(--health-row) * 2.96%)!important;height:2.70%!important;grid-template-columns:32px minmax(0,1fr) 76px 58px 12px!important;gap:4px!important;}
  .health-log-live-copy strong{font-size:13px!important;}
  .health-log-live-copy small,.health-log-live-date,.health-log-live-type{font-size:10px!important;}
  .he-footer-art{top:96.3%!important;width:89.8%!important;}
  .he-export{top:97.8%!important;width:56.0%!important;height:3.9%!important;}
  .health-detail-panel.open{margin:8px 14px 16px!important;max-height:520px!important;}
}

/* 毛毛日記_健康護照_v65：重做健康月曆與目前紀錄排版，改為正常垂直文流，手機／桌機共用同一套資料與互動 */
.health-page{
  width:100%;
  max-width:1000px;
  margin:0 auto;
}

.health-top-stage{
  width:min(100%, 980px)!important;
  margin:0 auto 14px!important;
  padding:0 10px!important;
  aspect-ratio:auto!important;
  background:none!important;
  box-shadow:none!important;
}
.health-top-hero{
  position:relative;
  width:100%;
}
.health-top-hero-art{
  display:block;
  width:100%;
  height:auto;
}
.health-top-stage .health-pet-live{
  position:absolute!important;
  left:6.0%!important;
  top:18.5%!important;
  width:39%!important;
  min-height:auto!important;
  padding:10px 12px!important;
  gap:12px!important;
  border-radius:24px!important;
  background:rgba(255,253,250,.9)!important;
}
.health-top-stage .health-pet-emoji{
  width:64px!important;
  height:64px!important;
  font-size:36px!important;
}
.health-top-stage .health-pet-live strong{
  font-size:clamp(22px, 3.1vw, 46px)!important;
  line-height:1.08!important;
  white-space:nowrap!important;
}
.health-top-stage .health-pet-live small{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  gap:2px!important;
  margin-top:4px!important;
  white-space:normal!important;
  font-size:clamp(12px, 1.5vw, 20px)!important;
  line-height:1.35!important;
}
.health-top-stage .health-pet-live .health-pet-age{white-space:nowrap!important;}
.health-top-stage .health-pet-live .health-pet-age::after{content:""!important;margin:0!important;}
.health-top-stage .health-pet-live .health-pet-breed{display:block!important;}
.health-top-stage .he-switch{
  left:72.6%!important;
  top:17.2%!important;
  width:22.8%!important;
  height:14.5%!important;
  border-radius:999px!important;
}

.health-home-card-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:16px;
  margin-top:14px;
}
.health-home-card{
  position:relative;
}
.health-home-card-art{
  display:block;
  width:100%;
  height:auto;
}
.health-home-card-hitarea,
.health-home-card-action{
  position:absolute;
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.health-home-card-hitarea{inset:0;border-radius:28px;}
.health-home-card-action{left:28%;right:4%;bottom:7%;height:24%;border-radius:999px;}

.health-flow-sections{
  width:min(100%, 980px);
  margin:0 auto;
  padding:0 10px 8px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.health-flow-card,
.health-flow-sections .health-calendar-panel,
.health-flow-sections .health-current-panel{
  position:relative!important;
  left:auto!important;
  top:auto!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  padding:18px!important;
  border:1.6px solid rgba(227,213,200,.95)!important;
  border-radius:28px!important;
  background:rgba(255,255,255,.92)!important;
  box-shadow:0 12px 24px rgba(91,67,51,.06)!important;
  z-index:auto!important;
}
.health-flow-heading h2,
.health-calendar-head h2,
.health-current-head h2{
  margin:0!important;
  color:#4b2a18!important;
  line-height:1.12!important;
}
.health-calendar-head h2{font-size:clamp(20px, 2.4vw, 30px)!important;}
.health-current-head h2{font-size:clamp(20px, 2.2vw, 28px)!important;}
.health-calendar-head p{
  margin:8px 0 0!important;
  color:#8e7c70!important;
  font-size:clamp(13px, 1.45vw, 16px)!important;
  line-height:1.5!important;
}
.health-calendar-toolbar,
.health-current-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
}
.health-calendar-toolbar{margin-top:16px!important;}
.health-calendar-arrow,
.health-calendar-today,
.health-current-add{
  border:1.4px solid #ead6c4!important;
  background:#fff8f2!important;
  color:#8d5630!important;
  font-weight:800!important;
  cursor:pointer!important;
}
.health-calendar-arrow{
  width:44px!important;
  height:44px!important;
  border-radius:50%!important;
  font-size:24px!important;
  line-height:1!important;
}
.health-calendar-title{
  flex:1!important;
  text-align:center!important;
  color:#5a311a!important;
  font-size:clamp(22px, 3vw, 38px)!important;
  line-height:1.1!important;
}
.health-calendar-today,
.health-current-add{
  border-radius:999px!important;
  padding:10px 18px!important;
  font-size:clamp(13px, 1.35vw, 15px)!important;
  white-space:nowrap!important;
}
.health-calendar-weekdays,
.health-calendar-days{
  display:grid!important;
  grid-template-columns:repeat(7, minmax(0,1fr))!important;
}
.health-calendar-weekdays{
  margin-top:16px!important;
  color:#6a4935!important;
  font-weight:700!important;
  font-size:clamp(14px, 1.45vw, 16px)!important;
  text-align:center!important;
}
.health-calendar-days{
  margin-top:8px!important;
  gap:6px!important;
}
.health-calendar-day{
  position:relative!important;
  min-height:52px!important;
  border:0!important;
  border-radius:16px!important;
  background:transparent!important;
  color:#4b2a18!important;
  font-size:clamp(16px, 2vw, 21px)!important;
  cursor:pointer!important;
}
.health-calendar-day.has-record i{
  bottom:7px!important;
  width:7px!important;
  height:7px!important;
}
.health-current-head small{
  display:block!important;
  margin-bottom:6px!important;
  color:#8e7c70!important;
  font-size:13px!important;
  font-weight:700!important;
}
.health-current-list{
  margin-top:14px!important;
  display:grid!important;
  gap:10px!important;
  max-height:none!important;
  overflow:visible!important;
  padding-right:0!important;
}
.health-day-record-main{
  width:100%!important;
  display:grid!important;
  grid-template-columns:58px minmax(0,1fr) 18px!important;
  align-items:center!important;
  gap:12px!important;
  border:1px solid rgba(238,221,208,.9)!important;
  border-radius:18px!important;
  background:#fffaf5!important;
  padding:12px 14px!important;
  text-align:left!important;
  cursor:pointer!important;
}
.health-day-record-icon{
  width:58px!important;
  height:58px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:16px!important;
  background:#fff2e8!important;
  font-size:30px!important;
}
.health-day-record-copy strong{font-size:18px!important;color:#4b2a18!important;line-height:1.15!important;}
.health-day-record-copy small{font-size:13px!important;color:#af805c!important;line-height:1.25!important;}
.health-day-record-copy p{font-size:14px!important;line-height:1.45!important;}
.health-current-empty{
  min-height:160px!important;
}
.health-flow-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.health-flow-heading h2{font-size:clamp(20px, 2vw, 28px);}
.health-summary-grid{
  margin-top:14px;
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:12px;
}
.health-summary-item{
  border:1px solid rgba(238,221,208,.9);
  background:#fffaf5;
  border-radius:22px;
  padding:16px 12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  cursor:pointer;
  text-align:center;
}
.health-summary-item-icon{font-size:28px;line-height:1;}
.health-summary-item-label{font-size:14px;color:#785b48;font-weight:700;}
.health-summary-item-value{font-size:clamp(18px, 1.9vw, 24px);line-height:1.18;color:#4b8d54;}
.health-summary-item[data-health-summary="allergy"] .health-summary-item-value{color:#ef7b28;}

.health-flow-log-list{
  margin-top:14px;
  display:grid;
  gap:8px;
}
.health-flow-log{
  width:100%;
  display:grid;
  grid-template-columns:48px minmax(0,1fr) 100px 88px 14px;
  align-items:center;
  gap:8px;
  border:1px solid rgba(238,221,208,.9);
  border-radius:18px;
  background:#fffaf5;
  padding:12px 14px;
  text-align:left;
  cursor:pointer;
}
.health-flow-log.empty{
  grid-template-columns:1fr;
  justify-items:center;
  color:#c7b8ab;
  cursor:default;
}
.health-flow-log-icon{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:15px;
  background:#fff2e8;
  font-size:28px;
}
.health-flow-log-copy{min-width:0;display:grid;gap:4px;}
.health-flow-log-copy strong{font-size:17px;line-height:1.15;color:#4b2a18;}
.health-flow-log-copy small{
  color:#705647;
  font-size:13px;
  line-height:1.45;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.health-flow-log-date,
.health-flow-log-type{
  color:#866a58;
  font-size:13px;
  text-align:right;
}
.health-flow-log-arrow{font-size:20px;color:#af805c;text-align:right;}

.health-export-section{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  padding:4px 4px 10px;
}
.health-export-button{
  flex:0 0 56%;
  min-height:56px;
  border:0;
  border-radius:999px;
  background:#83c07e;
  color:#fff;
  font-size:clamp(18px, 2vw, 24px);
  font-weight:800;
  cursor:pointer;
  box-shadow:0 10px 18px rgba(93,150,89,.18);
}
.health-export-art{
  flex:0 0 34%;
  max-width:280px;
  width:34%;
  height:auto;
  display:block;
}

@media (max-width: 760px){
  .health-top-stage,
  .health-flow-sections{padding-left:8px!important;padding-right:8px!important;}
  .health-top-stage .health-pet-live{
    left:5.8%!important;
    top:18.0%!important;
    width:44%!important;
    padding:8px 8px!important;
    gap:8px!important;
  }
  .health-top-stage .health-pet-emoji{width:54px!important;height:54px!important;font-size:31px!important;}
  .health-top-stage .health-pet-live strong{font-size:clamp(16px,5vw,22px)!important;}
  .health-top-stage .health-pet-live small{font-size:12px!important;line-height:1.32!important;}
  .health-top-stage .he-switch{top:16.8%!important;height:15.0%!important;}

  .health-home-card-grid{gap:8px;}
  .health-flow-sections{gap:12px;}
  .health-flow-card,
  .health-flow-sections .health-calendar-panel,
  .health-flow-sections .health-current-panel{padding:14px!important;border-radius:24px!important;}
  .health-calendar-head h2{font-size:clamp(14px,6vw,18px)!important;}
  .health-calendar-head p{font-size:11px!important;line-height:1.45!important;}
  .health-calendar-toolbar{margin-top:10px!important;gap:8px!important;flex-wrap:wrap!important;}
  .health-calendar-arrow{width:34px!important;height:34px!important;font-size:22px!important;}
  .health-calendar-title{order:1;width:calc(100% - 120px);flex:1 1 auto!important;font-size:clamp(16px,6vw,20px)!important;}
  .health-calendar-today{order:2;margin-left:auto;}
  .health-calendar-weekdays{margin-top:10px!important;font-size:12px!important;}
  .health-calendar-days{gap:4px!important;}
  .health-calendar-day{min-height:36px!important;border-radius:12px!important;font-size:15px!important;}
  .health-current-head{align-items:flex-start!important;flex-wrap:wrap!important;}
  .health-current-head h2{font-size:clamp(15px,5vw,18px)!important;}
  .health-current-add{padding:8px 12px!important;font-size:12px!important;}
  .health-day-record-main{grid-template-columns:42px minmax(0,1fr) 14px!important;gap:10px!important;padding:10px 12px!important;border-radius:16px!important;}
  .health-day-record-icon{width:42px!important;height:42px!important;border-radius:12px!important;font-size:24px!important;}
  .health-day-record-copy strong{font-size:15px!important;}
  .health-day-record-copy small{font-size:11px!important;}
  .health-day-record-copy p{font-size:12px!important;line-height:1.38!important;}
  .health-current-empty{min-height:120px!important;gap:6px!important;}
  .health-current-empty div{font-size:30px!important;}
  .health-current-empty strong{font-size:16px!important;}
  .health-current-empty p{font-size:12px!important;}
  .health-flow-heading h2{font-size:clamp(16px,5vw,20px);}
  .health-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  .health-summary-item{padding:14px 10px;border-radius:18px;}
  .health-summary-item-icon{font-size:24px;}
  .health-summary-item-label{font-size:13px;}
  .health-summary-item-value{font-size:20px;}
  .health-flow-log{grid-template-columns:42px minmax(0,1fr) 72px 56px 10px;gap:6px;padding:10px 12px;border-radius:16px;}
  .health-flow-log-icon{width:42px;height:42px;border-radius:12px;font-size:24px;}
  .health-flow-log-copy strong{font-size:15px;}
  .health-flow-log-copy small{font-size:11px;}
  .health-flow-log-date,.health-flow-log-type{font-size:10px;}
  .health-flow-log-arrow{font-size:16px;}
  .health-export-section{gap:8px;padding:2px 2px 8px;}
  .health-export-button{flex-basis:60%;min-height:38px;font-size:16px;}
  .health-export-art{flex-basis:36%;width:36%;}
}


/* 毛毛日記_健康護照_v66：手機版健康月曆區上方前二大字體縮小為約 75% */
@media (max-width: 760px){
  .health-calendar-head h2{
    font-size:clamp(10.5px, 4.5vw, 13.5px)!important;
  }
  .health-calendar-title{
    font-size:clamp(12px, 4.5vw, 15px)!important;
  }
  .health-current-head h2{
    font-size:clamp(11.25px, 3.75vw, 13.5px)!important;
  }
}


/* 毛毛日記_健康護照_v67：縮小健康護照頁指定大字並壓縮月曆每橫排日期間距 */
.health-top-stage .health-pet-live strong{
  font-size:clamp(10.8px,1.2vw,12.6px)!important;
  line-height:1.12!important;
}
.health-calendar-head h2,
.health-current-head h2,
.health-flow-heading h2,
.health-flow-heading h2 span,
.health-current-empty strong{
  font-size:60%!important;
  line-height:1.15!important;
}
.health-calendar-title{
  font-size:clamp(13.2px,1.8vw,22.8px)!important;
  line-height:1.05!important;
}
.health-summary-item-value{
  font-size:clamp(10.8px,1.15vw,14.4px)!important;
  line-height:1.12!important;
}
.health-calendar-days{
  gap:3px!important;
}
.health-calendar-day{
  min-height:32px!important;
  line-height:1!important;
  padding:0!important;
}
.health-calendar-day.has-record i{
  bottom:3px!important;
}

@media (max-width: 760px){
  .health-top-stage .health-pet-live strong{
    font-size:10.8px!important;
    line-height:1.1!important;
  }
  .health-calendar-head h2,
  .health-current-head h2,
  .health-flow-heading h2,
  .health-flow-heading h2 span,
  .health-current-empty strong{
    font-size:60%!important;
  }
  .health-calendar-title{
    font-size:9px!important;
    line-height:1.05!important;
  }
  .health-summary-item-value{
    font-size:12px!important;
    line-height:1.05!important;
  }
  .health-calendar-weekdays{
    margin-top:8px!important;
  }
  .health-calendar-days{
    gap:1px!important;
    margin-top:4px!important;
  }
  .health-calendar-day{
    min-height:22px!important;
    font-size:13px!important;
    border-radius:10px!important;
    line-height:1!important;
    padding:0!important;
  }
  .health-calendar-day.has-record i{
    bottom:2px!important;
    width:5px!important;
    height:5px!important;
  }
}


/* 毛毛日記_健康護照_v68：月曆數字縮為 70%，各橫排行距再縮為 70% */
.health-calendar-days{
  gap:2px!important;
  margin-top:6px!important;
}
.health-calendar-day{
  min-height:22px!important;
  font-size:clamp(11px,1.4vw,15px)!important;
  line-height:1!important;
  padding:0!important;
  border-radius:12px!important;
}
.health-calendar-day.has-record i{
  bottom:2px!important;
  width:5px!important;
  height:5px!important;
}

@media (max-width: 760px){
  .health-calendar-days{
    gap:0px!important;
    margin-top:2px!important;
  }
  .health-calendar-day{
    min-height:15px!important;
    font-size:9px!important;
    line-height:1!important;
    padding:0!important;
    border-radius:8px!important;
  }
  .health-calendar-day.has-record i{
    bottom:1px!important;
    width:4px!important;
    height:4px!important;
  }
}


/* 毛毛日記_健康護照_v69：讓「健康月曆」與月份標題使用相同字級。 */
.health-calendar-head h2{
  font-size:clamp(13.2px,1.8vw,22.8px)!important;
  line-height:1.05!important;
}
@media (max-width:760px){
  .health-calendar-head h2{
    font-size:9px!important;
    line-height:1.05!important;
  }
}


/* 毛毛日記_健康護照_v70：將「這一天還沒有健康紀錄」字級調整為與月份標題一致 */
.health-current-empty strong{
  font-size:clamp(13.2px,1.8vw,22.8px)!important;
  line-height:1.05!important;
}
@media (max-width:760px){
  .health-current-empty strong{
    font-size:9px!important;
    line-height:1.05!important;
  }
}


/* 毛毛日記_健康護照_v71：將「目前紀錄」字級調整為與月份標題一致 */
.health-current-head h2{
  font-size:clamp(13.2px,1.8vw,22.8px)!important;
  line-height:1.05!important;
}
@media (max-width:760px){
  .health-current-head h2{
    font-size:9px!important;
    line-height:1.05!important;
  }
}


/* 毛毛日記_健康護照_v72：將「2026年8月3日」(目前紀錄日期) 放大 60% */
.health-current-head h2{
  font-size:clamp(21.12px,2.88vw,36.48px)!important;
  line-height:1.05!important;
}
@media (max-width:760px){
  .health-current-head h2{
    font-size:14.4px!important;
    line-height:1.05!important;
  }
}


/* 毛毛日記_健康護照_v73：縮小兩段說明文字為原來的 80% */
.health-calendar-head p{
  font-size:clamp(9.6px,1.24vw,12px)!important;
  line-height:1.42!important;
}
.health-current-empty p{
  font-size:clamp(9.6px,1.24vw,12px)!important;
  line-height:1.5!important;
}
@media (max-width:760px){
  .health-calendar-head p{
    font-size:8.8px!important;
    line-height:1.42!important;
  }
  .health-current-empty p{
    font-size:9.6px!important;
    line-height:1.5!important;
  }
}


/* 毛毛日記_健康護照_v74：以 v73 為基底，復原心情卡片中的龍貓插畫。 */
.record-mood-panel-pet{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:visible!important;
  opacity:1!important;
  visibility:visible!important;
}
.record-mood-panel-pet .record-mood-dog{
  display:block!important;
  opacity:1!important;
  visibility:visible!important;
  object-fit:contain!important;
  object-position:center!important;
  max-width:100%!important;
  max-height:100%!important;
  width:76px!important;
  height:auto!important;
}
@media (max-width:480px){
  .record-mood-panel-pet{
    height:52px!important;
    min-height:52px!important;
  }
  .record-mood-panel-pet .record-mood-dog{
    width:64px!important;
    max-height:52px!important;
  }
}
@media (min-width:481px){
  .record-mood-panel-pet{
    height:72px!important;
    min-height:72px!important;
  }
  .record-mood-panel-pet .record-mood-dog{
    width:76px!important;
    max-height:72px!important;
  }
}


/* 毛毛日記_健康護照_v76：以 v73 為基底，復原心情卡片中的龍貓插圖。 */
.record-mood-panel-pet{
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:visible!important;
}
.record-mood-panel-pet .record-mood-dog{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
  width:76px!important;
  max-width:92%!important;
  height:auto!important;
  object-fit:contain!important;
  position:relative!important;
  z-index:2!important;
}
@media (max-width:480px){
  .record-mood-panel-pet{
    height:52px!important;
    min-height:52px!important;
  }
  .record-mood-panel-pet .record-mood-dog{
    width:64px!important;
    max-height:52px!important;
  }
}
@media (min-width:481px){
  .record-mood-panel-pet{
    height:76px!important;
    min-height:76px!important;
  }
  .record-mood-panel-pet .record-mood-dog{
    width:76px!important;
    max-height:76px!important;
  }
}

/* 毛毛日記_健康護照_v77：將「2026年8月3日」與「這一天還沒有健康紀錄」調整為與「健康月曆」相同字級 */
.health-current-head h2,
.health-current-empty strong{
  font-size:clamp(13.2px,1.8vw,22.8px)!important;
  line-height:1.05!important;
}
@media (max-width:760px){
  .health-current-head h2,
  .health-current-empty strong{
    font-size:9px!important;
    line-height:1.05!important;
  }
}

/* 毛毛日記_健康護照_v78：將「這一天還沒有健康紀錄」字級明確同步為「健康月曆」標題 */
.health-current-empty strong{
  font-size:clamp(13.2px,1.8vw,22.8px)!important;
  line-height:1.05!important;
  font-weight:700!important;
  color:#4b2a18!important;
}
@media (max-width:760px){
  .health-current-empty strong{
    font-size:9px!important;
    line-height:1.05!important;
    font-weight:700!important;
  }
}

/* 毛毛日記_健康護照_v79：手機版統一健康月曆／健康摘要／健康日誌／空狀態主文案字級為與「目前紀錄」相同，
   並將「(呈現近期5筆資料)」放大為目前大小的 150%。 */
@media (max-width:760px){
  .health-calendar-head h2,
  .health-flow-heading h2,
  .health-current-empty strong{
    font-size:13px!important;
    line-height:1.12!important;
    font-weight:700!important;
  }

  .health-flow-heading h2 span{
    font-size:90%!important;
    line-height:1.12!important;
    font-weight:700!important;
  }
}

/* 毛毛日記_健康護照_v80：手機版將月曆工具列改為單一橫排，並讓月份標題與目前日期字級同步為「目前紀錄」 */
@media (max-width:760px){
  .health-calendar-toolbar{
    display:grid!important;
    grid-template-columns:40px minmax(0,1fr) 40px auto!important;
    align-items:center!important;
    gap:8px!important;
    flex-wrap:nowrap!important;
    margin-top:10px!important;
  }

  .health-calendar-arrow{
    width:40px!important;
    height:40px!important;
    font-size:22px!important;
    line-height:1!important;
  }

  .health-calendar-title{
    order:0!important;
    width:auto!important;
    flex:none!important;
    text-align:center!important;
    font-size:13px!important;
    line-height:1.12!important;
    white-space:nowrap!important;
  }

  .health-calendar-today{
    order:0!important;
    margin-left:0!important;
    padding:8px 16px!important;
    font-size:13px!important;
    white-space:nowrap!important;
  }

  .health-current-head h2{
    font-size:13px!important;
    line-height:1.12!important;
    font-weight:700!important;
  }
}

/* 毛毛日記_健康護照_v84：以 v80 為基底，手機版健康摘要四個按鈕中的綠字縮為目前的 80% */
@media (max-width:760px){
  .health-summary-item:not([data-health-summary="allergy"]) .health-summary-item-value{
    font-size:9.6px!important;
    line-height:1.05!important;
  }
}

/* 毛毛日記_健康護照_v85：手機版將「這一天還沒有健康紀錄」縮為目前的 80% */
@media (max-width:760px){
  .health-current-empty strong{
    font-size:10.4px!important;
    line-height:1.12!important;
  }
}

/* 毛毛日記_健康護照_v86：電腦版也將「這一天還沒有健康紀錄」縮為目前的 80% */
@media (min-width:761px){
  .health-current-empty strong{
    font-size:clamp(10.56px,1.44vw,18.24px)!important;
    line-height:1.12!important;
  }
}


/* 毛毛日記_健康護照_v87：匯出健康護照區塊改回 v59 風格，使用完整 footer 圖片，不再重複顯示按鈕 */
.health-export-section-v59{
  position:relative;
  display:block;
  padding:4px 0 10px!important;
}
.health-export-composite{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
}
.health-export-hotspot{
  position:absolute;
  left:1.4%;
  top:20%;
  width:58.8%;
  height:61%;
  border:0;
  background:transparent;
  padding:0;
  border-radius:999px;
  cursor:pointer;
}
.health-export-hotspot:focus-visible{
  outline:3px solid rgba(114,80,53,.35);
  outline-offset:2px;
}

/* 停用舊的拆分式匯出區塊樣式，避免再次出現大按鈕＋小縮圖 */
.health-export-section-v59 .health-export-button,
.health-export-section-v59 .health-export-art{
  display:none!important;
}

@media (max-width:760px){
  .health-export-section-v59{padding:2px 0 8px!important;}
  .health-export-hotspot{
    left:1.5%;
    top:20.5%;
    width:58.5%;
    height:60%;
  }
}

/* 毛毛日記_健康護照_v89：將圖2健康紀錄詳情卡中的所有文字縮成原來的 80%（桌機版）。 */
@media (min-width:481px){
  .health-detail-head strong{
    font-size:14.4px!important;
    line-height:1.15!important;
  }
  .health-detail-head small{
    font-size:11.2px!important;
    line-height:1.25!important;
    margin-top:3px!important;
  }
  .health-detail-card p{
    font-size:12.8px!important;
    line-height:1.7!important;
    margin:12px 0!important;
  }
  .detail-action{
    font-size:12.8px!important;
    line-height:1.2!important;
    padding:10px 12px!important;
  }
  .detail-close{
    font-size:19.2px!important;
  }
}

/* 毛毛日記_健康護照_v90：將健康日誌列表卡片在手機版與電腦版都等比縮成原來的 80%。
   包含外框尺寸感、內部圖示、文字、欄位寬度、箭頭與留白。 */
.health-flow-log-list{
  gap:8px;
}
.health-flow-log,
.health-flow-log.empty{
  width:80%;
  margin-inline:auto;
}
.health-flow-log{
  grid-template-columns:38px minmax(0,1fr) 80px 70px 11px;
  gap:8px;
  border-radius:14px;
  padding:10px 11px;
}
.health-flow-log-icon{
  width:38px;
  height:38px;
  border-radius:12px;
  font-size:22px;
}
.health-flow-log-copy{
  gap:3px;
}
.health-flow-log-copy strong{
  font-size:13.6px;
  line-height:1.12;
}
.health-flow-log-copy small{
  font-size:10.4px;
  line-height:1.35;
}
.health-flow-log-date,
.health-flow-log-type{
  font-size:10.4px;
}
.health-flow-log-arrow{
  font-size:16px;
}
.health-flow-log.empty{
  padding:16px 12px;
  border-radius:14px;
}
.health-flow-log.empty span{
  font-size:15px;
}

@media (max-width:760px){
  .health-flow-log-list{
    gap:8px;
  }
  .health-flow-log,
  .health-flow-log.empty{
    width:80%;
    margin-inline:auto;
  }
  .health-flow-log{
    grid-template-columns:34px minmax(0,1fr) 58px 45px 8px;
    gap:5px;
    padding:8px 10px;
    border-radius:13px;
  }
  .health-flow-log-icon{
    width:34px;
    height:34px;
    border-radius:10px;
    font-size:19px;
  }
  .health-flow-log-copy strong{
    font-size:12px;
    line-height:1.1;
  }
  .health-flow-log-copy small{
    font-size:8.8px;
    line-height:1.26;
  }
  .health-flow-log-date,
  .health-flow-log-type{
    font-size:8px;
  }
  .health-flow-log-arrow{
    font-size:13px;
  }
  .health-flow-log.empty{
    padding:14px 10px;
    border-radius:13px;
  }
  .health-flow-log.empty span{
    font-size:13px;
  }
}

/* 毛毛日記_健康護照_v93：以 v90 為唯一基底，只修改電腦版三個區塊標題。
   「目前紀錄」「健康摘要」「健康日誌」與「健康月曆」使用完全相同字級。 */
@media (min-width:761px){
  .health-current-head small,
  .health-summary-section .health-flow-heading h2,
  .health-logs-section .health-flow-heading h2{
    font-size:clamp(13.2px,1.8vw,22.8px)!important;
    line-height:1.05!important;
    font-weight:700!important;
    color:#4b2a18!important;
  }
}


/* v105：基本醫療資料「整體狀態」下拉選單正式互動化 */
.health-summary-form .health-overall-select{
  position:relative;
  z-index:3;
  display:block;
  pointer-events:auto!important;
  touch-action:manipulation;
  cursor:pointer;
  appearance:auto;
  -webkit-appearance:menulist;
  background-color:#fffaf6;
}
.health-summary-form .health-overall-hint{
  display:block;
  margin-top:2px;
  color:#9b7c69;
  font-size:11px;
  font-weight:600;
  line-height:1.4;
}

/* v106：改用自製下拉選單，避免部分手機瀏覽器原生 select 無法展開 */
.health-overall-dropdown{
  position:relative;
  z-index:20;
}
.health-overall-trigger{
  width:100%;
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 14px;
  border:1px solid #ff8c76;
  border-radius:14px;
  background:#fffaf6;
  color:#4b2a18;
  text-align:left;
  cursor:pointer;
  box-shadow:0 0 0 3px rgba(255,116,94,.08);
}
.health-overall-trigger b{
  font-size:20px;
  line-height:1;
  transition:transform .18s ease;
}
.health-overall-dropdown.open .health-overall-trigger b{
  transform:rotate(180deg);
}
.health-overall-menu{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 6px);
  z-index:999;
  max-height:280px;
  overflow:auto;
  padding:6px;
  border:1px solid #ead3c3;
  border-radius:14px;
  background:#fffdfa;
  box-shadow:0 14px 32px rgba(67,44,29,.22);
}
.health-overall-menu[hidden]{display:none!important;}
.health-overall-menu button{
  width:100%;
  display:block;
  padding:11px 12px;
  border:0;
  border-radius:10px;
  background:transparent;
  color:#4b2a18;
  text-align:left;
  cursor:pointer;
}
.health-overall-menu button:hover,
.health-overall-menu button:focus-visible,
.health-overall-menu button[aria-selected="true"]{
  background:#fff0e8;
  color:#d85f49;
  outline:none;
}


/* 毛毛日記_健康護照_v109：交換健康護照頁毛孩名稱與年齡/品種的字體大小（位置不變，手機版與電腦版同步）。 */
.health-top-stage .health-pet-live strong{
  font-size:clamp(12px, 1.5vw, 20px)!important;
  line-height:1.15!important;
}
.health-top-stage .health-pet-live small{
  font-size:clamp(10.8px, 1.2vw, 12.6px)!important;
  line-height:1.3!important;
}

@media (max-width:760px){
  .health-top-stage .health-pet-live strong{
    font-size:12px!important;
    line-height:1.15!important;
  }
  .health-top-stage .health-pet-live small{
    font-size:10.8px!important;
    line-height:1.25!important;
  }
}


/* v113：健康紀錄與排程的類型欄位改為自製可操作下拉選單 */
.health-type-dropdown,
.schedule-type-dropdown{
  position:relative;
  z-index:20;
}
.health-record-form .health-overall-trigger,
.schedule-form .health-overall-trigger{
  min-height:48px;
}

/* 毛毛日記_健康護照_v115：將健康護照頁左側毛孩圖示群右移，緊鄰於「切換毛孩」左側（手機版＋電腦版同步）。 */
.health-top-stage .health-pet-live{
  left:48.2%!important;
  top:17.2%!important;
  width:21.8%!important;
  min-height:auto!important;
  padding:8px 10px!important;
  gap:8px!important;
}
.health-top-stage .health-pet-emoji{
  width:56px!important;
  height:56px!important;
  font-size:30px!important;
}
.health-top-stage .he-switch{
  left:72.6%!important;
  top:17.2%!important;
}

@media (max-width:760px){
  .health-top-stage .health-pet-live{
    left:43.8%!important;
    top:14.0%!important;
    width:26.0%!important;
    min-height:auto!important;
    padding:6px 8px!important;
    gap:6px!important;
  }
  .health-top-stage .health-pet-emoji{
    width:46px!important;
    height:46px!important;
    font-size:26px!important;
  }
  .health-top-stage .he-switch{
    left:71.6%!important;
    top:13.8%!important;
    width:24.0%!important;
    height:14.6%!important;
  }
}

/* 毛毛日記_健康護照_v116：毛孩資料區塊下移並放大，手機版＋電腦版同步。 */
.health-top-stage .health-pet-live{
  left:44.0%!important;
  top:21.5%!important;
  width:26.5%!important;
  min-height:auto!important;
  padding:12px 14px!important;
  gap:12px!important;
  border-radius:26px!important;
}
.health-top-stage .health-pet-emoji{
  width:72px!important;
  height:72px!important;
  font-size:30.4px!important;
}
.health-top-stage .health-pet-live strong{
  font-size:clamp(14px,1.8vw,24px)!important;
  line-height:1.15!important;
}
.health-top-stage .health-pet-live small{
  font-size:clamp(12px,1.45vw,18px)!important;
  line-height:1.3!important;
}

@media (max-width:760px){
  .health-top-stage .health-pet-live{
    left:39.5%!important;
    top:18.8%!important;
    width:31.0%!important;
    min-height:auto!important;
    padding:9px 10px!important;
    gap:9px!important;
    border-radius:22px!important;
  }
  .health-top-stage .health-pet-emoji{
    width:58px!important;
    height:58px!important;
    font-size:32px!important;
  }
  .health-top-stage .health-pet-live strong{
    font-size:15px!important;
    line-height:1.15!important;
  }
  .health-top-stage .health-pet-live small{
    font-size:12px!important;
    line-height:1.28!important;
  }
}

/* 毛毛日記_健康護照_v117：將「目前紀錄」日期字體縮為 v116 的 80%，手機版＋電腦版同步。 */
.health-current-head h2{
  font-size:clamp(10.56px,1.44vw,18.24px)!important;
  line-height:1.12!important;
}
@media (max-width:760px){
  .health-current-head h2{
    font-size:10.4px!important;
    line-height:1.12!important;
  }
}

/* 毛毛日記_健康護照_v118：毛孩資料區塊往左移，避免與右側插圖重疊；尺寸與其他內容維持不變。 */
.health-top-stage .health-pet-live{
  left:7.0%!important;
}

@media (max-width:760px){
  .health-top-stage .health-pet-live{
    left:4.5%!important;
  }
}

/* 毛毛日記_健康護照_v121：將健康護照頁毛孩圖示區往右移，緊鄰「切換毛孩」左側；其餘尺寸與內容不變。 */
.health-top-stage .health-pet-live{
  left:44.0%!important;
}

@media (max-width:760px){
  .health-top-stage .health-pet-live{
    left:39.5%!important;
  }
}

/* 毛毛日記_健康護照_v123：修正健康紀錄表單的自製下拉選單被下一列欄位覆蓋。 */
.health-record-form .health-overall-dropdown.open,
.health-summary-form .health-overall-dropdown.open,
.schedule-form .health-overall-dropdown.open{
  z-index:5000!important;
}
.health-record-form .health-overall-dropdown.open .health-overall-menu,
.health-summary-form .health-overall-dropdown.open .health-overall-menu,
.schedule-form .health-overall-dropdown.open .health-overall-menu{
  z-index:5001!important;
}
.health-record-form .health-record-grid:has(.health-overall-dropdown.open),
.health-record-form > label:has(.health-overall-dropdown.open),
.health-summary-form > label:has(.health-overall-dropdown.open),
.schedule-form > label:has(.health-overall-dropdown.open){
  position:relative!important;
  z-index:4999!important;
}

/* 毛毛日記_健康護照_v125：毛孩圖示區改以右側定位，確實緊鄰「切換毛孩」左側。 */
.health-top-stage .health-pet-live{
  left:auto!important;
  right:28.2%!important;
}

@media (max-width:760px){
  .health-top-stage .health-pet-live{
    left:auto!important;
    right:29.2%!important;
  }
}

/* 毛毛日記_健康護照_v126：完全消除毛孩圖示區與「切換毛孩」按鈕之間的水平間隔。 */
.health-top-stage .health-pet-live{
  left:auto!important;
  right:27.4%!important;
}

@media (max-width:760px){
  .health-top-stage .health-pet-live{
    left:auto!important;
    right:28.4%!important;
  }
}

/* 毛毛日記_健康護照_v127：健康日誌五筆卡片（含空白列）整體放大為目前的 120%，手機版＋電腦版同步。 */
.health-flow-log-list{
  gap:9.6px!important;
}
.health-flow-log,
.health-flow-log.empty{
  width:96%!important;
  margin-inline:auto!important;
}
.health-flow-log{
  grid-template-columns:45.6px minmax(0,1fr) 96px 84px 13.2px!important;
  gap:9.6px!important;
  border-radius:16.8px!important;
  padding:12px 13.2px!important;
}
.health-flow-log-icon{
  width:45.6px!important;
  height:45.6px!important;
  border-radius:14.4px!important;
  font-size:26.4px!important;
}
.health-flow-log-copy{
  gap:3.6px!important;
}
.health-flow-log-copy strong{
  font-size:16.32px!important;
  line-height:1.12!important;
}
.health-flow-log-copy small{
  font-size:12.48px!important;
  line-height:1.35!important;
}
.health-flow-log-date,
.health-flow-log-type{
  font-size:12.48px!important;
}
.health-flow-log-arrow{
  font-size:19.2px!important;
}
.health-flow-log.empty{
  padding:19.2px 14.4px!important;
  border-radius:16.8px!important;
}
.health-flow-log.empty span{
  font-size:18px!important;
}

@media (max-width:760px){
  .health-flow-log-list{
    gap:9.6px!important;
  }
  .health-flow-log,
  .health-flow-log.empty{
    width:96%!important;
    margin-inline:auto!important;
  }
  .health-flow-log{
    grid-template-columns:40.8px minmax(0,1fr) 69.6px 54px 9.6px!important;
    gap:6px!important;
    padding:9.6px 12px!important;
    border-radius:15.6px!important;
  }
  .health-flow-log-icon{
    width:40.8px!important;
    height:40.8px!important;
    border-radius:12px!important;
    font-size:22.8px!important;
  }
  .health-flow-log-copy strong{
    font-size:14.4px!important;
    line-height:1.1!important;
  }
  .health-flow-log-copy small{
    font-size:10.56px!important;
    line-height:1.26!important;
  }
  .health-flow-log-date,
  .health-flow-log-type{
    font-size:9.6px!important;
  }
  .health-flow-log-arrow{
    font-size:15.6px!important;
  }
  .health-flow-log.empty{
    padding:16.8px 12px!important;
    border-radius:15.6px!important;
  }
  .health-flow-log.empty span{
    font-size:15.6px!important;
  }
}

/* 毛毛日記_健康護照_v128：修正健康護照頁左側毛孩資料區塊壓到右側插圖，將其移回左側原本位置，避免重疊。 */
.health-top-stage .health-pet-live{
  left:6.0%!important;
  right:auto!important;
  top:18.5%!important;
  width:39%!important;
}

@media (max-width:760px){
  .health-top-stage .health-pet-live{
    left:4.5%!important;
    right:auto!important;
    top:18.5%!important;
    width:39%!important;
  }
}

/* 毛毛日記_健康護照_v133：增加健康護照頁上方留白，讓標題上方空間接近首頁視覺。 */
.health-page{
  padding-top:clamp(20px, 3vw, 34px)!important;
}

@media (max-width:760px){
  .health-page{
    padding-top:22px!important;
  }
}

/* 毛毛日記_健康護照_v134：首頁與健康護照頁標題同步放大 20%。 */
.home-title-art{
  width:10.56%!important;
}


/* v135：首頁、紀錄頁、健康護照頁標題再上移，讓上方留白更自然 */
.home-title-art{top:3.9%!important;}
.records-screen .rec-header-title{top:45.5%!important;}
.he-top-art{top:2.7%!important;}


/* v136：隱藏紀錄頁左上返回箭頭 */
.rec-back{display:none !important;pointer-events:none !important;}


/* v137：健康護照頁標題再上移，讓「健康護照」更貼近上方。 */
.he-top-art{top:1.5%!important;}

/* v138：只調整電腦版健康護照頁，增加頁面最上方留白；手機版維持 v137。 */
@media (min-width:761px){
  .health-page{
    padding-top:72px!important;
  }
}


/* v139：手機版與電腦版健康護照頁都拉長上方空間；標題拆成獨立文字並固定在最上方。 */
.health-page{
  position:relative!important;
  padding-top:84px!important;
}
.health-top-hero{
  position:relative!important;
}

/* v140：將「健康護照」標題縮小為 v139 的 70%（約縮小 30%），手機版與電腦版同步。 */
.health-page-title{
  position:absolute!important;
  z-index:30!important;
  left:50%!important;
  top:-62px!important;
  transform:translateX(-50%)!important;
  margin:0!important;
  padding:0!important;
  color:#4b2a18!important;
  font-size:clamp(22px,2.45vw,30px)!important;
  font-weight:900!important;
  line-height:1!important;
  letter-spacing:.04em!important;
  white-space:nowrap!important;
  pointer-events:none!important;
}

@media (max-width:760px){
  .health-page{
    padding-top:68px!important;
  }
  .health-page-title{
    top:-50px!important;
    font-size:20px!important;
  }
}


/* 毛毛日記_健康護照_v143：
   1) 行事曆「目前選取日期」改為兩行，字體縮小 30%，且第二行自左對齊。
   2) 健康日誌空白列「無紀錄資料」改為單行顯示，外框高度縮為約一半。
   3) 全站毛孩照片遮罩統一改為圓形，照片在圓內置中裁切顯示。 */
.day-agenda-head h2.calendar-selected-date{
  margin:2px 0 0!important;
  font-size:15.4px!important;
  line-height:1.18!important;
  display:inline-grid!important;
  justify-items:start!important;
  align-items:start!important;
  gap:2px!important;
}
.day-agenda-head h2.calendar-selected-date span{
  display:block!important;
}

.health-flow-log.empty{
  grid-template-columns:1fr!important;
  align-items:center!important;
  min-height:0!important;
  padding:9px 14px!important;
}
.health-flow-log.empty span{
  display:block!important;
  width:100%!important;
  text-align:center!important;
  white-space:nowrap!important;
  line-height:1.2!important;
  font-size:16px!important;
}
@media (max-width:760px){
  .health-flow-log.empty{
    padding:8px 12px!important;
  }
  .health-flow-log.empty span{
    font-size:15px!important;
  }
}

.home-pet-avatar,
.record-pet-emoji,
.health-pet-emoji,
.calendar-pet-emoji,
.settings-profile-avatar,
.pet-manager-emoji,
.pet-remove-avatar,
.pet-remove-confirm-avatar,
.home-reminder-avatar,
.notification-event-avatar,
.pet-avatar{
  overflow:hidden!important;
  border-radius:50%!important;
}
.home-pet-avatar img.pet-avatar-media,
.record-pet-emoji img.pet-avatar-media,
.health-pet-emoji img.pet-avatar-media,
.calendar-pet-emoji img.pet-avatar-media,
.settings-profile-avatar img.pet-avatar-media,
.pet-manager-emoji img.pet-avatar-media,
.pet-remove-avatar img.pet-avatar-media,
.pet-remove-confirm-avatar img.pet-avatar-media,
.home-reminder-avatar img.pet-avatar-media,
.notification-event-avatar img.pet-avatar-media,
.pet-avatar img.pet-avatar-media,
.home-pet-avatar > img,
.record-pet-emoji > img,
.health-pet-emoji > img,
.calendar-pet-emoji > img,
.settings-profile-avatar > img,
.pet-manager-emoji > img,
.pet-remove-avatar > img,
.pet-remove-confirm-avatar > img,
.home-reminder-avatar > img,
.notification-event-avatar > img,
.pet-avatar > img{
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:cover!important;
  object-position:center center!important;
  display:block!important;
  border-radius:50%!important;
}
.home-pet-avatar > span.pet-avatar-media,
.record-pet-emoji > span.pet-avatar-media,
.health-pet-emoji > span.pet-avatar-media,
.calendar-pet-emoji > span.pet-avatar-media,
.settings-profile-avatar > span.pet-avatar-media,
.pet-manager-emoji > span.pet-avatar-media,
.pet-remove-avatar > span.pet-avatar-media,
.pet-remove-confirm-avatar > span.pet-avatar-media,
.home-reminder-avatar > span.pet-avatar-media,
.notification-event-avatar > span.pet-avatar-media,
.pet-avatar > span.pet-avatar-media{
  width:100%!important;
  height:100%!important;
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
}


/* v144：僅調整電腦版行事曆「目前選取日期」為單行顯示；手機版維持雙行。 */
@media (min-width:761px){
  .day-agenda-head h2.calendar-selected-date{
    display:inline-flex!important;
    flex-wrap:nowrap!important;
    justify-items:initial!important;
    align-items:baseline!important;
    gap:0!important;
    white-space:nowrap!important;
  }
  .day-agenda-head h2.calendar-selected-date span{
    display:inline!important;
    white-space:nowrap!important;
  }
}


/* v145：手機版行事曆「＋ 新增排程」按鈕改為橫向單行顯示。
   僅拉長按鈕寬度、降低高度並禁止換行，讓「新增排程」維持同一行。 */
@media (max-width:760px){
  .day-agenda-head{
    gap:10px!important;
  }
  .day-agenda-head button[data-calendar-command="add"]{
    flex:0 0 auto!important;
    min-width:168px!important;
    width:auto!important;
    padding:8px 18px!important;
    min-height:0!important;
    line-height:1.15!important;
    white-space:nowrap!important;
    font-size:clamp(15px,4.2vw,18px)!important;
    border-radius:28px!important;
  }
}


/* v146：進一步修正手機版行事曆「＋ 新增排程」按鈕。
   強制單行、改為置中橫向排版，並拉長外框、降低高度。 */
@media (max-width:760px){
  .day-agenda-head{
    align-items:flex-start!important;
    gap:10px!important;
  }
  .day-agenda-head > div:first-child{
    flex:1 1 auto!important;
    min-width:0!important;
  }
  .day-agenda-head button[data-calendar-command="add"]{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 0 auto!important;
    flex-shrink:0!important;
    width:186px!important;
    min-width:186px!important;
    max-width:186px!important;
    height:72px!important;
    min-height:72px!important;
    padding:0 16px!important;
    margin:0!important;
    border-radius:32px!important;
    font-size:16px!important;
    line-height:1!important;
    letter-spacing:0!important;
    white-space:nowrap!important;
    text-wrap:nowrap!important;
    word-break:keep-all!important;
    overflow-wrap:normal!important;
    writing-mode:horizontal-tb!important;
  }
}


/* v147：手機版健康日誌卡片主標題縮小 30%，避免「體重紀錄／體內驅蟲／三合一疫苗」過大擠成狹長直排。 */
@media (max-width:760px){
  .health-log-live-copy strong{
    font-size:9px!important;
    line-height:1.08!important;
  }
}


/* v148：縮小行事曆「目前選取日期」區塊中的「＋ 新增排程」按鈕外框約 20%。
   依專案規則同步調整手機版與電腦版，並維持文字單行顯示與原有功能。 */
@media (min-width:761px){
  .day-agenda-head button[data-calendar-command="add"]{
    padding:8px 10px!important;
    border-radius:22px!important;
    font-size:clamp(16px,1.15vw,18px)!important;
    line-height:1.05!important;
  }
}

@media (max-width:760px){
  .day-agenda-head button[data-calendar-command="add"]{
    width:150px!important;
    min-width:150px!important;
    max-width:150px!important;
    height:58px!important;
    min-height:58px!important;
    padding:0 12px!important;
    border-radius:26px!important;
    font-size:13px!important;
    line-height:1!important;
    white-space:nowrap!important;
  }
}


/* v149：修正電腦版健康護照頁右上「切換毛孩」熱區往下偏移問題，
   將實際按壓感應區上移，並與按鈕圖案完整重疊。 */
@media (min-width:761px){
  .health-top-stage .he-switch{
    left:75.6%!important;
    top:4.8%!important;
    width:20.8%!important;
    height:18.4%!important;
    border-radius:999px!important;
    z-index:12!important;
  }
}


/* v150：將健康護照首頁右側「歷史紀錄」卡片外框改成與左側「基本資料」卡片一致的視覺框線，手機版與電腦版同步。 */
.health-home-card.history-card{
  position:relative;
  background:#fffdfa;
  border:1.5px solid rgba(231,214,199,.98);
  border-radius:28px;
  overflow:hidden;
  box-shadow:
    0 0 0 1px rgba(255,250,246,.95) inset,
    0 8px 18px rgba(116,74,42,.04);
}
.health-home-card.history-card::before{
  content:"";
  position:absolute;
  inset:2px;
  border-radius:26px;
  box-shadow:0 0 0 1px rgba(255,255,255,.92) inset;
  pointer-events:none;
  z-index:1;
}
.health-home-card.history-card .health-home-card-art{
  position:relative;
  z-index:2;
}
.health-home-card.history-card .health-home-card-hitarea,
.health-home-card.history-card .health-home-card-action{
  z-index:3;
}

/* 毛毛日記_設定_v01：移除語言設定，將清除快取改為安全的 App 資源重新整理 */
.se-use-art{top:54.1%!important;height:20.1%!important}
.se-theme{top:57.4%!important}
.se-sync{top:61.6%!important}
.se-export{top:65.8%!important}
.se-clear{top:70.0%!important}
.se-language{display:none!important}
.se-about-art{top:75.4%!important}
.se-about-app{top:79.0%!important}
.se-terms{top:83.2%!important}
.se-privacy{top:87.4%!important}
.se-contact{top:91.6%!important}
.resource-refresh-panel .settings-primary{width:100%;margin-top:14px}
.resource-refresh-panel .settings-hint{margin-top:10px}

/* 毛毛日記_設定_v08：修正健康護照首頁右側「歷史紀錄」卡片的綠色「查看詳情」按鈕外框。
   以乾淨正常的圓角膠囊按鈕覆蓋原本異常外框，手機版與電腦版同步。 */
.health-home-card.history-card .health-home-card-action{
  left:27.0%!important;
  right:4.4%!important;
  bottom:7.0%!important;
  height:24.0%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:10px!important;
  padding:0 16px!important;
  border:2px solid #8bc170!important;
  border-radius:999px!important;
  background:linear-gradient(180deg,#9fd281 0%, #86bf68 100%)!important;
  box-shadow:0 5px 12px rgba(92,143,69,.16)!important;
  color:#fff!important;
  font-size:clamp(16px,2.2vw,22px)!important;
  font-weight:900!important;
  line-height:1!important;
  letter-spacing:.02em!important;
  text-shadow:0 1px 0 rgba(92,143,69,.45)!important;
  z-index:5!important;
}
.health-home-card.history-card .health-home-card-action::before{
  content:"查看詳情";
}
.health-home-card.history-card .health-home-card-action::after{
  content:"›";
  font-size:1.55em;
  line-height:1;
  margin-left:2px;
}

@media (max-width:480px){
  .health-home-card.history-card .health-home-card-action{
    left:26.6%!important;
    right:4.0%!important;
    bottom:6.6%!important;
    height:24.8%!important;
    gap:8px!important;
    padding:0 12px!important;
    border-width:2px!important;
    font-size:clamp(13px,4vw,17px)!important;
  }
}

/* 毛毛日記_設定_v09：改用重新生成並嵌入素材的「查看詳情」按鈕。
   互動按鈕只保留透明點擊區，不再額外用 CSS 畫按鈕或文字，避免重複與變形。 */
.health-home-card.history-card .health-home-card-action{
  left:27%!important;
  right:4%!important;
  bottom:7%!important;
  height:24%!important;
  display:block!important;
  padding:0!important;
  border:0!important;
  border-radius:999px!important;
  background:transparent!important;
  box-shadow:none!important;
  color:transparent!important;
  font-size:0!important;
  text-shadow:none!important;
  z-index:5!important;
}
.health-home-card.history-card .health-home-card-action::before,
.health-home-card.history-card .health-home-card-action::after{
  content:none!important;
  display:none!important;
}


/* 毛毛日記_設定_v19：以 v09 為基底，將綠色「查看詳情」按鈕做成完全緊裁切、不留多餘透明邊界的去背版本，並以正確定位放回卡片，避免遮住上方資訊。 */
.health-home-card.history-card .health-home-card-button-art{position:absolute;left:27.6%!important;bottom:3.4%!important;width:70.4%!important;height:auto!important;display:block;z-index:4;pointer-events:none;}
.health-home-card.history-card .health-home-card-action{left:27.6%!important;bottom:3.4%!important;width:70.4%!important;height:28.0%!important;display:block!important;padding:0!important;border:0!important;border-radius:999px!important;background:transparent!important;box-shadow:none!important;color:transparent!important;font-size:0!important;text-shadow:none!important;z-index:5!important;}
.health-home-card.history-card .health-home-card-action::before,.health-home-card.history-card .health-home-card-action::after{content:none!important;display:none!important;}
@media (max-width:480px){.health-home-card.history-card .health-home-card-button-art{left:27.6%!important;bottom:3.3%!important;width:70.4%!important;}.health-home-card.history-card .health-home-card-action{left:27.6%!important;bottom:3.3%!important;width:70.4%!important;height:28.0%!important;}}


/* 毛毛日記_設定_v20：使用者提供完整歷史紀錄內容圖，直接替換卡片內容；保留既有外框，不新增第二層框線。 */
.health-home-card.history-card{background:#fffdfa!important;border:1.5px solid rgba(231,214,199,.98)!important;border-radius:28px!important;overflow:hidden!important;box-shadow:0 0 0 1px rgba(255,250,246,.95) inset,0 8px 18px rgba(116,74,42,.04)!important;}
.health-home-card.history-card::before{content:""!important;position:absolute!important;inset:2px!important;border-radius:26px!important;box-shadow:0 0 0 1px rgba(255,255,255,.92) inset!important;pointer-events:none!important;z-index:1!important;}
.health-home-card.history-card .health-home-card-button-art{display:none!important;}
.health-home-card.history-card .health-home-card-art{position:relative!important;z-index:2!important;display:block!important;width:94.4%!important;height:auto!important;max-width:none!important;margin:3.3% auto 0!important;left:auto!important;top:auto!important;}
.health-home-card.history-card .health-home-card-hitarea{inset:0!important;z-index:4!important;border-radius:28px!important;}
.health-home-card.history-card .health-home-card-action{left:31.2%!important;right:7.0%!important;bottom:9.0%!important;height:25.6%!important;display:block!important;padding:0!important;border:0!important;border-radius:999px!important;background:transparent!important;box-shadow:none!important;color:transparent!important;font-size:0!important;text-shadow:none!important;z-index:5!important;}
.health-home-card.history-card .health-home-card-action::before,.health-home-card.history-card .health-home-card-action::after{content:none!important;display:none!important;}
@media (max-width:480px){.health-home-card.history-card .health-home-card-art{width:94.6%!important;margin:3.2% auto 0!important;}.health-home-card.history-card .health-home-card-action{left:31.0%!important;right:7.1%!important;bottom:8.9%!important;height:25.8%!important;}}


/* 毛毛日記_設定_v24：以 v22 為基底，將右側歷史紀錄卡片框內所有內容同步上移一點點。 */
.health-home-card.history-card .health-home-card-art{margin:1.6% auto 0!important;}
.health-home-card.history-card .health-home-card-action{bottom:10.6%!important;}
@media (max-width:480px){.health-home-card.history-card .health-home-card-art{margin:1.5% auto 0!important;}.health-home-card.history-card .health-home-card-action{bottom:10.5%!important;}}


/* 毛毛日記_設定_v25：以 v24 為基底，將右側歷史紀錄卡片框內所有內容再往上移更多。 */
.health-home-card.history-card .health-home-card-art{margin:-1.2% auto 0!important;}
.health-home-card.history-card .health-home-card-action{bottom:13.8%!important;}
@media (max-width:480px){.health-home-card.history-card .health-home-card-art{margin:-1.3% auto 0!important;}.health-home-card.history-card .health-home-card-action{bottom:13.6%!important;}}


/* 毛毛日記_設定_v26：右側歷史紀錄卡片框內所有內容再往上移更多，並把「歷史紀錄」字縮小一些。 */
.health-home-card.history-card .health-home-card-art{margin:-4.8% auto 0!important;}
.health-home-card.history-card .health-home-card-action{bottom:17.8%!important;}
@media (max-width:480px){.health-home-card.history-card .health-home-card-art{margin:-5.0% auto 0!important;}.health-home-card.history-card .health-home-card-action{bottom:17.6%!important;}}


/* 毛毛日記_設定_v27：右側歷史紀錄卡片框內所有內容再往上移更多，並把「歷史紀錄」字再縮小一些。 */
.health-home-card.history-card .health-home-card-art{margin:-8.6% auto 0!important;}
.health-home-card.history-card .health-home-card-action{bottom:22.6%!important;}
@media (max-width:480px){.health-home-card.history-card .health-home-card-art{margin:-8.8% auto 0!important;}.health-home-card.history-card .health-home-card-action{bottom:22.3%!important;}}


/* v03 設定頁：移除底部多餘空白，只保留底部導覽所需安全距離 */
#page-root[data-current-route="settings"]{
  padding-bottom:calc(76px + env(safe-area-inset-bottom))!important;
}


/* 毛毛日記_設定_v04：上移設定頁個人資料頭像，避免壓到下方「帳號與資料」區塊 */
.settings-screen .settings-profile-live{
  top:24.35%!important;
  min-height:7.8%!important;
  padding-top:7px!important;
  padding-bottom:7px!important;
}
.settings-screen .settings-profile-avatar{
  position:relative!important;
  top:-10px!important;
}
@media (max-width:420px){
  .settings-screen .settings-profile-live{
    top:24.1%!important;
  }
  .settings-screen .settings-profile-avatar{
    top:-8px!important;
  }
}
@media (max-width:370px){
  .settings-screen .settings-profile-live{
    top:23.9%!important;
  }
  .settings-screen .settings-profile-avatar{
    top:-7px!important;
  }
}


/* 毛毛日記_設定_v05：手機版設定頁個人資料文字縮小 10%，避免過大擠壓版面 */
@media (max-width:420px){
  .settings-screen .settings-profile-live strong{
    font-size:16.2px!important;
    line-height:1.28!important;
  }
  .settings-screen .settings-profile-live small{
    font-size:11.7px!important;
    line-height:1.45!important;
  }
}
@media (max-width:370px){
  .settings-screen .settings-profile-live strong{
    font-size:16.2px!important;
  }
  .settings-screen .settings-profile-live small{
    font-size:11.7px!important;
  }
}


/* 毛毛日記_設定_v06：手機版設定頁個人資料文字在 v05 基礎上再縮小 10% */
@media (max-width:420px){
  .settings-screen .settings-profile-live strong{
    font-size:14.6px!important;
    line-height:1.26!important;
  }
  .settings-screen .settings-profile-live small{
    font-size:10.5px!important;
    line-height:1.42!important;
  }
}
@media (max-width:370px){
  .settings-screen .settings-profile-live strong{
    font-size:14.6px!important;
  }
  .settings-screen .settings-profile-live small{
    font-size:10.5px!important;
  }
}


/* 毛毛日記_設定_v07：設定頁清單文字放大 5%，並同步增加各項目行距 5% */
.se-personal{top:40.2%!important}
.se-pets{top:44.8%!important}
.se-notify{top:49.3%!important}
.se-theme{top:57.7%!important}
.se-sync{top:66.6%!important}
.se-export{top:71.2%!important}
.se-clear{top:75.8%!important}
.se-about-app{top:83.0%!important}
.se-terms{top:87.0%!important}
.se-privacy{top:90.9%!important}
.se-contact{top:94.8%!important}


/* 毛毛日記_設定_v09：根本修正清單文字底部裁切，將各列移入圖片安全範圍並同步點擊區 */
.se-personal{top:39.9%!important}
.se-pets{top:44.4%!important}
.se-notify{top:48.9%!important}
.se-theme{top:56.9%!important}
.se-sync{top:65.8%!important}
.se-export{top:70.2%!important}
.se-clear{top:74.6%!important}
.se-about-app{top:82.5%!important}
.se-terms{top:86.4%!important}
.se-privacy{top:90.3%!important}
.se-contact{top:94.2%!important}


/* 毛毛日記_設定_v11：設定頁清單文字在 v10 基礎上再放大 5%，並再增加 5% 行距 */
.se-personal{top:39.4%!important;height:4.4%!important}
.se-pets{top:44.3%!important;height:4.4%!important}
.se-notify{top:49.2%!important;height:4.4%!important}
.se-theme{top:58.3%!important;height:4.4%!important}
.se-sync{top:63.8%!important;height:4.4%!important}
.se-export{top:69.4%!important;height:4.4%!important}
.se-clear{top:74.9%!important;height:4.4%!important}
.se-about-app{top:82.7%!important;height:4.4%!important}
.se-terms{top:87.2%!important;height:4.4%!important}
.se-privacy{top:91.8%!important;height:4.4%!important}
.se-contact{top:96.2%!important;height:4.4%!important}


/* 毛毛日記_設定_v12：設定頁清單文字再放大 5%，並把各列行距再增加 8% */
.se-personal{top:39.1%!important;height:4.6%!important}
.se-pets{top:44.0%!important;height:4.6%!important}
.se-notify{top:48.9%!important;height:4.6%!important}
.se-theme{top:57.9%!important;height:4.6%!important}
.se-sync{top:64.1%!important;height:4.6%!important}
.se-export{top:70.3%!important;height:4.6%!important}
.se-clear{top:76.5%!important;height:4.6%!important}
.se-about-app{top:82.6%!important;height:4.6%!important}
.se-terms{top:87.2%!important;height:4.6%!important}
.se-privacy{top:91.8%!important;height:4.6%!important}
.se-contact{top:96.4%!important;height:4.6%!important}


/* 毛毛日記_設定_v13：移除設定頁底部多餘空白，讓內容結尾直接貼近底部導覽 */
#page-root[data-current-route="settings"]{
  padding-bottom:0!important;
  min-height:0!important;
}
#page-root[data-current-route="settings"] .settings-screen{
  margin-bottom:0!important;
}


/* 毛毛日記_設定_v14：修正設定頁後半段各按鈕熱區下移，將按壓區往上校正，完整重疊按鈕本體 */
.se-theme{top:57.9%!important;height:4.6%!important}
.se-sync{top:63.4%!important;height:4.6%!important}
.se-export{top:68.8%!important;height:4.6%!important}
.se-clear{top:74.2%!important;height:4.6%!important}
.se-about-app{top:82.4%!important;height:4.6%!important}
.se-terms{top:86.9%!important;height:4.6%!important}
.se-privacy{top:91.4%!important;height:4.6%!important}
.se-contact{top:95.9%!important;height:4.6%!important}


/* 毛毛日記_設定_v16：仿照既有頁面的內容高度邏輯，桌機版只收合設定頁容器；底部導覽外觀與手機固定模式不變。 */
@media (min-width:481px){
  #app-shell[data-current-route="settings"]{
    min-height:0!important;
    height:calc(480px * 1602 / 982 + 76px)!important;
    overflow:hidden!important;
  }
  #app-shell[data-current-route="settings"] #page-root{
    min-height:0!important;
    height:calc(480px * 1602 / 982)!important;
    padding-bottom:0!important;
  }
  #app-shell[data-current-route="settings"] .settings-screen{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    aspect-ratio:982 / 1602!important;
  }
  #app-shell[data-current-route="settings"] .bottom-nav{
    position:absolute!important;
    left:0!important;
    bottom:0!important;
    transform:none!important;
    width:100%!important;
  }
}


/* 毛毛日記_設定_v17：重新依照設定頁實際按鈕素材位置校正後半段熱區，讓按壓區完整重疊按鈕本身 */
.se-theme{top:57.6%!important;height:4.2%!important}
.se-sync{top:62.1%!important;height:4.2%!important}
.se-export{top:66.6%!important;height:4.2%!important}
.se-clear{top:71.1%!important;height:4.2%!important}
.se-about-app{top:79.0%!important;height:4.2%!important}
.se-terms{top:83.5%!important;height:4.2%!important}
.se-privacy{top:88.0%!important;height:4.2%!important}
.se-contact{top:92.5%!important;height:4.2%!important}


/* 毛毛日記_設定_v22：修正手機版設定頁底部被固定導覽遮住，恢復完整向下捲動 */
@media (max-width:480px){
  html,body{
    min-height:100%!important;
    overflow-y:auto!important;
    overscroll-behavior-y:auto!important;
  }
  #app-shell{
    min-height:100dvh!important;
    height:auto!important;
    overflow-x:hidden!important;
    overflow-y:visible!important;
  }
  #page-root[data-current-route="settings"]{
    min-height:0!important;
    height:auto!important;
    padding-bottom:calc(104px + env(safe-area-inset-bottom))!important;
    overflow:visible!important;
  }
  #page-root[data-current-route="settings"] .settings-screen{
    margin-bottom:0!important;
    overflow:visible!important;
  }
  .bottom-nav{
    position:fixed!important;
    left:50%!important;
    bottom:0!important;
    transform:translateX(-50%)!important;
  }
}


/* 毛毛日記_設定_v26：修正 HTML「設定」標題定位，完整置中且不再被左上角裁切 */
.settings-screen .settings-page-title{
  position:absolute!important;
  z-index:8!important;
  left:50%!important;
  top:4.8%!important;
  transform:translate(-50%,-50%)!important;
  margin:0!important;
  padding:0!important;
  width:max-content!important;
  max-width:80%!important;
  color:#4b2a18!important;
  background:transparent!important;
  font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif!important;
  font-size:33.6px!important;
  font-weight:800!important;
  line-height:1!important;
  letter-spacing:.04em!important;
  white-space:nowrap!important;
  text-align:center!important;
  pointer-events:none!important;
  text-shadow:none!important;
}
@media (max-width:420px){
  .settings-screen .settings-page-title{
    top:4.9%!important;
    font-size:38px!important;
  }
}
@media (max-width:370px){
  .settings-screen .settings-page-title{
    font-size:28px!important;
  }
}


/* 毛毛日記_設定_v27：HTML「設定」標題在 v26 基礎上縮小 20% */


/* 毛毛日記_設定_v28：僅手機版 HTML「設定」標題再縮小 20% */
@media (max-width:420px){
  .settings-screen .settings-page-title{
    font-size:30.4px!important;
  }
}
@media (max-width:370px){
  .settings-screen .settings-page-title{
    font-size:22.4px!important;
  }
}

/* 毛毛日記_設定_v29：個人資料第二欄改為拍照／相簿上傳，設定頁頭像只顯示使用者個人照片 */
.settings-screen .settings-profile-avatar{
  overflow:hidden!important;
  background:transparent!important;
  border-radius:50%!important;
  box-shadow:none!important;
}
.settings-screen .settings-profile-avatar .settings-profile-user-photo{
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  max-width:none!important;
  max-height:none!important;
  display:block!important;
  object-fit:cover!important;
  object-position:center!important;
  border-radius:50%!important;
}
.settings-screen .settings-profile-avatar .settings-profile-avatar-empty{
  width:100%!important;
  height:100%!important;
  display:block!important;
  border-radius:50%!important;
  background:#fffaf6!important;
  box-shadow:inset 0 0 0 1px rgba(225,202,183,.55)!important;
}

.profile-photo-form{gap:16px!important}
.profile-photo-field{display:grid;gap:10px}
.profile-photo-label{color:#674a39;font-weight:700}
.profile-photo-preview{
  width:112px;
  height:112px;
  margin:0 auto 4px;
  border-radius:50%;
  overflow:hidden;
  background:#fffaf6;
  box-shadow:inset 0 0 0 1px #ead7c7;
}
.profile-photo-preview img{
  width:100%;height:100%;display:block;object-fit:cover;object-position:center;
}
.profile-photo-actions{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.profile-photo-action{
  min-height:142px;
  padding:14px 10px;
  border:1px solid #e9cdbb;
  border-radius:22px;
  display:flex!important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px!important;
  text-align:center;
  cursor:pointer;
  background:#fff5ee;
  color:#5f3b29!important;
  font-weight:400!important;
}
.profile-photo-action.gallery-action{background:#eef7ff}
.profile-photo-action-icon{font-size:30px;line-height:1}
.profile-photo-action strong{font-size:16px;line-height:1.3}
.profile-photo-action small{font-size:12px;line-height:1.45;color:#9b6f56;font-weight:400}
.profile-photo-action input{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.profile-photo-remove{
  justify-self:center;
  padding:8px 15px;
  border-radius:999px;
  background:#f3ebe5;
  color:#7a5946;
  font-weight:700;
  cursor:pointer;
}
.profile-photo-remove[hidden]{display:none!important}

@media (max-width:420px){
  .profile-photo-actions{grid-template-columns:1fr 1fr;gap:8px}
  .profile-photo-action{min-height:132px;padding:12px 8px}
  .profile-photo-action strong{font-size:15px}
  .profile-photo-action small{font-size:11px}
}

/* 毛毛日記_設定_v31：健康護照、行事曆與通知設定的跨頁提醒互動 */
.health-followup-hint{
  display:block;
  margin-top:7px;
  color:#8a7467;
  font-size:12px;
  line-height:1.55;
}
.linked-health-notice{
  display:grid;
  gap:4px;
  padding:12px 14px;
  border:1px solid #f1d4c0;
  border-radius:16px;
  background:#fff8f2;
  color:#65402e;
}
.linked-health-notice small{color:#8d7467;line-height:1.5}
.schedule-source-badge{
  display:inline-flex;
  width:max-content;
  margin-top:6px;
  padding:3px 8px;
  border-radius:999px;
  background:#eef8f0;
  color:#4d8d5d;
  font-size:11px;
  font-weight:800;
}
.notification-settings-form{gap:12px!important}
.notification-setting-card{
  align-items:center!important;
  gap:14px;
  padding:14px 16px!important;
  border:1px solid #f2dfd2;
  border-radius:18px;
  background:#fffaf6;
}
.notification-setting-card > span{
  display:grid;
  gap:4px;
  min-width:0;
}
.notification-setting-card strong{font-size:16px;color:#593625}
.notification-setting-card small{font-weight:500;color:#826e62;line-height:1.45}
.notification-setting-card em{font-style:normal;font-size:12px;color:#df775f}
.notification-global-permission{margin-top:2px}

/* 毛毛日記_設定_v32：產品消息改為真正可用的每日紀錄提醒 */
.record-reminder-time-row{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  padding:12px 16px!important;
  border:1px solid #f1d6c4!important;
  border-radius:18px!important;
  background:#fffaf6!important;
  color:#674a39!important;
  font-weight:700!important;
}
.record-reminder-time-row input[type="time"]{
  width:132px!important;
  padding:10px 12px!important;
  border:1px solid #edcdb8!important;
  border-radius:14px!important;
  background:#fff!important;
  color:#5a3b2b!important;
}


/* 毛毛日記_設定_v33：將紀錄提醒開關與每日提醒時間合併在同一張卡片 */
.record-reminder-card{
  display:grid!important;
  gap:0!important;
  padding:0!important;
  overflow:hidden!important;
}
.record-reminder-toggle-row{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  padding:14px 16px!important;
  cursor:pointer!important;
}
.record-reminder-toggle-row > span{
  display:grid!important;
  gap:4px!important;
  min-width:0!important;
}
.record-reminder-time-row{
  margin:0 16px!important;
  padding:12px 0 14px!important;
  border:0!important;
  border-top:1px solid #f1d6c4!important;
  border-radius:0!important;
  background:transparent!important;
}
@media (max-width:420px){
  .record-reminder-toggle-row{padding:13px 14px!important}
  .record-reminder-time-row{margin:0 14px!important;padding:11px 0 13px!important}
  .record-reminder-time-row input[type="time"]{width:126px!important}
}


/* 毛毛日記_設定_v34：擴大主題配色控制範圍。
   保留插畫與卡片底圖原色，只讓可點擊、可選取、可輸入與提示性動態元件跟著主題變色。 */
:root{
  --accent-rgb:255,116,94;
  --accent-strong:#e95f49;
  --accent-pale:#fff0ea;
}
:root[data-theme="green"]{
  --accent-rgb:88,165,111;
  --accent-strong:#448d59;
  --accent-pale:#edf8f0;
}
:root[data-theme="blue"]{
  --accent-rgb:93,145,201;
  --accent-strong:#477fb8;
  --accent-pale:#edf5fc;
}
:root[data-theme="purple"]{
  --accent-rgb:150,113,196;
  --accent-strong:#8058b5;
  --accent-pale:#f3eef9;
}

/* 原生表單控制項 */
.settings-screen input[type="checkbox"],
.settings-screen input[type="radio"],
.settings-modal input[type="checkbox"],
.settings-modal input[type="radio"],
.schedule-modal input[type="checkbox"],
.health-record-modal input[type="checkbox"],
.health-summary-modal input[type="checkbox"]{
  accent-color:var(--coral)!important;
}

/* 底部導覽、通知徽章與所有透明熱區的互動回饋 */
.nav-item.active{
  color:var(--coral)!important;
  background:linear-gradient(180deg,var(--accent-pale) 0%,rgba(var(--accent-rgb),.14) 100%)!important;
}
.notification-badge{background:var(--coral)!important;box-shadow:0 3px 8px rgba(var(--accent-rgb),.28)!important}
.hotspot:active,
.settings-hotspot:active,
.calendar-hotspot:active,
.calendar-day-btn:active{
  background:rgba(var(--accent-rgb),.13)!important;
}
.hotspot:focus-visible,
.settings-hotspot:focus-visible,
.calendar-hotspot:focus-visible,
.calendar-day-btn:focus-visible,
.record-control:focus-visible,
.health-log-live:focus-visible{
  outline-color:rgba(var(--accent-rgb),.84)!important;
}

/* 紀錄頁：所有已選狀態統一使用目前主題色，保留原圖案與底圖 */
.records-screen .record-control.selected,
.records-screen .rec-food-normal.selected,
.records-screen .rec-food-less.selected,
.records-screen .rec-water-normal.selected,
.records-screen .rec-water-less.selected,
.records-screen .rec-poop-normal.selected,
.records-screen .rec-poop-soft.selected,
.records-screen .rec-pee-normal.selected,
.records-screen .rec-smell.selected,
.records-screen .rec-bad-mood.selected,
.records-screen .rec-vomit.selected,
.records-screen .rec-diarrhea.selected,
.records-screen .rec-skin.selected,
.records-screen .rec-cough.selected,
.records-screen .rec-other.selected{
  box-shadow:inset 0 0 0 3px rgba(var(--accent-rgb),.78),0 5px 12px rgba(116,74,42,.08)!important;
}
.record-note-wrap textarea:focus,
.record-note-field textarea:focus{
  border-color:var(--coral)!important;
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.14)!important;
}
.record-footer-save{
  background:linear-gradient(180deg,rgba(var(--accent-rgb),.88),var(--accent-strong))!important;
  box-shadow:0 8px 18px rgba(var(--accent-rgb),.22)!important;
}

/* 行事曆：選中日期、排程圓點、提醒狀態與主要操作 */
.calendar-day-btn.selected{
  background:rgba(var(--accent-rgb),.17)!important;
  box-shadow:inset 0 0 0 2px rgba(var(--accent-rgb),.9)!important;
}
.calendar-day-btn.has-schedule::after{background:var(--coral)!important}
.calendar-hotspot.reminder-active{
  background:rgba(var(--accent-rgb),.16)!important;
  box-shadow:inset 0 0 0 2px rgba(var(--accent-rgb),.65)!important;
}
.day-agenda-head button,
.all-add-btn,
.calendar-upcoming-head button{
  background:var(--accent-pale)!important;
  color:var(--accent-strong)!important;
}
.schedule-form input:focus,
.schedule-form select:focus,
.schedule-form textarea:focus{
  border-color:var(--coral)!important;
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.14)!important;
}
.primary-btn,
.schedule-form-actions .primary-btn{
  background:var(--coral)!important;
  color:#fff!important;
}

/* 健康護照：欄位焦點、下拉選取、同步提醒與儲存按鈕 */
.health-record-form input:focus,
.health-record-form select:focus,
.health-record-form textarea:focus,
.health-summary-form input:focus,
.health-summary-form select:focus,
.health-summary-form textarea:focus{
  border-color:var(--coral)!important;
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.14)!important;
}
.health-followup-check{background:rgba(var(--accent-rgb),.08)!important}
.health-record-save{
  background:linear-gradient(180deg,rgba(var(--accent-rgb),.88),var(--accent-strong))!important;
  box-shadow:0 7px 15px rgba(var(--accent-rgb),.2)!important;
}
.health-overall-trigger{
  border-color:var(--coral)!important;
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.09)!important;
}
.health-overall-menu button:hover,
.health-overall-menu button:focus-visible,
.health-overall-menu button[aria-selected="true"]{
  background:var(--accent-pale)!important;
  color:var(--accent-strong)!important;
}

/* 設定與共用彈窗：主要按鈕、選取狀態、欄位焦點與提醒卡 */
.settings-primary,
.export-sheet button:nth-of-type(2){
  background:var(--coral)!important;
  color:#fff!important;
}
.settings-form input:focus,
.settings-form select:focus,
.settings-form textarea:focus,
.record-reminder-time-row input[type="time"]:focus{
  border-color:var(--coral)!important;
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.14)!important;
}
.theme-options button.active,
.language-options button.active,
.pet-manager-row button.active,
.pet-age-tabs button.active{
  border-color:var(--coral)!important;
  background:var(--accent-pale)!important;
  color:var(--accent-strong)!important;
  box-shadow:inset 0 0 0 1px rgba(var(--accent-rgb),.28)!important;
}
.pet-edit-arrow,
.notification-setting-card em{color:var(--accent-strong)!important}
.notification-setting-card:has(input:checked),
.record-reminder-card:has(input:checked){
  border-color:rgba(var(--accent-rgb),.45)!important;
  box-shadow:0 0 0 2px rgba(var(--accent-rgb),.08)!important;
}
.record-reminder-time-row{border-top-color:rgba(var(--accent-rgb),.28)!important}
.record-reminder-time-row input[type="time"]{
  border-color:rgba(var(--accent-rgb),.38)!important;
}

/* 讓主題切換時顏色變化自然，但不動圖片素材 */
.nav-item,
.notification-badge,
.settings-primary,
.primary-btn,
.record-footer-save,
.health-record-save,
.theme-options button,
.language-options button,
.notification-setting-card,
.record-reminder-card,
input,select,textarea{
  transition:color .18s ease,background-color .18s ease,border-color .18s ease,box-shadow .18s ease!important;
}


/* 毛毛日記_設定_v35：健康護照「新增紀錄」按鈕同步套用目前主題色 */
.health-current-add{
  border-color:rgba(var(--accent-rgb),.48)!important;
  background:linear-gradient(180deg,var(--accent-pale) 0%,rgba(var(--accent-rgb),.12) 100%)!important;
  color:var(--accent-strong)!important;
  box-shadow:0 5px 12px rgba(var(--accent-rgb),.12)!important;
  transition:color .18s ease,background-color .18s ease,border-color .18s ease,box-shadow .18s ease!important;
}
.health-current-add:hover,
.health-current-add:focus-visible{
  border-color:var(--coral)!important;
  box-shadow:0 0 0 3px rgba(var(--accent-rgb),.12),0 6px 14px rgba(var(--accent-rgb),.16)!important;
}
.health-current-add:active{
  background:rgba(var(--accent-rgb),.20)!important;
}


/* 毛毛日記_設定_v36：僅電腦版，底部五個功能圖示與文字同步放大為 2 倍 */
@media (min-width:481px){
  #page-root{
    padding-bottom:calc(160px + env(safe-area-inset-bottom))!important;
  }
  .bottom-nav{
    height:calc(138px + env(safe-area-inset-bottom))!important;
    padding:10px 8px env(safe-area-inset-bottom)!important;
    gap:4px!important;
  }
  .bottom-nav .nav-item{
    gap:6px!important;
    font-size:22px!important;
    border-radius:28px 28px 0 0!important;
  }
  .bottom-nav .nav-item .nav-icon{
    font-size:50px!important;
    line-height:1!important;
  }
  .bottom-nav .nav-label{
    font-size:22px!important;
    line-height:1.2!important;
  }
  #app-shell[data-current-route="settings"]{
    height:calc(480px * 1602 / 982 + 138px)!important;
  }
}


/* 毛毛日記_設定_v37：電腦版底部導覽較 v36 略微縮小，保留清楚易讀但避免過大 */
@media (min-width:481px){
  #page-root{
    padding-bottom:calc(146px + env(safe-area-inset-bottom))!important;
  }
  .bottom-nav{
    height:calc(124px + env(safe-area-inset-bottom))!important;
    padding:8px 8px env(safe-area-inset-bottom)!important;
    gap:4px!important;
  }
  .bottom-nav .nav-item{
    gap:5px!important;
    font-size:20px!important;
    border-radius:26px 26px 0 0!important;
  }
  .bottom-nav .nav-item .nav-icon{
    font-size:45px!important;
    line-height:1!important;
  }
  .bottom-nav .nav-label{
    font-size:20px!important;
    line-height:1.2!important;
  }
  #app-shell[data-current-route="settings"]{
    height:calc(480px * 1602 / 982 + 124px)!important;
  }
}


/* 毛毛日記_設定_v38：電腦版底部導覽再縮小一點，手機版維持不變 */
@media (min-width:481px){
  #page-root{
    padding-bottom:calc(134px + env(safe-area-inset-bottom))!important;
  }
  .bottom-nav{
    height:calc(112px + env(safe-area-inset-bottom))!important;
    padding:7px 8px env(safe-area-inset-bottom)!important;
    gap:3px!important;
  }
  .bottom-nav .nav-item{
    gap:4px!important;
    font-size:18px!important;
    border-radius:24px 24px 0 0!important;
  }
  .bottom-nav .nav-item .nav-icon{
    font-size:41px!important;
    line-height:1!important;
  }
  .bottom-nav .nav-label{
    font-size:18px!important;
    line-height:1.2!important;
  }
  #app-shell[data-current-route="settings"]{
    height:calc(480px * 1602 / 982 + 112px)!important;
  }
}


/* 毛毛日記_設定_v39：電腦版底部導覽再縮小一點，手機版維持不變 */
@media (min-width:481px){
  #page-root{
    padding-bottom:calc(126px + env(safe-area-inset-bottom))!important;
  }
  .bottom-nav{
    height:calc(104px + env(safe-area-inset-bottom))!important;
    padding:6px 8px env(safe-area-inset-bottom)!important;
    gap:3px!important;
  }
  .bottom-nav .nav-item{
    gap:4px!important;
    font-size:17px!important;
    border-radius:22px 22px 0 0!important;
  }
  .bottom-nav .nav-item .nav-icon{
    font-size:38px!important;
    line-height:1!important;
  }
  .bottom-nav .nav-label{
    font-size:17px!important;
    line-height:1.2!important;
  }
  #app-shell[data-current-route="settings"]{
    height:calc(480px * 1602 / 982 + 104px)!important;
  }
}


/* 毛毛日記_設定_v40：電腦版底部導覽再縮小一點，手機版維持不變 */
@media (min-width:481px){
  #page-root{
    padding-bottom:calc(118px + env(safe-area-inset-bottom))!important;
  }
  .bottom-nav{
    height:calc(96px + env(safe-area-inset-bottom))!important;
    padding:5px 8px env(safe-area-inset-bottom)!important;
    gap:3px!important;
  }
  .bottom-nav .nav-item{
    gap:3px!important;
    font-size:16px!important;
    border-radius:20px 20px 0 0!important;
  }
  .bottom-nav .nav-item .nav-icon{
    font-size:35px!important;
    line-height:1!important;
  }
  .bottom-nav .nav-label{
    font-size:16px!important;
    line-height:1.2!important;
  }
  #app-shell[data-current-route="settings"]{
    height:calc(480px * 1602 / 982 + 96px)!important;
  }
}


/* 毛毛日記_設定_v41：刪除重複的「提醒與同步」，其餘項目與關於我們區塊向上收合 */
.se-use-art{top:54.1%!important;height:16.0%!important}
.se-export{top:62.1%!important;height:4.2%!important}
.se-clear{top:66.6%!important;height:4.2%!important}
.se-about-art{top:70.4%!important}
.se-about-app{top:74.0%!important;height:4.2%!important}
.se-terms{top:78.5%!important;height:4.2%!important}
.se-privacy{top:83.0%!important;height:4.2%!important}
.se-contact{top:87.5%!important;height:4.2%!important}


/* 毛毛日記_設定_v44：完整「關於毛毛日記」介紹 */
.about-maomao-modal .settings-sheet{
  max-height:min(90dvh,820px);
}
.about-maomao-info{
  display:grid;
  gap:14px;
}
.about-maomao-info p{
  margin:0;
  line-height:1.75;
  color:#6f6057;
}
.about-maomao-hero{
  padding:16px;
  border:1px solid color-mix(in srgb,var(--coral) 24%,#ead7c7);
  border-radius:20px;
  background:color-mix(in srgb,var(--coral) 7%,#fffdfa);
}
.about-maomao-hero > strong{
  display:block;
  margin-bottom:8px;
  font-size:17px;
  line-height:1.5;
  color:#4b2a18;
}
.about-maomao-section{
  padding:15px;
  border:1px solid #efdfd3;
  border-radius:20px;
  background:#fffaf6;
}
.about-maomao-section h3{
  margin:0 0 11px;
  font-size:16px;
  color:#4b2a18;
}
.about-feature-list{
  display:grid;
  gap:8px;
}
.about-feature-list > div{
  display:grid;
  grid-template-columns:34px 1fr;
  gap:8px;
  align-items:start;
  padding:10px 11px;
  border-radius:15px;
  background:#fffdfa;
}
.about-feature-list > div > span{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:color-mix(in srgb,var(--coral) 12%,#fff);
  font-size:19px;
}
.about-feature-list p{
  display:grid;
  gap:3px;
}
.about-feature-list strong{
  color:#533422;
  font-size:14px;
}
.about-feature-list small{
  color:#7c6a5f;
  font-size:12px;
  line-height:1.55;
}
.about-maomao-data p + p,
.about-maomao-goal p + p{
  margin-top:8px;
}
@media (max-width:420px){
  .about-maomao-modal .settings-sheet{padding:17px}
  .about-maomao-hero,.about-maomao-section{padding:13px}
  .about-maomao-hero > strong{font-size:16px}
  .about-feature-list > div{grid-template-columns:31px 1fr;padding:9px}
  .about-feature-list > div > span{width:31px;height:31px;font-size:17px}
}


/* 毛毛日記_設定_v46：完整使用條款內容排版 */
.terms-modal .settings-sheet{
  max-height:min(82dvh,760px);
}
.terms-modal .settings-info{
  overflow-y:auto;
  padding-right:6px;
}
.terms-modal .terms-info p{
  margin:0 0 18px;
  font-size:16px;
  line-height:1.9;
  color:#6f6057;
}
.terms-modal .terms-info p:last-child{
  margin-bottom:0;
}
@media (max-width:480px){
  .terms-modal .settings-sheet{
    max-height:86dvh;
  }
  .terms-modal .terms-info p{
    font-size:15px;
    line-height:1.85;
    margin-bottom:16px;
  }
}


/* 毛毛日記_設定_v50：聯絡我們訊息表單 */
.contact-support-modal .settings-sheet{
  max-height:min(88dvh,760px);
}
.contact-support-form{
  gap:14px;
}
.contact-support-intro{
  padding:14px 15px;
  border:1px solid color-mix(in srgb, var(--coral) 28%, #ead7c7);
  border-radius:18px;
  background:color-mix(in srgb, var(--coral) 7%, #fffdfa);
}
.contact-support-intro strong{
  display:block;
  margin-bottom:6px;
  color:#4b2a18;
  font-size:16px;
}
.contact-support-intro p{
  margin:0;
  color:#7a685d;
  font-size:13px;
  line-height:1.65;
}
.contact-support-form textarea{
  min-height:150px;
  resize:vertical;
  line-height:1.65;
}
.contact-message-count{
  justify-self:end;
  color:#9a7d6b;
  font-weight:500;
}
.contact-recipient{
  padding:11px 13px;
  border-radius:14px;
  background:#fff7f2;
  color:#7a685d;
  font-size:13px;
  overflow-wrap:anywhere;
}
.contact-recipient strong{
  color:#4b2a18;
}
@media (max-width:480px){
  .contact-support-modal .settings-sheet{
    max-height:90dvh;
  }
  .contact-support-form textarea{
    min-height:132px;
  }
}


/* 毛毛日記_設定_v53：三大設定分類之間增加一列視覺間距，並同步校正所有按鈕熱區 */
.se-use-art{top:58.3%!important;height:16.0%!important}
.se-theme{top:61.8%!important;height:4.2%!important}
.se-export{top:66.3%!important;height:4.2%!important}
.se-clear{top:70.8%!important;height:4.2%!important}
.se-about-art{top:78.8%!important}
.se-about-app{top:82.4%!important;height:4.2%!important}
.se-terms{top:86.9%!important;height:4.2%!important}
.se-privacy{top:91.4%!important;height:4.2%!important}
.se-contact{top:95.9%!important;height:4.2%!important}

/* 毛毛日記_設定_v54：修正電腦版頁尾留白與設定頁完整捲動 */
@media (min-width:481px){
  /* 首頁內容結束後保留一小段呼吸空間，再接固定底部導覽。 */
  #page-root[data-current-route="home"]{
    padding-bottom:calc(122px + env(safe-area-inset-bottom))!important;
  }
  #page-root[data-current-route="home"] .home-shell{
    padding-bottom:24px!important;
  }
  #page-root[data-current-route="home"] .home-reminders-wrap,
  #page-root[data-current-route="home"] .home-split-mode .home-reminders-wrap{
    margin-bottom:18px!important;
  }

  /* 取消舊版設定頁的固定總高度與 overflow:hidden，讓頁面可完整往下捲動。 */
  #app-shell[data-current-route="settings"]{
    height:auto!important;
    min-height:100dvh!important;
    overflow-x:hidden!important;
    overflow-y:visible!important;
  }
  #app-shell[data-current-route="settings"] #page-root{
    height:auto!important;
    min-height:0!important;
    padding-bottom:calc(122px + env(safe-area-inset-bottom))!important;
    overflow:visible!important;
  }
  #app-shell[data-current-route="settings"] .settings-screen{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    aspect-ratio:982 / 1602!important;
    overflow:visible!important;
  }
  #app-shell[data-current-route="settings"] .bottom-nav{
    position:fixed!important;
    left:50%!important;
    bottom:0!important;
    transform:translateX(-50%)!important;
    width:min(100%,480px)!important;
  }
}


/* 毛毛日記_設定_v55：電腦版設定頁改由 App 容器本身負責捲動，徹底解除無法滑到底部的問題 */
@media (min-width:481px){
  html,body{
    height:100%!important;
    min-height:100%!important;
    overflow:hidden!important;
  }
  body{
    align-items:stretch!important;
  }
  #app-shell[data-current-route="settings"]{
    height:100dvh!important;
    min-height:0!important;
    max-height:100dvh!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior-y:contain!important;
    -webkit-overflow-scrolling:touch!important;
    scrollbar-gutter:stable;
  }
  #app-shell[data-current-route="settings"] #page-root{
    height:auto!important;
    min-height:auto!important;
    padding-bottom:150px!important;
    overflow:visible!important;
  }
  #app-shell[data-current-route="settings"] .settings-screen{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:982 / 1602!important;
    overflow:visible!important;
  }
  #app-shell[data-current-route="settings"] .bottom-nav{
    position:fixed!important;
    left:50%!important;
    bottom:0!important;
    transform:translateX(-50%)!important;
    width:min(100%,480px)!important;
    z-index:100!important;
  }
}

/* 毛毛日記_設定_v56：真正依目前路由套用電腦版設定頁捲動。
   先前 v54/v55 錯把 data-current-route 寫在 #app-shell；實際屬性位於 #page-root，故規則未生效。 */
@media (min-width:481px){
  html,
  body{
    height:100%!important;
    min-height:100%!important;
    overflow:auto!important;
  }

  body:has(#page-root[data-current-route="settings"]){
    overflow:hidden!important;
  }

  #app-shell:has(#page-root[data-current-route="settings"]){
    height:100dvh!important;
    min-height:0!important;
    max-height:100dvh!important;
    overflow:hidden!important;
  }

  #page-root[data-current-route="settings"]{
    height:calc(100dvh - 76px)!important;
    min-height:0!important;
    max-height:calc(100dvh - 76px)!important;
    box-sizing:border-box!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior-y:contain!important;
    -webkit-overflow-scrolling:touch!important;
    padding-bottom:40px!important;
    scrollbar-gutter:stable;
  }

  #page-root[data-current-route="settings"] .settings-screen{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    aspect-ratio:982 / 1602!important;
    overflow:visible!important;
  }

  #app-shell:has(#page-root[data-current-route="settings"]) .bottom-nav{
    position:fixed!important;
    left:50%!important;
    bottom:0!important;
    transform:translateX(-50%)!important;
    width:min(100%,480px)!important;
    z-index:100!important;
  }
}

/* 毛毛日記_設定_v56：修正設定頁路由屬性未套用至 App 容器，導致電腦版捲動規則完全沒有生效。 */
@media (min-width:481px){
  html,
  body{
    height:100%!important;
    min-height:100%!important;
    overflow:auto!important;
  }

  body[data-current-route="settings"]{
    overflow:hidden!important;
  }

  #app-shell[data-current-route="settings"]{
    height:100dvh!important;
    min-height:0!important;
    max-height:100dvh!important;
    overflow:hidden!important;
  }

  #app-shell[data-current-route="settings"] #page-root{
    height:calc(100dvh - 76px)!important;
    min-height:0!important;
    max-height:calc(100dvh - 76px)!important;
    box-sizing:border-box!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    overscroll-behavior-y:contain!important;
    -webkit-overflow-scrolling:touch!important;
    padding-bottom:44px!important;
    scrollbar-gutter:stable;
  }

  #app-shell[data-current-route="settings"] .settings-screen{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    aspect-ratio:982 / 1602!important;
    overflow:visible!important;
  }

  #app-shell[data-current-route="settings"] .bottom-nav{
    position:fixed!important;
    left:50%!important;
    bottom:0!important;
    transform:translateX(-50%)!important;
    width:min(100%,480px)!important;
    z-index:100!important;
  }
}


/* 毛毛日記_設定_v57：手機版紀錄頁「取消／儲存」與歷史紀錄標題縮小至原本 80% */
@media (max-width:480px){
  .record-footer-actions button{
    font-size:12.8px!important;
  }
  .record-footer-save span{
    font-size:14.4px!important;
  }
  .record-history-title-row h2{
    font-size:16px!important;
  }
}


/* 毛毛日記_設定_v58：手機版在「取消／儲存」按鈕下方增加一行間距，與每日紀錄月曆拉開距離 */
@media (max-width:480px){
  .records-page-form .record-actions-outside{
    margin-bottom:28px!important;
  }
}


/* 毛毛日記_設定_v59：紀錄頁「取消／儲存」下方間距調整為一行半；手機版再增加半行，電腦版同步套用 */
@media (max-width:480px){
  .records-page-form .record-actions-outside{
    margin-bottom:42px!important;
  }
}
@media (min-width:481px){
  .records-page-form .record-actions-outside{
    margin-bottom:42px!important;
  }
}


/* 毛毛日記_設定_v60：真正修正電腦版取消／儲存與每日紀錄月曆的垂直距離。
   直接調整相鄰月曆卡片的上方間距，避免先前只改按鈕 margin-bottom 在桌機排版中未呈現。 */
@media (min-width:481px){
  .records-page-form .record-actions-outside{
    margin-bottom:0!important;
  }
  .records-page-form .record-actions-outside + .record-history-live{
    margin-top:56px!important;
  }
}


/* 毛毛日記_設定_v63：以 v60 為基底，手機版行事曆區文字適度放大，
   並加大六列日期之間的垂直行距。電腦版維持不變。 */
@media (max-width:480px){
  .calendar-month-title{
    font-size:clamp(19px,5.15vw,35px)!important;
  }
  .calendar-today-button{
    font-size:clamp(12px,3.15vw,18px)!important;
  }
  .calendar-weekdays{
    font-size:clamp(12px,3.1vw,18px)!important;
  }
  .calendar-live-days{
    row-gap:clamp(5px,1.45vw,8px)!important;
  }
  .calendar-live-day{
    font-size:clamp(12px,3.3vw,20px)!important;
  }
  .calendar-live-day span{
    width:clamp(25px,6.8vw,34px)!important;
  }
  .calendar-add-banner strong{
    font-size:clamp(17px,4.85vw,22.5px)!important;
  }
}


/* 毛毛日記_設定_v64：手機版行事曆月曆日期行距再拉開，
   並將下方「新增排程」橫幅往下移，避免壓到最後一排日期。 */
@media (max-width:480px){
  .calendar-live-days{
    row-gap:clamp(10px,2.75vw,15px)!important;
  }
  .calendar-live-day{
    font-size:clamp(12px,3.3vw,20px)!important;
    line-height:1.08!important;
  }
  .calendar-add-banner{
    top:68.3%!important;
  }
}


/* 毛毛日記_設定_v65：將空白排程狀態中會顯示固定日期的系統日曆 Emoji，
   改為不含日期的通用「行事曆＋鉛筆」圖示。手機版與電腦版同步。 */
.day-empty .day-empty-icon{
  display:block;
  width:clamp(72px,18vw,112px);
  height:clamp(62px,15vw,96px);
  margin:0 auto 8px;
  object-fit:contain;
}
@media (max-width:480px){
  .day-empty .day-empty-icon{
    width:86px;
    height:72px;
    margin-bottom:10px;
  }
}


/* 毛毛日記_設定_v67：僅處理手機版，將「近期排程」卡片內所有文字同步縮小一些。 */
@media (max-width:480px){
  .calendar-upcoming-head h2{
    font-size:15px!important;
    line-height:1.2!important;
  }
  .calendar-upcoming-head button{
    font-size:13px!important;
    line-height:1.2!important;
    font-weight:700!important;
  }
  .calendar-upcoming-empty{
    font-size:13px!important;
    line-height:1.45!important;
    padding:22px 14px!important;
  }
}


/* 毛毛日記_設定_v68：手機版將「新增排程」橫幅再明顯下移，
   避免壓到月曆最後一排日期。 */
@media (max-width:480px){
  .calendar-add-banner{
    top:72.2%!important;
  }
}


/* 毛毛日記_設定_v69：修正手機版行事曆最下排日期被「新增排程」橫幅吃掉的問題。
   做法：
   1. 提高 calendar-stage-clip 可視高度，讓最後一排日期完整保留；
   2. 將「新增排程」橫幅再往下移，與最後一排日期拉開明顯距離。 */
@media (max-width:480px){
  .calendar-stage-clip{
    aspect-ratio:1 / 1.34!important;
  }
  .calendar-add-banner{
    top:75.4%!important;
  }
}
@media (max-width:370px){
  .calendar-stage-clip{
    aspect-ratio:1 / 1.35!important;
  }
  .calendar-add-banner{
    top:75.8%!important;
  }
}


/* 毛毛日記_設定_v70：真正修正手機版行事曆最後一排日期被裁切。
   問題不是只有「新增排程」橫幅位置，而是月曆互動層 .calendar-grid-live 本身高度太小，
   導致 6 週日期格在容器內被 overflow:hidden 裁掉，最後一排只剩半截。
   本版直接放大手機版月曆互動層高度，並微調位置，讓最後一排日期完整顯示；
   同時把新增排程橫幅維持在更下方，保留清楚間距。 */
@media (max-width:480px){
  .calendar-grid-live{
    top:35.9%!important;
    height:34.4%!important;
  }
  .calendar-stage-clip{
    aspect-ratio:1 / 1.34!important;
  }
  .calendar-add-banner{
    top:75.4%!important;
  }
}
@media (max-width:370px){
  .calendar-grid-live{
    top:35.8%!important;
    height:35.0%!important;
  }
  .calendar-stage-clip{
    aspect-ratio:1 / 1.355!important;
  }
  .calendar-add-banner{
    top:76.0%!important;
  }
}


/* 毛毛日記_設定_v71：手機版健康月曆日期行距再明顯拉開，並同步加高月曆外框可容納完整日期，避免任何日期被切掉。 */
@media (max-width:760px){
  .health-flow-sections .health-calendar-panel{
    padding-bottom:22px!important;
  }

  .health-calendar-weekdays{
    margin-top:14px!important;
    font-size:13px!important;
  }

  .health-calendar-days{
    margin-top:12px!important;
    column-gap:4px!important;
    row-gap:14px!important;
  }

  .health-calendar-day{
    min-height:28px!important;
    font-size:14px!important;
    line-height:1.18!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0!important;
  }

  .health-calendar-day.has-record i{
    bottom:-1px!important;
    width:5px!important;
    height:5px!important;
  }
}


/* 毛毛日記_設定_v72：手機版健康月曆微縮回日期行距，並加強上／下月日期淡色顯示。 */
.health-calendar-day.is-adjacent{
  color:#ddd3cb!important;
}
@media (max-width:760px){
  .health-flow-sections .health-calendar-panel{
    padding-bottom:18px!important;
  }

  .health-calendar-weekdays{
    margin-top:12px!important;
    font-size:13px!important;
  }

  .health-calendar-days{
    margin-top:10px!important;
    column-gap:4px!important;
    row-gap:10px!important;
  }

  .health-calendar-day{
    min-height:26px!important;
    font-size:14px!important;
    line-height:1.12!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0!important;
  }

  .health-calendar-day.is-adjacent{
    color:#ded5cd!important;
  }

  .health-calendar-day.has-record i{
    bottom:-1px!important;
    width:5px!important;
    height:5px!important;
  }
}


/* 毛毛日記_設定_v73：放大健康護照頁四個主標題：健康月曆、目前紀錄、健康摘要、健康日誌（手機版與電腦版同步）。 */
.health-calendar-head h2,
.health-current-head small,
.health-summary-section .health-flow-heading h2,
.health-logs-section .health-flow-heading h2{
  font-size:clamp(14.8px,2vw,25.5px)!important;
  line-height:1.08!important;
  font-weight:700!important;
  color:#4b2a18!important;
}

.health-logs-section .health-flow-heading h2 span{
  font-size:88%!important;
  line-height:1.08!important;
  font-weight:700!important;
}

@media (max-width:760px){
  .health-calendar-head h2,
  .health-current-head small,
  .health-summary-section .health-flow-heading h2,
  .health-logs-section .health-flow-heading h2{
    font-size:14.5px!important;
    line-height:1.12!important;
    font-weight:700!important;
  }

  .health-logs-section .health-flow-heading h2 span{
    font-size:86%!important;
    line-height:1.12!important;
    font-weight:700!important;
  }
}


/* 毛毛日記_設定_v74：修正電腦版行事曆月曆日期行距不足。
   將桌機版日期列的上下行距再拉開，並同步增加月曆互動層與可視裁切高度，
   避免最後一排日期被切掉；同時把「新增排程」橫幅往下移，保留清楚間距。 */
@media (min-width:761px){
  .calendar-stage-clip{
    aspect-ratio:1 / 1.245!important;
  }

  .calendar-grid-live{
    top:34.1%!important;
    height:35.1%!important;
    row-gap:clamp(8px,.95vw,14px)!important;
    padding:14px 18px 14px!important;
  }

  .calendar-weekdays{
    margin-top:2px!important;
    font-size:clamp(12px,1.3vw,18px)!important;
  }

  .calendar-live-days{
    row-gap:clamp(9px,1.05vw,16px)!important;
  }

  .calendar-live-day{
    font-size:clamp(13px,1.45vw,22px)!important;
    line-height:1.14!important;
  }

  .calendar-live-day span{
    width:clamp(32px,3.4vw,48px)!important;
  }

  .calendar-live-day.has-schedule::after{
    bottom:clamp(-1px,.1vw,2px)!important;
  }

  .calendar-add-banner{
    top:70.2%!important;
  }
}

@media (min-width:1200px){
  .calendar-stage-clip{
    aspect-ratio:1 / 1.255!important;
  }

  .calendar-grid-live{
    top:33.9%!important;
    height:35.4%!important;
  }

  .calendar-live-days{
    row-gap:12px!important;
  }

  .calendar-add-banner{
    top:69.9%!important;
  }
}


/* 毛毛日記_設定_v75：手機版設定主畫面三大分類字體整體放大，並同步增加各列視覺行距與熱區位置。 */
@media (max-width:480px){
  .se-account-art{
    left:2.2%!important;
    top:35.5%!important;
    width:95.8%!important;
    height:18.5%!important;
  }
  .se-use-art{
    left:2.1%!important;
    top:57.2%!important;
    width:95.8%!important;
    height:17.8%!important;
  }
  .se-about-art{
    left:2.0%!important;
    top:84.8%!important;
    width:96.0%!important;
    height:22.2%!important;
  }

  .se-personal{top:39.1%!important;height:4.8%!important}
  .se-pets{top:44.5%!important;height:4.8%!important}
  .se-notify{top:49.9%!important;height:4.8%!important}

  .se-theme{top:61.1%!important;height:4.8%!important}
  .se-export{top:66.2%!important;height:4.8%!important}
  .se-clear{top:71.3%!important;height:4.8%!important}

  .se-about-app{top:88.3%!important;height:4.8%!important}
  .se-terms{top:93.4%!important;height:4.8%!important}
  .se-privacy{top:98.5%!important;height:4.8%!important}
  .se-contact{top:103.6%!important;height:4.8%!important}

  .settings-screen .settings-profile-live strong{
    font-size:15.6px!important;
    line-height:1.32!important;
  }
  .settings-screen .settings-profile-live small{
    font-size:11.2px!important;
    line-height:1.52!important;
  }
}

@media (max-width:400px){
  .se-account-art{height:18.9%!important}
  .se-use-art{height:18.2%!important}
  .se-about-art{height:22.8%!important}
}


/* 毛毛日記_設定_v76：修正電腦版月曆日期行距與新增排程位置。
   1) 拉開桌機版月曆日期各列行距。
   2) 將新增排程橫幅再往下移，避免壓到最後一排日期。
   3) 同步略增桌機版裁切高度，確保最後一排日期與橫幅都完整顯示。 */
@media (min-width:481px){
  .calendar-stage-clip{
    aspect-ratio:1 / 1.255!important;
  }
  .calendar-grid-live{
    top:34.5%!important;
    height:31.8%!important;
  }
  .calendar-live-days{
    row-gap:clamp(7px,.9vw,13px)!important;
  }
  .calendar-add-banner{
    top:70.4%!important;
  }
  .calendar-flow-live{
    margin-top:12px!important;
  }
}
@media (min-width:1200px){
  .calendar-stage-clip{
    aspect-ratio:1 / 1.265!important;
  }
  .calendar-grid-live{
    top:34.2%!important;
    height:32.2%!important;
  }
  .calendar-live-days{
    row-gap:clamp(8px,.8vw,14px)!important;
  }
  .calendar-add-banner{
    top:70.8%!important;
  }
}


/* 毛毛日記_設定_v77：再次修正電腦版行事曆月曆日期被切掉與新增排程過近問題。
   - 將日期區高度再放大，避免最後一排被 grid 自身裁切。
   - 再拉開日期列的 row-gap。
   - 將新增排程橫幅明顯下移。
   - 同步增加 stage clip 可視高度，確保橫幅與最後一排都完整顯示。 */
@media (min-width:481px){
  .calendar-stage-clip{
    aspect-ratio:1 / 1.305!important;
  }
  .calendar-grid-live{
    top:33.8%!important;
    height:37.4%!important;
    padding:14px 18px 18px!important;
  }
  .calendar-live-days{
    row-gap:clamp(12px,1.25vw,20px)!important;
  }
  .calendar-live-day{
    line-height:1.2!important;
  }
  .calendar-add-banner{
    top:75.2%!important;
  }
  .calendar-flow-live{
    margin-top:14px!important;
  }
}
@media (min-width:1200px){
  .calendar-stage-clip{
    aspect-ratio:1 / 1.325!important;
  }
  .calendar-grid-live{
    top:33.3%!important;
    height:38.2%!important;
    padding:15px 20px 20px!important;
  }
  .calendar-live-days{
    row-gap:clamp(13px,1.1vw,22px)!important;
  }
  .calendar-add-banner{
    top:75.8%!important;
  }
}


/* 毛毛日記_設定_v78：根本修正電腦版行事曆月曆底部裁切。
   問題原因：calendar-screen 比裁切容器高很多，導致最後一排日期與新增排程橫幅下緣仍落在裁切容器外。
   本版做法：
   1. 明顯增加桌機版 calendar-stage-clip 可視高度；
   2. 讓近期排程文流同步往下移，保留新增排程與近期排程的正常間距；
   3. 再微調日期列行距與新增排程位置，確保最後一排日期完整顯示、橫幅下框不再被切掉。 */
@media (min-width:481px){
  .calendar-stage-clip{
    aspect-ratio:1 / 1.405!important;
  }
  .calendar-grid-live{
    top:33.1%!important;
    height:39.2%!important;
    padding:14px 18px 18px!important;
  }
  .calendar-live-days{
    row-gap:clamp(14px,1.28vw,22px)!important;
  }
  .calendar-live-day{
    line-height:1.18!important;
  }
  .calendar-add-banner{
    top:76.2%!important;
  }
  .calendar-flow-live{
    margin-top:20px!important;
    gap:18px!important;
  }
}
@media (min-width:1200px){
  .calendar-stage-clip{
    aspect-ratio:1 / 1.435!important;
  }
  .calendar-grid-live{
    top:32.8%!important;
    height:40.1%!important;
    padding:15px 20px 20px!important;
  }
  .calendar-live-days{
    row-gap:clamp(15px,1.15vw,24px)!important;
  }
  .calendar-add-banner{
    top:76.6%!important;
  }
  .calendar-flow-live{
    margin-top:22px!important;
    gap:20px!important;
  }
}


/* 毛毛日記_設定_v79：再次修正桌機版行事曆最後一排日期被切掉。
   這次直接處理真正原因：calendar-grid-live 自己的高度與內距不足，
   導致第 6 排日期在 grid 內部被裁切，而不是單純新增排程位置問題。
   修正方式：
   1. 提高桌機版月曆互動層高度；
   2. 減少月曆互動層上下內距，讓 6 排日期真正放得下；
   3. 再把新增排程與後續區塊同步往下移，避免重新壓住月曆。 */
@media (min-width:481px){
  .calendar-stage-clip{
    aspect-ratio:1 / 1.455!important;
  }
  .calendar-grid-live{
    top:32.7%!important;
    height:43.6%!important;
    padding:12px 18px 8px!important;
    row-gap:clamp(3px,.55vw,7px)!important;
    overflow:hidden!important;
  }
  .calendar-live-days{
    row-gap:clamp(11px,1.12vw,18px)!important;
    align-content:stretch!important;
  }
  .calendar-add-banner{
    top:79.1%!important;
  }
  .calendar-flow-live{
    margin-top:24px!important;
    gap:20px!important;
  }
}
@media (min-width:1200px){
  .calendar-stage-clip{
    aspect-ratio:1 / 1.49!important;
  }
  .calendar-grid-live{
    top:32.2%!important;
    height:44.8%!important;
    padding:13px 20px 9px!important;
    row-gap:clamp(4px,.45vw,8px)!important;
  }
  .calendar-live-days{
    row-gap:clamp(12px,.92vw,18px)!important;
  }
  .calendar-add-banner{
    top:79.8%!important;
  }
  .calendar-flow-live{
    margin-top:26px!important;
    gap:22px!important;
  }
}


/* 毛毛日記_設定_v80：修正電腦版「新增排程」外觀與實際按壓熱區錯位。
   v79 將視覺橫幅移到 79.1%／79.8%，但透明按鈕仍停在舊的 65.6%，
   且被月曆互動層覆蓋，因此點擊沒有反應。本版讓熱區與橫幅完全重疊並提高層級。 */
@media (min-width:481px){
  .calendar-screen .ca-add-schedule{
    left:4.0%!important;
    top:79.1%!important;
    width:91.0%!important;
    height:6.8%!important;
    border-radius:clamp(18px,2.7vw,28px)!important;
    z-index:35!important;
    pointer-events:auto!important;
    touch-action:manipulation!important;
  }
}
@media (min-width:1200px){
  .calendar-screen .ca-add-schedule{
    top:79.8%!important;
  }
}

/* 毛毛日記_設定_v81：依需求將電腦版健康護照四個主標題再縮小一些。
   只調整桌機版的「健康月曆、目前紀錄、健康摘要、健康日誌」，
   手機版維持現狀。 */
@media (min-width:761px){
  .health-calendar-head h2,
  .health-current-head small,
  .health-summary-section .health-flow-heading h2,
  .health-logs-section .health-flow-heading h2{
    font-size:clamp(13.4px,1.82vw,23px)!important;
    line-height:1.08!important;
  }

  .health-logs-section .health-flow-heading h2 span{
    font-size:84%!important;
    line-height:1.08!important;
  }
}

/* 毛毛日記_設定_v82：電腦版健康護照四個主標題再縮小一點，
   並將「(呈現近期5筆資料)」再縮更小。 */
@media (min-width:761px){
  .health-calendar-head h2,
  .health-current-head small,
  .health-summary-section .health-flow-heading h2,
  .health-logs-section .health-flow-heading h2{
    font-size:clamp(12.8px,1.72vw,21.8px)!important;
    line-height:1.06!important;
  }

  .health-logs-section .health-flow-heading h2 span{
    font-size:74%!important;
    line-height:1.04!important;
  }
}

/* 毛毛日記_設定_v83：依需求調整電腦版健康月曆。
   1. 日期列的垂直行距再明顯拉開；
   2. 提高外框高度與下方內距，避免最後一排日期被切掉；
   3. 維持桌機版閱讀性，不影響手機版。 */
@media (min-width:761px){
  .health-calendar-panel{
    min-height:540px!important;
    padding:24px 24px 30px!important;
  }

  .health-calendar-weekdays{
    margin-top:18px!important;
    margin-bottom:2px!important;
  }

  .health-calendar-days{
    margin-top:10px!important;
    column-gap:6px!important;
    row-gap:14px!important;
    padding-bottom:8px!important;
  }

  .health-calendar-day{
    min-height:36px!important;
    line-height:1.12!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0!important;
  }

  .health-calendar-day.has-record i{
    bottom:2px!important;
  }
}

/* v91：設定頁桌機版改為真實 HTML 清晰列表（以 v83 為基底放大 50%） */
.settings-desktop-groups{
  display:none;
}

@media (min-width: 768px){
  #page-root[data-current-route="settings"] .settings-screen,
  #app-shell[data-current-route="settings"] .settings-screen{
    min-height: 1740px !important;
    height: auto !important;
    padding-bottom: 64px !important;
  }

  #page-root[data-current-route="settings"] .settings-screen .se-account-art,
  #page-root[data-current-route="settings"] .settings-screen .se-use-art,
  #page-root[data-current-route="settings"] .settings-screen .se-about-art,
  #page-root[data-current-route="settings"] .settings-screen .se-personal,
  #page-root[data-current-route="settings"] .settings-screen .se-pets,
  #page-root[data-current-route="settings"] .settings-screen .se-notify,
  #page-root[data-current-route="settings"] .settings-screen .se-theme,
  #page-root[data-current-route="settings"] .settings-screen .se-export,
  #page-root[data-current-route="settings"] .settings-screen .se-clear,
  #page-root[data-current-route="settings"] .settings-screen .se-about-app,
  #page-root[data-current-route="settings"] .settings-screen .se-terms,
  #page-root[data-current-route="settings"] .settings-screen .se-privacy,
  #page-root[data-current-route="settings"] .settings-screen .se-contact{
    display:none !important;
  }

  #page-root[data-current-route="settings"] .settings-screen .settings-desktop-groups{
    display:flex !important;
    position:absolute;
    left:4.2%;
    top:35.8%;
    width:91.6%;
    flex-direction:column;
    gap:68px;
    z-index:5;
  }

  #page-root[data-current-route="settings"] .settings-screen .settings-desktop-section{
    display:flex;
    flex-direction:column;
    gap:12px;
  }

  #page-root[data-current-route="settings"] .settings-screen .settings-desktop-title{
    display:flex;
    align-items:center;
    gap:12px;
    margin:0 0 6px 0;
    font-size:21px;
    font-weight:900;
    line-height:1.32;
    color:#4b2b1d;
    letter-spacing:0;
  }

  #page-root[data-current-route="settings"] .settings-screen .settings-desktop-title img{
    width:30px;
    height:30px;
    flex:0 0 30px;
    object-fit:contain;
  }

  #page-root[data-current-route="settings"] .settings-screen .settings-desktop-item{
    display:flex;
    align-items:center;
    width:100%;
    border:none;
    background:transparent;
    padding:0;
    margin:0;
    min-height:62px;
    cursor:pointer;
    text-align:left;
  }

  #page-root[data-current-route="settings"] .settings-screen .settings-desktop-item-icon{
    width:48px;
    height:48px;
    margin-right:18px;
    flex:0 0 48px;
    object-fit:contain;
  }

  #page-root[data-current-route="settings"] .settings-screen .settings-desktop-item-label{
    flex:1 1 auto;
    min-width:0;
    font-size:23px;
    font-weight:900;
    line-height:1.34;
    color:#4b2b1d;
    white-space:normal;
    word-break:keep-all;
    overflow-wrap:anywhere;
    padding-top:1px;
  }

  #page-root[data-current-route="settings"] .settings-screen .settings-desktop-item-arrow{
    margin-left:24px;
    flex:0 0 auto;
    font-size:42px;
    line-height:1;
    color:#6b4130;
    transform:translateY(-1px);
  }

  #page-root[data-current-route="settings"] .settings-screen .settings-desktop-item:focus-visible{
    outline:3px solid rgba(118, 78, 57, 0.24);
    outline-offset:4px;
    border-radius:18px;
  }
}

/* v92：恢復設定頁上方區域為 v83 原始比例與位置。
   v91 的 min-height 會改變絕對定位百分比的基準，導致「設定」、鈴鐺、Logo、插畫與個人資料卡全部被拉開。
   本版移除該高度改動，只在畫面下方增加捲動空間，不改變上方任何物件的位置、尺寸與比例。 */
@media (min-width:768px){
  #page-root[data-current-route="settings"] .settings-screen,
  #app-shell[data-current-route="settings"] .settings-screen{
    min-height:0!important;
    height:auto!important;
    padding-bottom:0!important;
    margin-bottom:620px!important;
  }
}

/* v93：依需求將電腦版「帳號與資料」區塊內三列功能的行距縮小 50%。
   僅縮短該區塊內部垂直間距，不改動上方版面、字級、圖示比例或三大區塊之間的分隔距離。 */
@media (min-width:768px){
  #page-root[data-current-route="settings"] .settings-screen .settings-desktop-section-account{
    gap:6px!important;
  }

  #page-root[data-current-route="settings"] .settings-screen .settings-desktop-section-account .settings-desktop-item{
    min-height:56px!important;
  }
}

/* v94：電腦版「帳號與資料」區塊內部行距，在 v93 基礎上再縮小 50%。
   僅壓縮三列功能之間與列內上下留白；圖示、文字大小、比例及三大區塊間距維持不變。 */
@media (min-width:768px){
  #page-root[data-current-route="settings"] .settings-screen .settings-desktop-section-account{
    gap:3px!important;
  }

  #page-root[data-current-route="settings"] .settings-screen .settings-desktop-section-account .settings-desktop-item{
    min-height:52px!important;
  }
}


/* v95：讓電腦版「使用設定」區塊的內部行距，完全比照目前的「帳號與資料」區塊。
   三列功能統一使用相同的 gap 與 min-height；不改動字級、圖示比例、上方版面或三大區塊之間的距離。 */
@media (min-width:768px){
  #page-root[data-current-route="settings"] .settings-screen .settings-desktop-section-use{
    gap:3px!important;
  }

  #page-root[data-current-route="settings"] .settings-screen .settings-desktop-section-use .settings-desktop-item{
    min-height:52px!important;
  }
}

/* v96：讓電腦版「關於我們」區塊的內部行距，完全比照目前的「帳號與資料」區塊。
   四列功能統一使用相同的 gap 與 min-height；不改動字級、圖示比例、上方版面或三大區塊之間的距離。 */
@media (min-width:768px){
  #page-root[data-current-route="settings"] .settings-screen .settings-desktop-section-about{
    gap:3px!important;
  }

  #page-root[data-current-route="settings"] .settings-screen .settings-desktop-section-about .settings-desktop-item{
    min-height:52px!important;
  }
}

/* v97：依需求讓電腦版設定頁三大區塊的所有內部行距，再同步縮小一點點。
   同步微調標題與首列間距、列與列間距，以及每列高度；不改變字級、圖示比例、箭頭位置與三大區塊彼此之間的分隔距離。 */
@media (min-width:768px){
  #page-root[data-current-route="settings"] .settings-screen .settings-desktop-section-account,
  #page-root[data-current-route="settings"] .settings-screen .settings-desktop-section-use,
  #page-root[data-current-route="settings"] .settings-screen .settings-desktop-section-about{
    gap:1px!important;
  }

  #page-root[data-current-route="settings"] .settings-screen .settings-desktop-section-account .settings-desktop-item,
  #page-root[data-current-route="settings"] .settings-screen .settings-desktop-section-use .settings-desktop-item,
  #page-root[data-current-route="settings"] .settings-screen .settings-desktop-section-about .settings-desktop-item{
    min-height:48px!important;
  }
}

/* 毛毛日記_設定_v98：調整手機版設定頁中間「使用設定」區塊位置。
   讓中間區塊在「帳號與資料」與「關於我們」兩區塊之間更居中，
   並同步下移其三個互動熱區，維持對齊與可點擊範圍一致。 */
@media (max-width:480px){
  .se-use-art{
    top:60.5%!important;
  }
  .se-theme{top:64.4%!important}
  .se-export{top:69.5%!important}
  .se-clear{top:74.6%!important}
}

@media (max-width:400px){
  .se-use-art{
    top:60.5%!important;
  }
  .se-theme{top:64.4%!important}
  .se-export{top:69.5%!important}
  .se-clear{top:74.6%!important}
}

/* 毛毛日記_設定_v99：修正手機版設定頁底部被卡住，無法再往下滑看到最後項目。
   增加設定頁底部安全留白，讓固定底部導覽不再遮住「關於我們」區塊最後幾項。 */
@media (max-width:480px){
  #page-root[data-current-route="settings"]{
    padding-bottom:calc(220px + env(safe-area-inset-bottom))!important;
  }
  #page-root[data-current-route="settings"] .settings-screen{
    margin-bottom:84px!important;
  }
}


/* 毛毛日記_設定_v101：修正手機版行事曆「新增排程」按鈕失效。
   將原本分離的視覺橫幅與透明熱區合併為真正可點擊的 button，
   避免月曆互動層、縮放與百分比定位造成熱區錯位或被蓋住。 */
.calendar-add-banner{
  appearance:none!important;
  -webkit-appearance:none!important;
  border:0!important;
  font:inherit!important;
  cursor:pointer!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
  z-index:40!important;
}
.calendar-add-banner:active{
  transform:scale(.985)!important;
}
.calendar-add-banner:focus-visible{
  outline:3px solid rgba(239,139,114,.72)!important;
  outline-offset:2px!important;
}

/* 毛毛日記_設定_v108：延續 v107，再明顯縮小手機版設定清單。
   圖示、文字與行距同步進一步等比縮小，維持不變形、不裁切與真實 HTML 排版。 */
.settings-mobile-groups{
  display:none;
}

@media (max-width:767px){
  #page-root[data-current-route="settings"]{
    padding-bottom:calc(150px + env(safe-area-inset-bottom))!important;
    overflow:visible!important;
  }

  #page-root[data-current-route="settings"] .settings-screen{
    margin-bottom:0!important;
    overflow:visible!important;
  }

  #page-root[data-current-route="settings"] .settings-screen .se-account-art,
  #page-root[data-current-route="settings"] .settings-screen .se-use-art,
  #page-root[data-current-route="settings"] .settings-screen .se-about-art,
  #page-root[data-current-route="settings"] .settings-screen .se-personal,
  #page-root[data-current-route="settings"] .settings-screen .se-pets,
  #page-root[data-current-route="settings"] .settings-screen .se-notify,
  #page-root[data-current-route="settings"] .settings-screen .se-theme,
  #page-root[data-current-route="settings"] .settings-screen .se-export,
  #page-root[data-current-route="settings"] .settings-screen .se-clear,
  #page-root[data-current-route="settings"] .settings-screen .se-about-app,
  #page-root[data-current-route="settings"] .settings-screen .se-terms,
  #page-root[data-current-route="settings"] .settings-screen .se-privacy,
  #page-root[data-current-route="settings"] .settings-screen .se-contact{
    display:none!important;
  }

  #page-root[data-current-route="settings"] .settings-mobile-groups{
    display:flex!important;
    position:relative;
    z-index:8;
    width:90.6%;
    margin:-104% auto 0;
    padding-bottom:20px;
    flex-direction:column;
    gap:28px;
  }

  #page-root[data-current-route="settings"] .settings-mobile-section{
    display:flex;
    flex-direction:column;
    gap:3px;
  }

  #page-root[data-current-route="settings"] .settings-mobile-title{
    display:flex;
    align-items:center;
    gap:6px;
    margin:0 0 4px 0;
    font-size:14px;
    font-weight:900;
    line-height:1.28;
    color:#4b2b1d;
  }

  #page-root[data-current-route="settings"] .settings-mobile-title img{
    width:17px;
    height:17px;
    flex:0 0 17px;
    object-fit:contain;
  }

  #page-root[data-current-route="settings"] .settings-mobile-item{
    display:flex;
    align-items:center;
    width:100%;
    min-height:38px;
    margin:0;
    padding:0;
    border:0;
    background:transparent;
    text-align:left;
    cursor:pointer;
    touch-action:manipulation;
  }

  #page-root[data-current-route="settings"] .settings-mobile-item-icon{
    width:25px;
    height:25px;
    margin-right:10px;
    flex:0 0 25px;
    object-fit:contain;
  }

  #page-root[data-current-route="settings"] .settings-mobile-item-label{
    flex:1 1 auto;
    min-width:0;
    font-size:13px;
    font-weight:900;
    line-height:1.26;
    color:#4b2b1d;
    white-space:normal;
    word-break:keep-all;
    overflow-wrap:anywhere;
  }

  #page-root[data-current-route="settings"] .settings-mobile-item-arrow{
    margin-left:8px;
    flex:0 0 auto;
    font-size:21px;
    line-height:1;
    color:#6b4130;
    transform:translateY(-1px);
  }

  #page-root[data-current-route="settings"] .settings-mobile-item:focus-visible{
    outline:3px solid rgba(118,78,57,.25);
    outline-offset:3px;
    border-radius:16px;
  }
}