*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{min-height:100dvh}
/* tabbar 貼底高度：Fred 2026-08-04 定案＝固定 2px 極限貼底（home indicator 輕疊藥丸下緣屬預期） */
html{--tab-b:30px} /* v20 Fred 定案：default 模式視窗涵蓋螢幕真實底部，30px＝離底緣的最終位置 */
/* html 補底色：iOS standalone black-translucent 後，狀態列區域由頁面背景補色，沒設會露出系統灰 */
html{overscroll-behavior:none;interpolate-size:allow-keywords;background:var(--bg)}
body{background:var(--bg);color:var(--ink);font-family:var(--font-ui);
  -webkit-font-smoothing:antialiased;overscroll-behavior-y:none;touch-action:manipulation}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
a{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
:focus:not(:focus-visible){outline:none}
input,select,textarea{font:inherit;color:inherit}
.view{display:none;min-height:100dvh}
.view.on{display:flex;flex-direction:column}
.tabview.on{height:100dvh;overflow:hidden}
.hide{display:none!important}
.mono{font-family:var(--font-mono)}
.scroller{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding-bottom:calc(var(--safe-b) + 108px);overscroll-behavior-y:contain}
/* Tab／頁面切換：內容淡入＋上移 8px（互動微動畫 5）。view 從 display:none 變為顯示時才會重新觸發 */
.view.tabview.on .scroller{animation:view-fade-up 260ms var(--ease)}
@keyframes view-fade-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ── 登入 ── */
#v-login{align-items:center;justify-content:center;padding:24px}
.login-box{width:100%;max-width:340px;text-align:center;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-sheet);box-shadow:var(--shadow);padding:var(--sp-32)}
.login-box h1{font-family:var(--font-serif);font-weight:400;font-size:42px;letter-spacing:1px}
.login-box .sub{color:var(--ink-2);margin:var(--sp-8) 0 var(--sp-24);font-size:var(--fs-md)}
#signin{display:flex;justify-content:center;min-height:44px}
#login-status{margin-top:var(--sp-16);font-size:var(--fs-sm);color:var(--ink-2);min-height:1.4em}

/* ── guest 佔位頁 ── */
#v-guest{align-items:center;justify-content:center;padding:24px;text-align:center;gap:var(--sp-12)}
#v-guest h2{font-family:var(--font-serif);font-weight:400;font-size:var(--fs-hero)}
#v-guest p{color:var(--ink-2);font-size:var(--fs-body);max-width:280px;line-height:1.8}
#v-guest .paw{width:56px;height:56px;stroke:var(--ink-3);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}

/* ── 頁首 ── */
.page-hd{padding:calc(var(--safe-t) + 16px) var(--sp-20) 6px;display:flex;align-items:baseline;justify-content:space-between;flex-shrink:0}
.page-hd h1{font-family:var(--font-serif);font-weight:400;font-size:var(--fs-hero);letter-spacing:1px}
.page-hd .sub{font-size:var(--fs-sm);color:var(--ink-3);font-family:var(--font-mono)}

.section{padding:var(--sp-8) var(--sp-20) var(--sp-24)}
.section h2{font-family:var(--font-serif);font-weight:400;font-size:var(--fs-lg);letter-spacing:.6px;color:var(--ink);margin-bottom:var(--sp-12)}
.section-tight{padding-bottom:var(--sp-8)}
.section-flush-top{padding-top:0}
.page-hd-center{flex-direction:column;align-items:center;text-align:center;position:relative}
/* 全頁 overlay 標題統一（原三處 inline style、三處無樣式，2026-07-30 收斂） */
.overlay-title{font-family:var(--font-serif);font-weight:400;font-size:var(--fs-title);letter-spacing:.5px}

/* ── 狗狗卡 ── */
#dogcard-slot{position:relative}
.dogcard{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-card);box-shadow:var(--shadow);padding:14px 16px;margin:var(--sp-8) var(--sp-20) var(--sp-24)}
/* 生日彩蛋，僅 12/22 render（互動微動畫 9）：純 CSS 飄落，transform+opacity */
.birthday-paws{position:absolute;top:var(--sp-8);left:var(--sp-20);right:var(--sp-20);bottom:var(--sp-24);pointer-events:none;
  overflow:hidden;border-radius:var(--r-card)}
.birthday-paws svg{position:absolute;top:-16px;width:13px;height:13px;color:var(--accent);opacity:0;animation:paw-fall 5s linear infinite}
.birthday-paws svg:nth-child(1){left:10%;animation-delay:0s}
.birthday-paws svg:nth-child(2){left:30%;animation-delay:1.2s}
.birthday-paws svg:nth-child(3){left:52%;animation-delay:2.6s}
.birthday-paws svg:nth-child(4){left:72%;animation-delay:.6s}
.birthday-paws svg:nth-child(5){left:88%;animation-delay:3.4s}
@keyframes paw-fall{0%{transform:translateY(0) rotate(0deg);opacity:0}12%{opacity:.5}82%{opacity:.3}100%{transform:translateY(140px) rotate(50deg);opacity:0}}
.dogcard .ava{width:64px;height:64px;border-radius:18px;flex-shrink:0;overflow:hidden;
  display:grid;place-items:center;background:var(--surface-2)}
.dogcard .ava img{width:100%;height:100%;object-fit:cover;display:block}
.dogcard .ava svg{width:30px;height:30px;stroke:var(--ink-3);fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.dogcard .ava.has-photo svg{display:none}
.dogcard .ava.has-photo.err img{display:none}
.dogcard .ava.has-photo.err svg{display:block}
.dogcard .bd{flex:1;min-width:0}
.dogcard h2{font-family:var(--font-serif);font-weight:400;font-size:var(--fs-title);letter-spacing:.5px}
.dogcard .meta{display:flex;gap:12px;margin-top:5px;font-size:var(--fs-sm);color:var(--ink-2)}
.dogcard .meta b{color:var(--ink);font-family:var(--font-mono);font-weight:500}

/* ── 週期照護看板 ── */
.routine-row{display:flex;gap:10px;overflow-x:auto;padding:0 var(--sp-20) var(--sp-24);scroll-snap-type:x proximity;scroll-padding-left:var(--sp-20);scrollbar-width:none}
.routine-row::-webkit-scrollbar{display:none}
.rt-card{flex:0 0 148px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);
  padding:12px 14px;box-shadow:var(--shadow);position:relative;overflow:hidden;cursor:pointer;scroll-snap-align:start;transition:transform 120ms var(--ease)}
.rt-card:active{transform:scale(.98)}
.rt-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;transition:background var(--dur) var(--ease)}
.rt-card.st-red::before{background:var(--c-red)}
.rt-card.st-yellow::before{background:var(--c-yellow)}
.rt-card.st-green::before{background:var(--c-green)}
.rt-card.st-none::before{background:var(--border-2)}
.rt-card.just-done::before{background:var(--c-green)}
.rt-card .cat{font-family:var(--font-mono);font-size:var(--fs-cap);color:var(--ink-2);letter-spacing:.5px}
.rt-card h3{font-family:var(--font-ui);font-weight:700;font-size:var(--fs-body);margin:4px 0 8px;line-height:1.4}
.rt-card .due{font-size:var(--fs-sm);color:var(--ink-2);margin-bottom:10px;min-height:2.6em;line-height:1.4}
.rt-card .due b{color:var(--ink)}
.rt-card.st-red .due b{color:var(--c-red-text)}
.rt-card.st-yellow .due b{color:var(--c-yellow-text)}
.rt-card button.done{width:100%;height:40px;border-radius:var(--r-btn);font-size:var(--fs-sm);font-weight:700;
  background:var(--accent);color:var(--on-accent);transition:transform 120ms var(--ease);display:flex;align-items:center;justify-content:center}
.rt-card button.done:active{transform:scale(.98)}
.rt-card button.done[disabled]{opacity:.5}
/* 一鍵完成：勾勾畫線（互動微動畫 1） */
.check-draw path{stroke-dasharray:26;stroke-dashoffset:0;animation:check-draw-line var(--dur) var(--ease)}
@keyframes check-draw-line{from{stroke-dashoffset:26}to{stroke-dashoffset:0}}

/* ── 今日時間軸／紀錄頁時間軸 共用 ── */
.tl-list{display:flex;flex-direction:column;gap:var(--sp-8);padding:0 var(--sp-20)}
.tl-item{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1px solid var(--border);
  border-radius:12px;padding:12px 14px;box-shadow:var(--shadow)}
