: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);
  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:hidden;
  box-shadow:0 0 40px rgba(59,35,22,.12);
}

#page-root{
  min-height:100dvh;
  padding-bottom:calc(76px + 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:25px;
  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{
  position:relative;
  width:100%;
  aspect-ratio:941/1535;
  background:url("./assets/home-artwork.jpg") top center/100% 100% no-repeat;
}

.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;
}

.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:10px;
  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%}
.quick-record{left:5.2%;top:66.1%;width:20.5%;height:13.7%}
.calendar-short{left:28%;top:66.1%;width:20.5%;height:13.7%}
.health-short{left:50.8%;top:66.1%;width:20.5%;height:13.7%}
.add-pet{left:73.6%;top:66.1%;width:20.5%;height:13.7%}
.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{
  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:rgba(255,255,255,.12);
  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:10px;
  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{
  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:10px;
  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:25px;
}
.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{
  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:10px;
  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-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{
  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:31px;
}
.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:10px;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:25px;
}
.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,
.settings-screen{
  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;
}