/* 肉球郵局（設計規格 v0.3：粉白＋黑貓郵票）
   顏色、字級、間距都照設計規格；不用漸層、不用光暈、陰影只有明信片一種。
   CSP 是 style-src 'self'：HTML 裡不能有 style 屬性或 <style>，所有樣式都在這個檔案。 */
:root{
  /* 表面：粉白 */
  --bg:#F8EFEF; --paper:#FFFFFF; --blush:#F2DCE0; --line:#EAD8DB;
  /* 文字 */
  --ink:#2A2224; --ink-2:#6B5A5E; --ink-3:#C9B4B8;
  /* 角色色：玫瑰＝你可以按；朱＝蓋了章。朱色按鈕只給「會讓對方 +1 點」的蓋章（v0.3 第 1 節） */
  --rose:#9A3F55; --rose-2:#82334A; --rose-soft:#F3E1E4;
  --stamp:#C2412B; --stamp-ink:#A8361F;
  /* 郵票 */
  --stamp-paper:#FFFDFC; --cat:#1B1718; --cat-eye:#E8C35A;
  --st-pink:#F3C9D0; --st-butter:#F1DBA2; --st-mist:#D3E0E6;
  /* 字 */
  --sans:-apple-system,"PingFang TC","Microsoft JhengHei",sans-serif;
  --serif:ui-serif,"New York",Georgia,serif;
  /* 形 */
  --r-paper:3px; --r-ctl:12px; --r-thumb:2px;
  --ease:cubic-bezier(.22,1,.36,1);
  --shadow:0 1px 1px rgba(31,42,37,.06),0 3px 8px rgba(31,42,37,.07);
  /* 安全區：正式版就是 env()；開發模式 ?safe=1 會把它們覆寫成 iPhone 15 Pro 的值來看效果 */
  --sat:env(safe-area-inset-top,0px); --sab:env(safe-area-inset-bottom,0px);
  --top:#9A3F55;   /* 頂部安全區色條：預設深玫瑰；app.js setTheme() 會用 CSSOM 改成當頁顏色 */
  color-scheme:light;
}
html.sim-safe{--sat:59px;--sab:34px}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;height:100%;background:var(--bg)}
body{height:100%;font-family:var(--sans);color:var(--ink);background:var(--bg);font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overflow:hidden;
  touch-action:manipulation;word-break:keep-all;overflow-wrap:anywhere}
::selection{background:var(--rose-soft);color:var(--ink)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;-webkit-appearance:none;appearance:none}
input,textarea{font:inherit;color:var(--ink);caret-color:var(--rose);accent-color:var(--rose)}
:focus-visible{outline:2px solid var(--rose);outline-offset:2px}
:focus:not(:focus-visible){outline:none}
.num{font-variant-numeric:tabular-nums}
svg{display:block}
.defs{position:absolute;width:0;height:0;overflow:hidden}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}
@media (pointer:coarse){.scroll,.auth{scrollbar-width:none}.scroll::-webkit-scrollbar,.auth::-webkit-scrollbar{display:none}}

/* 被別的網站用 iframe 嵌入時什麼都不顯示（app.js 確認是最上層才加 .top） */
html:not(.top) #app, html:not(.top) #toast{display:none}
.noscript{padding:80px 20px;text-align:center;color:var(--ink-2)}

/* ---------- 版面殼 ---------- */
.app{position:fixed;inset:0;max-width:560px;margin:0 auto;display:flex;flex-direction:column;background:var(--bg)}
/* iPhone 主畫面 App：position:fixed 的高度在 standalone 橫放時會少一截，改用螢幕實際高度（見 app.js fixAppHeight） */
html.ios-app, html.ios-app body{height:var(--app-h)}
html.ios-app body{position:relative}
html.ios-app .app{position:absolute;bottom:auto;height:var(--app-h)}
/* 狀態列是 black-translucent（白字、網頁蓋到最頂）：安全區墊一條色條，內容從它底下捲過去 */
.app::before{content:"";position:absolute;left:0;right:0;top:0;height:var(--sat);background:var(--top);z-index:20;pointer-events:none}
.screen{flex:1;min-height:0;display:flex;flex-direction:column}
.scroll{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:0 20px 28px}

/* ---------- 共用元件 ---------- */
h1,h2,h3{font-weight:600;letter-spacing:0;text-wrap:balance}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:28px 0 12px}
.sec-head h2{font-size:20px;line-height:1.3;min-width:0}
.sec-head .sub{font-size:13px;color:var(--ink-2);flex:none}
.btn,.btn:any-link{text-decoration:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:44px;padding:0 18px;
  border-radius:var(--r-ctl);font-size:16px;font-weight:600;transition:background-color .15s,opacity .15s;white-space:nowrap}