/* 新紀錄插入時間軸／清單內容更新（互動微動畫 3）：每次重繪的項目統一淡入滑落，不做逐項延遲 stagger */
@keyframes item-fade-up{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.tl-item .ico{width:34px;height:34px;border-radius:var(--r-ico);flex-shrink:0;display:grid;place-items:center;background:var(--surface-2)}
.tl-item .ico svg{width:17px;height:17px;stroke:var(--accent);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tl-item .bd{flex:1;min-width:0}
.tl-item .thumb,.rcard .thumb{margin-left:4px}
.tl-item .row1{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.tl-item b{font-size:var(--fs-body);font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-item time{font-family:var(--font-mono);font-size:var(--fs-cap);color:var(--ink-2);flex-shrink:0}
.tl-item .desc{font-size:var(--fs-sm);color:var(--ink-2);margin-top:2px;line-height:1.5}
.empty-msg{text-align:center;color:var(--ink-3);font-size:var(--fs-sm);padding:28px 24px;line-height:1.9}
.empty-state{display:flex;flex-direction:column;align-items:center;gap:8px;padding:28px 24px;text-align:center}
.empty-state .paw-ico{width:36px;height:36px;color:var(--ink-3);animation:paw-sleep 4s var(--ease) infinite}
.empty-state p{color:var(--ink-3);font-size:var(--fs-sm);line-height:1.9;margin:0}
/* 空狀態 paw 呼吸（互動微動畫 7）：極慢極輕微，睡著的感覺 */
@keyframes paw-sleep{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}

/* ── 開站載入畫面：paw 置中疊在骨架墊底上（互動微動畫 6）── */
#v-loading{position:relative;align-items:stretch;justify-content:flex-start;padding:calc(var(--safe-t) + 16px) var(--sp-20)}
.loading-skel{display:flex;flex-direction:column;gap:var(--sp-16);width:100%;max-width:400px;margin:0 auto}
.skel{background:var(--surface-2);border-radius:var(--r-card);animation:skel-breathe 1.8s var(--ease) infinite}
.skel-dogcard{height:92px}
.skel-row{display:flex;gap:10px}
.skel-rt{flex:1;height:118px}
.skel-tl{height:54px}
@keyframes skel-breathe{0%,100%{opacity:.5}50%{opacity:.9}}
.loading-paw-wrap{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
#v-loading .paw-ico{width:44px;height:44px;color:var(--accent);animation:paw-breathe 2.4s var(--ease) infinite}
#v-loading p{color:var(--ink-2);font-size:var(--fs-body)}
@keyframes paw-breathe{0%,100%{opacity:.55;transform:scale(.96)}50%{opacity:1;transform:scale(1)}}

/* ── guest 頂部裝飾 ── */
.guest-hd-paw{width:32px;height:32px;color:var(--ink-3);margin:0 auto 6px;display:block}

/* ── 近 7 天行程 ── */
#sched-section{padding-top:0}
.section-hd-row{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:var(--sp-12)}
.section-hd-row h2{margin-bottom:0}
.add-mini-btn{width:30px;height:30px;border-radius:99px;border:1px solid var(--border-2);color:var(--accent);
  font-size:var(--fs-md);display:grid;place-items:center;flex-shrink:0;transition:transform 120ms var(--ease)}
.add-mini-btn:active{transform:scale(.92)}

.sch-item{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);
  border-radius:12px;padding:12px 14px;box-shadow:var(--shadow);margin-bottom:var(--sp-8);cursor:pointer;transition:transform 120ms var(--ease)}
.sch-item:active{transform:scale(.98)}
.sch-item .d{font-family:var(--font-mono);font-size:var(--fs-cap);color:var(--accent);text-align:center;flex-shrink:0;width:34px}
.sch-item .d b{display:block;font-size:var(--fs-md)}
.sch-item b.ttl{font-size:var(--fs-body);font-weight:700;flex:1;min-width:0}
.sch-item .type{font-family:var(--font-mono);font-size:var(--fs-cap);color:var(--ink-2)}

/* ── 外觀設定（包 L，2026-07-29）── */
.seg-appearance{display:flex;gap:var(--sp-8)}
.seg-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:var(--sp-4);
  padding:12px 8px;border:1px solid var(--border-2);border-radius:var(--r-card);
  background:var(--surface);color:var(--ink-2);transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease),transform 120ms var(--ease)}
.seg-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.seg-btn span{font-size:var(--fs-sm);font-weight:500}
.seg-btn.on{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--surface))}
.seg-btn:active{transform:scale(.98)}

.guest-theme-btn{position:absolute;top:calc(var(--safe-t) + 12px);right:var(--sp-20);
  width:36px;height:36px;border-radius:99px;display:grid;place-items:center;
  background:var(--surface);border:1px solid var(--border-2);box-shadow:var(--shadow);transition:transform 120ms var(--ease)}
.guest-theme-btn svg{width:18px;height:18px;stroke:var(--ink-2);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.guest-theme-btn:active{transform:scale(.92)}
.guest-theme-btn .ico-moon{display:none}
[data-theme="star"] .guest-theme-btn .ico-sun{display:none}
[data-theme="star"] .guest-theme-btn .ico-moon{display:block}

/* ── chips ── */
.chips{display:flex;gap:var(--sp-8);padding:var(--sp-8) var(--sp-20) var(--sp-12);overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-left:var(--sp-20);scrollbar-width:none;flex-shrink:0}
.chips::-webkit-scrollbar{display:none}
.chip{flex-shrink:0;scroll-snap-align:start;font-size:var(--fs-sm);padding:10px 16px;border-radius:var(--r-chip);
  border:1px solid var(--border-2);color:var(--ink-2);background:transparent;transition:background var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease),transform 120ms var(--ease)}
.chip.on{background:var(--chip-on-bg);color:var(--chip-on-ink);border-color:var(--chip-on-bg);font-weight:500}
.chip:active{transform:scale(.98)}

/* ── 紀錄頁 ── */
.day-h{font-family:var(--font-mono);font-size:var(--fs-cap);letter-spacing:2px;color:var(--ink-2);
  padding:14px var(--sp-20) 8px;text-transform:uppercase}
.rcard{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-card);margin:0 var(--sp-20) var(--sp-8);padding:12px 14px;box-shadow:var(--shadow);cursor:pointer;
  transition:transform 120ms var(--ease)}
.rcard:active{transform:scale(.98)}
.rcard .ico{width:36px;height:36px;border-radius:var(--r-ico);flex-shrink:0;display:grid;place-items:center;background:var(--surface-2)}
.rcard .ico svg{width:18px;height:18px;stroke:var(--accent);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rcard .bd{flex:1;min-width:0}
.rcard .row1{display:flex;justify-content:space-between;gap:8px}
.rcard b{font-size:var(--fs-body);font-weight:700}
.rcard time{font-family:var(--font-mono);font-size:var(--fs-cap);color:var(--ink-2);flex-shrink:0}
.rcard .desc{font-size:var(--fs-sm);color:var(--ink-2);margin-top:3px}

/* ── 照片縮圖 / 佔位 / lightbox ── */
.thumb{width:48px;height:48px;border-radius:var(--r-ico);overflow:hidden;flex-shrink:0;background:var(--surface-2);position:relative;cursor:pointer}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ph-fallback{display:none;position:absolute;inset:0;align-items:center;justify-content:center}
.ph-fallback svg{width:18px;height:18px;stroke:var(--ink-3);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.thumb.err img,.mthumb.err img{display:none}
.thumb.err .ph-fallback,.mthumb.err .ph-fallback{display:flex}
/* 卡片縮圖數量角標（2 張以上時顯示，如「+3」）*/
.ph-count{position:absolute;right:3px;bottom:3px;background:rgba(0,0,0,.6);color:#fff;font-size:var(--fs-cap);font-weight:700;
  line-height:1.5;padding:0 5px;border-radius:99px;font-family:var(--font-mono)}

/* lightbox 開啟縮放過渡（互動微動畫 8）：opacity/transform，不用 display 硬切；多檔切換見 .lightbox-nav/.lightbox-counter */
.lightbox{position:fixed;inset:0;background:#000;z-index:60;display:flex;align-items:center;justify-content:center;padding:24px;
  opacity:0;pointer-events:none;transition:opacity var(--dur) var(--ease)}
.lightbox.on{opacity:1;pointer-events:auto}
.lightbox img,.lightbox video{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px;
  transform:scale(.96);transition:transform var(--dur) var(--ease),opacity 120ms var(--ease)}
.lightbox.on img,.lightbox.on video{transform:scale(1)}
.lightbox-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:99px;
  background:rgba(255,255,255,.14);color:#fff;display:flex;align-items:center;justify-content:center;z-index:2}
.lightbox-nav svg{width:22px;height:22px}
.lightbox-nav.hide{display:none}
.lightbox-prev{left:var(--sp-12)}
.lightbox-next{right:var(--sp-12)}
.lightbox-counter{position:absolute;bottom:var(--sp-16);left:50%;transform:translateX(-50%);color:#fff;
  font-family:var(--font-mono);font-size:var(--fs-sm);background:rgba(0,0,0,.5);padding:3px 10px;border-radius:99px}

/* ── 縮圖／預覽的影片播放標記 ── */
.thumb-video{position:relative}
.thumb-video video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.ph-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;width:100%;height:100%;pointer-events:none}
.ph-play circle{opacity:.9}

/* ── 照片選取器（多檔網格，2026-07-29 包 H）── */
.media-grid{display:flex;flex-wrap:wrap;gap:var(--sp-8)}
.mthumb{width:76px;height:76px;border-radius:12px;overflow:hidden;position:relative;background:var(--surface-2);
  cursor:pointer;flex-shrink:0}
.mthumb img,.mthumb video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.mthumb-x{position:absolute;top:3px;right:3px;width:26px;height:26px;border-radius:99px;background:rgba(0,0,0,.55);
  color:#fff;display:flex;align-items:center;justify-content:center}
.mthumb-x svg{width:13px;height:13px}
.photo-add-tile{width:76px;height:76px;border-radius:12px;border:1.5px dashed var(--border-2);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;color:var(--accent)}
.photo-add-tile svg{width:22px;height:22px}
.photo-status{font-size:var(--fs-sm);color:var(--ink-3);margin-top:6px;min-height:1.4em}

/* ── tabbar ── */
#tabbar{position:fixed;left:16px;right:16px;bottom:var(--tab-b);z-index:15;display:none;
  /* 狀態列模式 default（2026-08-04 v17）：視窗涵蓋到螢幕真實最底，bottom:2px 即貼底；
     藥丸下緣與 home indicator 輕微共存屬預期，勿再用位移補償（v15 教訓：translucent 模式下位移會被系統蓋住） */
  align-items:center;justify-content:center;pointer-events:none}
#tabbar.show{display:flex}
.tab-pill{display:flex;align-items:center;justify-content:space-around;padding:5px;pointer-events:auto;
  width:100%;max-width:400px;
  background:color-mix(in srgb,var(--surface) 85%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid var(--border);border-radius:99px;box-shadow:var(--shadow-float)}
.tab-pill button{display:flex;flex-direction:column;align-items:center;gap:2px;flex:1;
  padding:7px 4px;border-radius:99px;transition:background var(--dur) var(--ease),transform 120ms var(--ease)}
.tab-pill button.on{background:color-mix(in srgb,var(--ink) 8%,transparent)}
.tab-pill svg{width:21px;height:21px;stroke:var(--ink-3);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:stroke var(--dur) var(--ease)}
.tab-pill span{font-size:var(--fs-cap);color:var(--ink-2);transition:color var(--dur) var(--ease)}
.tab-pill button.on svg{stroke:var(--accent)}
.tab-pill button.on span{color:var(--accent);font-weight:700}
.tab-pill button.dis svg,.tab-pill button.dis span{opacity:.4}
.tab-pill button:active{transform:scale(.92)}
#tab-add{flex:0 0 52px;height:52px;border-radius:99px;display:grid;place-items:center;
  background:var(--accent);margin:0 2px;box-shadow:var(--shadow-float);transition:transform 120ms var(--ease)}
#tab-add svg{width:24px;height:24px;stroke:var(--on-accent);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;grid-area:1/1}
#tab-add:active{transform:scale(.92)}
/* 快速新增送出成功：中央＋短暫變勾再彈回（互動微動畫 4） */
#tab-add .check-swap,.sb-add-btn .check-swap{display:none}
#tab-add.pulse-check .plus-ico,.sb-add-btn.pulse-check .plus-ico{display:none}
#tab-add.pulse-check .check-swap,.sb-add-btn.pulse-check .check-swap{display:block}
#tab-add.pulse-check,.sb-add-btn.pulse-check{animation:add-btn-bounce 480ms var(--ease)}
@keyframes add-btn-bounce{0%{transform:scale(1)}30%{transform:scale(.85)}55%{transform:scale(1.12)}100%{transform:scale(1)}}

/* ── scrim / sheet / toast ── */
#scrim{position:fixed;inset:0;background:var(--scrim);z-index:30;opacity:0;pointer-events:none;transition:opacity var(--dur) var(--ease)}
#scrim.on{opacity:1;pointer-events:auto}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:31;background:var(--surface);max-height:88dvh;
  overflow-y:auto;border-radius:var(--r-sheet) var(--r-sheet) 0 0;border-top:1px solid var(--border);
  padding:var(--sp-20) var(--sp-20) calc(var(--safe-b) + var(--sp-20));transform:translateY(105%);transition:transform var(--dur) var(--ease);
  box-shadow:var(--shadow-float)}
