/* 鼠尾草：取自心喜 logo 的灰綠色（#8B8E7B）。頂端是有顏色的橫條加 logo，和舊的 claude.ai 工具一眼就分得出來 */
:root{
  --bg:#f1f5ef; --surface:#ffffff; --sunk:#e9efe8; --line:#dde5dc; --fg:#22302a; --muted:#56665c;
  --accent:#3f6b52; --accent-ink:#ffffff; --accent-soft:#e3f0e8;
  --bar:#3f6b52; --bar-ink:#ffffff;
  --warn:#b4471f; --warn-soft:#f8e3da; --ok:#2f7a3d; --ok-soft:#dff0e1;
  --f-display:"Noto Serif TC","Songti TC",serif;
  --f-body:"Noto Sans TC","PingFang TC","Microsoft JhengHei",system-ui,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#161712; --surface:#1f211a; --sunk:#121310; --line:#34372c; --fg:#e7e8df; --muted:#a6a998;
  --accent:#b4b8a0; --accent-ink:#1a1c15; --accent-soft:#2c2f25;
  --bar:#2c2f25; --bar-ink:#e7e8df;
  --warn:#ef8a62; --warn-soft:#3d231a; --ok:#79c88a; --ok-soft:#1d3322; color-scheme:dark}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg) linear-gradient(155deg,#e8f3ec 0%,#f5f6ec 52%,#ecf1f4 100%) fixed;color:var(--fg);font-family:var(--f-body);font-size:15px;line-height:1.6}
.wrap{max-width:980px;margin:0 auto;padding:18px 16px 60px}
header.top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;padding:12px 16px;border-radius:18px;box-shadow:0 8px 24px rgba(40,80,60,.15);background:var(--bar);color:var(--bar-ink);margin-bottom:20px}
header.top a{color:inherit}
header.top button{background:transparent;color:var(--bar-ink);border-color:rgba(255,255,255,.35)}
header.top button.ghost{border-color:transparent}
header.top .chip.acc{background:rgba(255,255,255,.18);color:var(--bar-ink)}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand .logo{width:46px;height:46px;border-radius:50%;background:#fff;padding:2px;flex:none}
h1{font-family:var(--f-display);font-size:1.5rem;margin:0;letter-spacing:.04em;line-height:1.25}
h1 small{display:block;font-family:var(--f-body);font-size:.76rem;font-weight:400;opacity:.85;letter-spacing:.08em}
h2{font-family:var(--f-display);font-size:1.15rem;margin:24px 0 10px}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.muted{color:var(--muted)}
input,select,button{font:inherit;color:inherit}
input[type=text],input[type=email],input[type=url]{background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:8px 10px;width:100%;min-width:0}
button{cursor:pointer;border-radius:6px;border:1px solid var(--line);background:var(--surface);padding:7px 12px}
button:hover{border-color:var(--accent)}
button.pri{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:500}
button.ghost{background:transparent;border-color:transparent;color:var(--accent);padding-inline:6px}
button.danger{color:var(--warn)}
button.pri.danger{background:var(--warn);border-color:var(--warn);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.chip{display:inline-flex;align-items:center;font-size:.74rem;padding:1px 8px;border-radius:99px;background:var(--sunk);color:var(--muted);white-space:nowrap}
.chip.acc{background:var(--accent-soft);color:var(--accent)}
.chip.ok{background:var(--ok-soft);color:var(--ok)}
.chip.warn{background:var(--warn-soft);color:var(--warn)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:12px}
.card{background:rgba(255,255,255,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.85);box-shadow:0 8px 26px rgba(60,90,70,.07);border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:6px;min-width:0;color:inherit;text-decoration:none}
a.card:hover{border-color:var(--accent)}
.card h3{margin:0;font-size:1rem;display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.card p{margin:0;font-size:.85rem;color:var(--muted)}
.card.soon{opacity:.7}
.empty{padding:24px;text-align:center;color:var(--muted);background:var(--surface);border:1px dashed var(--line);border-radius:10px}
.center{max-width:420px;margin:40px auto;text-align:center;gap:14px}
.banner{padding:10px 14px;border-radius:8px;background:var(--accent-soft);color:var(--accent);font-size:.9rem}
.banner.warn{background:var(--warn-soft);color:var(--warn)}
.tbl{overflow-x:auto;border:1px solid var(--line);border-radius:8px;background:var(--surface)}
table{border-collapse:collapse;width:100%;font-size:.88rem}
th,td{padding:7px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
th{font-size:.74rem;color:var(--muted);font-weight:500;background:var(--sunk);white-space:nowrap}
tr:last-child td{border-bottom:none}
.form{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
label.f{display:flex;flex-direction:column;gap:4px;font-size:.8rem;color:var(--muted)}
.checks{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.9rem}
.checks label{display:inline-flex;gap:4px;align-items:center}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(20px + env(safe-area-inset-bottom,0px));background:var(--fg);color:var(--bg);padding:8px 16px;border-radius:8px;font-size:.9rem;z-index:9;max-width:90vw}
/* 回主選單：每個功能頁頂端最左邊一顆白色大按鈕 */
.brand .home{flex:none;display:inline-flex;align-items:center;min-height:40px;padding:6px 14px;border-radius:999px;background:var(--bar-ink);color:var(--bar)!important;font-weight:700;font-size:.95rem;text-decoration:none;white-space:nowrap;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.brand .home:hover{opacity:.9}
@media (max-width:560px){.brand .logo{display:none}}
/* 選到的變實色＋打勾，同一組沒選到的變淡；分頁也一樣 */
body nav.tabs button{transition:background .15s,color .15s,opacity .15s}
body nav.tabs button[aria-selected=true]{background:var(--accent);color:var(--accent-ink);font-weight:700;box-shadow:none;opacity:1}
body nav.tabs button[aria-selected=false]{opacity:.7}
body .seg button{transition:background .15s,opacity .15s}
body .seg button[aria-pressed=true]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:700}
body .seg button[aria-pressed=true]::before{content:"✓ "}
body .seg:has(button[aria-pressed=true]) button[aria-pressed=false]{opacity:.5}
@media (prefers-reduced-motion:reduce){body nav.tabs button,body .seg button{transition:none}}
/* 心喜大記事（首頁輪播橫條） */
.notice{display:flex;align-items:center;gap:10px;min-height:48px;padding:6px 8px 6px 16px;margin-bottom:16px;border-radius:14px;background:var(--accent);color:var(--accent-ink);box-shadow:0 6px 18px rgba(40,60,40,.12)}
.notice.pin{background:#4a5a3c}
.notice .ntag{font-size:.78rem;font-weight:700;opacity:.85;white-space:nowrap}
.notice .ntext{flex:1;min-width:0;font-size:.98rem;line-height:1.5}
.notice .ncount{font-size:.78rem;opacity:.8;white-space:nowrap}
.notice button{border:none;border-radius:999px;cursor:pointer;font:inherit}
.notice .nnext{width:34px;height:34px;background:rgba(255,255,255,.18);color:inherit;font-size:1.2rem;line-height:1}
.notice .nack{background:#fff;color:var(--accent);font-weight:700;padding:6px 14px;white-space:nowrap}
.notice .nok{font-size:.8rem;opacity:.85;white-space:nowrap}
@media (max-width:560px){.notice{flex-wrap:wrap}.notice .ntext{flex-basis:calc(100% - 40px)}}
@media (prefers-color-scheme: dark){body{background:var(--bg)}.card{background:rgba(31,33,26,.78);border-color:var(--line);box-shadow:none}}

/* ---------- 首頁（新設計）：左側功能列＋今天；手機底部四個按鈕 ---------- */
body.home-v2 header.top{display:none}
body.home-v2 .wrap{max-width:1320px;padding:20px 20px 100px}
.h-shell{display:flex;gap:24px;align-items:flex-start}
.h-side{width:210px;flex:none;position:sticky;top:20px;display:flex;flex-direction:column;gap:2px;padding:18px 12px;border-radius:24px;background:rgba(255,255,255,.58);border:1px solid rgba(255,255,255,.85);box-shadow:0 10px 30px rgba(60,90,70,.08);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.h-brand{display:flex;align-items:center;gap:10px;padding:0 6px 12px;color:var(--fg);text-decoration:none;font-family:var(--f-display);font-weight:700;font-size:1.05rem}
.h-brand img{width:42px;height:42px;border-radius:50%;background:#fff;box-shadow:0 3px 10px rgba(60,90,70,.12)}
.h-gl{display:flex;align-items:center;gap:5px;font-size:.75rem;color:var(--muted);padding:12px 10px 3px}
.h-nav{display:flex;align-items:center;gap:11px;min-height:42px;padding:0 12px;border-radius:13px;color:#2f4a3c;text-decoration:none;font-size:.95rem}
.h-nav:hover{background:rgba(63,107,82,.08)}
.h-nav.on{background:var(--accent);color:#fff;font-weight:500}
.h-side-foot{margin-top:14px;padding:10px 10px 0;border-top:1px solid rgba(63,107,82,.12);font-size:.82rem;color:var(--muted)}
.h-side-foot a{color:var(--muted)}
.h-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:18px}
.h-head{display:flex;align-items:center;justify-content:space-between;padding:4px 2px 0}
.h-date{font-size:.92rem;color:var(--muted)}
.h-hello{font-size:2rem;margin:2px 0 0;letter-spacing:.02em}
.h-avatar{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,#9fd3b5,#5e9476);color:#fff;display:grid;place-items:center;font-weight:700;text-decoration:none;flex:none}
.h-main .notice{margin-bottom:0}
.h-main #profileNudge .banner{margin-bottom:0!important}
.h-card{border-radius:24px;padding:20px 22px;background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.85);box-shadow:0 12px 32px rgba(60,90,70,.08);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.h-ct{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.h-ct h2{margin:0;font-family:var(--f-body);font-size:1.08rem;font-weight:700}
.h-big{font-size:1.9rem;font-weight:700;color:var(--accent);line-height:1.1}
.h-big small{font-size:.95rem;color:var(--muted);font-weight:400}
.h-muted{color:var(--muted);font-size:.92rem;margin:0}
.h-row{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,1fr);gap:18px}
.h-sess{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
.h-s{display:flex;flex-direction:column;gap:5px;padding:12px;border-radius:18px;background:rgba(255,255,255,.8);color:var(--fg);text-decoration:none}
.h-s b{font-size:1.05rem}
.h-st,.h-ss{font-size:.8rem;color:var(--muted)}
.h-s.done{background:rgba(226,242,232,.95)}.h-s.done .h-ss{color:#2f6a47}
.h-s.todo{background:#fff;box-shadow:0 0 0 2px #e2a26a inset}.h-s.todo .h-ss{color:#9a5216}
.h-s.off{opacity:.55}
.h-ring{display:flex;align-items:center;gap:16px}
.h-cheer{font-size:.9rem;color:var(--accent)}
.h-todos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.h-todo{display:flex;align-items:center;gap:14px;padding:18px 20px;border-radius:22px;background:rgba(255,255,255,.62);border:1px solid rgba(255,255,255,.85);color:var(--accent);text-decoration:none;box-shadow:0 10px 26px rgba(60,90,70,.07);backdrop-filter:blur(18px)}
.h-todo span{display:flex;flex-direction:column;color:var(--muted);font-size:.92rem}
.h-todo b{font-size:1.8rem;line-height:1.1;color:var(--fg)}
.h-todo.warm{background:rgba(255,246,236,.82);color:#a65a1c}.h-todo.warm span{color:#6b4a2e}
.h-todo.cool{color:#36606e}
.h-edit{border:1px solid rgba(63,107,82,.25);background:rgba(255,255,255,.7);color:var(--accent);border-radius:999px;padding:6px 14px;font-size:.88rem}
.h-favgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:14px 8px}
.h-fav{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;color:var(--fg);text-decoration:none;font-size:.88rem;text-align:center;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.h-ic{width:58px;height:58px;border-radius:19px;background:#fff;color:var(--accent);display:grid;place-items:center;box-shadow:0 6px 16px rgba(60,90,70,.09)}
.h-fav.add .h-ic{background:transparent;box-shadow:none;border:2px dashed rgba(63,107,82,.35)}
.h-fav.add{color:var(--muted)}
.editing .h-fav{touch-action:none;cursor:grab;animation:h-wig .28s ease-in-out infinite alternate}
.editing .h-fav:nth-child(2n){animation-delay:.14s}
.editing .h-fav.drag{animation:none;opacity:.85;transform:scale(1.08);z-index:2}
@keyframes h-wig{from{transform:rotate(-2deg)}to{transform:rotate(2deg)}}
@media (prefers-reduced-motion:reduce){.editing .h-fav{animation:none}}
.h-rm{position:absolute;top:-6px;left:50%;margin-left:-38px;width:24px;height:24px;border-radius:50%;border:none;background:#7d8a83;color:#fff;font-size:15px;line-height:1;padding:0;cursor:pointer}
.h-addlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.h-addit{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 14px;border-radius:14px;border:1px solid rgba(255,255,255,.85);background:rgba(255,255,255,.7);color:var(--fg);text-align:left}
.h-addit span{flex:1}.h-addit b{width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center}
.h-addit svg{color:var(--accent)}
.h-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 4px;color:var(--muted)}
.h-glad{font-family:var(--f-display);font-style:italic;color:#5e7a68}
.h-tab{display:none}
.h-sheet{position:fixed;inset:0;background:rgba(30,45,35,.28);z-index:20;display:flex;align-items:flex-end;justify-content:center}
.h-sheet-in{width:100%;max-width:560px;max-height:82vh;overflow:auto;border-radius:26px 26px 0 0;background:rgba(248,250,246,.97);padding:20px 18px calc(24px + env(safe-area-inset-bottom,0px))}
.h-sheet-in .h-favgrid{margin-bottom:6px}
/* 標題列（含關閉）固定在視窗上方，內容往下滑也看得到；後面的首頁鎖住不跟著捲 */
.h-sheet,.h-sheet-in{overscroll-behavior:contain}
#hSheet .h-sheet-in>.h-ct,#hRoom .h-sheet-in>.h-ct{position:sticky;top:-20px;z-index:3;margin:-20px -18px 12px;padding:16px 18px 12px;background:inherit;border-radius:26px 26px 0 0}
.h-x{min-height:42px;padding:8px 18px;font-size:.95rem;font-weight:600;flex:none}
body.h-lock{overflow:hidden}
@media (max-width:900px){
  .h-side{display:none}
  body.home-v2 .wrap{padding:16px 14px 110px}
  .h-hello{font-size:1.6rem}
  .h-row{grid-template-columns:1fr}
  .h-todos{gap:10px}
  .h-todo{flex-direction:column;align-items:flex-start;gap:6px;padding:14px 12px}
  .h-todo b{font-size:1.5rem}
  .h-sess{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px}
  .h-s{flex:none;width:96px;scroll-snap-align:start}
  .h-favgrid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .h-tab{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));position:fixed;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));height:68px;border-radius:24px;background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.9);box-shadow:0 12px 30px rgba(60,90,70,.16);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);z-index:10}
  .h-tab a,.h-tab button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:.75rem;color:var(--muted);text-decoration:none;border:none;background:none;padding:0}
  .h-tab .on{color:var(--accent);font-weight:700}
  .h-foot{flex-direction:column;align-items:flex-start}
}
@media (prefers-color-scheme: dark){
  .h-side,.h-card,.h-todo,.h-tab{background:rgba(31,33,26,.82);border-color:var(--line)}
  .h-s,.h-ic,.h-addit{background:rgba(255,255,255,.06)}
  .h-nav{color:var(--fg)}.h-todo b,.h-s b{color:var(--fg)}
  .h-sheet-in{background:rgba(22,23,18,.97)}
}

/* 首頁：個案卡片選空間 */
button.h-s{border:none;text-align:left;font:inherit;cursor:pointer}
.h-room{margin-top:2px;font-size:.75rem;color:var(--accent);border:1px dashed rgba(63,107,82,.35);border-radius:999px;padding:1px 8px;align-self:flex-start}
.h-room.set{border-style:solid;background:var(--accent-soft);font-weight:700}
.h-lens{display:flex;gap:6px;margin-bottom:10px}
.h-lens button{border-radius:999px;padding:6px 14px}
.h-lens button[aria-pressed=true]{background:var(--accent);color:#fff;border-color:var(--accent)}
.h-rooms{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.h-rm-opt{display:flex;flex-direction:column;gap:3px;align-items:flex-start;text-align:left;padding:12px;border-radius:14px;border:1px solid var(--line);background:#fff;min-height:64px}
.h-rm-opt span{font-size:.8rem;color:var(--ok)}
.h-rm-opt.busy span{color:#9a5216}
.h-rm-opt.busy{background:#fff8f0}
.h-rm-opt[aria-pressed=true]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent) inset}
.h-roomday{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.h-roomday>div{display:flex;flex-direction:column;gap:4px;padding:10px;border-radius:12px;background:rgba(255,255,255,.75);font-size:.85rem}
.h-roomday span{font-size:.8rem}
.h-roomday span.me{color:var(--accent);font-weight:700}
@media (prefers-color-scheme: dark){.h-rm-opt,.h-roomday>div{background:rgba(255,255,255,.06)}.h-rm-opt.busy{background:rgba(226,162,106,.12)}}

/* ---------- 新設計：各功能頁共用的頂列與元件 ---------- */
header.top{background:rgba(255,255,255,.62);color:var(--fg);border:1px solid rgba(255,255,255,.85);box-shadow:0 10px 28px rgba(60,90,70,.08);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
header.top h1{color:var(--fg)}
header.top h1 small{color:var(--muted);opacity:1}
header.top button{background:rgba(255,255,255,.75);color:var(--accent);border-color:rgba(63,107,82,.25)}
header.top .chip.acc{background:var(--accent-soft);color:var(--accent)}
header.top label.f{color:var(--muted)}
.brand .home{background:var(--accent);color:#fff!important;box-shadow:0 4px 12px rgba(63,107,82,.25)}
.brand .logo{box-shadow:0 3px 10px rgba(60,90,70,.12)}
button{border-radius:10px}
input[type=text],input[type=email],input[type=url],input[type=tel],input[type=date],input[type=number],input[type=month],select,textarea{border-radius:10px}
.tbl{border-radius:14px;background:rgba(255,255,255,.75);border-color:rgba(255,255,255,.85)}
th{background:rgba(233,239,232,.85)}
.banner{border-radius:12px}
.empty{border-radius:16px;background:rgba(255,255,255,.6)}
.confirm{border-radius:14px}
@media (prefers-color-scheme: dark){header.top{background:rgba(31,33,26,.82);border-color:var(--line)}header.top button{background:rgba(255,255,255,.06);color:var(--fg)}.tbl{background:rgba(31,33,26,.8)}th{background:rgba(255,255,255,.04)}.empty{background:rgba(31,33,26,.6)}}

/* ---------- 水彩裝飾：素材來自 Canva「心喜平台裝飾素材」，圖檔在 /img/deco/ ---------- */
:root{--fg:#244234;--paper:#f7f3e8}
body{background:var(--paper) linear-gradient(160deg,#eef6ef 0%,#f7f3e8 48%,#f3f1e6 100%) fixed}
/* 右上角水彩葉、底部藤蔓：固定在背景，不擋操作 */
body::before,body::after{content:"";position:fixed;pointer-events:none;z-index:0;background-repeat:no-repeat}
body::before{top:-30px;right:-40px;width:min(300px,42vw);aspect-ratio:460/736;background-image:url(/img/deco/leaves.webp);background-size:contain;opacity:.6}
body::after{left:0;right:0;bottom:0;height:46px;background-image:url(/img/deco/vine.webp);background-size:auto 46px;background-repeat:repeat-x;opacity:.75}
.wrap{position:relative;z-index:1}
h1,h2,.h-hello{color:var(--fg)}
/* 功能頁頂列右邊一枝金色尤加利 */
header.top{position:relative;overflow:hidden}
header.top::after{content:"";position:absolute;right:-24px;top:-18px;width:190px;height:116px;background:url(/img/deco/goldleaf.webp) no-repeat center/contain;opacity:.45;pointer-events:none}
header.top>*{position:relative;z-index:1}
/* 首頁：今天的個案卡片角落尤加利、大記事白花、薯條 */
.h-card{position:relative}
.h-ring::after{content:"";position:absolute;right:-10px;top:-18px;width:110px;height:112px;background:url(/img/deco/eucalyptus.webp) no-repeat center/contain;pointer-events:none;opacity:.9}
.h-side::after{content:"";display:block;height:90px;margin-top:10px;background:url(/img/deco/succulent.webp) no-repeat center/contain;opacity:.85}
.notice{position:relative;overflow:hidden}
.notice::before{content:"";position:absolute;left:-14px;bottom:-14px;width:84px;height:48px;background:url(/img/deco/flowers.webp) no-repeat center/contain;opacity:.35;pointer-events:none}
.notice>*{position:relative}
.h-glad-img{display:inline-block;width:min(320px,62vw);height:auto;vertical-align:middle}
.mascot{display:block;width:72px;height:auto;flex:none}
.h-foot .mascot{width:64px}
.h-empty{display:flex;align-items:center;gap:12px}
.card.center::before{content:"";display:block;height:96px;margin:-4px auto 0;width:170px;background:url(/img/deco/flowers.webp) no-repeat center/contain}
/* 各頁對應簡報的素材 */
.line-card{position:relative;padding-right:110px}
.line-card::after{content:"";position:absolute;right:10px;bottom:6px;width:92px;height:100px;background:url(/img/deco/shutiao2.webp) no-repeat center bottom/contain;pointer-events:none}
#hRoom .h-sheet-in{position:relative}
#hRoom .h-sheet-in::after{content:"";position:absolute;right:12px;top:52px;width:86px;height:78px;background:url(/img/deco/succulent.webp) no-repeat center/contain;opacity:.55;pointer-events:none}
#hRoom .h-sheet-in>*{position:relative;z-index:1}
.row:has(>#q){position:relative;padding-left:2px}
.row:has(>#q)::before{content:"";position:absolute;left:-14px;top:-16px;width:56px;height:55px;background:url(/img/deco/corner.webp) no-repeat center/contain;opacity:.8;pointer-events:none;z-index:2}
.pg-notices header.top::after{background-image:url(/img/deco/flowers.webp);width:170px;height:96px;top:-6px;right:-10px;opacity:.6}
.pg-guide header.top::after{background-image:url(/img/deco/balloon.webp);width:60px;height:135px;top:-8px;right:18px;opacity:.75}
.pg-parent header.top::after{background-image:url(/img/deco/eucalyptus.webp);width:110px;height:112px;top:-14px;right:-6px;opacity:.85}
/* 頂列右邊常有姓名、按鈕：裝飾往中間放，手機上收起來 */
header.top::after{right:150px}
.pg-notices header.top::after{right:130px}
.pg-guide header.top::after{right:150px}
.pg-parent header.top::after{right:-6px}
@media (max-width:700px){header.top::after{display:none}.pg-parent header.top::after{display:block}}
@media (max-width:560px){.line-card{padding-right:14px;padding-bottom:70px}.line-card::after{width:64px;height:70px}}
@media (prefers-color-scheme: dark){.line-card::after{opacity:.6}}
@media (max-width:900px){body::after{height:34px;background-size:auto 34px}body::before{opacity:.45}}
@media (prefers-color-scheme: dark){body{background:var(--bg)}body::before{opacity:.18}body::after{opacity:.3}header.top::after,.h-ring::after,.h-side::after{opacity:.35}}
@media print{body::before,body::after,header.top::after{display:none}}

/* 選空間：需要行政人員幫忙布置 */
.h-help{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:.95rem}
.h-help input{width:18px;height:18px;accent-color:var(--accent)}
#hHelpNote{margin-top:8px}
.h-helptag{font-style:normal;font-size:.72rem;margin-left:4px;padding:0 6px;border-radius:999px;background:#fff1e3;color:#9a5216}
.h-helplist{display:flex;flex-direction:column;gap:8px}
.h-helpit{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.8)}
.h-helpit>div{display:flex;flex-direction:column;gap:2px;min-width:0}
@media (prefers-color-scheme: dark){.h-helpit{background:rgba(255,255,255,.06)}.h-helptag{background:rgba(226,162,106,.15)}}

/* 載入中：薯條（所內的天竺鼠）往前跑過來——小碎步上下彈、左右搖擺，從遠處越跑越近，跑到前面淡出再重來
   （loader.js 幫「…中…」的提示加上 is-loading）。::before 是薯條、::after 是地上的影子；
   遠近用 scale、小碎步用 translate／rotate，兩組動畫各管各的，可以同時跑 */
.empty.is-loading{display:flex;flex-direction:column;align-items:center;gap:0;padding:40px 12px 36px;color:var(--muted)}
.empty.is-loading::before{content:"";order:-2;width:100px;height:106px;background:url(/img/fries.webp) center bottom/contain no-repeat;transform-origin:50% 100%;
  animation:xx-come 3s cubic-bezier(.4,0,.7,1) infinite,xx-trot .3s ease-in-out infinite alternate}
.empty.is-loading::after{content:"";order:-1;width:76px;height:10px;margin:2px 0 14px;border-radius:50%;background:rgba(63,107,82,.2);
  animation:xx-come 3s cubic-bezier(.4,0,.7,1) infinite,xx-trot-sh .3s ease-in-out infinite alternate}
@keyframes xx-come{0%{scale:.45;opacity:0}12%{opacity:1}82%{scale:1.05;opacity:1}100%{scale:1.15;opacity:0}}
@keyframes xx-trot{from{translate:0 0;rotate:-5deg}to{translate:0 -9px;rotate:5deg}}
@keyframes xx-trot-sh{from{transform:scaleX(1)}to{transform:scaleX(.8)}}
@media (prefers-reduced-motion: reduce){.empty.is-loading::before,.empty.is-loading::after{animation:none}}

/* 個案病歷資料庫上方的分頁：個案列表／新個案（兩個頁面共用） */
.toptabs{display:flex;gap:4px;background:rgba(255,255,255,.6);border:1px solid var(--line);border-radius:999px;padding:4px;margin:0 0 14px;width:max-content;max-width:100%;overflow-x:auto}
.toptabs a{padding:7px 16px;border-radius:999px;color:var(--muted);text-decoration:none;font-weight:500;white-space:nowrap}
.toptabs a[aria-current=page]{background:var(--accent);color:var(--accent-ink)}
.toptabs .n{display:inline-block;min-width:1.4em;margin-left:4px;padding:0 6px;border-radius:999px;background:var(--warn);color:#fff;font-size:.75rem;text-align:center}
@media (prefers-color-scheme: dark){.toptabs{background:rgba(255,255,255,.06)}}

/* 首頁「今天的個案」：可以翻日期；個案一字排開左右滑，不會因為人多變成好幾排 */
.h-daynav{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.h-daynav h2{margin:0}
.h-dd{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.8);color:var(--accent);font-size:1.2rem;line-height:1;padding:0;cursor:pointer}
.h-cal{position:relative;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.8);color:var(--accent);cursor:pointer}
.h-cal input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.h-cal input::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:100%;height:100%;cursor:pointer}
.h-today .h-sess{display:flex;overflow-x:auto;scroll-snap-type:x proximity;gap:10px;padding:2px 2px 8px;scrollbar-width:thin;-webkit-mask-image:linear-gradient(90deg,#000 92%,transparent);mask-image:linear-gradient(90deg,#000 92%,transparent)}
.h-today .h-s{flex:none;width:118px;scroll-snap-align:start}
.h-today .h-empty{flex:1}
@media (prefers-color-scheme: dark){.h-dd,.h-cal{background:rgba(255,255,255,.06)}}

/* 首頁個案卡片：紀錄已完成的用深綠底白字，一眼和還沒寫、還沒上課的分開（放在最後，蓋過前面的淺綠） */
.h-today .h-s.done{background:linear-gradient(160deg,#5f9a75,#3f6b52);color:#fff;box-shadow:0 4px 12px rgba(63,107,82,.25)}
.h-today .h-s.done b{color:#fff}
.h-today .h-s.done .h-st{color:rgba(255,255,255,.8)}
.h-today .h-s.done .h-ss{color:#e6f4ea;font-weight:700}
.h-today .h-s.done .h-room{color:#fff;border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.12)}
.h-today .h-s.later{background:rgba(255,255,255,.92);box-shadow:0 0 0 1px var(--line) inset}

/* 沒有預約：薯條坐著說話，只有文字，沒有底色 */
.h-idle{display:flex;align-items:center;gap:14px;padding:6px 4px}
.h-idle img{height:72px;width:auto;flex:none}
.h-idle div{display:flex;flex-direction:column;gap:4px}
.h-idle b{font-size:1rem;color:var(--fg)}
.h-idle span{font-size:.9rem;color:var(--muted)}
/* 大字（所長 10/27：整個平台字和按鈕放大，手指比較好按）。
   收款與帳務、TinyBook 核對、個案資料庫表格資料多，維持原本大小：在那幾頁的 body 加 class="compact" */
body:not(.compact){font-size:17px}
body:not(.compact) button:not(.ghost){min-height:44px;padding:9px 14px}
body:not(.compact) input[type=text],body:not(.compact) input[type=email],body:not(.compact) input[type=url],body:not(.compact) input[type=tel],body:not(.compact) input[type=number],body:not(.compact) input[type=date],body:not(.compact) input[type=time],body:not(.compact) select,body:not(.compact) textarea{font-size:17px;min-height:46px;padding:10px 12px}
body:not(.compact) textarea{min-height:0}
body:not(.compact) input[type=checkbox],body:not(.compact) input[type=radio]{width:20px;height:20px;accent-color:var(--accent);vertical-align:middle}
body:not(.compact) .chip{font-size:.8rem;padding:2px 9px}
.ok-t{color:var(--ok)}.warn-t{color:var(--warn)}
/* 首頁：功能旁邊「還沒完成」的紅色數字、主動跳出的提醒卡（所長 10/27） */
.h-nav{position:relative}
.h-badge{margin-left:auto;min-width:22px;height:22px;padding:0 7px;border-radius:999px;background:#c2410c;color:#fff;font-style:normal;font-size:.78rem;font-weight:700;display:inline-flex;align-items:center;justify-content:center}
.h-ic{position:relative}
.h-ic .h-badge{position:absolute;top:-6px;right:-8px;margin:0}
.h-alert{border:2px solid rgba(63,107,82,.35)}
.h-alert.hot{border-color:#c2410c;background:rgba(255,244,237,.85)}
.h-late{margin-left:8px;font-size:.78rem;color:#fff;background:#c2410c;border-radius:999px;padding:1px 8px;font-weight:500}
@media (prefers-color-scheme: dark){.h-alert.hot{background:rgba(80,30,15,.55)}}

/* 首頁青壯名額（app.js qzStrip） */
.qz-strip{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0 0 14px;padding:14px 18px;border-radius:18px;background:#fff8ec;border:2px solid #e8c9a0;color:var(--fg);text-decoration:none;box-shadow:0 8px 24px rgba(120,90,40,.08)}
.qz-strip:hover{border-color:#d9a65f}
.qz-t{font-weight:700;font-size:1.1rem;display:flex;flex-direction:column;line-height:1.2}
.qz-t small{font-weight:400;font-size:.78rem;color:var(--muted)}
.qz-gs{display:flex;flex-wrap:wrap;gap:8px;flex:1}
.qz-g{padding:6px 12px;border-radius:99px;background:#fff;border:1px solid #ecd9bd;white-space:nowrap}
.qz-g em{font-style:normal;font-weight:800;font-size:1.25rem;color:#3f6b52}
.qz-g small{color:var(--muted)}
.qz-g.low em{color:#c0712b}
.qz-g.zero{opacity:.55}
.qz-g.zero em{color:#a33}
.qz-go{font-weight:600;color:#9a6420;white-space:nowrap}

/* 首頁月曆（心喜行事曆） */
.h-cm{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.h-cm h2{margin-right:8px}
.h-cm b{font-size:.95rem;min-width:6.5em;text-align:center}
.h-xcal{padding:14px 18px}.h-xcal .h-ct{margin-bottom:8px}
.h-cm .h-dd{min-height:30px!important;width:30px;padding:0!important}
.h-cg{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;touch-action:pan-y}
.h-cw{font-size:.74rem;color:var(--muted);text-align:center;padding:0}
.h-cc{display:flex;flex-direction:column;align-items:stretch;gap:2px;min-height:74px;min-width:0;padding:4px 5px;text-align:left;font:inherit;font-size:.76rem;color:inherit;background:rgba(255,255,255,.55);border:1px solid rgba(63,107,82,.12);border-radius:10px;cursor:pointer;overflow:hidden}
.h-cc:hover{border-color:rgba(63,107,82,.35)}
.h-cc .n{font-weight:700;font-size:.85rem}
.h-cc.out{opacity:.4}
.h-cc.tdy{box-shadow:0 0 0 2px var(--accent) inset}
.h-cc.sel{background:var(--accent-soft,#e3eee6)}
.h-ce{display:block;padding:1px 4px;border-radius:4px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.h-cmore{color:var(--muted);font-size:.72rem}
.h-cdots{display:none;gap:3px}
.h-cdots i,.h-chint i{display:inline-block;width:8px;height:8px;border-radius:50%}
.h-chint{margin-top:6px;font-size:.78rem}.h-chint i{margin:0 3px 0 0;vertical-align:middle}
.k-meeting{background:#3f6b52}.k-major{background:#c0573e}.k-other{background:#7a7f8c}
.h-csel{margin-top:10px;display:grid;gap:6px}
@media (max-width:560px){.h-cc{min-height:46px;align-items:center;padding:4px 2px}.h-ce,.h-cmore{display:none}.h-cdots{display:flex}}
body .h-cg button.h-cc{min-height:44px;padding:2px 5px;gap:1px;font-size:.7rem;border-radius:8px}
.h-cc .n{font-size:.78rem}
@media (max-width:560px){body .h-cg button.h-cc{min-height:38px;padding:3px 2px}}
/* 所長 11/3：月曆寬度約一半 */
.h-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}.h-pair>.h-card{margin:0}
@media (max-width:900px){.h-pair{grid-template-columns:1fr}}
@media (min-width:701px){.h-xcal{width:50%;min-width:400px}.h-pair .h-xcal{width:auto;min-width:0}.h-xcal .h-ce{font-size:.64rem;padding:0 3px}body .h-cg button.h-cc{min-height:40px;padding:2px 3px}}
.h-cact{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.h-col{display:grid;gap:18px;align-content:start}.h-col>.h-card{margin:0}