.btn svg{width:20px;height:20px;flex:none}
.btn.primary{background:var(--rose);color:#fff}
.btn.primary:active{background:var(--rose-2)}
.btn.stamp{background:var(--stamp);color:#fff}
.btn.stamp:active{background:#A8361F}
.btn.ghost{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.btn.ghost:active{background:var(--rose-soft)}
.btn.out{background:var(--ink);color:#fff}
.btn.out:active{background:#000}
.btn.block{display:flex;width:100%;height:50px;font-size:17px}
.btn.sm{height:36px;padding:0 14px;font-size:15px}
.btn:disabled{opacity:.45;cursor:default}
.btn[aria-busy="true"]{opacity:.7;cursor:progress}
.link{color:var(--rose);font-size:15px;font-weight:600;min-height:44px;display:inline-flex;align-items:center}
.hint{font-size:13px;color:var(--ink-2);line-height:1.6;margin-top:10px;text-wrap:pretty}
.hint.flush{margin-top:0}
/* 句尾一小段不拆行（iOS 的 text-wrap:pretty 不一定生效，避免「。」單獨換行） */
.nw{white-space:nowrap}
.err{font-size:14px;color:var(--stamp-ink);font-weight:600;margin-top:10px;line-height:1.5}
.paper{background:var(--paper);border-radius:var(--r-paper);box-shadow:var(--shadow)}
/* 頁頭的重新整理：圖示 18px、觸控 44×44，往右推讓圖示貼齊 20px 頁邊 */
.head-r{display:flex;align-items:center;flex:none}
.icon-btn{width:44px;height:44px;margin:-12px -13px -12px -4px;display:inline-flex;align-items:center;justify-content:center;color:inherit;opacity:.72}
.icon-btn svg{width:18px;height:18px}
.icon-btn:active{opacity:1}
.icon-btn[aria-busy="true"] svg{animation:spin .8s linear infinite}
@keyframes spin{to{rotate:-360deg}}

/* 郵票：四邊齒孔用 mask，尺寸取 8 的倍數 */
.stamp-wrap{display:block;flex:none;filter:drop-shadow(0 1px 1.5px rgba(42,34,36,.22));position:relative}
.stamp-x{display:block;width:56px;height:64px;padding:5px;background:var(--stamp-paper);flex:none;position:relative;
  -webkit-mask:radial-gradient(circle 2.6px at 50% 50%,#0000 96%,#000) -4px -4px/8px 8px repeat,
               linear-gradient(#000 0 0) 4px 4px/48px 56px no-repeat;
          mask:radial-gradient(circle 2.6px at 50% 50%,#0000 96%,#000) -4px -4px/8px 8px repeat,
               linear-gradient(#000 0 0) 4px 4px/48px 56px no-repeat}
.stamp-x .art{width:100%;height:100%;position:relative;display:flex;align-items:flex-end;justify-content:center}
.stamp-x .art svg{width:40px;height:34px;margin-bottom:5px;color:var(--cat)}
.stamp-x .val{position:absolute;left:4px;top:3px;font:600 11px/1 var(--serif);color:var(--cat)}
.art.g{background:var(--st-pink)}.art.m{background:var(--st-butter)}.art.s{background:var(--st-mist)}
/* 小郵票（郵票簿每列、願望卡）：28×32、不旋轉、沒有面額；齒孔格子 4px（28、32 都是 4 的倍數） */
.stamp-x.sm{width:28px;height:32px;padding:3px;
  -webkit-mask:radial-gradient(circle 1.3px at 50% 50%,#0000 96%,#000) -2px -2px/4px 4px repeat,
               linear-gradient(#000 0 0) 2px 2px/24px 28px no-repeat;
          mask:radial-gradient(circle 1.3px at 50% 50%,#0000 96%,#000) -2px -2px/4px 4px repeat,
               linear-gradient(#000 0 0) 2px 2px/24px 28px no-repeat}
.stamp-x.sm .art svg{width:19px;height:16px;margin-bottom:3px}
.slot-sm{width:28px;height:32px;border:1.2px dashed var(--ink-3);border-radius:1px;display:block}
.new-tag{position:absolute;top:-8px;right:-6px;background:var(--stamp);color:#fff;font-size:11px;font-weight:700;
  padding:0 5px;line-height:17px;border-radius:2px;z-index:2}
.stamp-wrap.fresh{animation:stamp-in .24s var(--ease) both}
@keyframes stamp-in{from{opacity:0;translate:12px 0}to{opacity:1;translate:0 0}}

/* 郵戳（圓）、退件章（方） */
.pm{display:block;color:var(--stamp);flex:none}
.pm svg{width:100%;height:100%}
.pm.press{animation:press .18s var(--ease) both}
@keyframes press{from{opacity:0;scale:1.15;rotate:-6deg}to{opacity:.9;scale:1;rotate:0deg}}
.ret{display:inline-flex;align-items:center;justify-content:center;border:1.5px solid var(--stamp);
  color:var(--stamp-ink);font-size:12px;font-weight:700;letter-spacing:.08em;white-space:nowrap;line-height:1.3;
  padding:1px 3px 1px 4px;transform:rotate(-7deg);border-radius:2px}

/* ---------- 集點者：集郵冊頁頭（跟著內容一起捲，v0.3 第 7 節） ---------- */
/* 頂部安全區佔位（顏色由 .app::before 色條蓋住），內容捲上去時不會跑進動態島後面 */
.sat-bar{flex:none;height:var(--sat);background:var(--blush)}
.album{background:var(--blush);color:var(--ink);padding:16px 20px 20px;margin:0 -20px}
.album-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.album-top h1{font-size:20px;line-height:1.4}
.album-top .date{font-size:13px;color:var(--ink-2)}
.album-top .icon-btn{color:var(--ink-2);opacity:1}
.stamps{display:flex;gap:10px;margin:18px 0 14px;align-items:flex-end;height:72px}
.stamps>:nth-child(5n+1){transform:rotate(-3deg)}
.stamps>:nth-child(5n+2){transform:rotate(2deg) translateY(-3px)}
.stamps>:nth-child(5n+3){transform:rotate(-1.5deg)}
.stamps>:nth-child(5n+4){transform:rotate(3deg) translateY(-2px)}
.stamps>:nth-child(5n){transform:rotate(-2deg) translateY(-1px)}
.stamps>.slot,.stamps>.more{transform:none}
.slot{width:56px;height:64px;border:1.5px dashed var(--ink-3);border-radius:2px;flex:none}
.more{width:56px;height:64px;display:flex;align-items:center;justify-content:center;flex:none;
  font:600 17px/1 var(--serif);color:var(--ink-2)}
.album-sum{font-size:17px;font-weight:600;line-height:1.4}
.album-link{display:inline-flex;align-items:center;gap:2px;font-size:13px;color:var(--ink-2);margin-top:2px;min-height:28px}
.album-link svg{width:14px;height:14px}
.album-rw b{font-weight:600;color:var(--ink)}

/* 本週吃藥：7 個日戳 */
.week{list-style:none;display:grid;grid-template-columns:repeat(7,1fr);row-gap:14px;text-align:center;margin-bottom:14px}
.week li{display:flex;flex-direction:column;align-items:center;gap:6px}
.week .mark{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.week .d{font-size:13px;color:var(--ink-2);line-height:1}
.week .done .mark{color:var(--stamp)}
.week .done .mark svg{width:42px;height:42px}
.week .done:nth-child(1) svg{transform:rotate(-10deg)}
.week .done:nth-child(2) svg{transform:rotate(6deg)}
.week .done:nth-child(3) svg{transform:rotate(-3deg)}
.week .done:nth-child(4) svg{transform:rotate(9deg)}
.week .done:nth-child(5) svg{transform:rotate(-7deg)}
.week .done:nth-child(6) svg{transform:rotate(2deg)}
.week .done:nth-child(7) svg{transform:rotate(-12deg)}
.week .done.is-today .d{color:var(--rose);font-weight:700}
.week .missed .mark{border:1.5px dashed var(--stamp);color:var(--stamp-ink);font-size:12px;font-weight:700;background:var(--paper)}
/* 補蓋按鈕：看起來 42px 圈，實際觸控目標 44px 以上 */
.week button.mark{position:relative}
.week button.mark::after{content:"";position:absolute;inset:-4px}
.week .today .mark{border:2px solid var(--rose);background:var(--paper);color:var(--rose);font-size:12px;font-weight:700}
.week .today .d{color:var(--rose);font-weight:700}
.week .future .mark{border:1.5px dotted var(--ink-3)}
.week .pm.press svg{animation:none}

/* 本週吃飯（006）：每天兩個小日戳（一餐一個），和吃藥同一套記號——朱圈＝記了、玫瑰圈＝今天還能記、灰虛線＝沒記、灰點線＝還沒到 */
.week.meals li .mark{width:auto;border:0;border-radius:0;background:none;gap:4px}
.week.meals .dot{width:19px;height:19px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  border:1.2px dashed var(--ink-3);flex:none}
.week.meals .dot.on{border:1.6px solid var(--stamp);color:var(--stamp)}
.week.meals .dot svg{width:12px;height:12px}
.week.meals li:nth-child(odd) .dot.on svg{transform:rotate(-8deg)}
.week.meals li:nth-child(even) .dot.on svg{transform:rotate(7deg)}
.week.meals .today .dot:not(.on){border:1.6px solid var(--rose);background:var(--paper)}
.week.meals .today .d{color:var(--rose);font-weight:700}
.week.meals .future .dot{border:1.5px dotted var(--ink-3)}
.meal-pre .photo{margin-top:0}
.meal-pre .photo img{max-height:42vh}
.meal-pre .acts{margin-top:12px}
.hint.rule{margin-top:6px}
.meal-notice{margin:0 0 14px}

/* 明信片（照片任務）：沒有退回理由時郵票框只佔第一列，標題和日期之間不留空 */
.pc{padding:14px 16px;margin-bottom:12px;display:grid;grid-template-columns:minmax(0,1fr) 44px;column-gap:12px}
.pc-title{font-size:17px;font-weight:600;line-height:1.4}
.pc-box{width:36px;height:42px;border:1.2px dashed var(--ink-3);border-radius:1px;display:flex;align-items:center;justify-content:center;
  grid-row:1/3;grid-column:2;justify-self:end;align-self:start}
/* 標題下面沒有第二行時（JS 加 .bare），郵票框只佔第一列 */
.pc.bare .pc-box{grid-row:1}
.pc-box.filled{border-color:transparent}
.pc-box .pm{width:44px;height:44px;transform:rotate(-10deg)}
.pc-foot{grid-column:1/3;display:flex;align-items:center;justify-content:space-between;margin-top:8px;gap:12px}
.pc-meta{font-size:13px;color:var(--ink-2);line-height:1.5;min-width:0}
.pc-meta b{color:var(--stamp-ink);font-weight:600}
.thumb{width:44px;height:44px;border-radius:var(--r-thumb);overflow:hidden;flex:none;background:var(--line);display:block}
.thumb img{width:44px;height:44px;object-fit:cover;display:block}
.reason{font-size:14px;color:var(--ink);margin-top:6px}
.reason>span:first-child{color:var(--stamp-ink);font-weight:600;margin-right:2px}

/* 回饋條：主人蓋章了 */
.notice{display:flex;align-items:center;gap:12px;background:var(--paper);padding:12px 14px;border-radius:var(--r-paper);
  margin-top:16px;box-shadow:var(--shadow)}
.notice .pm{width:40px;height:40px;transform:rotate(-8deg)}
.notice-b{flex:1;min-width:0}
/* 第一行：「安安蓋章了：題目」（太長就省略）＋右側「+1・時間」 */
.notice-top{display:flex;align-items:baseline;gap:8px;font-size:15px;line-height:1.45}
.notice-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.notice-top small{flex:none;font-size:13px;color:var(--ink-2)}

/* 空狀態（睡貓） */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:24px 12px 8px;color:var(--ink-2);font-size:15px}
.empty small{display:block;font-size:13px;margin-top:2px}
.empty svg{width:60px;height:48px;color:var(--cat);margin-bottom:10px}

/* 底部分頁列 */
.tabbar{flex:none;background:var(--paper);border-top:1px solid var(--line);
  display:grid;grid-template-columns:repeat(3,1fr);padding-bottom:var(--sab)}
.tab{height:50px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:12px;
  line-height:1.2;color:var(--ink-2);font-weight:400;position:relative}
.tab svg{width:24px;height:24px}
.tab[aria-current="page"]{color:var(--rose);font-weight:700}
.tab .badge{position:absolute;top:3px;left:50%;margin-left:6px;min-width:17px;height:17px;border-radius:9px;background:var(--stamp);
  color:#fff;font-size:11px;line-height:17px;text-align:center;padding:0 4px;font-weight:700}

/* 頁頭（分頁的標題列、子頁） */
.navbar{flex:none;padding-top:var(--sat);background:var(--bg)}
.navbar .bar{height:44px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 8px}
.navbar .back{display:flex;align-items:center;color:var(--rose);font-size:17px;height:44px;padding-right:8px;justify-self:start}
.navbar .back svg{width:24px;height:24px}
.navbar h1{font-size:17px;line-height:1.3}
.navbar .r{justify-self:end;font-size:13px;color:var(--ink-2);padding-right:12px}

/* 交照片 */
.big-pc{padding:16px 16px 18px;position:relative;margin-top:8px}
.big-pc .from{font-size:13px;color:var(--ink-2)}
.big-pc h2{font-size:24px;line-height:1.35;margin-top:4px;padding-right:56px}
.big-pc .reason{padding-right:56px}
.big-pc .pc-box{position:absolute;right:16px;top:16px;width:44px;height:50px}
.photo{margin-top:16px;border-radius:var(--r-paper);overflow:hidden;position:relative;background:var(--line)}
.photo img{display:block;width:100%;height:auto;max-height:60vh;object-fit:contain;background:#2A2224}
.photo .redo{position:absolute;right:10px;bottom:10px;height:36px;padding:0 12px;border-radius:18px;background:rgba(27,23,24,.66);
  color:#fff;font-size:14px;display:flex;align-items:center;gap:6px}
.photo .redo svg{width:16px;height:16px}
.photo .gone{padding:40px 16px;text-align:center;color:var(--ink-2);font-size:14px}
.picker{margin-top:16px;width:100%;height:220px;border:1.5px dashed var(--ink-3);border-radius:var(--r-paper);background:var(--paper);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--rose);font-size:17px;font-weight:600}
.picker svg{width:32px;height:32px}
.picker small{font-size:13px;color:var(--ink-2);font-weight:400}
.bottom-act{flex:none;padding:12px 20px calc(12px + var(--sab));background:var(--bg);border-top:1px solid transparent}
.file-in{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

/* 欄位 */
.field{margin-top:16px}
.field label,.lbl{display:block;font-size:13px;color:var(--ink-2);margin-bottom:6px}
.input{width:100%;height:48px;border-radius:var(--r-ctl);background:var(--paper);border:0;box-shadow:inset 0 0 0 1px var(--line);
  padding:0 14px;font-size:16px;line-height:48px;-webkit-appearance:none;appearance:none}
.input:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--rose)}
.ta{display:block;width:100%;background:var(--paper);border:0;border-radius:var(--r-ctl);box-shadow:inset 0 0 0 1px var(--line);
  padding:12px 14px;font-size:16px;line-height:1.6;min-height:76px;resize:none;-webkit-appearance:none;appearance:none}
.ta:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--rose)}
/* placeholder 用 --ink-2（白底 6.5:1）；前面都有「例如：」，和真的輸入分得開 */
.input::placeholder,.ta::placeholder,.letter-ta::placeholder{color:var(--ink-2);opacity:1}
/* 使用者寫的自由文字一律隔離文字方向，避免方向控制字元影響旁邊的字（資安 L5／V1） */
.u,.pc-title,.big-pc h2,.review h2,.next b,.wl .w,.wish-card .w,.done-list .t,.done-list .why,.task-list .t,.ledger .t,.ledger .why,.notice-note,.adj-confirm .why,.shop .t,.wl .why,.rw-list .why{unicode-bidi:isolate}

/* 許願：信紙 */
.letter{padding:18px 18px 14px;position:relative;margin-top:8px}
.letter .to{font-size:15px;color:var(--ink-2)}
.letter .to b{color:var(--ink);font-weight:600}
.letter .slot2{position:absolute;right:16px;top:14px;width:48px;height:56px;border:1.5px dashed var(--stamp);border-radius:2px;
  display:flex;align-items:center;justify-content:center;text-align:center;font-size:12px;line-height:1.3;color:var(--stamp-ink);font-weight:600}
.letter-ta{display:block;width:100%;border:0;background:transparent;font-size:18px;line-height:1.75;margin-top:34px;min-height:96px;
  resize:none;padding:0 4px 0 0;-webkit-appearance:none;appearance:none}
.letter-ta:focus{outline:none}
.letter:focus-within{box-shadow:var(--shadow),0 0 0 1.5px var(--rose)}
.letter.no-slot .letter-ta{margin-top:12px;min-height:0;overflow:hidden}
.letter .cnt{text-align:right;font-size:12px;color:var(--ink-2);margin-top:8px}
.wl{padding:2px 16px}
.wl li{list-style:none;display:grid;grid-template-columns:minmax(0,1fr) 48px;gap:12px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}
.wl li:first-child{border-top:0}
.wl .w{font-size:16px;line-height:1.45}
.wl .m{font-size:13px;color:var(--ink-2);margin-top:2px}
.wl .m b{color:var(--stamp-ink);font-weight:600}
.wl .pm{width:44px;height:44px;transform:rotate(-9deg);justify-self:center}
.wl .wait{width:44px;height:44px;border:1.2px dashed var(--ink-3);border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:12px;color:var(--ink-2);justify-self:center}
.wl .ret{justify-self:center}

/* 郵票簿（點數紀錄）：小郵票＋說明＋日期・誰，右邊 +1／−1 15px 一般字重 */
.ledger{padding:2px 16px}
.ledger li{list-style:none;display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.ledger li:first-child{border-top:0}
.ledger .t{font-size:15px;line-height:1.45}
.ledger .m{font-size:13px;color:var(--ink-2);margin-top:2px}
.ledger .d{font:400 15px/1 var(--sans);font-variant-numeric:tabular-nums;color:var(--ink)}
.ledger .d.minus{color:var(--ink-2)}
/* 主人送／收回時附的理由（一行放不下就換行，最多 60 字） */
.ledger .why{font-size:13px;color:var(--ink-2);margin-top:2px;line-height:1.5}

/* 獎勵點數（006）：和郵票分開，左邊不用郵票，改用朱色肉球小圓章 */
.rw-mark{width:28px;height:28px;border-radius:50%;border:1.4px solid var(--stamp);color:var(--stamp);display:flex;align-items:center;justify-content:center}
.rw-mark svg{width:16px;height:16px}
.rw-links{display:flex;justify-content:space-between;gap:16px;margin-top:4px}

/* 主人：吃飯照片（006）。一週一列 7 格：有記＝第一餐縮圖（兩餐右下角標 2）、沒記＝灰虛線、還沒到＝灰點線、過期＝「過期」 */
.wk-navs{display:flex;flex:none;margin:-12px -13px -12px 0}
.wk-navs .icon-btn{margin:0;color:var(--rose);opacity:1}
.wk-navs .icon-btn svg{width:22px;height:22px}
.wk-navs .icon-btn:disabled{color:var(--ink-3);cursor:default}
/* 一週打卡卡片：最上面一排星期，下面吃藥 7 格、吃飯 7 格，三排同一組欄位對齊 */
.wk-card{padding:12px 12px 14px}
.wk-days,.med-mini,.meal-grid{list-style:none;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px 6px}
.wk-days li{text-align:center;font-size:13px;color:var(--ink-2);line-height:1}
.wk-days li.is-today{color:var(--rose);font-weight:700}
.wk-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:14px 2px 8px;padding-top:12px;border-top:1px solid var(--line)}
.wk-t{font-size:15px;font-weight:600}
.wk-n{font-size:13px;color:var(--ink-2)}
.wk-note{font-size:13px;color:var(--ink-2);margin:10px 2px 0;line-height:1.5}
/* 吃藥小格：和集點者的日戳同一套記號，縮成 32px */
.med-mini li{display:flex;justify-content:center;min-width:0}
.med-mini .mk{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.med-mini .done .mk{color:var(--stamp)}
.med-mini .done .mk svg{width:32px;height:32px}
.med-mini li:nth-child(odd) .mk svg{transform:rotate(-8deg)}
.med-mini li:nth-child(even) .mk svg{transform:rotate(6deg)}
.med-mini .late .mk{border:1.5px dashed var(--stamp);color:var(--stamp-ink);font-size:12px;font-weight:700}
.med-mini .missed .mk{border:1.2px dashed var(--ink-3)}
.med-mini .today .mk{border:1.6px solid var(--rose)}
.med-mini .future .mk{border:1.5px dotted var(--ink-3)}
.meal-grid li{display:flex;flex-direction:column;align-items:center;min-width:0}
.mg-box{position:relative;width:100%;aspect-ratio:1;border-radius:var(--r-thumb);overflow:hidden;display:flex;align-items:center;justify-content:center}
.mg-box.has{background:var(--line)}
.mg-box.has img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.mg-box.none{border:1.2px dashed var(--ink-3)}
.mg-box.future{border:1.5px dotted var(--ink-3)}
.mg-box.expired{background:var(--bg)}
.mg-exp{font-size:12px;color:var(--ink-2);line-height:1}
.mg-n{position:absolute;right:0;bottom:0;min-width:16px;height:16px;padding:0 3px;background:rgba(27,23,24,.72);color:#fff;
  font-size:11px;font-weight:700;line-height:16px;text-align:center;border-radius:2px 0 0 0}
.mg-d{font-size:13px;color:var(--ink-2);line-height:1}
.mg-d.is-today{color:var(--rose);font-weight:700}

/* 看大圖：整個畫面暖黑，照片置中；頂部、底部留安全區 */
.lightbox{position:fixed;inset:0;z-index:30;background:var(--cat);display:flex;flex-direction:column;
  padding:var(--sat) 0 var(--sab)}
.lb-bar{flex:none;height:44px;display:flex;align-items:center;gap:8px;padding:0 12px 0 8px;color:#fff}
.lb-close{display:flex;align-items:center;font-size:17px;height:44px;padding-right:8px;color:#fff;flex:none}
.lb-close svg{width:24px;height:24px}
.lb-cap{flex:1;min-width:0;text-align:right;font-size:13px;color:rgba(255,255,255,.72);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 一天一或兩張：上下排，兩張時各佔一半高度；放不下就在框內捲動 */
.lb-photo{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;justify-content:center;gap:16px;padding:8px 0 16px}
.lb-fig{flex:none}
.lb-one{display:flex;align-items:center;justify-content:center}
.lb-one img{display:block;max-width:100%;width:auto;height:auto;object-fit:contain;max-height:calc(var(--app-h,100vh) - var(--sat) - var(--sab) - 120px)}
.lb-photo.two .lb-one img{max-height:calc((var(--app-h,100vh) - var(--sat) - var(--sab) - 150px) / 2)}
.lb-figcap{font-size:13px;color:rgba(255,255,255,.72);text-align:center;margin-top:6px}
.lb-photo .gone{color:rgba(255,255,255,.72);font-size:14px;padding:40px 16px;text-align:center}

/* 主人端「紀錄」最上面：送／收回郵票（收起＝餘額＋兩個按鈕；展開＝枚數、理由；確認＝摘要＋再按一次） */
.adj{padding:16px;margin-top:16px}
.adj-head{display:flex;align-items:center;gap:12px}
.adj-bal{font-size:15px;color:var(--ink-2);line-height:1.4}
.adj-bal b{font:600 24px/1 var(--serif);color:var(--ink);margin:0 4px;vertical-align:-1px}
.adj-rw{font-size:13px;color:var(--ink-2);margin-top:4px}
.adj .acts{margin-top:16px}
.adj-lock{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px}
.adj-lock .link{flex:none;white-space:nowrap}
.adj-t{font-size:17px;line-height:1.4;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.adj-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px}
.adj-row .lbl{margin-bottom:0;font-size:15px;color:var(--ink)}
.adj-row .sub{font-size:13px;color:var(--ink-2);margin-top:2px}
.stepper{display:flex;align-items:center;gap:6px;flex:none}
.step{width:44px;height:44px;border-radius:var(--r-ctl);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);
  font-size:22px;line-height:1;color:var(--rose);display:flex;align-items:center;justify-content:center}
.step:active{background:var(--rose-soft)}
.step:disabled{color:var(--ink-3);background:var(--paper);cursor:default}
.step-n{width:56px;height:44px;border:0;border-radius:var(--r-ctl);background:var(--bg);text-align:center;
  font:600 20px/44px var(--serif);font-variant-numeric:tabular-nums;-webkit-appearance:none;appearance:none}
.step-n:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--rose)}
.adj .ta{min-height:0}
.adj .cnt{text-align:right;font-size:12px;color:var(--ink-2);margin-top:6px}
.adj .cnt.over{color:var(--stamp-ink);font-weight:600}
.adj-confirm{margin-top:12px;padding:14px;background:var(--bg);border-radius:var(--r-ctl)}
.adj-confirm p{font-size:14px;color:var(--ink-2);line-height:1.6}
.adj-confirm .big{font-size:17px;font-weight:600;color:var(--ink);line-height:1.45;margin-bottom:4px}
.adj-confirm .why{color:var(--ink);margin-top:4px}
.notice .slot-sm{margin:0 6px}
.notice-note{font-size:13px;color:var(--ink-2);line-height:1.5;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- 兌換獎品（007） ---------- */
/* 淺色分段：許願頁「寫願望／換獎品」、送收回卡片「郵票／獎勵點數」、獎品表單的選項（主人頁頭那個是深色版） */
.seg.lt{background:rgba(42,34,36,.06);margin-top:0}
.seg.lt button{color:var(--ink-2);height:36px}
.seg.lt button[aria-pressed="true"]{background:var(--paper);color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(42,34,36,.12)}
.seg.lt button:focus-visible{outline-color:var(--rose)}
.navbar .seg.lt{margin:2px 20px 10px}
.adj>.seg.lt{margin-bottom:14px}
/* 集點者：餘額＋獎品清單（名稱、剩幾個｜點數｜換） */
.shop-bal{margin-top:12px}
.shop-bal .hint{margin-top:6px}
.shop{padding:2px 16px}
.shop li{list-style:none;display:grid;grid-template-columns:minmax(0,1fr) auto auto;column-gap:14px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}
.shop li:first-child{border-top:0}
.shop .t{font-size:16px;line-height:1.45}
.shop .m{font-size:13px;color:var(--ink-2);margin-top:2px}
.shop .m b{color:var(--ink);font-weight:600}
.shop .full{grid-column:1/-1}
.shop .err.full{margin-top:8px}
.shop .adj-confirm{margin-top:12px}
.shop .btn.sm{min-width:52px;position:relative}
.shop .btn.sm::after{content:"";position:absolute;inset:-4px}
.cost{font:600 20px/1 var(--serif);font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.cost small{font:400 13px/1 var(--sans);color:var(--ink-2);margin-left:3px}
.wl .wait.sm{font-size:11px;letter-spacing:-.02em}
.wl .why{font-size:13px;color:var(--ink-2);margin-top:2px;line-height:1.5}
/* 獎勵點數明細：花掉／被收回的那一列＝虛線圈（這幾點離開了） */
.rw-mark.out{border:1.2px dashed var(--ink-3);color:var(--ink-3)}
/* 主人：待兌現卡片右上的肉球圈（同獎勵點數明細的記號） */
.wish-card>.rw-mark{position:absolute;right:16px;top:16px}
.rej .cnt{text-align:right;font-size:12px;color:var(--ink-2);margin-top:6px}
.rej .cnt.over{color:var(--stamp-ink);font-weight:600}
.wish-card .adj-confirm{margin-top:14px}
/* 主人：獎品清單與表單 */
.pz-list li.off .t{color:var(--ink-2)}
.pz-list li.off .cost{color:var(--ink-2)}
.pz-list li.editing{background:var(--rose-soft);margin:0 -16px;padding-left:16px;padding-right:16px}
.pz-list .link{min-width:44px;justify-content:flex-end}
.pz-add{width:100%;margin-top:12px}
.pz-form{margin:0 0 12px}
.pz-t{font-size:17px;line-height:1.4}
.adj .field .seg.lt{margin-top:0}
.pz-form .cnt{text-align:right;font-size:12px;color:var(--ink-2);margin-top:6px}
.pz-form .cnt.over{color:var(--stamp-ink);font-weight:600}

/* ---------- 主人端（頁頭有分段控制，固定不捲） ---------- */
.owner-head{background:var(--ink);color:#fff;padding:max(16px,calc(var(--sat) + 6px)) 20px 14px;flex:none}
.owner-head .row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.owner-head h1{font-size:20px;line-height:1.4}
.owner-head .row .date{font-size:13px;color:rgba(255,255,255,.72)}
.owner-head .icon-btn{color:rgba(255,255,255,.72);opacity:1}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);background:rgba(255,255,255,.1);border-radius:10px;padding:3px;margin-top:14px}
.seg button{text-align:center;font-size:14px;height:38px;border-radius:8px;color:rgba(255,255,255,.8)}
.seg button[aria-pressed="true"]{background:#fff;color:var(--ink);font-weight:600}
.seg button:focus-visible{outline-color:#fff}
.review{margin-top:16px}
.review h2{font-size:20px;line-height:1.35}
.review .meta{font-size:13px;color:var(--ink-2);margin-top:2px}
.review .photo{margin-top:12px;position:relative}
/* 審照片：照片限高，讓「蓋章 +1」留在第一屏（直式照片也不會把按鈕擠下去） */
.review .photo img{max-height:34vh}
.review .photo .pm{position:absolute;right:14px;bottom:14px;width:88px;height:88px;transform:rotate(-8deg)}
.acts{display:grid;grid-template-columns:1fr 1.6fr;gap:10px;margin-top:16px}
.acts .btn{height:52px;font-size:17px}
.next{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;font-size:14px;color:var(--ink-2);margin-top:20px;
  padding-top:14px;border-top:1px solid var(--line);min-height:44px;text-align:left}
.next b{color:var(--ink);font-weight:600}
.next svg{width:16px;height:16px;flex:none}
.rej{margin-top:14px}
/* 退回展開時照片縮矮，讓理由欄和按鈕留在一個畫面內 */
.review.rejecting .photo img{height:150px;max-height:none;object-fit:cover}
.rej .ta{box-shadow:inset 0 0 0 1.5px var(--rose)}
.quick{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.quick button{font-size:14px;height:32px;line-height:30px;padding:0 12px;border-radius:16px;border:1px solid var(--line);background:var(--paper);
  color:var(--ink);position:relative}
.quick button::after{content:"";position:absolute;inset:-6px -2px}
.quick button:active{background:var(--rose-soft)}
/* 願望卡：右上貼了 1 枚郵票（信的記號）；按「實現了，蓋章」時郵戳蓋在它上面 */
.wish-card{padding:16px;margin-top:16px;position:relative}
.wish-card .w,.wish-card .m{padding-right:44px}
.wish-card>.stamp-wrap{position:absolute;right:16px;top:16px}
.wish-card .wish-pm{position:absolute;right:6px;top:10px;width:52px;height:52px;transform:rotate(-9deg)}
.wish-card .w{font-size:18px;line-height:1.6}
.wish-card .m{font-size:13px;color:var(--ink-2);margin-top:6px}
.done-list{padding:2px 16px}
.done-list li{list-style:none;display:grid;grid-template-columns:minmax(0,1fr) 48px;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.done-list li:first-child{border-top:0}
.done-list .t{font-size:15px;line-height:1.45}
.done-list .m{font-size:13px;color:var(--ink-2);margin-top:2px}
.done-list .m b{color:var(--stamp-ink);font-weight:600}
.done-list .why{font-size:13px;color:var(--ink-2);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.done-list .pm{width:40px;height:40px;transform:rotate(-9deg);justify-self:center}
.done-list .ret{justify-self:center}
.task-list{padding:2px 16px}
.task-list li{list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.task-list li:first-child{border-top:0}
.task-list .t{font-size:15px;line-height:1.45;min-width:0}
.task-list .s{font-size:13px;color:var(--ink-2);flex:none}
.task-list .s.act{color:var(--stamp-ink);font-weight:600}
/* 處理完的明信片：左邊 44px 照片縮圖（點開看大圖）；已刪的寫「已刪」 */
button.thumb{display:flex;align-items:center;justify-content:center}
.done-list li.th{grid-template-columns:44px minmax(0,1fr) 48px}
.task-list li.th{align-items:center}
.task-list li.th .t{flex:1}

/* 帳號區（登出、兩步驟） */
.acct{padding:2px 16px}
.acct li{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:52px;border-top:1px solid var(--line)}
.acct li:first-child{border-top:0}
.acct .t{font-size:15px}
.acct .s{font-size:13px;color:var(--ink-2)}
.acct .s.ok{color:var(--ink)}
.acct .link{font-size:15px;flex:none;white-space:nowrap}
.acct li>div{min-width:0;padding:7px 0}
.link:disabled{color:var(--ink-3);cursor:default}
/* 通知：每天提醒的時間（16px 以上，iOS 才不會放大畫面；CSP 不開 data:，箭頭用邊框畫） */
.pick-wrap{position:relative;flex:none;display:block}
.pick-wrap::after{content:"";position:absolute;right:12px;top:50%;width:6px;height:6px;margin-top:-5px;border:solid var(--rose);
  border-width:0 1.75px 1.75px 0;transform:rotate(45deg);pointer-events:none}
.pick{-webkit-appearance:none;appearance:none;height:40px;padding:0 30px 0 12px;border:0;border-radius:var(--r-ctl);background:var(--bg);
  font:600 16px/40px var(--sans);font-variant-numeric:tabular-nums;color:var(--rose)}
.pick:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--rose)}
.pick:disabled{opacity:.6}

/* ---------- 登入、兩步驟 ---------- */
.auth{flex:1;min-height:0;overflow-y:auto;padding:max(48px,calc(var(--sat) + 32px)) 20px calc(28px + var(--sab))}
.auth-head{display:flex;flex-direction:column;align-items:flex-start;gap:16px;margin-bottom:24px}
.auth-head .stamp-wrap{transform:rotate(-3deg)}
.auth-head h1{font-size:24px;line-height:1.35}
.auth-head p{font-size:15px;color:var(--ink-2);margin-top:-8px}
.auth-card{padding:18px 18px 20px}
.auth-card .field:first-child{margin-top:0}
.auth-card .btn{margin-top:20px}
.auth-foot{margin-top:16px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.code-in{letter-spacing:.3em;font:600 22px/48px var(--serif);text-align:center;font-variant-numeric:tabular-nums}
.qr{display:block;width:200px;height:200px;margin:4px auto 0;background:#fff;image-rendering:pixelated}
.secret{display:block;font:600 15px/1.6 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.06em;
  background:var(--bg);border-radius:var(--r-ctl);padding:10px 12px;margin-top:6px;-webkit-user-select:all;user-select:all}
.secret .g{display:inline-block;margin-right:.6em;white-space:nowrap}
.big-gap{margin-top:8px}
.auth-card>.t{font-size:17px;font-weight:600;line-height:1.4}
.steps{list-style:none;counter-reset:s}
.steps>li{counter-increment:s;position:relative;padding-left:28px;margin-top:20px}
.steps>li:first-child{margin-top:0}
.steps>li::before{content:counter(s);position:absolute;left:0;top:1px;width:20px;height:20px;border-radius:50%;background:var(--ink);color:#fff;
  font:600 12px/20px var(--serif);text-align:center}
.steps h3{font-size:17px;line-height:1.4;margin-bottom:6px}
.steps p{font-size:14px;color:var(--ink-2)}

/* 載入中、系統畫面（連不上、不在名單、沒設定好） */
.center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 28px calc(40px + var(--sab));gap:12px}
.center svg{width:60px;height:48px;color:var(--cat)}
.center h1{font-size:20px;line-height:1.4}
.center p{color:var(--ink-2);font-size:15px}
.center .btn{margin-top:8px;min-width:160px}
.center.loading svg{animation:breathe 1.6s ease-in-out infinite}
@keyframes breathe{50%{opacity:.45}}

/* 提示訊息（分頁列上方 12px） */
.toast{position:fixed;left:50%;bottom:calc(62px + var(--sab));translate:-50% 0;max-width:calc(100% - 40px);width:max-content;
  background:var(--ink);color:#fff;font-size:15px;line-height:1.5;padding:10px 16px;border-radius:var(--r-ctl);z-index:20;
  opacity:0;pointer-events:none;transition:opacity .2s}
.toast.on{opacity:1}
.toast.err{background:var(--stamp-ink)}

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

/* 008：一天 3 餐時三個小日戳縮小（一格約 50px）；週規則卡、變更紀錄；照片備份與每月提醒 */
.week.meals.m3 li .mark{gap:2px}
.week.meals.m3 .dot{width:14px;height:14px}
.week.meals.m3 .dot svg{width:9px;height:9px}
.rl-h{font-size:15px;line-height:1.4;margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.rl-ok{font-size:14px;font-weight:600;line-height:1.5;margin-top:10px}
.rl-log{margin-top:12px;padding:0}
.rl-log li{grid-template-columns:minmax(0,1fr)}
.adj-confirm .link{min-height:36px;font-size:14px}
.bk-remind{margin-top:12px;padding:8px 8px 8px 14px}
.bk-remind .link{flex:none;padding:0 6px}