.sheet.on{transform:none}
#sheet-form{z-index:32}
.sheet-handle{width:36px;height:4px;border-radius:99px;background:var(--border-2);margin:0 auto 14px}
.sheet h3{font-family:var(--font-serif);font-weight:400;font-size:var(--fs-title);margin-bottom:var(--sp-16)}
.qa-opts{display:flex;flex-direction:column;gap:10px}
.qa-opt{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--border);
  border-radius:14px;text-align:left;transition:transform 120ms var(--ease)}
.qa-opt:active{transform:scale(.98)}
.qa-opt .ico{width:42px;height:42px;border-radius:12px;flex-shrink:0;display:grid;place-items:center;background:var(--surface-2)}
.qa-opt .ico svg{width:20px;height:20px;stroke:var(--accent);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.qa-opt b{display:block;font-size:var(--fs-md);font-weight:700}
.qa-opt span{font-size:var(--fs-sm);color:var(--ink-3)}

.sheet-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.sheet-hd h3{margin:0}
.sheet-hd button{width:36px;height:36px;display:grid;place-items:center;border-radius:99px}
.sheet-hd button svg{width:18px;height:18px;stroke:var(--ink-2);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.f-row{margin-bottom:var(--sp-12)}
.f-row label{display:block;font-size:var(--fs-sm);color:var(--ink-3);margin-bottom:6px;font-family:var(--font-mono);letter-spacing:.5px}
.f-in{width:100%;height:46px;border:1px solid var(--border-2);border-radius:12px;background:var(--bg);
  color:var(--ink);padding:0 14px;font-size:var(--fs-md);outline:none;-webkit-appearance:none;appearance:none}
.f-in:focus{border-color:var(--accent)}
input[type="date"].f-in,input[type="datetime-local"].f-in,input[type="time"].f-in{font-size:var(--fs-md)}
.f-in::-webkit-date-and-time-value{text-align:left;font-size:var(--fs-md)}
textarea.f-in{height:auto;min-height:72px;padding:10px 14px;resize:none;line-height:1.6}
.f-chips{display:flex;flex-wrap:wrap;gap:8px}
.food-chips{display:flex;flex-wrap:wrap;gap:8px}
.food-add{border-style:dashed;color:var(--accent)}
.food-new{margin-top:10px;padding:12px;border:1px solid var(--border);border-radius:12px;background:var(--surface-2)}
.food-new .f-in{margin-bottom:10px}
.food-new .f-chips{margin-bottom:10px}
.quick-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.quick-chips .chip{padding:8px 12px;font-size:var(--fs-sm)}
.dt-row{display:flex;gap:8px;align-items:center}
.dt-row .f-in{flex:1}
.dt-row .now-chip{flex-shrink:0}
.row1-meta{display:flex;align-items:baseline;gap:4px;flex-shrink:0}
.rec{font-size:var(--fs-cap);color:var(--ink-2)}
details.f-more{margin-bottom:6px}
details.f-more summary{font-size:var(--fs-sm);color:var(--ink-2);cursor:pointer;padding:8px 0;
  font-family:var(--font-mono);letter-spacing:.5px;list-style:none}
details.f-more summary::-webkit-details-marker{display:none}
details.f-more summary::before{content:"＋ ";color:var(--accent)}
details.f-more[open] summary::before{content:"－ "}
details.f-more[open] summary{margin-bottom:6px}
/* 展開/收合動畫：內容為 JS 動態生成、無法包 grid wrapper，改用 ::details-content＋interpolate-size（不支援的瀏覽器維持原硬切） */
details.f-more::details-content{opacity:0;block-size:0;overflow-y:clip;
  transition:content-visibility var(--dur) allow-discrete,opacity var(--dur) var(--ease),block-size var(--dur) var(--ease)}
details.f-more[open]::details-content{opacity:1;block-size:auto}
.f-check{display:flex;align-items:center;gap:10px;height:44px;font-size:var(--fs-body)}
.f-check input{width:20px;height:20px;accent-color:var(--accent)}

.f-hint{font-size:var(--fs-cap);color:var(--ink-2);margin-top:4px;line-height:1.5}
.dir-quicklinks{display:flex;gap:10px;margin-bottom:14px}
.dir-quicklinks a.btn{display:flex;align-items:center;justify-content:center;text-decoration:none}
.tag-accent{font-size:var(--fs-cap);font-weight:700;color:var(--accent);border:1px solid var(--accent);border-radius:99px;padding:2px 8px}
.tag-alert{font-size:var(--fs-cap);font-weight:700;color:var(--c-red-text);border:1px solid var(--c-red);border-radius:99px;padding:2px 8px}
.mcard.fatal{border-color:color-mix(in srgb,var(--c-red) 45%,var(--border))}

.ro-text{font-size:var(--fs-body);color:var(--ink);padding:10px 0 2px}
.row-inline{display:flex;gap:10px;margin-top:10px}
.row-inline .btn{flex:1;height:44px;font-size:var(--fs-sm)}
.hist-h{font-size:var(--fs-sm);font-weight:700;color:var(--ink-2);margin:var(--sp-20) 0 8px}
.hist-list{display:flex;flex-direction:column;gap:6px;margin-bottom:6px}
.hist-item{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;
  border:1px solid var(--border);border-radius:10px;font-size:var(--fs-sm);color:var(--ink-2)}
.hist-del{color:var(--c-red-text);font-size:var(--fs-sm);font-weight:700}
/* 週期照護表單：四種週期類型的參數列全渲染、依選中的型態切換顯示 */
.rt-param{display:none}
.rt-param.on{display:block}
#rd-clear{flex-shrink:0}

.sheet .actions{display:flex;gap:10px;margin-top:6px}
.sheet .btn{flex:1;height:48px;border-radius:var(--r-btn);font-weight:700;font-size:var(--fs-body);
  border:1px solid var(--border-2);color:var(--ink-2)}
.sheet .btn.pri{background:var(--accent);color:var(--on-accent);border:none}
.sheet .btn.danger{color:var(--c-red-text);border-color:var(--c-red)}
.sheet .btn[disabled]{opacity:.5}

.toast{position:fixed;left:50%;bottom:calc(var(--safe-b) + 100px);transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:var(--bg);font-size:var(--fs-body);padding:11px 14px 11px var(--sp-20);border-radius:99px;z-index:40;
  opacity:0;transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);pointer-events:none;white-space:nowrap;max-width:88vw;
  display:flex;align-items:center;gap:14px;box-shadow:var(--shadow-float);overflow:hidden}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
#toast-msg{overflow:hidden;text-overflow:ellipsis}
#toast-undo{flex-shrink:0;font-weight:700;text-decoration:underline;text-underline-offset:2px}
/* 復原 toast 6 秒倒數（互動微動畫 2）：transform scaleX，語意上等同進度條但只動 transform */
.toast-progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);
  transform-origin:left;transform:scaleX(0)}
.toast-progress.run{animation:toast-countdown 6000ms linear forwards}
@keyframes toast-countdown{from{transform:scaleX(1)}to{transform:scaleX(0)}}

/* ── 離線提示 ── */
#offline-msg{position:fixed;top:calc(var(--safe-t) + 8px);left:16px;right:16px;z-index:45;
  background:var(--surface);border:1px solid var(--border-2);border-radius:14px;padding:12px 16px;
  box-shadow:var(--shadow);text-align:center;font-size:var(--fs-sm);color:var(--ink-2);display:none;opacity:0;transform:translateY(-8px);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),display var(--dur) allow-discrete}
#offline-msg.show{display:block;opacity:1;transform:none}
@starting-style{#offline-msg.show{opacity:0;transform:translateY(-8px)}}

/* ── 噪點 ── */
.grain-overlay{display:none;position:fixed;inset:0;pointer-events:none;z-index:55;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat:repeat;mix-blend-mode:overlay}
[data-theme="mist"] .grain-overlay{display:block;opacity:.05}
[data-theme="star"] .grain-overlay{display:block;opacity:.09}

/* ── 紀錄頁 List/Calendar 切換 ── */
.view-toggle{width:36px;height:36px;border-radius:99px;border:1px solid var(--border-2);display:grid;place-items:center;flex-shrink:0}
.view-toggle svg{width:17px;height:17px;stroke:var(--ink-2);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.view-toggle .ico-cal{display:none}
.view-toggle[data-mode="calendar"] .ico-list{display:none}
.view-toggle[data-mode="calendar"] .ico-cal{display:block}

/* ── 日曆 ── */
.cal-hd{display:flex;align-items:center;justify-content:space-between;padding:4px var(--sp-20) 10px}
.cal-hd button{width:32px;height:32px;font-size:var(--fs-lg);border-radius:99px;color:var(--ink-2)}
.cal-hd button:active{background:var(--surface-2)}
.cal-hd-r{display:flex;align-items:center;gap:6px}
/* 「今天」快捷鈕：mono 小字 chip，佔位常駐（.dim 只降透明，月份標題不跳動）；44px 熱區靠既有 .cal-hd button::after */
.cal-hd .cal-today-btn{width:auto;height:32px;padding:0 10px;font-size:var(--fs-cap);font-family:var(--font-mono);letter-spacing:.5px;
  color:var(--ink-2);border:1px solid var(--border);background:var(--surface);transition:opacity 200ms var(--ease)}
.cal-hd .cal-today-btn.dim{opacity:0;pointer-events:none}
#cal-month-label{font-size:var(--fs-sm);color:var(--ink-2);letter-spacing:.5px}
.cal-wd{display:grid;grid-template-columns:repeat(7,1fr);padding:0 var(--sp-20);margin-bottom:4px}
.cal-wd span{text-align:center;font-size:var(--fs-cap);color:var(--ink-2);font-family:var(--font-mono)}
/* touch-action:pan-y＝縱向捲動交給原生、橫向留給 swipe 換月；transform transition 供未達閾值時彈回 */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;padding:0 var(--sp-20);touch-action:pan-y;transition:transform 200ms var(--ease)}
.cal-day{aspect-ratio:1;border-radius:10px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:3px;cursor:pointer;position:relative;background:var(--surface);
  animation:item-fade-up var(--dur) var(--ease);transition:background 120ms var(--ease)}
.cal-day.off{opacity:.32;cursor:default}
.cal-day .n{font-size:var(--fs-sm);font-family:var(--font-mono);color:var(--ink-2)}
.cal-day.today{box-shadow:0 0 0 1.5px var(--accent) inset}
.cal-day.sel{background:var(--chip-on-bg)}
.cal-day.sel .n{color:var(--chip-on-ink)}
.cal-dots{display:flex;align-items:center;gap:2.5px;height:5px}
.cal-dots i{width:5px;height:5px;border-radius:99px;display:block}
/* dot 溢出「+N」：cap 級 mono 小字，垂直置中在 5px dot 列裡（允許上下微溢出，不撐開格子） */
.cal-dots .dot-more{font-size:var(--fs-cap);line-height:1;font-family:var(--font-mono);color:var(--ink-3);height:5px;display:flex;align-items:center}
.dot-meals{background:var(--c-yellow)}
.dot-activities{background:var(--c-green)}
.dot-weights{background:var(--c-dot-weights)}
.dot-medical{background:var(--c-red)}
.dot-schedule{background:var(--c-dot-schedule)}
.dot-routine{background:var(--c-dot-routine)}
.dot-poops{background:var(--c-dot-poops)}
/* 日曆當日清單裡的 routine 到期條目可點開詳情（其餘條目唯讀不掛按壓態） */
.tl-item.tl-click{cursor:pointer;transition:transform 120ms var(--ease)}
.tl-item.tl-click:active{transform:scale(.98)}
#cal-day-detail{padding:14px var(--sp-20) 4px}
#cal-day-detail .day-h{padding:0 0 8px;text-transform:none;letter-spacing:.5px}

/* ── 醫療頁 ── */
.emcard-entry{display:flex;align-items:center;gap:12px;margin:var(--sp-8) var(--sp-20) var(--sp-24);padding:14px 16px;
  border-radius:var(--r-card);cursor:pointer;background:color-mix(in srgb,var(--c-red) 10%,var(--surface));
  border:1px solid color-mix(in srgb,var(--c-red) 30%,var(--border));box-shadow:var(--shadow);transition:transform 120ms var(--ease)}
.emcard-entry:active{transform:scale(.98)}
.emcard-entry-ico{width:40px;height:40px;border-radius:12px;flex-shrink:0;display:grid;place-items:center;background:color-mix(in srgb,var(--c-red) 18%,transparent)}
.emcard-entry-ico svg{width:20px;height:20px;stroke:var(--c-red-text);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.emcard-entry-bd{flex:1;min-width:0}
.emcard-entry-bd b{display:block;font-size:var(--fs-md);font-weight:700;color:var(--c-red-text)}
.emcard-entry-bd span{font-size:var(--fs-sm);color:var(--ink-2)}
.emcard-entry-arrow{width:16px;height:16px;stroke:var(--c-red-text);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

.followup-bar{margin:var(--sp-8) var(--sp-20) 0;padding:12px 14px;border-radius:12px;font-size:var(--fs-sm);
  background:color-mix(in srgb,var(--c-yellow) 14%,var(--surface));border:1px solid color-mix(in srgb,var(--c-yellow) 35%,var(--border));color:var(--ink)}
.followup-bar b{color:var(--c-yellow-text)}

.add-row-btn{display:block;width:calc(100% - var(--sp-40));margin:6px var(--sp-20) 0;height:44px;border-radius:var(--r-btn);
  border:1.5px dashed var(--border-2);color:var(--accent);font-size:var(--fs-sm);font-weight:500}
.add-row-btn:active{background:var(--surface-2)}

.mcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);margin:0 var(--sp-20) var(--sp-8);
  padding:12px 14px;box-shadow:var(--shadow);cursor:pointer;transition:transform 120ms var(--ease)}
.mcard:active{transform:scale(.98)}
.mcard .row1{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.mcard b{font-size:var(--fs-body);font-weight:700}
.mcard time{font-family:var(--font-mono);font-size:var(--fs-cap);color:var(--ink-2);flex-shrink:0}
.mcard .desc{font-size:var(--fs-sm);color:var(--ink-2);margin-top:3px;line-height:1.5}
.mcard .row2{display:flex;align-items:center;gap:8px;margin-top:8px}
.mcard .type-tag{font-family:var(--font-mono);font-size:var(--fs-cap);color:var(--ink-2);border:1px solid var(--border-2);
  border-radius:99px;padding:2px 8px}
.mcard.unresolved{border-color:color-mix(in srgb,var(--c-red) 45%,var(--border))}
.unresolved-tag{font-size:var(--fs-cap);font-weight:700;color:var(--c-red-text);border:1px solid var(--c-red);border-radius:99px;padding:2px 8px}
/* 醫療史（包 J）：類別／狀態 chip 色，映射既有狀態色 token（紅=救命警示、黃=追蹤中、綠=已解決、灰=中性） */
.type-tag.hcat-red,.type-tag.hst-red{color:var(--c-red-text);border-color:color-mix(in srgb,var(--c-red) 45%,var(--border-2))}
.type-tag.hcat-yellow,.type-tag.hst-yellow{color:var(--c-yellow-text);border-color:color-mix(in srgb,var(--c-yellow) 45%,var(--border-2))}
.type-tag.hcat-green,.type-tag.hst-green{color:var(--c-green-text);border-color:color-mix(in srgb,var(--c-green) 45%,var(--border-2))}
.mcard .desc.trunc1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item-brand{font-size:var(--fs-sm);font-weight:400;color:var(--ink-3);margin-left:6px}

/* 卡片快速動作 icon 列（通訊錄：電話／地圖／IG官網，2026-07-29 包 K）：連結按鈕自己有 href，
   點擊委派層會 stopPropagation 避免連帶開卡片詳情；44px 觸控目標＋4px 節奏間距，避免手機誤觸 */
.mcard .mcard-links{display:flex;align-items:center;gap:var(--sp-8);margin-top:var(--sp-8)}
.mcard-link-btn{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border-radius:12px;border:1px solid var(--border-2);color:var(--ink-2);background:var(--surface-2);
  flex-shrink:0;text-decoration:none}
.mcard-link-btn svg{width:18px;height:18px}
.mcard-link-btn:active{background:var(--border);color:var(--accent)}
.visit-badge{display:inline-block;vertical-align:middle;margin-left:5px;color:var(--accent);position:relative;top:-1px}

/* ── 症狀 ↔ 醫療連動：就診歷史／處理的症狀 導覽列表（2026-07-29 包 G）── */
.visit-list{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.visit-row{display:flex;align-items:center;gap:10px;padding:10px 12px;width:100%;text-align:left;
  border:1px solid var(--border);border-radius:10px;font-size:var(--fs-sm);color:var(--ink-2);background:var(--surface)}
.visit-row:active{background:var(--surface-2)}
.visit-row b{flex:1;font-size:var(--fs-sm);font-weight:600;color:var(--ink)}
.visit-row .d{flex-shrink:0;color:var(--ink-3)}

/* ── emergency card 全螢幕 ── */
/* overlay 進出統一 200ms 過渡（互動微動畫硬規則）：opacity + 8px 位移，不硬切 display */
.emcard-overlay{position:fixed;inset:0;z-index:50;background:var(--bg);display:flex;flex-direction:column;
  opacity:0;pointer-events:none;transform:translateY(8px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.emcard-overlay.on{opacity:1;pointer-events:auto;transform:none}
.emcard-overlay .sheet-hd{padding:calc(var(--safe-t) + 16px) var(--sp-20) 12px;margin-bottom:0;border-bottom:1px solid var(--border);
  justify-content:flex-start;gap:12px}
.emcard-overlay .sheet-hd h3{order:2}
.emcard-overlay .sheet-hd button{order:1}
.emcard-body{flex:1;overflow-y:auto;padding:16px var(--sp-20) calc(var(--safe-b) + 24px)}
.emcard-block{margin-bottom:20px}
.emcard-block h4{font-family:var(--font-mono);font-size:var(--fs-cap);letter-spacing:1px;color:var(--ink-2);
  text-transform:uppercase;margin-bottom:8px}
.emcard-block .v{font-size:var(--fs-body);color:var(--ink);line-height:1.7}
.emcard-block .v.empty{color:var(--ink-3);font-style:italic}
.emcard-allergy{padding:9px 12px;border-radius:10px;margin-bottom:6px;font-size:var(--fs-sm);background:var(--surface-2)}
.emcard-allergy.fatal{background:color-mix(in srgb,var(--c-red) 16%,var(--surface));color:var(--c-red-text);font-weight:700}
.emcard-warn{padding:14px;border-radius:12px;background:color-mix(in srgb,var(--c-red) 10%,var(--surface));
  border:1px solid color-mix(in srgb,var(--c-red) 30%,var(--border));font-size:var(--fs-body);line-height:1.85;color:var(--ink)}
.emcard-warn-full{margin-top:10px;padding-top:10px;border-top:1px dashed var(--border-2);white-space:pre-line}
.emcard-warn-toggle{margin-top:10px;font-size:var(--fs-sm);color:var(--accent);font-weight:700}

/* ── 檔案／設定頁 ── */
.acct-row{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);
  margin:0 var(--sp-20) var(--sp-8);padding:14px 16px;box-shadow:var(--shadow)}
.acct-row .kv{display:flex;justify-content:space-between;font-size:var(--fs-body);padding:5px 0}
.acct-row .kv .k{color:var(--ink-2);font-family:var(--font-mono);font-size:var(--fs-cap)}
.acct-nick{display:flex;gap:8px;align-items:center;margin-top:8px}
.acct-nick input{flex:1}
.logout-btn{display:block;width:calc(100% - var(--sp-40));margin:14px var(--sp-20) 0;height:48px;border-radius:var(--r-btn);
  border:1px solid var(--border-2);color:var(--c-red-text);font-weight:700;font-size:var(--fs-body)}

.mem-row{background:var(--surface);border:1px solid var(--border);border-radius:12px;margin:0 var(--sp-20) var(--sp-8);
  padding:12px 14px;box-shadow:var(--shadow);display:flex;align-items:center;gap:10px}
.mem-row.disabled{opacity:.5}
.mem-row .bd{flex:1;min-width:0}
.mem-row .bd b{font-size:var(--fs-body);font-weight:700;display:block}
.mem-row .bd span{font-size:var(--fs-sm);color:var(--ink-2)}
.mem-row .role-tag{font-family:var(--font-mono);font-size:var(--fs-cap);color:var(--ink-2);border:1px solid var(--border-2);
  border-radius:99px;padding:2px 8px;flex-shrink:0}
.mem-row .mem-toggle{flex-shrink:0;font-size:var(--fs-sm);font-weight:700;color:var(--accent)}

/* ── 檔案頁 Hub 分區入口 ── */
.hub-grid{display:flex;flex-direction:column;gap:var(--sp-8)}
.hub-entry{display:flex;align-items:center;gap:12px;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-card);padding:12px 14px;box-shadow:var(--shadow);transition:transform 120ms var(--ease);width:100%;text-align:left}
.hub-entry:active{transform:scale(.98)}
.hub-entry .ico{width:38px;height:38px;border-radius:var(--r-ico);flex-shrink:0;display:grid;place-items:center;background:var(--surface-2)}
.hub-entry .ico svg{width:19px;height:19px;stroke:var(--accent);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hub-entry .bd{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.hub-entry .bd b{font-size:var(--fs-body);font-weight:700}
.hub-entry .bd span{font-size:var(--fs-sm);color:var(--ink-3)}
.hub-entry .arrow{width:15px;height:15px;stroke:var(--ink-3);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

/* ── 操作紀錄 Audit Log（設定頁，admin only，包 I）── */
.audit-list{display:flex;flex-direction:column;gap:var(--sp-8)}
.audit-chip{font-family:var(--font-ui);font-size:var(--fs-cap);font-weight:700;border-radius:99px;padding:2px 8px;flex-shrink:0}
.audit-chip.new{color:var(--c-green-text);border:1px solid var(--c-green)}
.audit-chip.edit{color:var(--accent);border:1px solid var(--accent)}
.audit-chip.del{color:var(--c-red-text);border:1px solid var(--c-red)}
.audit-backfill-tag{font-size:var(--fs-cap);color:var(--ink-2);font-style:italic;margin-left:6px}

/* ── 狗狗檔案唯讀顯示（Profile 頁）── */
.dog-fields{padding:0 var(--sp-20)}
.dog-fields .kv{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--border);font-size:var(--fs-body)}
.dog-fields .kv .k{color:var(--ink-2);font-family:var(--font-mono);font-size:var(--fs-cap)}
.dog-edit-btn{margin:10px var(--sp-20) 0;height:40px;border-radius:var(--r-btn);border:1px solid var(--border-2);
  font-size:var(--fs-sm);color:var(--ink-2);padding:0 16px}

/* ── 全頁 overlay（體重／照顧指南）：沿用 emcard-overlay 但堆疊層級要低於 sheet，才能在其上開表單 ── */
.emcard-overlay.page-overlay{z-index:25}

/* ── 通用小工具：實心藥丸按鈕（撥號／回報送出）── */
.pill-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 var(--sp-20);
  border-radius:var(--r-btn);background:var(--accent);color:var(--on-accent);font-weight:700;font-size:var(--fs-body);
  text-decoration:none;border:none}
.pill-btn.block{display:flex;width:calc(100% - var(--sp-40));margin:8px var(--sp-20) 0}
.pill-btn[disabled]{opacity:.5}
.mcard.static{cursor:default}
.mcard.static:active{transform:none}
.mcard.disabled-card{opacity:.5}

/* ── 體重頁 ── */
.wchart-wrap{margin:var(--sp-4) var(--sp-20) var(--sp-8);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);
  padding:16px 14px 10px;box-shadow:var(--shadow)}
.wchart{width:100%;height:150px;display:block}
.wchart-grid line{stroke:var(--border);stroke-width:1}
.wchart-grad-a{stop-color:var(--accent);stop-opacity:.25}
.wchart-grad-b{stop-color:var(--accent);stop-opacity:0}
.wchart-line{stroke:var(--accent);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.wchart-points circle{fill:var(--surface);stroke:var(--accent);stroke-width:1.6}
.wchart-latest circle{fill:var(--accent)}
.wchart-latest text{fill:var(--ink);font-family:var(--font-mono);font-size:var(--fs-cap);font-weight:700}
.wchart-xlabels{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:var(--fs-cap);color:var(--ink-2);padding:2px 2px 0}
.wchart-empty{padding:24px 4px;text-align:center;color:var(--ink-3);font-size:var(--fs-sm);line-height:1.9}

.wstats{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-8);margin:0 var(--sp-20) var(--sp-24)}
.wstat{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px 14px;box-shadow:var(--shadow)}
.wstat .k{display:block;font-size:var(--fs-cap);color:var(--ink-2);font-family:var(--font-mono);margin-bottom:4px}
.wstat b{font-family:var(--font-mono);font-size:var(--fs-md);font-weight:700;font-variant-numeric:tabular-nums}
.wstat b i{font-size:var(--fs-cap);font-style:normal;color:var(--ink-2);margin-left:2px}
.wstat b.up{color:var(--c-green-text)}
.wstat b.down{color:var(--c-red-text)}

.bcs-row{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);
  border-radius:12px;padding:12px 14px;margin:0 var(--sp-20) var(--sp-8);box-shadow:var(--shadow)}
.bcs-row .d{width:38px;flex-shrink:0;font-size:var(--fs-cap);color:var(--ink-2);font-family:var(--font-mono)}
.bcs-row .v{width:20px;flex-shrink:0;text-align:right;font-family:var(--font-mono);font-size:var(--fs-sm);font-weight:700}
.bcs-bar{flex:1;display:flex;gap:2px}
.bcs-bar .seg{flex:1;height:8px;border-radius:2px;background:var(--surface-2)}
.bcs-bar .seg.ideal{background:color-mix(in srgb,var(--c-green) 40%,var(--surface-2))}
.bcs-bar .seg.active{background:var(--accent)}
.bcs-legend{display:flex;justify-content:space-between;font-size:var(--fs-cap);color:var(--ink-2);padding:0 var(--sp-20);margin-bottom:10px}
.bcs-legend .ideal-lbl{color:var(--c-green-text)}
.chip.ideal-chip.on{border-color:var(--c-green)}
#dogcard-slot .dogcard{cursor:pointer;transition:transform 120ms var(--ease)}
#dogcard-slot .dogcard:active{transform:scale(.98)}

/* ── 照顧指南頁（guest 全頁／admin 預覽 overlay 共用）── */
.gd-persona{padding:0 var(--sp-20) var(--sp-16);color:var(--ink-2);font-family:var(--font-serif);font-size:var(--fs-md);line-height:1.85}
.gd-persona p{margin-bottom:2px}
.gd-loglist{margin-top:14px}
.gd-log{display:flex;justify-content:space-between;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);font-size:var(--fs-sm)}
.gd-log time{font-family:var(--font-mono);font-size:var(--fs-cap);color:var(--ink-2);flex-shrink:0}

/* ── 記活動：靈緹骨折警語（常駐、低調）── */
.fracture-warn{display:flex;gap:8px;align-items:flex-start;font-size:var(--fs-sm);color:var(--ink-3);line-height:1.6;
  margin:4px 0 16px;padding:10px 12px;border-radius:10px;background:var(--surface-2)}
.fracture-warn svg{width:15px;height:15px;flex-shrink:0;margin-top:1px;stroke:var(--ink-3);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ── 照片時間軸 Photo Timeline（包 M2，2026-07-29）── */
#photos-entry-btn{margin-left:auto;margin-right:8px}
#photos-body{padding-top:4px}
.ptl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:var(--sp-4);padding:0 var(--sp-20) var(--sp-8)}
.ptl-tile{width:100%;height:auto;aspect-ratio:1;border-radius:10px}
.ptl-tag{position:absolute;left:4px;bottom:4px;max-width:calc(100% - 8px);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;background:rgba(0,0,0,.55);color:#fff;font-size:var(--fs-cap);font-weight:600;line-height:1.7;
  padding:0 6px;border-radius:99px;font-family:var(--font-mono);pointer-events:none}
.ptl-sentinel{height:1px}
.photos-lb-tag{position:absolute;top:calc(var(--safe-t,0px) + 16px);left:50%;transform:translateX(-50%);
  background:rgba(255,255,255,.14);color:#fff;font-family:var(--font-mono);font-size:var(--fs-sm);
  padding:6px 14px;border-radius:99px;max-width:80%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;z-index:2}
.photos-lb-tag.static-tag{opacity:.7;cursor:default}
.photos-lb-tag:not(.static-tag):active{background:rgba(255,255,255,.24)}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}
  details.f-more::details-content{transition:none!important}}
@media (min-width:700px){
  .scroller > *{max-width:640px;margin-left:auto;margin-right:auto}
  .routine-row{max-width:640px;margin:0 auto;padding:0 var(--sp-20) 4px}
}

/* ── 就診摘要 Vet Summary（包 M4）：醫療頁入口 ── */
.vetsum-entry{display:flex;align-items:center;gap:12px;margin:0 var(--sp-20) var(--sp-24);padding:14px 16px;
  border-radius:var(--r-card);cursor:pointer;background:color-mix(in srgb,var(--accent) 10%,var(--surface));
  border:1px solid color-mix(in srgb,var(--accent) 30%,var(--border));box-shadow:var(--shadow);transition:transform 120ms var(--ease)}
.vetsum-entry:active{transform:scale(.98)}
.vetsum-entry-ico{width:40px;height:40px;border-radius:12px;flex-shrink:0;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 18%,transparent)}
.vetsum-entry-ico svg{width:20px;height:20px;stroke:var(--accent);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.vetsum-entry-bd{flex:1;min-width:0}
.vetsum-entry-bd b{display:block;font-size:var(--fs-md);font-weight:700;color:var(--accent)}
.vetsum-entry-bd span{font-size:var(--fs-sm);color:var(--ink-2)}
.vetsum-entry-arrow{width:16px;height:16px;stroke:var(--accent);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

/* ── 就診摘要 Vet Summary：overlay 內容 ── */
.vs-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px var(--sp-20);
  border-bottom:1px solid var(--border);flex-shrink:0;flex-wrap:wrap}
.vs-toggle{display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--ink-2)}
.vs-toggle input{width:18px;height:18px;accent-color:var(--accent)}
.vs-toolbar-btns{display:flex;gap:8px}
.vs-tool-btn{height:40px;padding:0 14px;border-radius:var(--r-btn);border:1px solid var(--border-2);color:var(--ink-2);
  font-size:var(--fs-sm);font-weight:600;white-space:nowrap}
.vs-tool-btn:active{background:var(--surface-2)}
.vs-tool-btn.pri{background:var(--accent);color:var(--on-accent);border:none}

.vs-body{display:flex;flex-direction:column;gap:var(--sp-16)}
.vs-block{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);padding:14px 16px;box-shadow:var(--shadow)}
.vs-block h4{font-family:var(--font-mono);font-size:var(--fs-cap);letter-spacing:1px;color:var(--ink-2);
  text-transform:uppercase;margin-bottom:10px;display:flex;align-items:center;gap:6px}
.vs-block h4 svg{width:14px;height:14px;flex-shrink:0;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vs-empty{color:var(--ink-3);font-style:italic;font-size:var(--fs-sm)}

.vs-kv{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--border);font-size:var(--fs-md)}
.vs-kv:last-child{border-bottom:none}
.vs-kv .k{color:var(--ink-2);font-family:var(--font-mono);font-size:var(--fs-cap);flex-shrink:0;padding-top:3px}
.vs-kv .v{text-align:right;color:var(--ink);font-weight:600}

.vs-danger{border-color:color-mix(in srgb,var(--c-red) 45%,var(--border));background:color-mix(in srgb,var(--c-red) 8%,var(--surface))}
.vs-danger h4{color:var(--c-red-text)}
.vs-alert-label{font-size:var(--fs-cap);font-weight:700;color:var(--ink-2);margin:10px 0 6px;text-transform:uppercase;letter-spacing:.5px}
.vs-alert-label:first-of-type{margin-top:0}
.vs-alert-item{background:var(--surface-2);border-radius:10px;padding:9px 12px;margin-bottom:6px;font-size:var(--fs-body)}
.vs-alert-item b{font-size:var(--fs-body)}
.vs-alert-item.fatal{background:color-mix(in srgb,var(--c-red) 16%,var(--surface));color:var(--c-red-text);font-weight:700}
.vs-alert-item .d{font-size:var(--fs-sm);color:var(--ink-2);margin-top:3px;font-weight:400}
.vs-alert-item .tag{font-size:var(--fs-cap);border:1px solid currentColor;border-radius:99px;padding:1px 7px;margin-left:5px;font-weight:700}

.vs-text{font-size:var(--fs-body);line-height:1.8;color:var(--ink);margin-bottom:8px}
.vs-text:last-child{margin-bottom:0}
.vs-breed-toggle{display:inline-block;margin-top:8px;font-size:var(--fs-sm);color:var(--accent);font-weight:700}
.vs-breed-full{margin-top:8px;padding-top:8px;border-top:1px dashed var(--border-2);font-size:var(--fs-sm);line-height:1.8}

.vs-item{padding:9px 0;border-bottom:1px solid var(--border);font-size:var(--fs-body)}
.vs-item:last-child{border-bottom:none}
.vs-item .row1{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.vs-item b{font-size:var(--fs-body);font-weight:700}
.vs-item .d{font-size:var(--fs-sm);color:var(--ink-2);margin-top:3px;line-height:1.5}
.vs-item .d2{font-family:var(--font-mono);font-size:var(--fs-cap);color:var(--ink-2);flex-shrink:0}
.vs-item .lbl{font-family:var(--font-mono);font-size:var(--fs-cap);color:var(--ink-2);margin-right:5px}
.vs-item .tag{font-family:var(--font-mono);font-size:var(--fs-cap);border:1px solid var(--border-2);border-radius:99px;padding:1px 7px;color:var(--ink-2)}
.vs-item .tag.on{color:var(--c-red-text);border-color:var(--c-red)}

/* ── 就診摘要：列印／存 PDF（Fred 按瀏覽器列印即可）── */
@media print{
  body > *:not(#vetsummary-overlay){display:none!important}
  html,body{background:#fff!important}
  @page{size:A4;margin:14mm 12mm}
  #vetsummary-overlay{position:static!important;inset:auto!important;opacity:1!important;transform:none!important;
    background:#fff!important;color:#111!important;display:block!important;height:auto!important;z-index:auto!important}
  #vetsummary-overlay .no-print{display:none!important}
  #vetsummary-overlay .sheet-hd{padding:0 0 10px!important;margin-bottom:14px!important;border-bottom:2px solid #111!important}
  #vetsummary-overlay .vs-body{display:block!important;overflow:visible!important;padding:0!important;height:auto!important}
  #vetsummary-overlay .vs-block{background:#fff!important;box-shadow:none!important;border:1px solid #999!important;
    break-inside:avoid;page-break-inside:avoid;margin-bottom:12px!important;color:#111!important}
  #vetsummary-overlay *{color:#111!important;box-shadow:none!important}
  #vetsummary-overlay .vs-danger{border:1.5px solid var(--c-red-print)!important;background:#fff5f3!important}
  #vetsummary-overlay .vs-danger h4{color:var(--c-red-print)!important}
  #vetsummary-overlay .vs-alert-item.fatal{background:#ffe3de!important;color:#a3271a!important}
  #vetsummary-overlay .vs-empty{color:#777!important}
}

/* ── 桌機側欄（≥900px）：底部 tabbar 換成左側固定欄，內容置中限寬 ── */
#sidebar{display:none}
@media (min-width:900px){
  #tabbar{display:none!important}
  #sidebar.show{display:flex}
  #sidebar{flex-direction:column;position:fixed;left:0;top:0;bottom:0;width:240px;z-index:15;
    background:var(--surface);border-right:1px solid var(--border);padding:28px 16px calc(var(--safe-b) + var(--sp-20))}
  .sb-brand{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;
    padding-bottom:20px;margin-bottom:16px;border-bottom:1px solid var(--border)}
  .sb-brand .sb-paw{width:30px;height:30px;color:var(--accent);margin-bottom:6px}
  .sb-brand h1{font-family:var(--font-serif);font-weight:400;font-size:var(--fs-title);letter-spacing:.5px}
  .sb-brand p{font-size:var(--fs-cap);color:var(--ink-2)}
  .sb-nav{display:flex;flex-direction:column;gap:2px}
  .side-btn{display:flex;align-items:center;gap:12px;height:44px;padding:0 14px;border-radius:var(--r-btn);
    position:relative;color:var(--ink-2);transition:background var(--dur) var(--ease),color var(--dur) var(--ease);text-align:left}
  .side-btn:hover{background:color-mix(in srgb,var(--ink) 6%,transparent)}
  .side-btn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
  .side-btn span{font-size:var(--fs-body);font-weight:500}
  .side-btn.on{color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
  .side-btn.on::before{content:"";position:absolute;left:-16px;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)}
  .sb-add-btn{display:flex;align-items:center;justify-content:center;gap:8px;height:44px;margin-top:16px;
    border-radius:var(--r-btn);background:var(--accent);color:var(--on-accent);font-weight:700;font-size:var(--fs-body);transition:opacity var(--dur) var(--ease)}
  .sb-add-btn svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
  .sb-add-btn:hover{opacity:.9}
  .sb-foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:8px}
  .sb-nick{font-size:var(--fs-sm);color:var(--ink-2);padding:0 4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #sb-signout{height:40px;border-radius:var(--r-btn);border:1px solid var(--border-2);color:var(--c-red-text);font-size:var(--fs-sm);font-weight:600}

  .view.tabview .scroller{margin-left:240px;padding-bottom:calc(var(--safe-b) + 32px)}
  .scroller > *{max-width:720px}
  .routine-row{max-width:720px}
  /* 定義位置晚於中段 .scroller>* 置中規則的直接子元件，須在此補回置中（M4 漂移教訓） */
  .vetsum-entry{margin-inline:auto}
  #v-login,#v-guest{margin-left:0}
  .emcard-overlay.page-overlay{left:240px}
  .emcard-overlay.page-overlay .sheet-hd,.emcard-overlay.page-overlay .emcard-body{max-width:720px;margin-left:auto;margin-right:auto;width:100%}

  /* sheet：底部抽屜換成置中卡片 */
  .sheet{left:50%;right:auto;bottom:auto;top:50%;width:100%;max-width:480px;max-height:80vh;
    border-radius:var(--r-sheet);border:1px solid var(--border);
    transform:translate(-50%,-46%) scale(.98);opacity:0;pointer-events:none;
    transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease)}
  .sheet.on{transform:translate(-50%,-50%) scale(1);opacity:1;pointer-events:auto}
  .sheet-handle{display:none}
}

/* ── 包 M1：Insights 回顧與洞察（2026-07-29）── */
.ins-hd-actions{display:flex;align-items:center;gap:var(--sp-8)}
.ins-tabs{padding-top:var(--sp-4)}
.ins-tab-panel{padding-top:var(--sp-4)}
.ins-month-nav{display:flex;align-items:center;justify-content:center;gap:var(--sp-16);padding:var(--sp-12) 0 var(--sp-4)}
.ins-month-nav #ins-month-next.dis{opacity:.35;pointer-events:none}
.ins-month-nav span{font-size:var(--fs-body);color:var(--ink);min-width:96px;text-align:center}

.ins-chart-wrap{margin:0 var(--sp-20) var(--sp-8);background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-card);padding:10px 10px 6px;box-shadow:var(--shadow)}
.ins-daybar,.ins-trendline{width:100%;height:56px;display:block}
.ins-trendline{height:96px}
.ins-bar{fill:color-mix(in srgb,var(--accent) 55%,transparent)}
.ins-bar.today{fill:var(--accent)}
.ins-bar-base{stroke:var(--border);stroke-width:1}
.ins-trendline-path{stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ins-trendline-dots circle{fill:var(--surface);stroke:var(--accent);stroke-width:1.4}
.ins-trendline-latest{fill:var(--accent)}
.ins-chart-empty{padding:16px 4px;text-align:center;color:var(--ink-3);font-size:var(--fs-sm);line-height:1.9}
.ins-empty-big{padding:40px 24px;font-size:var(--fs-body);line-height:1.9}

.chip.readonly{cursor:default}
.chip.readonly:active{transform:none}

.ins-alert-bar{margin:var(--sp-8) var(--sp-20) 0;padding:12px 14px;border-radius:12px;font-size:var(--fs-sm);line-height:1.7;
  background:color-mix(in srgb,var(--accent) 12%,var(--surface));border:1px solid color-mix(in srgb,var(--accent) 35%,var(--border));color:var(--ink)}
.ins-alert-bar p+p{margin-top:4px}
.ins-alert-ok{margin:var(--sp-8) var(--sp-20) 0;padding:10px 14px;font-size:var(--fs-sm);color:var(--ink-3)}

.ins-symptom-row{cursor:default}
.ins-symptom-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:10px}
.ins-symptom-stats > div{display:flex;justify-content:space-between;align-items:baseline;padding:6px 10px;
  background:var(--surface-2);border-radius:8px}
.ins-symptom-stats .k{font-size:var(--fs-cap);color:var(--ink-2);font-family:var(--font-mono)}
.ins-symptom-stats b{font-size:var(--fs-sm);font-weight:700}

.ins-hint{margin:var(--sp-8) var(--sp-20) var(--sp-24);font-size:var(--fs-sm);color:var(--ink-3);line-height:1.7}
/* ── 全域搜尋（包 M3，2026-07-29）── */
/* 浮動入口：只在已登入（#tabbar.show 會與 sidebar.show 同時出現）才顯示，guest 走完全不同的單頁不會有 #tabbar.show */
.search-entry-btn{position:fixed;right:var(--sp-20);bottom:calc(var(--tab-b) + 64px);z-index:16; /* 跟隨 tabbar */
  width:44px;height:44px;border-radius:99px;display:none;align-items:center;justify-content:center;
  background:var(--surface);border:1px solid var(--border-2);box-shadow:var(--shadow);color:var(--ink-2);transition:transform 120ms var(--ease)}
.search-entry-btn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.search-entry-btn:active{transform:scale(.92)}
#tabbar.show ~ .search-entry-btn{display:flex}
@media (min-width:900px){.search-entry-btn{bottom:var(--sp-24)}}

/* 搜尋層：沿用 .emcard-overlay.page-overlay 外觀，但 z-index 壓低一級，
   讓從搜尋結果點進去又另外開出的 page-overlay（例：照顧回報→照顧指南頁）能正確疊在搜尋層之上 */
.search-overlay{z-index:24}
.search-overlay .sheet-hd .search-input-wrap{order:2;flex:1}
.search-input-wrap{display:flex;align-items:center;gap:8px;height:44px;padding:0 14px;
  border-radius:12px;background:var(--surface-2);border:1px solid var(--border-2)}
.search-input-wrap svg{width:17px;height:17px;stroke:var(--ink-3);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.search-input{flex:1;height:100%;border:none;background:none;outline:none;font-size:var(--fs-md);color:var(--ink);min-width:0}
.search-input::placeholder{color:var(--ink-3)}
.search-input-clear{width:26px;height:26px;border-radius:99px;display:grid;place-items:center;flex-shrink:0;color:var(--ink-3)}
.search-input-clear svg{width:12px;height:12px}

.search-history{padding:8px var(--sp-20) 4px}
.search-history-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.search-history-hd span{font-family:var(--font-mono);font-size:var(--fs-cap);letter-spacing:1px;color:var(--ink-2);text-transform:uppercase}
.search-history-clear{font-size:var(--fs-sm);color:var(--accent);font-weight:600}
.search-history-chips{display:flex;flex-wrap:wrap;gap:8px}

.search-summary{padding:2px var(--sp-20) 6px;font-size:var(--fs-sm);color:var(--ink-3);font-family:var(--font-mono)}
.search-group-hd{display:flex;align-items:center;justify-content:space-between;width:100%;padding:12px var(--sp-20);gap:8px;text-align:left}
.search-group-hd .lbl{display:flex;align-items:baseline;gap:8px;min-width:0}
.search-group-hd b{font-family:var(--font-serif);font-weight:400;font-size:var(--fs-md)}
.search-group-hd .cnt{font-family:var(--font-mono);font-size:var(--fs-cap);color:var(--ink-2);flex-shrink:0}
.search-group-hd .chev{width:14px;height:14px;stroke:var(--ink-3);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  transition:transform var(--dur) var(--ease);flex-shrink:0}
.search-group.collapsed .search-group-hd .chev{transform:rotate(-90deg)}
.search-group.collapsed .search-group-list{display:none}
.search-group-list{padding-bottom:4px;animation:item-fade-up var(--dur) var(--ease)}
.search-result .snippet{font-size:var(--fs-sm);color:var(--ink-2);margin-top:4px;line-height:1.6}
.search-more-note{padding:2px var(--sp-20) 14px;font-size:var(--fs-sm);color:var(--ink-3)}
mark.search-hit{background:color-mix(in srgb, var(--accent) 35%, transparent);color:var(--ink);
  border-radius:3px;padding:0 1px;font-weight:700}
/* ── 首頁 Attention 區（包 M6，2026-07-29）：異常／待辦優先於流水帳；紅＝真正緊急，黃＝提醒。
   顏色沿用既有 st-red/st-yellow（週期照護卡）同一組色碼，全 app 狀態色統一，不另立新 token ── */
.attention-section{padding-top:calc(var(--safe-t) + 16px)}
.attn-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--surface);
  border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin-bottom:8px;box-shadow:var(--shadow);
  transition:transform 120ms var(--ease)}
.attn-row:last-child{margin-bottom:0}
.attn-row:active{transform:scale(.98)}
.attn-ico{width:30px;height:30px;border-radius:var(--r-ico);flex-shrink:0;display:grid;place-items:center}
.attn-ico svg{width:16px;height:16px;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.attn-red .attn-ico{background:color-mix(in srgb,var(--c-red) 16%,var(--surface))}
.attn-red .attn-ico svg{stroke:var(--c-red-text)}
.attn-yellow .attn-ico{background:color-mix(in srgb,var(--c-yellow) 16%,var(--surface))}
.attn-yellow .attn-ico svg{stroke:var(--c-yellow-text)}
.attn-text{flex:1;font-size:var(--fs-sm);line-height:1.55;color:var(--ink)}
.attn-arrow{width:15px;height:15px;flex-shrink:0;stroke:var(--ink-3);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ── 空狀態 CTA（包 M6）：pawEmptyHtml 選填的「新增第一筆」按鈕 ── */
.empty-cta{margin-top:4px;height:40px;padding:0 var(--sp-20);border-radius:99px;background:var(--accent);
  color:var(--on-accent);font-size:var(--fs-sm);font-weight:700;transition:opacity var(--dur) var(--ease)}
.empty-cta:active{opacity:.85}

/* ── 同上一筆快速重複記錄（包 M6）：記一餐／記活動表單頂部，一鍵帶入上次內容供確認再送出 ── */
.same-as-last-btn{display:flex;align-items:center;gap:8px;width:100%;height:44px;padding:0 14px;margin-bottom:var(--sp-16);
  border-radius:var(--r-btn);border:1px dashed var(--border-2);background:var(--surface-2);color:var(--ink-2);
  font-size:var(--fs-sm);text-align:left;transition:background var(--dur) var(--ease)}
.same-as-last-btn:active{background:var(--surface)}
.same-as-last-btn svg{width:16px;height:16px;flex-shrink:0;stroke:var(--accent);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.same-as-last-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ── 包M5：離線急救包 ── */
/* 照顧指南／緊急卡頁離線時的資料時間戳提示；比 #offline-msg 更精確（帶時間），顯示時就不重複顯示通用提示 */
#offline-freshness-msg{position:fixed;top:calc(var(--safe-t) + 8px);left:16px;right:16px;z-index:46;
  background:var(--surface);border:1px solid var(--accent);border-radius:14px;padding:12px 16px;
  box-shadow:var(--shadow);text-align:center;font-size:var(--fs-sm);font-weight:600;color:var(--ink);
  transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease),display var(--dur) allow-discrete}
#offline-freshness-msg[hidden]{display:none;opacity:0;transform:translateY(-8px)}
@starting-style{#offline-freshness-msg:not([hidden]){opacity:0;transform:translateY(-8px)}}
body:has(#offline-freshness-msg:not([hidden])) #offline-msg{display:none}
/* 離線時 Quick Report 送出鈕的停用說明（鈕本身停用外觀沿用既有 .pill-btn[disabled]） */
.offline-write-hint{margin:6px var(--sp-20) 0;font-size:var(--fs-sm);color:var(--ink-2);text-align:center}

/* ══ 視覺系統優化（2026-07-30）══ */
/* 觸控熱區擴大：視覺尺寸不變，用偽元素把熱區補到 ≥44px */
.add-mini-btn,.view-toggle,.cal-hd button,.sheet-hd button,.hist-del,#toast-undo{position:relative}
.add-mini-btn::after{content:"";position:absolute;inset:-7px}
.view-toggle::after,.sheet-hd button::after,.guest-theme-btn::after{content:"";position:absolute;inset:-4px}
.cal-hd button::after{content:"";position:absolute;inset:-6px}
.mthumb-x::after{content:"";position:absolute;inset:-9px}
.hist-del::after,#toast-undo::after{content:"";position:absolute;inset:-10px -8px}

/* 互動卡片防長按選字（表單與長文不在此列） */
.rt-card,.tl-item,.sch-item,.rcard,.mcard,.hub-entry,.attn-row,.qa-opt,.visit-row,
.emcard-entry,.vetsum-entry,.dogcard,.chip,.seg-btn{-webkit-user-select:none;user-select:none}

/* ── 合約 class（給下一棒 JS agent）── */
/* .is-new：清單「新插入」項目的進場動畫。item-fade-up 已自 .tl-item/.sch-item/.rcard/.mthumb/.mcard 基底移除，JS 於新節點掛 .is-new 才播放 */
.is-new{animation:item-fade-up var(--dur) var(--ease)}
/* .btn-saving：送出中按鈕的 opacity 脈動，JS 同時把按鈕文字換成「儲存中…」 */
.btn-saving{pointer-events:none;animation:btn-saving-pulse 1.2s var(--ease) infinite}
@keyframes btn-saving-pulse{0%,100%{opacity:.55}50%{opacity:.9}}
/* .skel-list／.skel-line：可重用清單骨架，與既有 .skel 併用（class="skel skel-line"） */
.skel-list{display:flex;flex-direction:column;gap:var(--sp-8);padding:0 var(--sp-20) var(--sp-8)}
.skel-line{height:54px;border-radius:var(--r-card)}
/* .sheet.dragging：下滑手勢拖曳中由 JS 掛上，關過渡讓 sheet 跟手 */
.sheet.dragging{transition:none}
/* .lb-fade：lightbox 換圖 crossfade（120ms opacity），JS 換 src 前掛上、載入後移除 */
.lightbox .lb-fade{opacity:0}

/* ══ 互動接線（2026-07-30 JS 棒）══ */
/* ── 下拉重新整理（2026-07-30）──
   指示器藏在狀態列上方（-56px），拖曳位移與透明度由 JS inline style 跟手；
   .settle＝放手後的收回／彈回過渡；.busy＝重新整理中沿用 paw-breathe 呼吸；
   reduced-motion 時全域規則會殺掉 transition/animation，手勢與觸發不受影響 */
.ptr{position:fixed;top:calc(var(--safe-t) + 6px);left:50%;z-index:20;width:40px;height:40px;border-radius:99px;
  display:flex;align-items:center;justify-content:center;pointer-events:none;
  background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow-float);color:var(--accent);
  opacity:0;transform:translate(-50%,-56px)}
.ptr .paw-ico{width:20px;height:20px}
.ptr.settle{transition:transform var(--dur) var(--ease),opacity var(--dur) var(--ease)}
.ptr.busy .paw-ico{animation:paw-breathe 1.2s var(--ease) infinite}

/* .se-hidden：搜尋浮動鈕向下捲動離場（JS rAF 節流控制；reduced-motion 由 JS 守門永遠顯示）。
   沿用既有 transform 120ms transition，只動 transform */
.search-entry-btn.se-hidden{transform:translateY(140px)}
/* sheet 下滑關閉手勢：把手與標題列的觸控由 JS 全權接管（不讓瀏覽器搶去當捲動）；
   內容區在 scrollTop===0 起拖時由 JS 以 non-passive touchmove 接手 */
.sheet-handle,.sheet>.sheet-hd{touch-action:none}

/* ══ Wishlist 優化許願池（2026-08-04）══ */
/* overlay 標題列右側動作鈕（＋新增）：sheet-hd button 基底已含 36px 圓鈕與 ::after 熱區擴到 44px */
.emcard-overlay .sheet-hd .hd-action{order:3;margin-left:auto}
/* 快速新增 sheet 的次要入口：視覺較輕（ink-3 小字＋線條 icon），不與照護記錄 qa-opt 同級 */
.qa-mini{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:44px;margin-top:2px;
  color:var(--ink-3);font-size:var(--fs-sm);border-radius:var(--r-btn);
  transition:color var(--dur) var(--ease),transform 120ms var(--ease);-webkit-user-select:none;user-select:none}
.qa-mini:active{transform:scale(.98);color:var(--ink-2)}
.qa-mini svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
/* 分類／狀態小標籤：沿用 .type-tag 基底，只換語意色（accent／紅／黃／綠 token，不造新色） */
.type-tag.wl-accent{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,var(--border-2))}
.type-tag.wl-red{color:var(--c-red-text);border-color:color-mix(in srgb,var(--c-red) 45%,var(--border-2))}
.type-tag.wl-yellow{color:var(--c-yellow-text);border-color:color-mix(in srgb,var(--c-yellow) 45%,var(--border-2))}
.type-tag.wl-green{color:var(--c-green-text);border-color:color-mix(in srgb,var(--c-green) 45%,var(--border-2))}
/* 處理備註一行預覽的「回覆」前綴（開發端回覆） */
.wl-note-tag{color:var(--accent);font-weight:700;font-size:var(--fs-cap);margin-right:4px}

/* 版本標記：設定頁底部，除錯用（與 sw CACHE 版本同步手動更新） */
.app-ver{text-align:center;font-family:var(--font-mono);font-size:var(--fs-cap);color:var(--ink-3);margin-top:var(--sp-8);padding-bottom:var(--sp-8)}

/* ── 排便紀錄 Poops（2026-08-26）：形狀圖示選擇器／顏色色票／量／判讀卡／清單卡／7 日概況 ── */
.pp-shapes{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pp-shape{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px 7px;border:1px solid var(--border-2);
  border-radius:var(--r-btn);background:var(--surface);min-height:64px;transition:transform 120ms var(--ease),background var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.pp-shape:active{transform:scale(.96)}
.pp-shape-ico{width:44px;height:30px;display:block}
.pp-shape-ico svg{width:100%;height:100%;fill:none;stroke:var(--ink-2);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:stroke var(--dur) var(--ease)}
.pp-shape-lb{font-size:var(--fs-cap);color:var(--ink-2);line-height:1.2;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1px}
.pp-shape-lb em{font-style:normal;font-family:var(--font-mono);font-weight:700;color:var(--ink-3)}
.pp-shape.on{background:var(--chip-on-bg);border-color:var(--chip-on-bg)}
.pp-shape.on .pp-shape-ico svg{stroke:var(--chip-on-ink)}
.pp-shape.on .pp-shape-lb,.pp-shape.on .pp-shape-lb em{color:var(--chip-on-ink)}
.pp-colors{display:flex;flex-wrap:wrap;gap:8px}
.pp-color{display:flex;align-items:center;gap:7px;padding:8px 12px 8px 9px;border:1px solid var(--border-2);border-radius:var(--r-chip);
  font-size:var(--fs-sm);color:var(--ink-2);min-height:40px;transition:transform 120ms var(--ease),background var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.pp-color i{width:18px;height:18px;border-radius:99px;display:block;border:1px solid rgba(0,0,0,.18);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35)}
.pp-color:active{transform:scale(.96)}
.pp-color.on{background:var(--chip-on-bg);color:var(--chip-on-ink);border-color:var(--chip-on-bg);font-weight:500}
.pp-amts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.pp-amt{display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 8px;border:1px solid var(--border-2);border-radius:var(--r-btn);
  font-size:var(--fs-sm);color:var(--ink-2);min-height:44px;transition:transform 120ms var(--ease),background var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.pp-amt svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pp-amt:active{transform:scale(.96)}
.pp-amt.on{background:var(--chip-on-bg);color:var(--chip-on-ink);border-color:var(--chip-on-bg);font-weight:500}
.pp-syms{display:flex;flex-wrap:wrap;gap:8px}
.pp-syms .chip{padding:8px 13px;min-height:40px}
/* 判讀卡：左緣 4px 狀態色條（DESIGN §4），語意色一律取既有 token */
.pp-assess{margin:var(--sp-4) 0 var(--sp-12)}
.pp-assess-empty{font-size:var(--fs-sm);color:var(--ink-3);padding:12px 14px;border:1px dashed var(--border-2);border-radius:var(--r-card);text-align:center}
.pp-assess-card{background:var(--surface-2);border:1px solid var(--border);border-left:4px solid var(--c-green);border-radius:var(--r-card);padding:12px 14px}
.pp-assess-card.lv-yellow{border-left-color:var(--c-yellow)}
.pp-assess-card.lv-red{border-left-color:var(--c-red)}
.pp-assess-hd{display:flex;align-items:center;gap:8px}
.pp-assess-hd svg{width:20px;height:20px;flex-shrink:0;fill:none;stroke:var(--c-green-text);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.lv-yellow .pp-assess-hd svg{stroke:var(--c-yellow-text)}
.lv-red .pp-assess-hd svg{stroke:var(--c-red-text)}
.pp-assess-hd b{font-size:var(--fs-body);font-weight:700;flex:1}
.pp-findings{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.pp-findings li{font-size:var(--fs-sm);color:var(--ink);padding-left:14px;position:relative;line-height:1.5}
.pp-findings li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:99px;background:var(--c-green)}
.pp-findings li.f-yellow::before{background:var(--c-yellow)}
.pp-findings li.f-red::before{background:var(--c-red)}
.pp-advice-lb{font-family:var(--font-mono);font-size:var(--fs-cap);color:var(--ink-3);letter-spacing:.5px;margin-top:10px}
.pp-advice{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.pp-advice li{font-size:var(--fs-sm);color:var(--ink-2);line-height:1.5;padding-left:12px;position:relative}
.pp-advice li::before{content:"–";position:absolute;left:0;color:var(--ink-3)}
.pp-disclaimer{font-size:var(--fs-cap);color:var(--ink-3);margin-top:10px;line-height:1.5}
.type-tag.pp-tag-green{color:var(--c-green-text);border-color:color-mix(in srgb,var(--c-green) 45%,var(--border-2))}
.type-tag.pp-tag-yellow{color:var(--c-yellow-text);border-color:color-mix(in srgb,var(--c-yellow) 45%,var(--border-2))}
.type-tag.pp-tag-red{color:var(--c-red-text);border-color:color-mix(in srgb,var(--c-red) 45%,var(--border-2));font-weight:700}
/* 清單卡 */
.pp-card{border-left:4px solid var(--c-green)}
.pp-card.lv-yellow{border-left-color:var(--c-yellow)}
.pp-card.lv-red{border-left-color:var(--c-red)}
.pp-card b{display:flex;align-items:center;gap:8px}
.pp-card-ico{width:30px;height:20px;display:inline-block;flex-shrink:0}
.pp-card-ico svg{width:100%;height:100%;fill:none;stroke:var(--ink-2);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pp-card .row2{flex-wrap:wrap}
.pp-color-tag{display:inline-flex;align-items:center;gap:5px}
.pp-color-tag i{width:10px;height:10px;border-radius:99px;display:inline-block;border:1px solid rgba(0,0,0,.18)}
/* 7 日概況：每天一顆點，當天最差級別上色 */
.pp-week{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-card);margin:0 var(--sp-20) var(--sp-12);padding:12px 14px 10px;box-shadow:var(--shadow)}
.pp-week-dots{display:flex;justify-content:space-between;gap:4px}
.pp-day{display:flex;flex-direction:column;align-items:center;gap:5px;flex:1}
.pp-day i{width:22px;height:22px;border-radius:99px;display:grid;place-items:center;border:1.5px dashed var(--border-2);font-style:normal}
.pp-day i em{font-style:normal;font-family:var(--font-mono);font-size:var(--fs-cap);color:var(--on-accent);font-weight:700}
.pp-day i.lv-green{background:var(--c-green);border-style:solid;border-color:var(--c-green)}
.pp-day i.lv-yellow{background:var(--c-yellow);border-style:solid;border-color:var(--c-yellow)}
.pp-day i.lv-red{background:var(--c-red);border-style:solid;border-color:var(--c-red)}
.pp-day i.lv-green em,.pp-day i.lv-yellow em,.pp-day i.lv-red em{color:#fff}
.pp-day span{font-family:var(--font-mono);font-size:var(--fs-cap);color:var(--ink-3)}
.pp-week-meta{font-size:var(--fs-cap);color:var(--ink-2);margin-top:8px;text-align:center}
@media (prefers-reduced-motion:reduce){.pp-shape,.pp-color,.pp-amt{transition:none}}
