@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700&family=Noto+Serif+TC:wght@400;500;600&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&display=swap');
/* ⚠ @import 必須是本檔第一條規則（CSS 規範：@import 前面出現任何規則就整條失效）——2026-07 曾被 :root 卡在前面導致全 app webfont 靜默失效 */
/* 品牌金（簽到里程碑等跨主題固定色） */
:root{--gold:#c8a86e;}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;touch-action:manipulation;}/* 全 app 禁雙擊縮放（viewport meta 另禁 pinch；lightbox 圖片有自己的縮放手勢，touch-action:none 覆蓋） */
*{margin:0;padding:0;box-sizing:border-box;}
body{--bg:#f4f3f0;--bg2:#fffefa;--bg3:#f8f7f4;--bgi:#ece9e4;--ac:#7a98a8;--acl:#e0eaee;--ach:#5e8090;--tx:#303030;--tx2:#6a7478;--tx3:#1a1a1a;--bd:#e0ddd8;--bd2:#d0ccc6;--sh:rgba(0,0,0,.03);--msg-ai:#fff;--msg-user:#e0eaee;--ok:#6f9678;--warn:#8f6e30;--org:#9a6f94;--del:#b05050;--bneg:#5a7a96;--ac-fg:#fff;--goldtx:#8f7134;--sel:color-mix(in srgb,var(--goldtx) 70%,var(--ac));--navh:60px;--scr-pb:calc(16px + var(--navh) + env(safe-area-inset-bottom,0));}
body.theme-warm{--bg:#f5f1ea;--bg2:#fffcf5;--bg3:#f9f5ee;--bgi:#ece6dc;--ac:#b87058;--acl:#f0dcd0;--ach:#a05a44;--tx:#3e3830;--tx2:#78706a;--tx3:#1e1a16;--bd:#e2dcd2;--bd2:#d4ccc0;--del:#b05840;--msg-ai:#fff;--msg-user:#f0dcd0;}
body.theme-sage{--bg:#f2f4f0;--bg2:#fcfdf8;--bg3:#f6f8f2;--bgi:#e6eae0;--ac:#7a917a;--acl:#e4e9e2;--ach:#5e7860;--tx:#343830;--tx2:#687068;--tx3:#1c1e1a;--bd:#d8dcd0;--bd2:#c8d0c0;--del:#a86050;--msg-ai:#fff;--msg-user:#e4e9e2;}
body.theme-lavender{--bg:#f3f1f5;--bg2:#fdfbff;--bg3:#f7f5f9;--bgi:#e8e4ee;--ac:#8878a0;--acl:#e0d8ea;--ach:#6a5e8a;--tx:#302c38;--tx2:#6e6878;--tx3:#1c1a20;--bd:#dcd8e2;--bd2:#ccc6d4;--del:#a85868;--msg-ai:#fff;--msg-user:#e0d8ea;}
body.theme-rose{--bg:#f8f3f4;--bg2:#fffbfc;--bg3:#faf6f7;--bgi:#eee4e8;--ac:#a87680;--acl:#eedce0;--ach:#8a5c64;--tx:#3a3035;--tx2:#887078;--tx3:#201a1c;--bd:#e4d8dc;--bd2:#d6c8ce;--del:#a85868;--msg-ai:#fff;--msg-user:#eedce0;}
body.theme-ocean{--bg:#f0f2f4;--bg2:#fafcff;--bg3:#f4f7f9;--bgi:#e0e6ec;--ac:#6888a0;--acl:#d8e2ec;--ach:#507088;--tx:#2e3438;--tx2:#687478;--tx3:#181c20;--bd:#d4dae0;--bd2:#c4ccd4;--del:#a85858;--msg-ai:#fff;--msg-user:#d8e2ec;}
body.theme-grey{--bg:#f2f1f0;--bg2:#fdfcfa;--bg3:#f6f5f4;--bgi:#eae8e6;--ac:#808080;--acl:#e0deda;--ach:#606060;--tx:#303030;--tx2:#707070;--tx3:#1a1a1a;--bd:#dcdad8;--bd2:#cccac6;--del:#a05858;--msg-ai:#fff;--msg-user:#e0deda;}
body.theme-brown{--bg:#f4f0ea;--bg2:#fffcf6;--bg3:#f8f4ee;--bgi:#eae4da;--ac:#a08060;--acl:#e6dcd0;--ach:#886848;--tx:#3a3428;--tx2:#787060;--tx3:#1e1a14;--bd:#e0d8cc;--bd2:#d0c8ba;--del:#a06050;--msg-ai:#fff;--msg-user:#e6dcd0;}
body.theme-dark{--txem:#c2c8d2;--bg:#1e2028;--bg2:#282a34;--bg3:#24262e;--bgi:#303440;--ac:#8aa8b8;--acl:rgba(138,168,184,.15);--ach:#a4c0d0;--tx:#eaecf0;--tx2:#b8bec8;--tx3:#eceff4;--bd:#363840;--bd2:#444850;--sh:rgba(0,0,0,.15);--del:#c87070;--msg-ai:#2a2c36;--msg-user:rgba(138,168,184,.16);}
body.theme-dark-warm{--txem:#cec4b8;--bg:#24201c;--bg2:#322c26;--bg3:#2c2822;--bgi:#3e3630;--ac:#c8946a;--acl:rgba(200,148,106,.15);--ach:#daa880;--tx:#f0e8de;--tx2:#c4baae;--tx3:#f2ebe0;--bd:#48403a;--bd2:#564e46;--sh:rgba(0,0,0,.15);--del:#c07050;--msg-ai:#36302a;--msg-user:rgba(200,148,106,.16);}
body.theme-dark-green{--txem:#c2cabc;--bg:#1e2220;--bg2:#282e28;--bg3:#242a24;--bgi:#343a34;--ac:#88a880;--acl:rgba(136,168,128,.15);--ach:#a0c098;--tx:#eaeee4;--tx2:#b8c0b4;--tx3:#ecf2e8;--bd:#3a4238;--bd2:#4a5248;--sh:rgba(0,0,0,.15);--del:#c07060;--msg-ai:#2c322c;--msg-user:rgba(136,168,128,.16);}
body.theme-midnight{--txem:#c8c2d6;--bg:#1c1a24;--bg2:#262430;--bg3:#22202a;--bgi:#302e40;--ac:#9a8cc8;--acl:rgba(154,140,200,.15);--ach:#b4a6da;--tx:#ece6f5;--tx2:#beb8cc;--tx3:#eee8f6;--bd:#3a3850;--bd2:#484660;--sh:rgba(0,0,0,.2);--del:#b87088;--msg-ai:#28263a;--msg-user:rgba(154,140,200,.16);}
body.theme-dark-grey{--txem:#c2beba;--bg:#202020;--bg2:#2a2a2a;--bg3:#262626;--bgi:#363636;--ac:#98a0a0;--acl:rgba(152,160,160,.15);--ach:#b0b8b8;--tx:#eae8e4;--tx2:#b8b4b0;--tx3:#eceae6;--bd:#3c3c3c;--bd2:#4a4a4a;--sh:rgba(0,0,0,.15);--del:#c07070;--msg-ai:#2e2e2e;--msg-user:rgba(152,160,160,.16);}
body.theme-dark-brown{--txem:#cac2b2;--bg:#201e18;--bg2:#2c2a22;--bg3:#28261e;--bgi:#3a3830;--ac:#b8a078;--acl:rgba(184,160,120,.15);--ach:#d0b890;--tx:#ece5da;--tx2:#c0b8a8;--tx3:#f0ece2;--bd:#443e36;--bd2:#524c44;--sh:rgba(0,0,0,.15);--del:#c07050;--msg-ai:#343020;--msg-user:rgba(184,160,120,.16);}
body.theme-dark-rose{--txem:#d2c8c4;--bg:#241e1e;--bg2:#322828;--bg3:#2e2424;--bgi:#403838;--ac:#c87878;--acl:rgba(200,120,120,.15);--ach:#da9090;--tx:#f4ece8;--tx2:#c8beba;--tx3:#f4eeea;--bd:#4a3c3c;--bd2:#584c4c;--sh:rgba(0,0,0,.15);--del:#c06868;--msg-ai:#362c2c;--msg-user:rgba(200,120,120,.16);}
body.theme-black{--txem:#bab8b4;--bg:#141413;--bg2:#1e1e1c;--bg3:#1a1a18;--bgi:#2a2a28;--ac:#8a8a88;--acl:rgba(138,138,136,.12);--ach:#a8a8a6;--tx:#dedcda;--tx2:#b0aeaa;--tx3:#e0dedc;--bd:#323230;--bd2:#3e3e3c;--sh:rgba(0,0,0,.4);--del:#c07070;--msg-ai:#21211f;--msg-user:rgba(138,138,136,.12);}
body.theme-dark,body.theme-dark-warm,body.theme-dark-green,body.theme-midnight,body.theme-dark-grey,body.theme-dark-brown,body.theme-dark-rose,body.theme-black{--ok:#8ab08c;--warn:#d0aa6a;--org:#c8a0c0;--ac-fg:#fff;--goldtx:#d8bc82;}
body{font-family:'Noto Sans TC',sans-serif;background:var(--bg);color:var(--tx);height:100vh;height:100dvh;height:var(--app-h,100dvh);display:flex;flex-direction:column;overflow:hidden;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;font-size:16px;}
::placeholder{color:var(--tx2);opacity:1;}
::-webkit-input-placeholder{color:var(--tx2);opacity:1;}
textarea,input{-webkit-user-select:text;user-select:text;}.msg-bubble{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;}
.nav-w{position:fixed;left:0;right:0;bottom:0;z-index:200;background:var(--bg2);padding-bottom:env(safe-area-inset-bottom,0);}
/* 導覽列分界（2026-08-29 阿奈重啟）：v2.1.342 拿掉的是實心滿版線；淺色主題 bg/bg2 色差太小會糊在一起，
   改用兩端淡出細線（同 .ch 聊天標題列語彙）＋極淡向上陰影。只作用手機版——桌機導覽在左側、
   有自己的 border-right，border-image 會把它蓋成漸層，必須隔離 */
@media (max-width:899.9px){
.nav-w{border-image:linear-gradient(90deg,transparent,var(--bd) 18%,var(--bd) 82%,transparent) 1;border-width:1px 0 0 0;border-style:solid;box-shadow:0 -4px 14px var(--sh);}
}
body.in-chat .nav-w{display:none;}
.nav-i{display:flex;height:var(--navh);}
.nv{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-top:2px;/* 讓出頂端 2px 指示線的厚度，圖示文字才會在線下方真正置中（v2.1.862） */font-size:11px;color:var(--tx2);cursor:pointer;user-select:none;gap:2px;transition:color .2s;position:relative;}.nv.a{color:var(--ac);font-weight:500;}.nv::after{content:'';position:absolute;top:0;left:20%;right:20%;height:2px;background:var(--ac);border-radius:0 0 1px 1px;transform:scaleX(0);transition:transform .25s cubic-bezier(.4,0,.2,1);}.nv.a::after{transform:scaleX(1);}
.nv svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
/* 訪客模式（2026-08-27）：首頁以外的分頁反灰不可點（不彈提示），商店與登入入口放首頁標題列右側 */
body.guest .nv[data-p="friends"],body.guest .nv[data-p="chat"],body.guest .nv[data-p="manage"],body.guest .nv[data-p="sys"]{opacity:.32;pointer-events:none;}
.home-guest-icons{display:none;gap:6px;}
body.guest .home-guest-icons{display:flex;}
.guest-sheet{padding:24px 22px 26px;text-align:center;}
.guest-sheet-t{font-size:17px;font-weight:600;color:var(--tx3);margin-bottom:4px;}
.guest-sheet-s{font-size:14px;color:var(--tx2);line-height:1.6;margin-bottom:18px;white-space:nowrap;}
.guest-sheet .auth-btn{max-width:none;width:100%;white-space:nowrap;padding:13px 16px;}
.auth-guest-link{margin-top:28px;font-size:14px;color:var(--tx2);text-decoration:underline;text-underline-offset:4px;cursor:pointer;padding:8px 12px;}
.main{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;}
.scr{flex:1;min-height:0;overflow-y:auto;padding:0 16px var(--scr-pb);scrollbar-width:none;-ms-overflow-style:none;}.scr::-webkit-scrollbar{display:none;}
*{scrollbar-width:none;-ms-overflow-style:none;}*::-webkit-scrollbar{display:none;}
.pnl{display:none;flex:1;min-height:0;}.pnl.a{display:flex;flex-direction:column;animation:pnlIn .18s ease;}
@keyframes pnlIn{from{opacity:0;}to{opacity:1;}}
@keyframes crPvIn{from{opacity:0;transform:scale(.97);}to{opacity:1;transform:scale(1);}}
.card{background:var(--bg2);border:1px solid var(--bd);border-radius:12px;padding:14px;margin-bottom:10px;box-shadow:0 1px 2px var(--sh);}
.ct{font-size:16px;font-weight:500;color:var(--tx3);margin-bottom:10px;display:flex;align-items:center;justify-content:space-between;}
textarea,input[type="text"],input[type="number"],input[type="password"],select{width:100%;background:var(--bg3);border:1px solid var(--bd);border-radius:8px;color:var(--tx);font-family:inherit;font-size:16px;padding:10px 12px;resize:vertical;line-height:1.4;}
textarea:focus,input:focus,select:focus{outline:none;border-color:var(--ac);background:var(--bg2);}
label{display:block;font-size:14px;color:var(--tx2);margin-bottom:4px;font-weight:400;padding-left:2px;}
.f{margin-bottom:12px;position:relative;}.card>.f:last-child,.fp-body>.f:last-child{margin-bottom:0;}.f>label~.ctr{position:absolute;top:0;right:2px;margin:0;}.fp-body.full .f>label~.ctr{right:18px;}.fr{display:flex;gap:10px;}.fr .f{flex:1;}
.f.se-err textarea,.f.se-err input[type="text"]{border-color:var(--del);}
.ctr{text-align:right;font-size:13px;color:var(--tx2);margin-top:3px;padding-right:2px;}
.btn{padding:10px 18px;border-radius:10px;border:none;background:var(--bg3);color:var(--tx);font-size:15px;cursor:pointer;font-family:inherit;font-weight:500;transition:transform .1s,opacity .1s;-webkit-tap-highlight-color:transparent;}@media(hover:hover){.btn:hover{opacity:.85;}}.btn:active{transform:scale(.95);opacity:.85;}
.bp{background:var(--ac);color:var(--ac-fg);}@media(hover:hover){.bp:hover{background:var(--ach);}}
.bdel{background:none;color:var(--del);border:1px solid color-mix(in srgb,var(--del) 30%,transparent);}@media(hover:hover){.bdel:hover{background:color-mix(in srgb,var(--del) 8%,transparent);}}
.bs2{font-size:14px;padding:7px 14px;}
.fp-btn{background:none;border:none;color:var(--ac);font-size:16px;font-weight:600;cursor:pointer;padding:6px 2px;font-family:inherit;}.fp-btn:active{opacity:.5;}.fp-btn:disabled{color:var(--tx2);opacity:.55;cursor:default;}
/* 防重複點擊：搭配 ui.js 的 busy() 使用，handler 執行期間此 class 會掛上 */
.is-busy{opacity:.5;pointer-events:none;cursor:wait;}
.sh{display:flex;align-items:center;justify-content:space-between;margin:0 -16px 10px;padding:16px 16px 8px;position:sticky;top:0;z-index:10;background:var(--bg);}
.sht{font-size:24px;font-weight:700;color:var(--tx3);}
.bk{font-size:15px;color:var(--tx2);cursor:pointer;display:inline-flex;align-items:center;gap:4px;padding:6px 0;}@media(hover:hover){.bk:hover{color:var(--ac);}}
.li{display:flex;align-items:center;gap:12px;padding:18px 14px;background:var(--bg2);border:1px solid var(--bd);border-radius:12px;cursor:pointer;margin-bottom:16px;box-shadow:0 1px 2px var(--sh);position:relative;flex-wrap:wrap;transition:transform .1s;-webkit-tap-highlight-color:transparent;}.li:active{transform:scale(.98);}
.li-chat{background:var(--bg);border:none;border-radius:0;margin-bottom:0;box-shadow:none;padding:12px 16px;margin-left:-16px;margin-right:-16px;}
.chat-time{font-size:12px;color:var(--tx2);white-space:nowrap;flex-shrink:0;}
.av{width:40px;height:40px;border-radius:50%;background:var(--bgi);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0;color:var(--ac);font-weight:500;overflow:hidden;border:1px solid var(--bd);cursor:pointer;}.av img{width:100%;height:100%;object-fit:cover;}
.av-list{width:72px;height:72px;font-size:24px;}
.char-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}.char-grid.anim{animation:gridIn .3s ease both;}@keyframes gridIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
.home-official-row,.disc-section{animation:gridIn .35s ease both;}
.char-card{display:flex;flex-direction:column;background:var(--bg2);border:1px solid var(--bd);border-radius:14px;cursor:pointer;box-shadow:0 1px 2px var(--sh);position:relative;overflow:hidden;aspect-ratio:2/3;transition:transform .1s;-webkit-tap-highlight-color:transparent;}.char-card:active{transform:scale(.97);}
.char-card-cover{width:100%;flex:1;min-height:0;background:var(--bgi);display:flex;align-items:center;justify-content:center;overflow:hidden;}
.char-card-cover img{width:100%;height:100%;object-fit:cover;object-position:top;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;pointer-events:none;}
.char-card-cover .char-card-initial{font-size:42px;font-weight:600;color:var(--ac);opacity:.6;}
.char-card-info{padding:12px 14px 14px;text-align:center;width:100%;box-sizing:border-box;}
.char-card-name{font-size:17px;font-weight:600;color:var(--tx3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.char-card-sub{font-size:14px;color:var(--tx2);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.5;}
.char-card-menu{position:absolute;top:6px;right:6px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:50%;color:#fff;background:rgba(0,0,0,.35);z-index:2;}.char-card-menu::before{content:'';position:absolute;inset:-6px;}.char-card-menu:active{background:rgba(0,0,0,.5);}
.char-card-menu svg{width:18px;height:18px;}
.char-card-no-img .char-card-menu{color:var(--tx2);background:var(--bgi);}
.char-card-official{position:absolute;top:8px;left:8px;display:flex;align-items:center;gap:3px;padding:3px 8px 3px 6px;border-radius:10px;background:var(--ac);color:var(--ac-fg);font-size:11px;font-weight:600;letter-spacing:.5px;z-index:2;box-shadow:0 1px 3px rgba(0,0,0,.2);}
.char-card-official svg{flex-shrink:0;}
/* Worldbook cards */
/* 管理頁純展示卡（v2.1.782）：編輯統一走豆豆選單後，卡片本體點擊無作用，
   關掉游標與按壓回饋避免誤導。選擇器權重 0,3,1 起跳（勝過 .xx:active 的 0,2,0，
   不靠 source order，防 color-mix-shim 級聯反轉） */
div.char-card.card-noop,div.wb-card.card-noop,div.um-item.card-noop{cursor:default;}
div.char-card.card-noop:active,div.wb-card.card-noop:active{transform:none;}
div.um-item.card-noop:active{transform:none;background:var(--bg2);}
.wb-card{display:flex;flex-direction:column;background:var(--bg2);border:1px solid var(--bd);border-radius:14px;cursor:pointer;box-shadow:0 1px 2px var(--sh);position:relative;overflow:hidden;aspect-ratio:2/3;transition:transform .1s;-webkit-tap-highlight-color:transparent;}.wb-card:active{transform:scale(.97);}
.wb-card-cover{width:100%;flex:1;min-height:0;background:var(--acl);display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;position:relative;}
.wb-card-cover::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:repeating-linear-gradient(0deg,transparent,transparent 22px,var(--bd) 22px,var(--bd) 23px);opacity:.25;pointer-events:none;}
.wb-card-cover::after{content:'';position:absolute;left:28px;top:0;bottom:0;width:1px;background:var(--ac);opacity:.2;pointer-events:none;}
.wb-card-has-cover::before,.wb-card-has-cover::after{display:none;}
.wb-card-has-cover img{width:100%;height:100%;object-fit:cover;object-position:top;position:relative;z-index:1;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;pointer-events:none;}
.wb-card-icon{position:relative;z-index:1;margin-bottom:6px;opacity:.55;}
.wb-card-ch-count{position:relative;z-index:1;font-size:12px;color:var(--ach);opacity:.7;font-weight:500;}
.wb-card-spine{position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--ac);opacity:.35;border-radius:14px 0 0 14px;z-index:2;}
.wb-card-shadow{position:absolute;left:0;top:0;bottom:0;width:9px;background:color-mix(in srgb,var(--bd) 55%,transparent);border-right:1px solid color-mix(in srgb,var(--bd2) 80%,transparent);pointer-events:none;z-index:2;}
.wb-card-shadow::after{content:'';position:absolute;right:-4px;top:0;bottom:0;width:4px;background:linear-gradient(to right,var(--sh),transparent);}
.wb-card-info{padding:10px 12px 12px;text-align:center;width:100%;box-sizing:border-box;}
.wb-card-name{font-size:15px;font-weight:600;color:var(--tx3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wb-card-desc{font-size:13px;color:var(--tx2);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* WB cover upload placeholder in edit */
.wb-cover-upload{width:60%;max-width:240px;aspect-ratio:2/3;margin:0 auto 16px;border-radius:14px;border:2px dashed var(--bd2);background:var(--bgi);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;position:relative;transition:border-color .15s;}.wb-cover-upload:active{border-color:var(--ac);}
.wb-cover-upload img{width:100%;height:100%;object-fit:cover;display:block;}
.wb-cover-upload .wb-up-placeholder{text-align:center;color:var(--tx2);}
.wb-cover-upload .wb-up-placeholder svg{width:36px;height:36px;stroke:currentColor;fill:none;stroke-width:1.5;opacity:.5;margin-bottom:6px;}
.wb-cover-upload .wb-up-placeholder span{font-size:13px;display:block;}
.pin-badge{position:absolute;bottom:2px;right:2px;width:20px;height:20px;background:var(--ac);border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid var(--bg2);box-shadow:0 1px 3px rgba(0,0,0,.15);}
.pin-badge svg{width:11px;height:11px;fill:var(--ac-fg);stroke:var(--ac-fg);stroke-width:1;}
.lb{flex:1;min-width:0;}.lt{font-size:17px;font-weight:500;color:var(--tx3);}.ls{font-size:15px;color:var(--tx2);margin-top:6px;line-height:1.5;max-width:80%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
/* 拉桿：全自訂樣式（不用原生 accent-color——未填軌道顏色瀏覽器自訂、近黑，淺色主題突兀）。已填比例由 --srp 控制，ui.js srSync 負責更新；未填軌道用 --bd 比照 .bond-bar-track */
.sr{display:flex;align-items:center;gap:10px;}
.sr input[type="range"]{flex:1;-webkit-appearance:none;appearance:none;height:28px;background:transparent;outline:none;margin:0;}
.sr input[type="range"]::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:linear-gradient(to right,var(--ac) var(--srp,0%),var(--bd) var(--srp,0%));}
.sr input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--ac);border:2px solid var(--bg2);box-shadow:0 1px 3px rgba(0,0,0,.2);margin-top:-6px;}
.sr input[type="range"]::-moz-range-track{height:6px;border-radius:3px;background:var(--bd);}
.sr input[type="range"]::-moz-range-progress{height:6px;border-radius:3px;background:var(--ac);}
.sr input[type="range"]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--ac);border:2px solid var(--bg2);box-shadow:0 1px 3px rgba(0,0,0,.2);}
.svl{width:40px;text-align:right;font-size:15px;color:var(--ac);font-weight:500;}
.stt{font-size:17px;font-weight:600;color:var(--tx3);margin-bottom:8px;padding-bottom:5px;}
.pl{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.pi{display:flex;align-items:center;gap:10px;padding:11px 14px;background:var(--bg2);border:1px solid var(--bd);border-radius:8px;cursor:pointer;box-shadow:0 1px 2px var(--sh);}@media(hover:hover){.pi:hover{border-color:var(--ac);}}.pi.sel{border-color:var(--ac);background:var(--acl);}
.pn2{font-size:14px;color:var(--tx3);flex:1;}.ptk{font-size:13px;color:var(--tx2);}
.snv{display:flex;gap:6px;margin-bottom:16px;flex-wrap:nowrap;}
.sbb{padding:8px 16px;border-radius:20px;border:1px solid var(--bd);background:var(--bg2);color:var(--tx2);font-size:15px;cursor:pointer;font-family:inherit;white-space:nowrap;-webkit-tap-highlight-color:transparent;outline:none;transition:background .15s,color .15s,border-color .15s;}@media(hover:hover){.sbb:hover{border-color:var(--ac);color:var(--ac);}}.sbb.a{background:var(--ac);border-color:var(--ac);color:var(--ac-fg);box-shadow:0 2px 8px color-mix(in srgb,var(--ac) 30%,transparent);}
.sbb.locked{opacity:.4;pointer-events:none;position:relative;}.theme-dot.locked{opacity:.3;pointer-events:none;}
.fw-lock-overlay{position:absolute;top:0;left:0;right:0;bottom:0;background:var(--bg);opacity:.85;z-index:50;display:flex;align-items:center;justify-content:center;}.fw-lock-card{text-align:center;color:var(--tx2);padding:20px;}
.sp{display:none;opacity:0;}.sp.a{display:block;animation:spIn .2s ease forwards;}@keyframes spIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}
.cw{display:none;flex-direction:column;height:100%;position:relative;}.cw.a{display:flex;animation:cwIn .22s cubic-bezier(.4,0,.2,1);}
.ch{padding:10px 16px;border-image:linear-gradient(90deg,transparent,var(--bd) 18%,var(--bd) 82%,transparent) 1;border-width:0 0 1px 0;border-style:solid;display:flex;align-items:center;gap:8px;background:var(--bg2);flex-shrink:0;}.chn{font-size:17px;font-weight:500;color:var(--tx3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40vw;}
.cm{flex:1;overflow-y:auto;padding:14px 10px;display:flex;flex-direction:column;gap:28px;background:var(--bg);contain:content;}
.date-sep{text-align:center;font-size:13px;color:var(--tx2);padding:4px 12px;margin:0 auto;background:var(--bg3);border-radius:20px;}
/* ── 對話開頭警語（扉頁樣式）──
   刻意「不」做成 .msg-row：對話造型（cs-*）的規則清一色以 .msg-row 起手，
   獨立命名空間才能一套通吃五種造型，日後新增造型也不必回頭改；
   截圖模組只收集 #c-msgs .msg-row，因此警語也自動不會出現在玩家分享圖裡。
   間距交給 .cm 的 gap（各造型值不同），不用負 margin 硬抵，避免 gap 一改就要跟著調。
   掛載時機見 chat-list.js renderMsgWindow()：只在已載到對話真正開頭時掛。 */
.cnb{flex-shrink:0;font-family:'Noto Sans TC',sans-serif;padding:18px 8px 0;-webkit-user-select:none;user-select:none;}/* 頂部 18px：離羈絆列拉開呼吸（阿奈 2026-08-29） */
.cnb-rule{height:1px;background:linear-gradient(90deg,transparent,var(--bd2),transparent);}
.cnb-in{padding:14px 14px 15px;text-align:center;}
.cnb-eb{font-family:'Cormorant Garamond',serif;font-size:10px;font-weight:600;letter-spacing:.36em;text-transform:uppercase;color:var(--ac);opacity:.8;}
.cnb-l{font-size:13px;line-height:1.95;color:var(--tx2);margin-top:9px;}
.cnb-l b{color:var(--tx);font-weight:500;}
.msg-row{display:flex;gap:10px;max-width:100%;align-items:flex-start;padding:0 2px;margin-bottom:6px;}.msg-row.ai{align-self:flex-start;}.msg-row.user{align-self:flex-end;flex-direction:row-reverse;}
.msg-av{width:38px;height:38px;border-radius:50%;background:var(--bgi);display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;color:var(--ac);font-weight:500;overflow:hidden;box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px var(--acl);cursor:pointer;}
.msg-body{flex:1;min-width:0;}.msg-name{font-size:13px;font-weight:500;color:var(--tx2);margin:1px 0 4px 2px;display:none;}.msg-row.ai .msg-name{display:block;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.msg-content-row{display:flex;align-items:stretch;gap:6px;}
.msg-row.user .msg-content-row{flex-direction:row-reverse;}
.msg-bubble{padding:10px 14px;border-radius:18px;font-size:16px;line-height:1.7;color:var(--tx);overflow-wrap:break-word;word-break:break-word;}
.msg-bubble pre,.msg-bubble code{white-space:pre-wrap;word-break:break-all;overflow-x:hidden;}
.msg-row.ai .msg-bubble{background:var(--msg-ai);box-shadow:0 1.5px 6px var(--sh);border-radius:6px 18px 18px 18px;}
.msg-row.user .msg-bubble{background:var(--msg-user);border-radius:18px 6px 18px 18px;}
.msg-row.user .msg-body{padding-top:0;}
.mm{font-size:11px;color:var(--tx2);flex-shrink:0;white-space:nowrap;line-height:1;padding-bottom:2px;}
.msg-meta{display:flex;flex-direction:column;align-items:center;flex-shrink:0;padding:4px 0 2px;}.msg-meta .mm{margin-top:auto;}
.msg-retry{width:22px;height:22px;border-radius:50%;background:var(--bd);color:var(--tx2);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;align-self:flex-end;margin-bottom:2px;}.msg-retry:active{opacity:.7;}.msg-retry svg{width:12px;height:12px;}
.msg-bubble p{margin:0 0 .6em;}.msg-bubble p:last-child{margin:0;}.msg-bubble em{font-style:italic;color:var(--txem,var(--tx2));}.msg-bubble strong{font-weight:600;}.msg-bubble blockquote{border-left:3px solid var(--ac);padding-left:10px;margin:.5em 0;color:var(--tx2);}
.cev-view-content p{margin:0 0 1.4em;}.cev-view-content p:last-child{margin:0;}.cev-view-content em{font-style:italic;color:var(--txem,var(--tx2));}.cev-view-content strong{font-weight:600;}.cev-view-content blockquote{border-left:3px solid var(--ac);padding-left:10px;margin:.5em 0;color:var(--tx2);}
.msg-bubble ol,.msg-bubble ul{margin:0 0 .6em;padding-left:1.6em;}.msg-bubble li{margin-bottom:.3em;}
.msg-bubble table{border-collapse:collapse;margin:.6em 0;width:100%;font-size:15px;}.msg-bubble th,.msg-bubble td{border:1px solid var(--bd2);padding:6px 10px;text-align:left;line-height:1.6;height:1.6em;}.msg-bubble th{font-weight:600;}
.ci{padding:8px 12px 10px;flex-shrink:0;background:var(--bg);border-top:none;border-image:linear-gradient(90deg,transparent,var(--bd) 50%,var(--bd) 50%,transparent) 1;border-width:1px 0 0 0;border-style:solid;}
.ci-box{display:flex;flex-direction:column;background:var(--bg3);border:1px solid var(--bd);border-radius:16px;overflow:hidden;position:relative;box-shadow:inset 0 1.5px 5px var(--sh),inset 0 1px 2px var(--sh);}
.ci-box textarea{width:100%;box-sizing:border-box;max-height:120px;min-height:40px;overflow-y:auto;resize:none;padding:8px 14px 4px 14px;line-height:1.4;border:none;background:transparent;font-family:inherit;font-size:16px;color:var(--tx);}
.ci-box textarea:focus{outline:none;}
.ci-toolbar{display:flex;align-items:center;gap:8px;padding:4px 8px 6px;}
.ci-pill{display:flex;align-items:center;justify-content:center;background:var(--bg2);border:1px solid var(--bd);border-radius:15px;height:30px;padding:0 10px;cursor:pointer;font-size:14px;font-weight:500;color:var(--tx2);flex-shrink:0;-webkit-user-select:none;user-select:none;}@media(hover:hover){.ci-pill:hover{border-color:var(--ac);color:var(--ac);}}
.ci-pill-sm{height:26px;padding:0 8px;font-size:12px;border-radius:12px;}
.ci-mode{display:flex;align-items:center;gap:4px;height:26px;padding:0 9px 2px;/* 底部 2px 光學修正：Noto Sans TC 的拉丁字視覺偏低約 1px（實測），墊高內容置中點 */margin-left:auto;border-radius:12px;border:1px solid var(--bd);background:var(--bg2);font-size:13px;color:var(--tx);cursor:pointer;max-width:108px;min-width:0;-webkit-user-select:none;user-select:none;}.ci-mode .rp-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.ci-mode::after{content:'▾';font-size:10px;color:var(--tx2);flex-shrink:0;}@media(hover:hover){.ci-mode:hover{border-color:var(--ac);color:var(--ac);}}
.ci-send{width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;border-radius:50%;transition:background .15s;}@media(hover:hover){.ci-send:hover{background:var(--bg2);}}
.ci-send.stop{background:var(--tx2);border-radius:50%;width:28px;height:28px;}@media(hover:hover){.ci-send.stop:hover{background:var(--tx);}}
.ci-top{display:flex;align-items:center;padding:6px 10px 0;}
.ci-cnt{margin-left:auto;font-size:11px;color:var(--tx2);white-space:nowrap;pointer-events:none;}.ci-cnt.warn{color:var(--del);opacity:1;}

/* Bond pill (chat header) */
.bond-bar{display:none;align-items:center;gap:10px;padding:9px 16px;background:var(--bg2);border-image:linear-gradient(90deg,transparent,var(--bd) 18%,var(--bd) 82%,transparent) 1;border-width:0 0 1px 0;border-style:solid;cursor:pointer;flex-shrink:0;}.bond-bar.show{display:flex;}
/* 羈絆列徽章圓角六角（v2.1.468）：clip-path path() 為 _BOND_HEX_D 等比縮到 26x28（px 絕對座標——徽章尺寸若改，path 要重算） */
.bond-rune{flex-shrink:0;width:26px;height:28px;clip-path:path('M 10.32 2.06 Q 13.00 0.51 15.68 2.06 L 21.76 5.57 Q 24.44 7.13 24.44 10.18 L 24.44 17.82 Q 24.44 20.87 21.76 22.43 L 15.68 25.94 Q 13.00 27.49 10.32 25.94 L 4.24 22.43 Q 1.56 20.87 1.56 17.82 L 1.56 10.18 Q 1.56 7.13 4.24 5.57 Z');display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--ac) 16%,transparent);color:var(--ach);font-size:14px;line-height:1;}
.bond-bar-label{font-size:14px;font-weight:600;color:var(--tx);flex-shrink:0;}
.bond-bar-track{flex:1;height:4px;background:var(--bd);border-radius:2px;overflow:hidden;position:relative;}
.bond-bar-fill{position:absolute;top:0;left:0;height:100%;border-radius:2px;background:var(--ac);transition:width .3s,background .3s;}
.bond-bar-fill.neg{left:auto;right:0;background:color-mix(in srgb,var(--bneg) 65%,transparent);}
.bond-bar-num{flex-shrink:0;font-size:13px;color:var(--tx2);font-variant-numeric:tabular-nums;}
/* Nub pill (chat header) — 永遠顯示，點擊跳商店 */
.nub-pill svg{width:13px;height:13px;flex-shrink:0;}.nub-pill::after{display:none;}
/* Bond dropdown */
.bond-dropdown{display:none;padding:12px 16px;background:var(--bg2);border-bottom:1px solid var(--bd);position:absolute;left:0;right:0;z-index:25;box-shadow:0 4px 12px rgba(0,0,0,.1);}
.bond-dropdown.show{display:block;}
.bond-backdrop{display:none;position:fixed;inset:0;z-index:24;}.bond-backdrop.show{display:block;}
/* Bond 六角石 coverflow（v2.1.435 層次重整）——
   手遊選物的層次來自三件事，缺一不可：
   1. 間距跟著尺寸走：位移＝縮放曲線的積分（chat-sidebar.js _bondX），石頭越小步距越短，重疊比例全排一致。
   2. 狀態分兩軸：「聚焦」（滑到中央，.focus＝加深描邊＋中性投影）×「當前階」（.cur＝主題色描邊＋色光暈）互相獨立疊加。
   3. 未達成不做透明鬼影（阿奈否決）：實色消淡——bgi 底、bd2 描邊、ghost 符文（見下方 v2.1.467 定案），不掉 opacity。
   .cur 規則寫在 .focus 之後：兩者同框時色光暈壓過中性投影。 */
.bond-swipe-wrap{overflow:hidden;position:relative;height:118px;touch-action:pan-y;}
.bond-swipe-track{position:absolute;inset:0;}
.bond-swipe-track.dragging .bond-stone{transition:none;}
.bond-stone{position:absolute;left:50%;top:50%;width:72px;height:79px;cursor:pointer;transition:transform .3s cubic-bezier(.25,.46,.45,.94),opacity .3s,filter .3s;will-change:transform;-webkit-tap-highlight-color:transparent;}
.bond-stone svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
.bond-stone path{fill:color-mix(in srgb,var(--ac) 18%,var(--bg3));stroke:color-mix(in srgb,var(--ac) 50%,var(--bd));stroke-width:2;transition:fill .2s,stroke .2s;}
.bs-rune{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:26px;color:var(--ach);line-height:1;}
.bond-stone.focus{filter:drop-shadow(0 5px 12px color-mix(in srgb,var(--tx) 18%,transparent));}
.bond-stone.focus path{stroke-width:2.5;}
.bond-stone.cur path{fill:color-mix(in srgb,var(--ac) 28%,var(--bg3));stroke:var(--ac);}
.bond-stone.cur{filter:drop-shadow(0 4px 12px color-mix(in srgb,var(--ac) 38%,transparent));}
.bond-stone.neg path{fill:color-mix(in srgb,var(--bneg) 12%,var(--bg3));stroke:color-mix(in srgb,var(--bneg) 42%,var(--bd));}
.bond-stone.neg .bs-rune{color:var(--bneg);}
.bond-stone.neg.cur path{fill:color-mix(in srgb,var(--bneg) 22%,var(--bg3));stroke:var(--bneg);}
.bond-stone.neg.cur{filter:drop-shadow(0 4px 12px color-mix(in srgb,var(--bneg) 30%,transparent));}
/* v2.1.758 負向色改「兩套預算」（阿奈四輪定案，755 一律轉冷區作廢）：
   --bneg 仍由 js/ui.js 的 syncBondNegColor() 推導後寫回 body inline style，規則改為
   亮色主題「沉濁」（色相留自家往涼側小挪、彩度六折、明度沉近兩成）、
   深色主題「挪色不加彩」（色相挪大步、彩度鐵則低於該主題 accent、明度落在幽靈符文下半階，走霧色不走霓虹），
   細節見 ui.js 註解與 handoff/frontend.md。CSS 端維持 var(--bneg)，body 上留 #5a7a96 當保底
   （JS 沒跑到時仍是冷色，不會退回撞色的紅）。
   套用範圍＝負向「到過／正在」的階與羈絆列負值進度條；未達成＝原樣式降透明（見下），不另上色。 */
/* v2.1.759 未達成＝真・story-locked（阿奈更正 757：「點亮之後是什麼顏色它就是什麼顏色，只是透明度降低，視覺上灰灰的感覺」）：
   757 嘴上說採 .story-locked 的「原樣式＋降透明」，實作卻換成統一灰家族——被抓包。回歸字面意義：
   不換色。正向未達成＝accent 淡染原樣、負向未達成＝bneg 原樣，整顆降透明 .6
   （對齊 .cpf-ev-item.locked 的 .6；.story-locked 是 .55，但石頭在 coverflow 側位已縮小，再淡會消失）。
   shim 賭局終結：757 的 .neg.unreached 兩條 0,3,1 寫死灰，是為了防桌機 Chrome 109 的 shim 反轉 source order
   讓 .neg 蓋過灰——現在未達成不換色、沒有同特異性的顏色對決，賭局不存在，兩條連同全部灰規則移除。
   focus.unreached 淡陰影保留（置中未點亮也要有聚焦回饋）；描邊改灰那條一併移除，聚焦加粗走原生 .focus 規則。 */
/* v2.1.760 未達成透明度 .6→.4（阿奈實機打槍 .6「完全看不出來沒點亮」）：
   物理原因＝石身 fill 本來就是 accent 18% 混 bg3，八成二是背景色，opacity 在石身上咬不到東西；
   可見載體只有描邊（50% 混）跟符文。灰主題實測：到過描邊對底出力 72、.6 未達成剩 43（1.7 倍差，不可辨）、
   .4 剩 29 剛好落在 bd 邊框量級（2.5 倍差，讀成「空插槽」）。聚焦那顆回升 .6 保檢視可讀（0,3,0 蓋 0,2,0，
   opacity 不含 color-mix、shim 不碰，新舊瀏覽器一致）。機制不變：原色＋降透明，只調量。 */
/* v2.1.763 整顆浮水印・驗屍與搬家（阿奈定案「整個元素做成浮水印」；量值 .3、聚焦 .5）：
   石頭整體 opacity 不寫在 CSS——coverflow 的 _bondStoneApply（chat-sidebar.js）每次佈局都往
   .bond-stone 寫 inline opacity（邊緣淡出用），inline 蓋掉所有類規則，757 起的
   .bond-stone.unreached{opacity:.68→.6→.4→.6→.3} 全數從未生效，三輪調參調的是死旋鈕。
   浮水印現與邊緣淡出在 JS 內相乘（未達成 .3、聚焦未達成 .5），CSS 此後禁寫 .bond-stone 級 opacity。
   浮水印原則不變：自家色、整顆、均勻、沉到浮水印——分開降部位＝造型，均勻沉整體＝上鎖。 */
.bond-stone.focus.unreached{filter:drop-shadow(0 5px 12px color-mix(in srgb,var(--tx) 12%,transparent));}
.bond-caption{margin-top:8px;text-align:center;font-size:13px;color:var(--tx2);font-variant-numeric:tabular-nums;min-height:18px;}
.bond-caption b{color:var(--tx);font-weight:600;}
/* Emotion & Tracker bars (Scene Board) */
.emo-bar-row{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.emo-bar-row:last-child{margin-bottom:0;}
.emo-bar-label{font-size:13px;color:var(--tx2);min-width:36px;flex-shrink:0;}
.emo-bar-track{flex:1;height:8px;background:var(--bd);border-radius:4px;overflow:hidden;position:relative;}
.emo-bar-mid{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--tx2);opacity:.4;}
.emo-bar-fill{height:100%;border-radius:4px;background:var(--ac);transition:width .3s;}
.emo-bar-fill.neg{background:var(--del);}
.emo-bar-val{font-size:13px;font-weight:600;color:var(--tx3);min-width:36px;text-align:right;flex-shrink:0;}
/* Bond tier editor (character card) */
/* 羈絆階段編輯：左側漸層軸線（--del 恨端 → --bd2 零點 → --goldtx 愛端），--zp 由 JS 依零點列位置設定 */
.bond-tier-list{display:flex;flex-direction:column;gap:0;position:relative;padding-left:22px;}
.bond-tier-list::before{content:'';position:absolute;left:6px;top:22px;bottom:22px;width:2px;border-radius:1px;opacity:.8;background:linear-gradient(to bottom,color-mix(in srgb,var(--del) 78%,var(--bd)) 0%,var(--bd2) var(--zp,50%),color-mix(in srgb,var(--goldtx) 82%,var(--bd)) 100%);}
.bond-tier-row{display:flex;align-items:center;gap:10px;padding:9px 0;position:relative;transition:opacity .25s;}
.bond-tier-row::before{content:'';position:absolute;left:-19.5px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:var(--dotc,var(--tx2));box-shadow:0 0 0 3px var(--bg);transition:all .25s;}
.bond-tier-row.anchor::before{width:10px;height:10px;margin-top:-5px;left:-20px;border-radius:2px;transform:rotate(45deg);}
.bond-tier-row .bond-val-label{font-family:'Cormorant Garamond','Noto Sans TC',serif;font-size:16px;font-weight:500;color:var(--tx2);min-width:52px;text-align:right;flex-shrink:0;font-variant-numeric:tabular-nums;}
.bond-tier-row.anchor .bond-val-label{color:var(--goldtx);}
.bond-tier-row .bond-name-input{flex:1;padding:11px 14px;border:1px solid var(--bd);border-radius:10px;font-size:16px;background:var(--bg3);color:var(--tx);font-family:inherit;min-width:0;}
.bond-tier-row.anchor .bond-name-input{border-color:var(--bd2);background:var(--bgi);}
.bond-anchor-tag{width:40px;flex-shrink:0;text-align:center;font-family:'Cormorant Garamond','Noto Sans TC',serif;font-style:italic;font-size:12px;color:var(--tx2);opacity:.75;letter-spacing:.06em;}
.bond-tier-row.disabled{opacity:.32;}
.bond-tier-row.disabled::before{background:transparent;box-shadow:0 0 0 3px var(--bg),inset 0 0 0 1.5px var(--tx2);}
.bond-tier-row.disabled .bond-name-input{pointer-events:none;}
/* Creator Dashboard */
.dash-section{font-size:15px;font-weight:600;color:var(--tx3);margin:18px 0 10px;padding-left:2px;}
.dash-section:first-child{margin-top:0;}
.dash-ledger{background:var(--bg2);border:1px solid var(--bd);border-radius:12px;padding:2px 14px;box-shadow:0 1px 2px var(--sh);margin-bottom:10px;}
/* 總覽頁三區（v2.1.617 改版）：近況主卡 → 玩家三格 → 創作庫存。
   舊版三張同權重的 dash-ledger 清單改掉了：數字全長一樣、沒有主次，
   最該先看到的趨勢圖被壓在第三順位要捲動才看得到。
   註：.dash-ledger/.dash-lrow 仍由 shop.js 使用，不可刪。 */
.dash-hero{background:var(--bg2);border:1px solid var(--bd);border-radius:12px;padding:16px 14px 8px;box-shadow:0 1px 2px var(--sh);margin-bottom:10px;}
.dash-hero-lbl{font-size:13px;color:var(--tx2);letter-spacing:.06em;}
.dash-hero-n{display:flex;align-items:baseline;gap:8px;margin-top:3px;}
.dash-hero-n i{font-style:normal;font-size:34px;font-weight:700;line-height:1.1;color:var(--tx3);font-variant-numeric:tabular-nums;}
.dash-hero-n span{font-size:13px;color:var(--tx2);}
.dash-trio{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:10px;}
.dash-trio>div{background:var(--bg2);border:1px solid var(--bd);border-radius:12px;padding:13px 8px;text-align:center;box-shadow:0 1px 2px var(--sh);}
.dash-trio i{display:block;font-style:normal;font-size:22px;font-weight:700;line-height:1.15;color:var(--tx3);font-variant-numeric:tabular-nums;}
.dash-trio span{display:block;font-size:12px;color:var(--tx2);margin-top:3px;}
/* 欄數由「非零項目數」決定，走 inline grid-template-columns：零值不佔位（例：聊天模式 0 就不出現） */
.dash-stock{display:grid;gap:1px;background:var(--bd);border:1px solid var(--bd);border-radius:12px;overflow:hidden;}
.dash-stock>div{background:var(--bg2);padding:12px 4px;text-align:center;}
.dash-stock i{display:block;font-style:normal;font-size:18px;font-weight:600;color:var(--tx);font-variant-numeric:tabular-nums;}
.dash-stock span{display:block;font-size:12px;color:var(--tx2);margin-top:2px;}
.dash-stock-note{font-size:12px;color:var(--tx2);opacity:.75;text-align:center;margin-top:8px;}
/* 創作者收益卡・信箋式（v2.1.547 定版，阿奈選案）：置中構圖＋漸層飾線（空狀態同款語彙）＋底色軟墊結算條 */
.dash-rev-card{position:relative;background:var(--bg2);border:1px solid var(--bd);border-radius:12px;padding:22px 16px 14px;margin-bottom:8px;box-shadow:0 1px 2px var(--sh);text-align:center;}
.dash-rev-total{font-size:36px;font-weight:700;color:var(--tx);}
.dash-rev-unit{font-size:15px;font-weight:500;color:var(--tx2);margin-left:5px;}
.dash-rev-label{font-size:14px;color:var(--tx2);letter-spacing:2px;margin-bottom:4px;}
.dash-rev-line{width:56px;height:1px;margin:14px auto;background:linear-gradient(90deg,transparent,var(--bd2),transparent);}
.dash-rev-srcs{font-size:15px;color:var(--tx2);font-variant-numeric:tabular-nums;}
.dash-rev-srcs b{color:var(--tx);font-weight:600;margin-left:3px;}
.dash-rev-sep{margin:0 7px;opacity:.5;}
.dash-rev-pend{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--bg3);border-radius:9px;padding:11px 14px;margin-top:16px;text-align:left;}
.dash-rev-pend-label{font-size:16px;font-weight:600;color:var(--tx);}
.dash-rev-pend-hint{font-size:13px;color:var(--tx2);margin-top:2px;}
.dash-rev-pend-val{font-size:22px;font-weight:700;color:var(--tx);font-variant-numeric:tabular-nums;flex-shrink:0;}
/* 入帳紀錄：單卡分隔線列（與總覽 dash-ledger 同語彙），kind 為純文字小標不加框 */
.dash-rev-list.has-items{background:var(--bg2);border:1px solid var(--bd);border-radius:12px;padding:2px 14px;box-shadow:0 1px 2px var(--sh);}
.dash-rev-item{display:flex;align-items:flex-start;gap:10px;padding:12px 0;border-bottom:1px solid var(--bd);}
.dash-rev-item:last-child{border-bottom:none;}
.dash-rev-kind{flex-shrink:0;font-size:13px;color:var(--tx2);margin-top:3px;}
.dash-rev-body{flex:1;min-width:0;}
.dash-rev-title{font-size:15px;font-weight:500;color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dash-rev-meta{font-size:13px;color:var(--tx2);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dash-rev-msg{font-size:14px;color:var(--tx2);margin-top:4px;line-height:1.5;}
.dash-rev-amt{flex-shrink:0;font-size:17px;font-weight:700;color:var(--ac);margin-top:1px;}
.dash-rev-empty{padding:22px 16px;text-align:center;font-size:13px;color:var(--tx2);background:var(--bg2);border:1px solid var(--bd);border-radius:12px;line-height:1.6;box-shadow:0 1px 2px var(--sh);}
/* 玩家互動：角色明細展開（趨勢長條） */
.dash-detail-block{padding:10px 14px 4px;}
.dash-detail-title{font-size:12px;font-weight:600;color:var(--tx2);margin-bottom:5px;letter-spacing:.3px;}
.dash-detail-line{font-size:13px;color:var(--tx2);margin-bottom:3px;}
.dash-trend-info{font-size:13px;color:var(--tx2);text-align:center;margin:6px 0 16px;font-variant-numeric:tabular-nums;min-height:18px;}
.dash-trend-info b{color:var(--ac);font-weight:600;}
.dash-trend{display:flex;align-items:flex-end;margin:4px 0 8px;height:150px;border-bottom:1px dashed color-mix(in srgb,var(--ac) 40%,transparent);cursor:pointer;-webkit-tap-highlight-color:transparent;position:relative;}
/* 30 天平均線：只給一個安靜的基準，不放「較平均 ±n%」那種評價數字——
   漲的時候是 KPI 壓力，跌的時候更傷人，而長條的高低本身就已經是對比了。
   bottom 用 % 定位（相對 .dash-trend 的 height），改高度不必同步調。 */
.dash-trend-avg{position:absolute;left:0;right:0;border-top:1px dashed color-mix(in srgb,var(--tx2) 42%,transparent);pointer-events:none;}
.dash-trend-col{flex:1;min-width:0;height:100%;display:flex;align-items:flex-end;justify-content:center;}
.dash-trend-barwrap{width:100%;max-width:6px;height:100%;display:flex;align-items:flex-end;}
.dash-trend-bar{width:100%;background:var(--ac);opacity:.55;border-radius:2px 2px 0 0;transition:opacity .15s;}
.dash-trend-col.sel .dash-trend-bar{opacity:1;}
/* 每日數據訂閱牆（Resut+）：真實圖表照畫、整塊模糊打碼＋鎖頭覆蓋層，不藏內容只擋細節 */
.dash-locked{position:relative;}
.dash-locked-blur{filter:blur(6px);pointer-events:none;user-select:none;opacity:.7;}
.dash-locked-ov{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;cursor:pointer;color:var(--tx2);font-size:13px;-webkit-tap-highlight-color:transparent;}
.dash-char-card{background:var(--bg2);border:1px solid var(--bd);border-radius:12px;padding:12px 14px;margin-bottom:8px;cursor:pointer;-webkit-tap-highlight-color:transparent;box-shadow:0 1px 2px var(--sh);}

.dash-char-card:active{background:var(--bgi);}
.dash-char-card.expanded{border-radius:12px 12px 0 0;margin-bottom:0;border-bottom:none;box-shadow:none;}
.dash-char-top{display:flex;align-items:center;gap:11px;}
.dash-char-mid{flex:1;min-width:0;}
.dash-char-av{width:44px;height:44px;border-radius:50%;background:var(--bgi);display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--ac);font-weight:500;overflow:hidden;flex-shrink:0;border:1px solid var(--bd);}.dash-char-av img{width:100%;height:100%;object-fit:cover;}
.dash-char-name{min-width:0;font-size:16px;font-weight:600;color:var(--tx3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dash-char-main{flex-shrink:0;text-align:right;}
.dash-char-main i{display:block;font-style:normal;font-size:20px;font-weight:700;line-height:1.2;color:var(--tx);font-variant-numeric:tabular-nums;}
/* 「累計訊息」標籤只在第一列出現一次——每列都寫等於重複 n 次噪音 */
.dash-char-main span{display:block;font-size:12px;color:var(--tx2);opacity:.75;margin-bottom:1px;}
.dash-char-sub{margin-top:2px;font-size:12px;color:var(--tx2);}
.dash-char-sub i{font-style:normal;font-variant-numeric:tabular-nums;}
/* 羈絆分佈（v2.1.617）：改單一堆疊條。各階層加總必為 100%，是「組成」不是四個獨立指標；
   舊版四條各自獨立的橫條會被誤讀成四個不相干的比例。
   段色由淺到深＝羈絆由淺到深，段數隨角色自訂階層數自動分配（不寫死四段）。
   百分比一律放圖例、不寫在段內：窄段塞不下，且段色深淺不一沒有一種文字色在每段都夠對比。 */
.dash-bond-stack{display:flex;height:24px;border-radius:6px;overflow:hidden;background:var(--bd);}
.dash-bond-stack i{display:block;min-width:2px;}
.dash-bond-legend{display:flex;flex-wrap:wrap;gap:8px 14px;margin-top:11px;}
.dash-bond-legend div{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--tx2);font-variant-numeric:tabular-nums;}
.dash-bond-legend b{width:9px;height:9px;border-radius:2px;flex-shrink:0;}
.dash-bond-legend span{color:var(--tx);font-weight:500;}
.dash-tabs{display:flex;gap:6px;margin-bottom:14px;}
.dash-info{position:absolute;top:12px;right:12px;display:flex;padding:4px;cursor:pointer;color:var(--tx2);opacity:.65;-webkit-tap-highlight-color:transparent;}.dash-info:active{opacity:1;}
.dash-bond-detail{background:var(--bg2);border:1px solid var(--bd);border-top:none;border-radius:0 0 12px 12px;margin-bottom:8px;box-shadow:0 1px 2px var(--sh);}
.ch-icon{width:34px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--tx2);flex-shrink:0;border-radius:6px;}@media(hover:hover){.ch-icon:hover{color:var(--ac);background:var(--bgi);}}
.ham{width:28px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--tx2);flex-shrink:0;border-radius:6px;}@media(hover:hover){.ham:hover{color:var(--ac);background:var(--bgi);}}.ch>.ham.dots{margin-left:-4px;margin-right:-8px;}
.ham svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.ham.dots svg{fill:currentColor;stroke:none;}
.rp-sel{padding:8px 10px;border-radius:8px;border:1px solid var(--bd);background:var(--bg2);font-size:15px;color:var(--tx);cursor:pointer;font-family:inherit;display:flex;align-items:center;gap:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}@media(hover:hover){.rp-sel:hover{border-color:var(--ac);color:var(--ac);}}.rp-sel::after{content:'▾';font-size:10px;color:var(--tx2);flex-shrink:0;}
.rp-sel-sm{padding:5px 10px;border-radius:16px;font-size:13px;max-width:160px;overflow:hidden;text-overflow:ellipsis;}
.mp-card-top{display:flex;align-items:baseline;gap:10px;}.mp-card-top .mp-card-name{flex:1;min-width:0;}.mp-card-nub{flex-shrink:0;font-size:12px;color:var(--tx2);white-space:nowrap;}
.popup-ov{position:fixed;inset:0;background:rgba(0,0,0,.25);z-index:9998;display:flex;align-items:center;justify-content:center;visibility:hidden;opacity:0;pointer-events:none;transition:opacity .2s,visibility 0s .2s;}.popup-ov.show{visibility:visible;opacity:1;pointer-events:auto;transition:opacity .2s,visibility 0s 0s;}
.popup{background:var(--bg2);border-radius:16px;box-shadow:0 8px 24px rgba(0,0,0,.12);width:min(320px,90vw);max-height:70vh;overflow-y:auto;padding:20px 18px 16px;transform:scale(.92);opacity:0;transition:transform .2s cubic-bezier(.4,0,.2,1),opacity .2s;}.popup-ov.show .popup{transform:scale(1);opacity:1;}
/* ── 選單視窗升級（2026-08-29 阿奈定案，v2.1.934）：與確認視窗同語彙 ──
   標題置中＋英文襯線小標（各視窗 HTML 補一行 .dlg-eb）；選項拿掉描邊改乾淨列表行 */
.popup .dlg-eb{text-align:center;}
.popup-title{font-size:17px;font-weight:600;color:var(--tx3);letter-spacing:.03em;margin-bottom:10px;text-align:center;}
/* 匯出視窗標題列是 flex（左標題右多選鈕），維持靠左 */
#export-pick-pop .popup-title,#export-chat-pick-pop .popup-title{text-align:left;}
.popup-item{padding:11px 10px;border-radius:10px;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:space-between;gap:12px;transition:transform .1s;-webkit-tap-highlight-color:transparent;}@media(hover:hover){.popup-item:hover{background:var(--bg3);}}.popup-item:active{transform:scale(.97);}.popup-item.active{background:var(--acl);}
/* 底部動作列：細線 + 文字式按鈕（搭 .confirm-actions 用：<div class="confirm-actions popup-foot">）*/
.popup-foot{flex-shrink:0;border-top:1px solid var(--bd);margin-top:8px;padding-top:6px;}
/* 玩家檔案清單的頭像對齊匯出視窗的 36px（原 u-av-sm 28px 小一號，阿奈 2026-08-29 抓的）*/
#setup-pf-list .popup-item .av,#pp-list .popup-item .av{width:36px;height:36px;font-size:14px;}
/* 清單可能很長的挑選視窗：高度封頂在 55vh（跟匯出一致），太短看不完整、太長很好笑（阿奈 2026-08-29）*/
#chat-setup-pop .popup,#pp-pop .popup,#newchat-pop .popup,#popup-cpf-chat .popup{width:min(360px,92vw);max-height:55vh;}
/* 選中勾勾退役（阿奈 2026-08-29）：淡底色塊已足以標示選中，勾勾是重複記號。
   各渲染點的 <span class="check"> 保留在 DOM、由這裡統一隱藏——要復活只改這一行 */
.popup-item .check{display:none;}
/* popup 變體：頂部（標題+搜尋）固定，清單區獨立滾動 */
.popup.popup-fixed-head{display:flex;flex-direction:column;overflow:hidden;padding:20px 20px 12px;}
.popup-fixed-head .popup-title{flex-shrink:0;}
.popup-fixed-head .popup-search{flex-shrink:0;width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--bd);border-radius:8px;background:var(--bg);color:var(--tx);font-size:16px;margin-bottom:12px;}
.popup-fixed-head .popup-search:focus{outline:none;border-color:var(--ac);}
.popup-fixed-head .popup-list{flex:1;overflow-y:auto;margin:0 -8px;padding:0 8px 8px;}
.popup-fixed-head .popup-empty{padding:24px 0;text-align:center;color:var(--tx2);font-size:14px;}
/* popup 多選：頂部切換按鈕 + 底部 action bar */
.popup-toggle-btn{background:none;border:none;color:var(--ac);font-size:14px;font-weight:500;cursor:pointer;padding:4px 8px;font-family:inherit;-webkit-tap-highlight-color:transparent;}.popup-toggle-btn:active{opacity:.5;}
.popup-action-bar{display:none;flex-shrink:0;gap:8px;padding-top:10px;border-top:1px solid var(--bd);margin-top:8px;}.popup-action-bar .btn{flex:1;}
.popup.multi-mode .popup-action-bar{display:flex;}
.popup.multi-mode .popup-item{padding-left:10px;}
.popup-item .multi-check{display:none;width:20px;height:20px;border:1.5px solid var(--bd2);border-radius:4px;flex-shrink:0;align-items:center;justify-content:center;color:transparent;font-size:14px;background:var(--bg);}
.popup.multi-mode .popup-item .multi-check{display:flex;}
.popup.multi-mode .popup-item.picked .multi-check{background:var(--ac);border-color:var(--ac);color:var(--ac-fg);}
.popup.multi-mode .popup-item.picked{border-color:var(--ac);background:var(--acl);}
.export-pick-multi-only{display:none;}
.popup.multi-mode .export-pick-multi-only{display:inline-block;}
/* 匯出挑選器專屬尺寸：比預設 popup 胖一點、矮一點（其他 popup 不受影響） */
#export-pick-pop .popup,#export-chat-pick-pop .popup{width:min(360px,92vw);max-height:55vh;}
/* 世界書綁定底部抽屜（v2.1.925 重設計）：popup-ov.sheet-mode 沿用 openPopup/closePopup */
/* .wb-sheet 抽屜殼：進出場一律整張從底部滑上／滑下（與模式選單 .mp-sheet 同一條規則，2026-09-01 統一）。
   舊版是 translateY(40px)＋淡出：手指往下拖一段放手後會先彈回上面再淡掉，看起來像收到一半變幽靈。
   遮罩 visibility 延到 .3s 才藏，讓滑下動畫跑完。選取色一律 --sel（body 定義，勾選項與 .cal-opt 同一色）。 */
.wb-sheet{--wb-sheet-bg:color-mix(in srgb,var(--bg2) 92%,var(--ac));--wb-sel:var(--sel);background:var(--wb-sheet-bg);border-radius:20px 20px 0 0;box-shadow:0 -12px 40px rgba(0,0,0,.3);width:100%;max-height:76vh;max-height:calc(var(--app-h,100dvh)*.76);display:flex;flex-direction:column;transform:translateY(100%);transition:transform .3s cubic-bezier(.25,.46,.45,.94);}
.popup-ov.show .wb-sheet{transform:translateY(0);}
.popup-ov.sheet-mode{align-items:flex-end;transition:opacity .25s,visibility 0s .3s;}
.popup-ov.sheet-mode.show{transition:opacity .2s,visibility 0s 0s;}
.wb-sheet-grip{width:36px;height:4px;border-radius:2px;background:var(--bd2);margin:10px auto 0;flex-shrink:0;}
.wb-sheet-head{padding:14px 22px 12px;flex-shrink:0;display:flex;align-items:flex-end;justify-content:space-between;}
.wb-sheet-eb{font-family:'Cormorant Garamond',serif;font-size:11px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:var(--goldtx);opacity:.85;margin-bottom:3px;}
.wb-sheet-title{font-size:18px;font-weight:600;color:var(--tx3);}
.wb-slots{display:flex;gap:5px;align-items:center;padding-bottom:4px;}
.wb-slot{width:14px;height:5px;border-radius:3px;background:var(--bgi);transition:background .25s,box-shadow .25s;}
.wb-slot.on{background:var(--wb-sel);box-shadow:0 0 6px color-mix(in srgb,var(--wb-sel) 40%,transparent);}
.wb-slot-num{font-family:'Cormorant Garamond','Noto Sans TC',serif;font-size:15px;color:var(--tx2);margin-left:6px;min-width:28px;text-align:right;font-variant-numeric:tabular-nums;}
.wb-slot-num .flip{display:inline-block;animation:wbNumFlip .15s ease-out;}
@keyframes wbNumFlip{from{transform:translateY(6px);opacity:0;}to{transform:translateY(0);opacity:1;}}
@media(prefers-reduced-motion:reduce){.wb-slot-num .flip{animation:none;}}
.wb-sheet-list{overflow-y:auto;padding:2px 16px 8px;flex:1;min-height:34vh;}   /* 空清單也撐住高度：抽屜太矮視覺動線會斷（2026-08-31） */
.wb-sheet-it{display:flex;align-items:center;gap:12px;padding:13px 12px;border-radius:12px;cursor:pointer;transition:background .15s;position:relative;-webkit-tap-highlight-color:transparent;}
.wb-sheet-it:active{background:var(--bgi);}
.wb-sheet-it::after{content:'';position:absolute;left:52px;right:12px;bottom:0;height:1px;background:var(--bd);opacity:.55;}
.wb-sheet-it:last-child::after{display:none;}
.wb-sheet-tick{width:22px;height:22px;border-radius:7px;border:1.5px solid var(--bd2);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .2s;background:var(--bg3);}
.wb-sheet-tick svg{width:13px;height:13px;stroke:var(--wb-sheet-bg);stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.4);transition:all .2s;}
.wb-sheet-it.active .wb-sheet-tick{background:var(--wb-sel);border-color:var(--wb-sel);}
.wb-sheet-it.active .wb-sheet-tick svg{opacity:1;transform:scale(1);}
.wb-sheet-body{flex:1;min-width:0;}
.wb-sheet-name{font-size:16px;color:var(--tx);line-height:1.35;transition:color .2s;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wb-sheet-it.active .wb-sheet-name{color:var(--tx3);font-weight:500;}
.wb-sheet-sub{font-family:'Cormorant Garamond','Noto Sans TC',serif;font-style:italic;font-size:14px;color:var(--tx2);opacity:.75;margin-top:1px;letter-spacing:.03em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.wb-sheet-it.active .wb-sheet-sub{color:var(--wb-sel);opacity:.9;}
.wb-sheet-it.dim{opacity:.4;pointer-events:none;}
.wb-sheet-foot{flex-shrink:0;display:flex;gap:10px;align-items:center;padding:10px 16px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--bd);}
.wb-sheet-foot .btn{padding:10px 24px;border-radius:10px;font-size:15px;}
.wb-sheet-foot .btn.ghost{flex:0 0 auto;background:none;color:var(--tx2);}
.wb-sheet-foot .btn.main{flex:1;background:var(--ac);color:var(--ac-fg);font-weight:600;}
.confirm-ov{position:fixed;inset:0;background:rgba(0,0,0,.45);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);z-index:10000;display:flex;align-items:center;justify-content:center;visibility:hidden;opacity:0;pointer-events:none;transition:opacity .2s,visibility 0s .2s;}.confirm-ov.show{visibility:visible;opacity:1;pointer-events:auto;transition:opacity .2s,visibility 0s 0s;}
.confirm-box{background:var(--bg2);border-radius:16px;width:min(320px,88vw);padding:24px 22px 20px;box-shadow:0 8px 24px rgba(0,0,0,.15);text-align:center;transform:scale(.92);transition:transform .2s cubic-bezier(.4,0,.2,1);}.confirm-ov.show .confirm-box{transform:scale(1);}
/* ── 對話框系統（v2.1.932 阿奈定案）：英文襯線小標 + 中文標題 + 說明色訊息 ──
   跟世界書抽屜（wb-sheet-eb）、靈感骰同一套語彙。小標各呼叫點可用 opts.eb 覆寫，
   標題用 opts.title 傳入、不傳就整行隱藏，舊呼叫點零改動自動吃到新殼 */
.dlg-eb{font-family:'Cormorant Garamond',serif;font-size:11px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:var(--goldtx);opacity:.85;margin-bottom:5px;padding-left:.34em;}
.dlg-title{font-size:17px;font-weight:600;color:var(--tx3);letter-spacing:.03em;margin-bottom:14px;}
/* 標題下的襯線斜體小字（版本更新的「v935 → v936」這類）：空的就整行收掉 */
.dlg-sub{font-family:'Cormorant Garamond','Noto Sans TC',serif;font-style:italic;font-size:14px;color:var(--tx2);opacity:.8;margin:-8px 0 16px;letter-spacing:.04em;}.dlg-sub:empty{display:none;}
/* 純確認視窗（cfm）：原本的留白節奏是為三層結構（小標+標題+訊息）調的，
   拿掉小標後只剩兩層，同一套間距就顯得空——整體收緊一階（2026-08-29 阿奈回饋）*/
#cfm-ov .confirm-box{padding:21px 22px 17px;}
#cfm-ov .dlg-title{margin-bottom:9px;}
#cfm-ov .confirm-msg{margin-bottom:17px;line-height:1.65;}
.confirm-msg{font-size:15px;color:var(--tx2);margin-bottom:20px;line-height:1.7;}
.confirm-msg em{font-style:normal;color:var(--tx);font-weight:500;}
/* 對話框內的輸入框與字數計（inp / 申訴共用）：聚焦時邊框亮主色 */
.dlg-ta{width:100%;margin:2px 0 4px;padding:11px 13px;border:1px solid var(--bd);border-radius:10px;background:var(--bg);color:var(--tx);font-size:16px;font-family:inherit;resize:none;line-height:1.6;outline:none;}
.dlg-ta:focus{border-color:color-mix(in srgb,var(--ac) 55%,var(--bd));}
.dlg-ctr{margin:2px 0 14px;padding-right:2px;}
/* info 視窗收窄（v2.1.477 阿奈）：360 在手機上顯得又寬又扁，收到與 cfm 同寬 320——全站對話框單一寬度 */
#info-ov .confirm-box{width:min(320px,84vw);max-height:60vh;display:flex;flex-direction:column;}
/* info 視窗只有一顆「知道了」：置中自然寬，左右加寬一點站得穩 */
#info-ov .confirm-actions .btn{padding:8px 34px;}
.pay-ok{padding:4px 0 2px;}
.pay-ok-title{font-size:15px;font-weight:600;color:var(--tx2);letter-spacing:.5px;margin-bottom:14px;}
.pay-ok-amt{font-size:34px;font-weight:700;color:var(--ac);line-height:1.1;font-variant-numeric:tabular-nums;margin-bottom:8px;}
.pay-ok-amt span{font-size:16px;font-weight:500;color:var(--tx2);margin-left:3px;}
.pay-ok-plan{font-size:24px;}
.pay-ok-sub{font-size:13px;color:var(--tx2);}
.pay-ok-msg{font-size:16px;font-weight:600;color:var(--tx);margin-bottom:8px;}
/* 捲動能力保留、捲軸不顯示（阿奈定案：訊息視窗不出現捲軸——別再加 scrollbar-width:thin 之類的覆寫，全站 * 規則已隱藏）*/
#info-msg{flex:1;min-height:0;overflow-y:auto;}
/* 按鈕文字式（阿奈定案 2026-08-29 二修：實心方塊破壞質感，對話框內一律純文字動作）
   取消淡灰、主要動作主色粗字、危險動作紅色粗字；只作用在 .confirm-actions 內，全站其他實心按鈕不受影響 */
.confirm-actions{display:flex;gap:8px;justify-content:center;align-items:center;}.confirm-actions .btn{flex:0 0 auto;padding:8px 16px;font-size:15px;background:none;box-shadow:none;border:none;}
.confirm-actions.right{justify-content:flex-end;}
.confirm-actions .bghost{color:var(--tx2);font-weight:400;}
.confirm-actions .bp{color:var(--ac);font-weight:700;letter-spacing:.02em;}
.confirm-actions .bdel{color:var(--del);font-weight:700;letter-spacing:.02em;}
.bghost{background:none;color:var(--tx2);}
/* 版本更新：金線儀式時刻（其餘對話框維持 2212 行的主色細線）*/
#upd-ov .confirm-box{background-image:linear-gradient(90deg,transparent,color-mix(in srgb,var(--goldtx) 60%,transparent),transparent);background-size:62% 1px;background-position:top center;background-repeat:no-repeat;}
.side-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.25);z-index:300;}.side-overlay.show{display:block;}
.sidebar{position:fixed;top:0;right:0;width:300px;height:100%;z-index:301;background:var(--bg2);box-shadow:-4px 0 12px rgba(0,0,0,.08);transform:translateX(calc(100% + 16px));visibility:hidden;transition:transform .25s ease,visibility 0s .25s;overflow-y:auto;padding:20px 16px;}.sidebar.show{transform:translateX(0);visibility:visible;transition:transform .25s ease,visibility 0s 0s;}
.side-title{font-size:17px;font-weight:600;color:var(--tx3);margin-bottom:12px;padding-bottom:6px;}
.side-item{padding:7px 12px;border:none;border-radius:0;margin-bottom:0;cursor:pointer;font-size:16px;color:var(--tx);display:flex;align-items:center;gap:8px;}@media(hover:hover){.side-item:hover{color:var(--ac);}}.side-item.danger{color:var(--del);margin-top:6px;}.side-item.danger svg{stroke:var(--del);}
.side-item svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
.side-scene-status{margin-left:auto;font-size:12px;color:var(--tx2);}
/* 對話設定側欄分組眉標（v2.1.859 阿奈選 B）：跟角色頁 Reader Replies / Original Post 同一套襯線小字語彙，
   只靠留白分組不畫線；危險操作（重置 / 刪除）不給標籤，用 .side-rule 一條髮絲線加寬留白隔開，紅字本身就是分類 */
.side-eyebrow{margin:18px 0 2px 12px;font-family:'Cormorant Garamond',serif;font-size:12px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--ac);opacity:.75;}
.side-rule{height:1px;background:var(--bd);margin:18px 12px 10px;}
.side-profile-active{padding:11px 12px;border:1px solid var(--ac);border-radius:8px;margin-bottom:6px;cursor:pointer;display:flex;align-items:center;gap:8px;font-size:15px;background:var(--acl);color:var(--tx3);}@media(hover:hover){.side-profile-active:hover{opacity:.85;}}.side-profile-active .switch-hint{font-size:12px;color:var(--ac);margin-left:auto;}
.fp{position:fixed;inset:0;z-index:260;background:var(--bg);display:flex;flex-direction:column;visibility:hidden;opacity:0;pointer-events:none;transform:translateX(40px);transition:transform .25s cubic-bezier(.4,0,.2,1),opacity .25s cubic-bezier(.4,0,.2,1),visibility 0s .25s;}.fp.show{visibility:visible;opacity:1;pointer-events:auto;transform:translateX(0);transition:transform .25s cubic-bezier(.4,0,.2,1),opacity .25s cubic-bezier(.4,0,.2,1),visibility 0s 0s;}
.fp-head{padding:12px 16px;border-image:linear-gradient(90deg,transparent,var(--bd) 18%,var(--bd) 82%,transparent) 1;border-width:0 0 1px 0;border-style:solid;display:flex;align-items:center;gap:10px;background:var(--bg2);flex-shrink:0;}.fp-title{font-size:17px;font-weight:600;color:var(--tx3);flex:1;}
.fp-body{flex:1;overflow-y:auto;padding:16px;}.fp-body.full{padding:16px 0;display:flex;flex-direction:column;}.fp-body.full .f{padding:0 16px;}.fp-body.full .f:last-child{flex:1;display:flex;flex-direction:column;}.fp-body.full .f:last-child textarea{flex:1;min-height:120px;resize:none;}.fp-body.full .ev-content-f{flex:1;display:flex;flex-direction:column;}.fp-body.full .ev-content-f textarea{flex:1;min-height:120px;resize:none;}
.drag-h{cursor:grab;color:var(--bd2);font-size:16px;padding:0 4px;user-select:none;touch-action:none;display:inline-flex;align-items:center;}.drag-h:active{cursor:grabbing;color:var(--ac);}.drag-h svg{width:16px;height:16px;}
/* Settings page */
.set-section{border-bottom:8px solid var(--bg3);padding-bottom:4px;}
.set-label{font-size:16px;font-weight:700;color:var(--tx3);padding:16px 16px 8px;}
.set-item{display:flex;align-items:center;gap:10px;padding:16px;cursor:pointer;transition:background .1s,transform .1s;min-height:28px;-webkit-tap-highlight-color:transparent;}.set-item:active{background:var(--bg3);transform:scale(.98);}
.set-item-text{flex:1;min-width:0;font-size:16px;color:var(--tx3);}
.set-item-sub{font-size:13px;color:var(--tx2);margin-top:2px;}
/* 客服留言（fp-support）v2.1.540：一條串用到底；氣泡沿用聊天視窗的不對稱圓角語言 */
.sup-thread{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:14px;}
.sup-note{text-align:center;font-size:12px;color:var(--tx2);padding:2px 24px 6px;line-height:1.6;}
.sup-date{text-align:center;font-size:12px;color:var(--tx2);margin:4px 0;}
.sup-row{display:flex;flex-direction:column;max-width:82%;}
.sup-row.official{align-self:flex-start;align-items:flex-start;}
.sup-row.player{align-self:flex-end;align-items:flex-end;}
.sup-name{font-size:12px;color:var(--ach);font-weight:600;margin:0 0 4px 2px;display:flex;align-items:center;gap:5px;}.sup-logo{width:16px;height:16px;border-radius:50%;display:block;}
.sup-bubble{width:fit-content;max-width:100%;padding:10px 14px;font-size:15px;line-height:1.7;color:var(--tx);overflow-wrap:break-word;word-break:break-word;white-space:pre-wrap;-webkit-user-select:text;user-select:text;}
.sup-row.official .sup-bubble{background:var(--msg-ai);box-shadow:0 1.5px 6px var(--sh);border-radius:6px 18px 18px 18px;}
.sup-row.player .sup-bubble{background:var(--msg-user);border-radius:18px 6px 18px 18px;}
.sup-time{font-size:11px;color:var(--tx2);margin-top:4px;padding:0 2px;}
.sup-bar{flex-shrink:0;background:var(--bg2);border-top:1px solid var(--bd);padding:10px 12px calc(10px + env(safe-area-inset-bottom,0));display:flex;gap:8px;align-items:flex-end;}
.sup-bar textarea{flex:1;background:var(--bg3);border:1px solid var(--bd);border-radius:18px;color:var(--tx);font-family:inherit;font-size:16px;padding:9px 14px;resize:none;line-height:1.5;max-height:96px;outline:none;margin-left:-8px;}/* 圖示到框的可見距離＝gap 8 ＋圖示內縮 9，拉 -8 收到 9px；右側送出圓不受影響 */
.sup-img{width:fit-content;max-width:100%;max-height:240px;border-radius:12px;display:block;cursor:pointer;box-shadow:0 1.5px 6px var(--sh);}
.sup-row .sup-img+.sup-bubble{margin-top:6px;}
.sup-attach{width:38px;height:38px;border-radius:50%;border:none;background:none;color:var(--tx2);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-bottom:3px;margin-left:-8px;}/* 左右視覺平衡：左圖示是裸線稿，可見邊在按鈕內縮 9px；右送出是實心圓貼 bar padding 12px。拉 -8 讓線稿可見邊 13px ≈ 圓 12px（裸線稿留 1px 光學餘量） *//* 貼底補償：單行輸入框 44px、球 38px，補 3px 視覺置中（2026-08-10 阿奈抓的） */
.sup-attach:active{transform:scale(.92);}
.sup-attach.busy{opacity:.4;pointer-events:none;animation:supPulse 1s ease-in-out infinite;}
@keyframes supPulse{50%{opacity:.15;}}
.sup-send{width:38px;height:38px;border-radius:50%;border:none;background:var(--ac);color:var(--ac-fg);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .1s,opacity .1s;margin-bottom:3px;}
.sup-send:active{transform:scale(.92);}
/* 飛機圖示光學置中：feather send 重心偏右上，圓鈕內統一往左下偏 5%（stop 方塊不偏） */
.sup-send svg,.cpf-comment-send svg,.ci-send:not(.stop) svg{transform:translate(-5%,5%);}
.sup-send:disabled{opacity:.4;}
.set-item-val{font-size:13px;color:var(--tx2);font-family:monospace;max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.set-arrow{width:18px;height:18px;stroke:var(--tx2);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
.set-copy{width:16px;height:16px;stroke:var(--tx2);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
.auth-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;max-width:320px;padding:14px 20px;border-radius:12px;border:1px solid var(--bd);background:var(--bg2);color:var(--tx3);font-size:15px;font-weight:500;font-family:inherit;cursor:pointer;transition:background .15s;}.auth-btn:active{background:var(--bg3);}
.theme-row{display:flex;gap:10px;margin-top:0;flex-wrap:wrap;row-gap:10px;}.theme-dot{width:34px;height:34px;border-radius:50%;cursor:pointer;border:2px solid var(--bd);transition:all .15s;}@media(hover:hover){.theme-dot:hover{transform:scale(1.1);}}.theme-dot.active{border-color:var(--tx3);box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--tx3);}
/* ── Skeleton 載入中佔位（避免空白頁面）── */
@keyframes skelShimmer{0%{background-position:-200px 0;}100%{background-position:200px 0;}}
.skel{background:linear-gradient(90deg,var(--bg3) 0%,var(--bgi) 50%,var(--bg3) 100%);background-size:200px 100%;animation:skelShimmer 1.2s ease-in-out infinite;border-radius:8px;}
.skel-carousel{display:flex;justify-content:center;padding:8px 0;gap:12px;}
.skel-carousel .skel{width:60%;max-width:240px;aspect-ratio:2/3;border-radius:14px;}
.skel-tabs{display:flex;gap:6px;padding:0 0 12px;}
.skel-tabs .skel{width:60px;height:30px;border-radius:15px;}
.skel-card{height:130px;border-radius:12px;margin-bottom:10px;}
/* ── Discover Page ── */
.discover-section-title{font-size:18px;font-weight:600;color:var(--tx3);margin-bottom:10px;}
.carousel-wrap{position:relative;margin:0 -16px;overflow-x:clip;overflow-y:visible;padding:8px 0 26px;}/* x 軸 clip 裁左右滑動溢出、y 軸放行讓卡片陰影不被切出直線邊界；底部 padding 給遠暈留位（v2.1.347） */
.carousel-track{display:flex;align-items:center;transition:transform .35s cubic-bezier(.25,.46,.45,.94);will-change:transform;}
.carousel-slide{flex-shrink:0;padding:0 6px;box-sizing:border-box;transition:transform .35s,opacity .35s;}
.carousel-card{border-radius:14px;overflow:hidden;background:var(--bg2);border:1px solid var(--bd);cursor:pointer;aspect-ratio:2/3;position:relative;}
.carousel-card img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;}
.carousel-card .cc-initial{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:32px;color:var(--ac);font-weight:600;opacity:.4;background:var(--bgi);}
.carousel-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:50%;background:linear-gradient(to top,rgba(0,0,0,.55) 0%,rgba(0,0,0,.2) 40%,transparent 100%);pointer-events:none;border-radius:0 0 14px 14px;}
.carousel-card-text{position:absolute;bottom:0;left:0;right:0;z-index:2;padding:12px 14px;}
.carousel-card-name{font-size:17px;font-weight:600;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.carousel-card-tag{font-size:14px;color:#fff;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 4px rgba(0,0,0,.4);}
.carousel-slide.center{transform:scale(1);opacity:1;}
.carousel-slide.side{transform:scale(.88);opacity:.55;}
.carousel-dots{display:none;}
.carousel-dot{width:6px;height:6px;border-radius:50%;background:var(--bd2);transition:all .25s;}.carousel-dot.a{background:var(--ac);width:16px;border-radius:3px;}
/* ── Friends Top Icons ── */
.friends-top{margin-bottom:4px;}
.friends-top-icons{display:flex;justify-content:flex-end;align-items:center;gap:18px;padding:12px 0 0;}
.fi-group{display:flex;align-items:center;gap:10px;}
.fi-group+.fi-group{position:relative;padding-left:18px;}
.fi-group+.fi-group::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:16px;background:var(--bd2);opacity:.7;}
.friends-icon{position:relative;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--tx2);transition:color .15s;width:24px;height:24px;}.friends-icon::before{content:'';position:absolute;inset:-8px;}@media(hover:hover){.friends-icon:hover{color:var(--ac);}}
.friends-icon svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.notif-dot{display:none;position:absolute;top:0;right:0;width:8px;height:8px;border-radius:50%;background:var(--del);border:1.5px solid var(--bg);}.notif-dot.show{display:block;}
/* ── 通知列表卡片（v2.1.66） ── */
/* 用 class 統一管理；inline style 在某些 client / cache 情境下會被吃掉，class 比較穩。 */
.notif-item{display:flex;align-items:center;gap:12px;padding:18px 0;border-bottom:1px solid var(--bd);}
.notif-item.unread{background:var(--bg2);margin:0 -16px;padding-left:16px;padding-right:16px;}
.notif-item>.av{width:48px;height:48px;font-size:20px;flex-shrink:0;}
/* 系統通知（管理員下架 / 停權）用紅底白字 ⚠ 區別於使用者互動通知 */
.notif-item>.av.sys-warn{background:var(--del);color:#fff;border-color:color-mix(in srgb,var(--del) 80%,#000);cursor:default;}
.notif-item>.av .sys-ico{width:22px;height:22px;fill:currentColor;display:block;transform:translateY(1px);} /* 幾何已置中（實測誤差 .5px），往下 1px 是視覺補償：星芒上尖比下尖顯眼、重心看起來偏高 */
.notif-item>.av.sys-ok{background:var(--ok);color:#fff;border-color:color-mix(in srgb,var(--ok) 80%,#000);cursor:default;}
.notif-item>.notif-body{flex:1;min-width:0;}
.notif-item .notif-text{font-size:14px;color:var(--tx);line-height:1.5;}
.notif-item .notif-time{font-size:12px;color:var(--tx2);margin-top:4px;}
/* 申訴按鈕（content_taken_down 通知下方）：未申訴可點 / 審查中・已審查灰色不可點 */
.notif-item .notif-appeal-btn{margin-top:8px;padding:6px 14px;font-size:13px;border:1px solid var(--ac);background:transparent;color:var(--ac);border-radius:16px;cursor:pointer;}
.notif-item .notif-appeal-btn:active{opacity:.7;}
.notif-item .notif-appeal-btn.pending{border-color:var(--bd);color:var(--tx2);cursor:default;background:var(--bg2);}
/* 角色頁下架 banner 內的申訴按鈕：白底紅字（banner 本身是紅底，按鈕反白） */
.cpf-takedown-banner .cpf-appeal-btn{padding:5px 14px;font-size:13px;border:1px solid #fff;background:#fff;color:var(--del);border-radius:16px;cursor:pointer;font-weight:500;}
.cpf-takedown-banner .cpf-appeal-btn:active{opacity:.8;}
.cpf-takedown-banner .cpf-appeal-btn.pending{background:rgba(255,255,255,.25);color:rgba(255,255,255,.75);border-color:rgba(255,255,255,.4);cursor:default;}
/* ── Account Header (LINE-style) ── */
.acct-header{display:flex;align-items:center;gap:14px;padding:20px 16px 6px;margin:0 -16px;}.acct-info{cursor:pointer;flex:1;}.acct-info:active{opacity:.7;}.acct-av{cursor:pointer;}
.acct-info{flex:1;min-width:0;}
.acct-name{font-size:22px;font-weight:700;color:var(--tx3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.acct-bio{font-size:14px;color:var(--tx2);margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;}
/* Signature editor overlay */
.sig-overlay{position:fixed;inset:0;z-index:9999;}
.sig-bg-solid{position:absolute;inset:0;background:#1a1a1a;}
.sig-bg-img{position:absolute;inset:-40px;background-size:cover;background-position:center;filter:blur(35px) brightness(.45) saturate(1.2);}
.sig-content{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;}
.sig-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;flex-shrink:0;}
.sig-close{width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.sig-count{font-size:14px;color:rgba(255,255,255,.5);}
.sig-save{font-size:15px;color:#fff;font-weight:600;cursor:pointer;padding:6px 12px;}
.sig-save:active{opacity:.7;}
.sig-body{flex:1;display:flex;align-items:center;justify-content:center;padding:0 32px;}
.sig-input{color:#fff;font-size:20px;text-align:center;width:100%;outline:none;font-family:inherit;line-height:1.6;text-shadow:0 1px 8px rgba(0,0,0,.3);word-break:break-word;min-height:1.6em;}
.sig-input:empty::before{content:attr(data-placeholder);color:rgba(255,255,255,.35);pointer-events:none;}
.acct-av{flex-shrink:0;}
/* ── Friends List ── */
.friend-section-label{font-size:13px;font-weight:500;color:var(--tx2);letter-spacing:.6px;padding:14px 4px 8px;margin-top:2px;}
.friend-section-label b{font-weight:600;margin-left:2px;font-variant-numeric:tabular-nums;}
.home-official-row{display:flex;gap:12px;overflow-x:auto;padding:4px 16px 12px;margin:0 -16px;-webkit-overflow-scrolling:touch;scrollbar-width:none;}.home-official-row::-webkit-scrollbar{display:none;}
.home-off-card{flex-shrink:0;width:100px;text-align:center;cursor:pointer;}.home-off-card:active{opacity:.7;}
.home-off-av{width:72px;height:72px;border-radius:50%;overflow:hidden;margin:0 auto 8px;background:var(--bg3);border:2px solid var(--ac);box-shadow:0 2px 8px rgba(0,0,0,.1);}
.home-off-av img{width:100%;height:100%;object-fit:cover;display:block;}
.home-off-name{font-size:14px;font-weight:600;color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.home-off-tag{font-size:13px;color:var(--tx2);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* Discover tab browsing */
.disc-tab-bar{display:flex;gap:6px;overflow-x:auto;margin:0 -16px;padding:0 16px 12px;-webkit-overflow-scrolling:touch;scrollbar-width:none;position:relative;}.disc-tab-bar::-webkit-scrollbar{display:none;}
.disc-swipe-wrap{overflow:hidden;position:relative;transition:height .3s ease;margin:0 -16px -24px;}.disc-swipe-track{display:flex;will-change:transform;align-items:flex-start;}.disc-swipe-page{flex-shrink:0;min-height:80px;padding:0 16px 24px;}
/* 溝槽所有權歸分頁（2026-08-10 定案，阿奈的架構）：wrap 出血到滿版（margin:0 -16px，
   同 .disc-tab-bar 的滿版慣例），每個分頁自帶左右 16px 內距＋底部 24px。
   於是遮罩線（wrap 邊緣）永遠落在空溝裡，卡片陰影在自己分頁內就有呼吸空間，
   滑動時每頁帶著自己的溝槽進場，接縫不會切到任何內容。
   wrap 的 margin-bottom:-24px 抵銷分頁內距的 24px：陰影呼吸留在遮罩「內」，
   但不疊加到 .scr 的底部留白上（見第 16 條底部留白單一所有權）。
   前一版（v2.1.712）的 overflow-x:clip＋y:visible 撤掉：clip 祖先配上
   will-change:transform 的軌道在部分 Android Chrome 上合成出錯，實機出現
   軌道卡在半頁的災難（阿奈截圖）。教訓：swipe 分頁的內容永遠不要貼齊遮罩邊，
   與其去改遮罩的裁法，不如讓內容自己離邊界遠一點。 */
/* 靈感骰子入口鈕（管理頁角色分頁右上）——刻意不用 .btn：
   .btn 是灰底方角的一般動作鈕，與此處的膠囊 pill 導覽語言不同；
   且靈感骰子是「儀式時刻」，依設計規則可用金色，圖示也對齊彈窗裡的 d20（原本是六面骰，入口與目的地不一致）。 */
.insp-btn{display:flex;align-items:center;gap:7px;padding:7px 15px 7px 12px;border-radius:20px;border:1px solid color-mix(in srgb,var(--gold) 42%,transparent);background:color-mix(in srgb,var(--gold) 8%,var(--bg2));color:var(--goldtx);font-size:14px;font-family:inherit;font-weight:500;cursor:pointer;transition:background .15s,border-color .15s;}
.insp-btn svg{flex-shrink:0;}
@media(hover:hover){.insp-btn:hover{background:color-mix(in srgb,var(--gold) 15%,var(--bg2));border-color:color-mix(in srgb,var(--gold) 62%,transparent);}}
.insp-btn:active{transform:scale(.96);}
.inspire-ov{position:fixed;inset:0;z-index:600;background:radial-gradient(120% 120% at 50% 30%,rgba(0,0,0,.42),rgba(0,0,0,.62));display:flex;align-items:center;justify-content:center;visibility:hidden;opacity:0;pointer-events:none;transition:visibility .2s,opacity .2s;padding:16px;}.inspire-ov.show{visibility:visible;opacity:1;pointer-events:auto;}
.inspire-card{position:relative;background:var(--bg2);border-radius:20px;padding:0;max-width:362px;width:100%;box-shadow:0 24px 64px rgba(0,0,0,.38),0 0 0 1px color-mix(in srgb,var(--gold) 28%,transparent);transform:scale(.92);transition:transform .25s cubic-bezier(.34,1.56,.64,1);overflow:hidden;max-height:88vh;display:flex;flex-direction:column;}
.inspire-card::before{content:'';position:absolute;top:0;left:24px;right:24px;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--gold) 70%,transparent),transparent);}
.inspire-ov.show .inspire-card{transform:scale(1);}
.inspire-card-head{position:relative;padding:26px 20px 14px;text-align:center;flex-shrink:0;}
.insp-halo{position:absolute;top:-26px;left:50%;width:190px;height:140px;transform:translateX(-50%);pointer-events:none;background:radial-gradient(closest-side,color-mix(in srgb,var(--gold) 32%,transparent),transparent 72%);animation:inspHalo 4.2s ease-in-out infinite;}
@keyframes inspHalo{0%,100%{opacity:.55;}50%{opacity:1;}}
.insp-d20{position:relative;display:block;margin:0 auto 8px;color:var(--gold);filter:drop-shadow(0 0 2.5px color-mix(in srgb,var(--gold) 80%,transparent)) drop-shadow(0 0 10px color-mix(in srgb,var(--gold) 50%,transparent));}
.inspire-eyebrow{font-family:'Cormorant Garamond',serif;font-size:11px;font-weight:600;letter-spacing:.34em;text-transform:uppercase;color:var(--goldtx);opacity:.85;}
.inspire-card-title{font-size:18px;font-weight:700;color:var(--tx);letter-spacing:.4px;margin-top:2px;}
.inspire-card-sub{font-size:13px;color:var(--tx2);margin-top:4px;}
.inspire-card-body{padding:8px 18px 8px;display:flex;flex-direction:column;gap:13px;overflow-y:auto;flex:1;-webkit-overflow-scrolling:touch;}
.insp-slot-row{display:flex;align-items:center;gap:12px;}
.insp-slot-label{width:40px;flex-shrink:0;text-align:center;}
.insp-slot-label .zh{display:block;font-size:13px;font-weight:600;color:var(--tx2);}
.insp-slot-label .en{display:block;font-family:'Cormorant Garamond',serif;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--goldtx);opacity:.7;margin-top:1px;}
.insp-slot-window{flex:1;height:54px;position:relative;overflow:hidden;border-radius:10px;cursor:pointer;background:var(--bg3);border:1px solid color-mix(in srgb,var(--gold) 38%,var(--bd));box-shadow:inset 0 2px 6px rgba(0,0,0,.07);-webkit-tap-highlight-color:transparent;}
.insp-slot-window::before,.insp-slot-window::after{content:'';position:absolute;width:7px;height:7px;border:1px solid var(--gold);pointer-events:none;z-index:3;}
.insp-slot-window::before{top:3px;left:3px;border-right:0;border-bottom:0;border-top-left-radius:5px;}
.insp-slot-window::after{bottom:3px;right:3px;border-left:0;border-top:0;border-bottom-right-radius:5px;}
.insp-slot-fade{position:absolute;inset:0;pointer-events:none;z-index:2;background:linear-gradient(180deg,var(--bg3) 0%,transparent 34%,transparent 66%,var(--bg3) 100%);}
.insp-needle{position:absolute;top:50%;width:7px;height:1px;background:var(--gold);opacity:.75;pointer-events:none;z-index:3;}
.insp-needle.l{left:0;}.insp-needle.r{right:0;}
.insp-slot-track{display:flex;flex-direction:column;will-change:transform;}
.insp-slot-track.spin{filter:blur(1.6px);}
.insp-slot-item{height:30px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:500;color:var(--tx);white-space:nowrap;padding:0 10px;overflow:hidden;text-overflow:ellipsis;}
.insp-slot-window.land{animation:inspLand .55s ease-out;}
@keyframes inspLand{0%{box-shadow:inset 0 2px 6px rgba(0,0,0,.07),0 0 0 1px var(--gold),0 0 14px color-mix(in srgb,var(--gold) 55%,transparent);}100%{box-shadow:inset 0 2px 6px rgba(0,0,0,.07);}}
.insp-lock{width:28px;height:28px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--bd);background:var(--bg3);color:var(--tx2);cursor:pointer;transition:all .2s;position:relative;-webkit-tap-highlight-color:transparent;}
.insp-lock::before{content:'';position:absolute;inset:-7px;}
.insp-lock:active{transform:scale(.86);}
.insp-lock.on{background:color-mix(in srgb,var(--gold) 16%,var(--bg3));border-color:var(--gold);color:var(--goldtx);}
.insp-slot-row.locked .insp-slot-window{opacity:.62;cursor:default;}
.insp-slot-row.locked .insp-slot-item{color:var(--tx2);}
.insp-section{margin-top:14px;}
.insp-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;padding:0 2px;}
.insp-section-label .zh{font-size:13px;font-weight:600;color:var(--tx2);}
.insp-section-label .en{font-family:'Cormorant Garamond',serif;font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--goldtx);opacity:.7;margin-left:7px;}
.insp-reroll{position:relative;width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--bg3);border:1px solid var(--bd);cursor:pointer;color:var(--tx2);transition:transform .35s cubic-bezier(.34,1.56,.64,1);flex-shrink:0;-webkit-tap-highlight-color:transparent;}.insp-reroll::before{content:'';position:absolute;inset:-8px;}
.insp-reroll.spun{transform:rotate(360deg);}
.insp-pills{display:flex;gap:8px;flex-wrap:wrap;}
.insp-pill{padding:6px 13px;border-radius:16px;background:var(--bg3);border:1px solid var(--bd2);font-size:13px;font-weight:500;color:var(--tx);cursor:pointer;transition:all .18s;-webkit-tap-highlight-color:transparent;}.insp-pill:active{opacity:.7;}
.insp-pill.on{background:color-mix(in srgb,var(--gold) 14%,var(--bg2));border-color:var(--gold);color:var(--goldtx);font-weight:600;box-shadow:0 1px 6px color-mix(in srgb,var(--gold) 30%,transparent);}
@keyframes inspPop{0%{opacity:0;transform:scale(.6);}100%{opacity:1;transform:scale(1);}}
.insp-pill.pop{animation:inspPop .28s cubic-bezier(.34,1.3,.64,1) both;}
.inspire-actions{display:flex;flex-direction:column;gap:2px;padding:16px 18px 18px;flex-shrink:0;justify-content:center;align-items:center;}
.inspire-actions .btn{border:none;background:none;font-size:15px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:6px;}
.inspire-actions .btn.insp-go{padding:11px 32px;border-radius:999px;letter-spacing:.06em;background:color-mix(in srgb,var(--gold) 13%,transparent);border:1px solid var(--gold);color:var(--goldtx);box-shadow:0 0 16px color-mix(in srgb,var(--gold) 22%,transparent);}
.inspire-actions .btn.insp-go:active{background:color-mix(in srgb,var(--gold) 24%,transparent);}
.inspire-actions .btn.insp-again{padding:9px 16px;color:var(--tx2);font-weight:500;border-radius:999px;}
.inspire-actions .btn.insp-again:active{opacity:.6;}
.insp-btn-reroll{display:inline-flex;align-items:center;gap:6px;justify-content:center;}
.insp-btn-reroll svg{transition:transform .4s cubic-bezier(.34,1.56,.64,1);}
.insp-btn-reroll.spin svg{transform:rotate(360deg);}
@media (prefers-reduced-motion:reduce){.insp-halo{animation:none;}.insp-slot-track{transition:none !important;filter:none !important;}}
.disc-section{margin-top:40px;}
.disc-swipe-page>.disc-section:first-child{margin-top:20px;}
.disc-tab{padding:9px 18px;border-radius:20px;background:var(--bg3);border:1px solid var(--bd);font-size:15px;font-weight:500;color:var(--tx2);cursor:pointer;transition:all .15s;white-space:nowrap;flex-shrink:0;-webkit-tap-highlight-color:transparent;}
.disc-tab:active{opacity:.7;}
.disc-tab.active{background:var(--ac);border-color:var(--ac);color:var(--ac-fg);font-weight:600;box-shadow:0 2px 8px color-mix(in srgb,var(--ac) 30%,transparent);}
.disc-list{display:flex;flex-direction:column;gap:10px;padding:4px 0 0;}
.disc-card{display:flex;gap:12px;height:130px;padding:10px;border:1px solid var(--bd);border-radius:12px;background:var(--bg2);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .1s;overflow:hidden;}
.disc-card:active{transform:scale(.97);}
.disc-card-av{width:76px;height:110px;flex-shrink:0;background:var(--bgi);border-radius:8px;overflow:hidden;}
.disc-card-av img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;}
.disc-card-av .disc-card-initial{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:600;color:var(--ac);opacity:.4;}
.disc-card-info{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;overflow:hidden;}
.disc-card-name-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
.disc-card-name{font-size:17px;font-weight:600;color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
.disc-card-tags{font-size:13px;color:var(--ac);flex-shrink:0;white-space:nowrap;font-weight:500;}
.disc-card-sub{font-size:14px;color:var(--tx2);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.disc-card-desc{font-size:14px;color:var(--tx2);margin-top:5px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.report-reason{padding:6px 14px;border-radius:16px;font-size:13px;border:1px solid var(--bd);background:var(--bg3);color:var(--tx2);cursor:pointer;transition:all .15s;}.report-reason.sel{background:color-mix(in oklch,var(--del) 15%,transparent);border-color:var(--del);color:var(--del);}
.friend-item{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;transition:background .15s,transform .1s;-webkit-tap-highlight-color:transparent;margin:0 -16px;}@media(hover:hover){.friend-item:hover{background:var(--bg3);}}.friend-item:active{background:var(--bg3);transform:scale(.98);}
.friend-info{flex:1;min-width:0;}
.friend-name{font-size:16px;font-weight:500;color:var(--tx3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;gap:4px;}
.friend-sub{font-size:13px;color:var(--tx2);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.acct-swipe-wrap{flex:1;min-height:0;overflow:hidden;position:relative;}
.acct-swipe-track{display:flex;width:500%;height:100%;will-change:transform;}/* 5 個分頁（account.js ACCT_TABS） */
.acct-swipe-page{width:20%;flex-shrink:0;height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px 16px var(--scr-pb);}
.um-item{display:flex;gap:10px;padding:13px 10px 13px 17px;background:var(--bg2);border:1px solid var(--bd);border-radius:14px;margin-bottom:10px;cursor:pointer;transition:background .15s,transform .1s;box-sizing:border-box;-webkit-tap-highlight-color:transparent;position:relative;box-shadow:0 1px 2px var(--sh);}.um-item:active{background:var(--bg3);transform:scale(.985);}
.um-mid{flex:1;min-width:0;align-self:center;}
.um-name{font-size:17px;font-weight:600;color:var(--tx3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.um-meta{font-size:14px;color:var(--tx2);margin-top:2px;line-height:1.5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.um-side{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:6px;flex-shrink:0;}
.um-chip{font-size:12px;padding:2.5px 9px;border-radius:999px;background:var(--bgi);color:var(--tx2);}
.um-chip-nub{font-size:13px;color:var(--goldtx);font-weight:600;padding-right:2px;}
.um-sec{display:flex;align-items:baseline;gap:8px;padding:4px 2px 10px;}
.um-sec-gap{padding-top:16px;}
.um-sec-t{font-size:14px;font-weight:600;color:var(--tx2);letter-spacing:.06em;}
.um-sec-n{font-size:13px;color:var(--tx2);opacity:.7;}
/* Mode Picker Sheet */
.mp-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:910;}.mp-overlay.show{display:block;}
.mp-sheet{position:fixed;bottom:0;left:0;right:0;z-index:911;background:var(--bg2);border-radius:16px 16px 0 0;height:calc(var(--app-h,100dvh)*.6);display:flex;flex-direction:column;transform:translateY(100%);transition:transform .25s cubic-bezier(.25,.46,.45,.94);padding-bottom:env(safe-area-inset-bottom,0);}
.mp-sheet.show{transform:translateY(0);}
.mp-handle{width:36px;height:4px;background:var(--bd);border-radius:2px;margin:10px auto 6px;flex-shrink:0;}
.mp-title{font-size:16px;font-weight:600;color:var(--tx3);padding:4px 20px 10px;flex-shrink:0;}
.mp-tabs{display:flex;gap:0;padding:0 16px;flex-shrink:0;border-bottom:1px solid var(--bd);position:relative;}.mp-tabs::after{content:'';position:absolute;bottom:-1px;left:var(--ti-left,0);width:var(--ti-w,0);height:2px;background:var(--ac);border-radius:1px;transition:left .25s cubic-bezier(.4,0,.2,1),width .25s cubic-bezier(.4,0,.2,1);}.mp-tabs.dragging::after{transition:none;}
.mp-tab{flex:1;text-align:center;padding:10px 0;font-size:15px;color:var(--tx2);cursor:pointer;transition:color .15s;}.mp-tab.a{color:var(--ac);font-weight:600;}
.mp-swipe-wrap{flex:1;min-height:0;overflow:hidden;position:relative;}
.mp-swipe-track{display:flex;height:100%;transition:transform .3s cubic-bezier(.25,.46,.45,.94);}
.mp-swipe-page{flex-shrink:0;height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px 16px var(--scr-pb);}
.mp-card{padding:18px 16px;background:var(--bg3);border:1px solid var(--bd);border-radius:12px;margin-bottom:10px;cursor:pointer;transition:background .15s,transform .1s;min-height:80px;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}.mp-card:active{background:var(--bg2);transform:scale(.98);}.mp-card.locked{opacity:.45;}.mp-card.locked:active{background:var(--bg3);transform:none;}
.mp-card.active{border-color:var(--ac);background:color-mix(in srgb,var(--ac) 6%,transparent);}
.mp-card-name{font-size:17px;font-weight:600;color:var(--tx3);}
.mp-card-desc{font-size:14px;color:var(--tx2);margin-top:10px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.toast{position:fixed;top:20px;left:16px;right:16px;transform:translateY(-20px);background:var(--bg2);color:var(--tx);padding:14px 20px;border-radius:12px;font-size:16px;font-weight:500;z-index:600;opacity:0;transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s;pointer-events:none;text-align:center;white-space:pre-line;line-height:1.5;border:1px solid color-mix(in srgb,var(--tx) 24%,var(--bd));box-shadow:0 6px 22px var(--sh);}.toast.show{opacity:1;transform:translateY(0);}
.toast-quiet{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(10px);background:var(--bg2);color:var(--tx2);padding:8px 18px;border-radius:20px;font-size:14px;z-index:600;opacity:0;transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s;pointer-events:none;border:1px solid color-mix(in srgb,var(--tx) 18%,var(--bd));box-shadow:0 3px 12px var(--sh);white-space:nowrap;}.toast-quiet.show{opacity:1;transform:translateX(-50%) translateY(0);}
.reward-overlay{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);visibility:hidden;opacity:0;pointer-events:none;transition:opacity .25s,visibility 0s .25s;}.reward-overlay.show{visibility:visible;opacity:1;pointer-events:auto;transition:opacity .25s,visibility 0s 0s;}
.reward-card{position:relative;z-index:2;width:280px;background:var(--bg2);border-radius:20px;padding:32px 24px 24px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.3);animation:rewardIn .4s cubic-bezier(.16,1,.3,1);overflow:hidden;}
@keyframes rewardIn{from{opacity:0;transform:scale(.7) translateY(20px);}to{opacity:1;transform:scale(1) translateY(0);}}
@keyframes staggerIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}.stg>*{animation:staggerIn .4s cubic-bezier(.4,0,.2,1) both;animation-delay:calc(var(--i,0) * 60ms);}
.reward-glow{position:absolute;top:-40px;left:50%;transform:translateX(-50%);width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--ac) 25%,transparent) 0%,transparent 70%);pointer-events:none;animation:rewardGlow 2s ease-in-out infinite alternate;}
@keyframes rewardGlow{from{opacity:.6;transform:translateX(-50%) scale(1);}to{opacity:1;transform:translateX(-50%) scale(1.15);}}
.reward-icon{font-size:48px;margin-bottom:12px;display:flex;align-items:center;justify-content:center;}.reward-icon svg{width:48px;height:48px;color:var(--ac);}
.reward-title{font-size:18px;font-weight:700;color:var(--tx3);margin-bottom:4px;}
.reward-desc{font-size:14px;color:var(--tx2);line-height:1.6;}
.reward-amount{font-size:20px;font-weight:700;color:var(--ac);margin-top:14px;display:flex;align-items:center;justify-content:center;gap:6px;}.reward-amount svg{width:20px;height:20px;}
.empty{text-align:center;padding:40px 20px;color:var(--tx2);font-size:16px;}
/* 探索頁撈失敗空狀態：不掛 .empty 飾線（阿奈 2026-07-16 定案：這版型配按鈕時橫線很怪）*/
.disc-fail{text-align:center;padding:48px 20px 44px;}
.disc-fail-msg{color:var(--tx2);font-size:16px;}
.disc-fail .btn{width:auto;padding:10px 32px;margin-top:22px;}
.hidden{display:none;}
.av-editor{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:16px;position:relative;width:140px;margin-left:auto;margin-right:auto;margin-top:8px;}
.av-ed-wrap{position:relative;width:120px;height:120px;border-radius:50%;overflow:hidden;border:2px solid var(--bd);background:var(--bgi);flex-shrink:0;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:42px;color:var(--ac);font-weight:500;}
#pf-av-wrap{width:120px;height:120px;border-radius:50%;}
.av-ed-wrap img{width:100%;height:100%;object-fit:cover;pointer-events:none;}
.crop-ov{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--bg);z-index:9999;display:none;flex-direction:column;align-items:center;justify-content:space-between;}
.crop-ov.show{display:flex;}
.crop-area{position:relative;touch-action:none;overflow:hidden;flex:1;display:flex;align-items:center;justify-content:center;width:100%;}
.crop-area img{position:absolute;user-select:none;-webkit-user-drag:none;}
.crop-frame{position:absolute;box-shadow:0 0 0 9999px rgba(0,0,0,.55);pointer-events:none;
background:linear-gradient(to right,#fff 2px,transparent 2px,transparent calc(100% - 2px),#fff calc(100% - 2px)) top left/100% 24px no-repeat,
linear-gradient(to right,#fff 2px,transparent 2px,transparent calc(100% - 2px),#fff calc(100% - 2px)) bottom left/100% 24px no-repeat,
linear-gradient(to bottom,#fff 2px,transparent 2px,transparent calc(100% - 2px),#fff calc(100% - 2px)) top left/24px 100% no-repeat,
linear-gradient(to bottom,#fff 2px,transparent 2px,transparent calc(100% - 2px),#fff calc(100% - 2px)) top right/24px 100% no-repeat;
background-image:linear-gradient(rgba(255,255,255,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.25) 1px,transparent 1px),linear-gradient(to right,#fff 2px,transparent 2px,transparent calc(100% - 2px),#fff calc(100% - 2px)),linear-gradient(to right,#fff 2px,transparent 2px,transparent calc(100% - 2px),#fff calc(100% - 2px)),linear-gradient(to bottom,#fff 2px,transparent 2px,transparent calc(100% - 2px),#fff calc(100% - 2px)),linear-gradient(to bottom,#fff 2px,transparent 2px,transparent calc(100% - 2px),#fff calc(100% - 2px));
background-size:100% 33.33%,33.33% 100%,100% 24px,100% 24px,24px 100%,24px 100%;
background-position:0 0,0 0,top left,bottom left,top left,top right;
background-repeat:repeat,repeat,no-repeat,no-repeat,no-repeat,no-repeat;}
.crop-circle{position:absolute;left:50%;transform:translateX(-50%);border:2px dashed rgba(255,255,255,.7);border-radius:50%;pointer-events:none;transition:top .05s linear;}

.av-ed-badge{position:absolute;bottom:12px;right:4px;width:32px;height:32px;border-radius:50%;background:var(--ac);display:flex;align-items:center;justify-content:center;border:2px solid var(--bg2);cursor:pointer;z-index:99;box-shadow:0 2px 6px rgba(0,0,0,.15);}.av-ed-badge svg{width:14px;height:14px;stroke:var(--ac-fg);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

/* 上下 padding ≥ 讓圓角在第一/末項 hover 高亮起點處收斂：高亮是滿寬直角矩形，
   padding 太小時直角會戳出容器圓弧＝穿幫（2026-08-12 阿奈截圖，訊息選單實例）。
   圓角 12px → padding 10px（弧偏移 <0.2px）；.bs-popup 圓角 16px → 12px 同理。 */
.ctx-menu{position:fixed;z-index:500;background:var(--bg2);border:1px solid var(--bd);border-radius:12px;box-shadow:0 4px 16px rgba(0,0,0,.12);padding:10px 0;min-width:150px;}
.ctx-item{padding:11px 16px;font-size:15px;cursor:pointer;color:var(--tx);display:flex;align-items:center;gap:8px;}@media(hover:hover){.ctx-item:hover{background:var(--bgi);}}.ctx-item.danger{color:var(--del);}
.bs-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:9999;display:flex;align-items:center;justify-content:center;visibility:hidden;opacity:0;pointer-events:none;transition:opacity .2s,visibility 0s .2s;}.bs-overlay.show{visibility:visible;opacity:1;pointer-events:auto;transition:opacity .2s,visibility 0s 0s;}
.bs-popup{background:var(--bg2);border-radius:16px;width:min(200px,75vw);padding:12px 0;box-shadow:0 8px 30px rgba(0,0,0,.18);transform:scale(.92);opacity:0;transition:transform .2s cubic-bezier(.4,0,.2,1),opacity .2s;}.bs-overlay.show .bs-popup{transform:scale(1);opacity:1;}.bs-popup.mid{width:min(340px,85vw);}.bs-popup.wide{width:min(500px,92vw);}
.bs-item{padding:12px 20px;font-size:15px;cursor:pointer;color:var(--tx);display:flex;align-items:center;gap:10px;}/* 項間分隔線 v2.1.364 移除（線量管制）：間距與按壓底色已足以分項 */@media(hover:hover){.bs-item:hover{background:var(--bgi);}}.bs-item.danger{color:var(--del);}.bs-item.danger svg{stroke:var(--del);}
.bs-item svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
/* ── 書籤／訊息搜尋面板（v2.1.409 精緻化）──
   一列三段式（識別徽章｜內容｜操作）＋class-based layout（inline flex 在部分 SW 快取組合會失效，同 notif-item 教訓）。
   識別徽章走 KG 類型徽章語彙：color-mix 14% 淡染方塊；列間不畫線（線量管制），靠間距與按壓底色分項。 */
.bsp-head{padding:14px 16px 10px;font-size:16px;font-weight:600;color:var(--tx);}
.bsp-search{padding:0 16px;}
.bsp-go{flex-shrink:0;display:flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--ac);padding:6px 2px 6px 10px;cursor:pointer;}
.bsp-go svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;display:block;}
.bsp-list{max-height:56vh;overflow-y:auto;padding:6px 0;}
.bsp-empty{padding:26px 16px 30px;text-align:center;color:var(--tx2);font-size:14px;}
.bsp-empty::before{content:'';display:block;width:56px;height:1px;margin:0 auto 14px;background:linear-gradient(90deg,transparent,var(--bd2),transparent);}
.bsp-note{padding:8px 16px 12px;text-align:center;color:var(--tx2);font-size:12px;}
.bmk-item{display:flex;align-items:center;gap:10px;padding:11px 16px;cursor:pointer;}
@media(hover:hover){.bmk-item:hover{background:var(--bgi);}}
.bmk-ic{flex-shrink:0;width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--ac) 14%,transparent);}
.bmk-ic svg{width:17px;height:17px;stroke:var(--ac);fill:var(--ac);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.bmk-ic.line svg{fill:none;}
.bmk-main{flex:1;min-width:0;}
.bmk-title{font-size:15px;font-weight:600;color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bmk-sub{font-size:13px;color:var(--tx2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:2px;font-variant-numeric:tabular-nums;}
.bmk-edit{flex-shrink:0;width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:8px;cursor:pointer;}
.bmk-edit svg{width:16px;height:16px;stroke:var(--tx2);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
@media(hover:hover){.bmk-edit:hover{background:var(--bgi);}}
.msr-item{padding:11px 16px;cursor:pointer;}
@media(hover:hover){.msr-item:hover{background:var(--bgi);}}
.msr-meta{font-size:13px;font-weight:500;color:var(--ac);margin-bottom:2px;font-variant-numeric:tabular-nums;}
.msr-snip{font-size:14px;color:var(--tx2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.typing-indicator{display:flex;gap:4px;padding:10px 14px;align-items:center;}.typing-dot{width:6px;height:6px;background:var(--tx2);border-radius:50%;animation:typeBounce 1.4s ease-in-out infinite;}.typing-dot:nth-child(2){animation-delay:.25s;}.typing-dot:nth-child(3){animation-delay:.5s;}
@keyframes typeBounce{0%,80%,100%{opacity:.25;transform:translateY(0);}35%{opacity:.9;transform:translateY(-3px);}}
/* Edit message modal - near full screen */
.edit-modal-ov{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:500;display:flex;align-items:center;justify-content:center;padding:16px;visibility:hidden;opacity:0;pointer-events:none;transition:opacity .2s,visibility 0s .2s;}.edit-modal-ov.show{visibility:visible;opacity:1;pointer-events:auto;transition:opacity .2s,visibility 0s 0s;}
.edit-modal{background:var(--bg2);border-radius:16px;width:100%;max-width:500px;height:calc(var(--app-h,100dvh)*.66);max-height:520px;padding:22px;box-shadow:0 8px 30px rgba(0,0,0,.18);display:flex;flex-direction:column;transform:scale(.92);transition:transform .2s cubic-bezier(.4,0,.2,1);}.edit-modal-ov.show .edit-modal{transform:scale(1);}
.edit-modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-shrink:0;}.edit-modal-title{font-size:16px;font-weight:600;color:var(--tx3);}
.edit-modal textarea{flex:1;min-height:0;resize:none;}
.edit-modal .ctr{margin-bottom:12px;}
.edit-modal-btn{width:100%;padding:12px;border-radius:10px;border:none;background:var(--bgi);color:var(--tx3);font-size:15px;font-weight:500;cursor:pointer;font-family:inherit;}@media(hover:hover){.edit-modal-btn:hover{background:var(--bd);}}
.ev-toggle-item{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--bg2);border:1px solid var(--bd);border-radius:12px;margin-bottom:10px;position:relative;min-height:56px;transition:opacity .2s;}
.ev-toggle-item.off{opacity:.45;}
.ev-sub{margin-top:5px;font-size:13.5px;color:var(--tx2);opacity:.88;letter-spacing:.4px;line-height:1.45;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:40px;}
.ev-cnt{font-size:13px;font-weight:500;color:var(--tx2);background:var(--bg3);border:1px solid var(--bd);border-radius:10px;padding:1px 8px;margin-left:8px;}
.ev-empty{display:flex;flex-direction:column;align-items:center;gap:10px;padding:26px 16px 6px;color:var(--tx2);}
.ev-empty .ev-sign{width:34px;height:34px;stroke:var(--bd2);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.ev-empty-t{font-size:13px;line-height:1.7;text-align:center;}
.ev-add-card{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:14px;padding:14px;border:1.5px dashed var(--bd2);border-radius:12px;color:var(--tx2);font-size:15px;cursor:pointer;}
.ev-add-card:active{opacity:.7;}
.ev-add-card svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;}
.ev-toggle-item .lb{flex:1;min-width:0;cursor:pointer;overflow:visible;}.ev-toggle-item .lt{font-size:17px;font-weight:500;color:var(--tx3);line-height:1.4;padding-right:40px;}.ev-toggle-item .ls{font-size:15px;color:var(--tx2);margin-top:4px;line-height:1.4;}
.ev-toggle-item>.tog{position:absolute;top:12px;right:12px;}
/* 通知設定：每列「通知 / 推播」兩開關；母關子項反灰但狀態保留；lock 站內固定，dim 推播不可用 */
.push-cols{display:flex;justify-content:flex-end;padding:18px 16px 6px;font-size:12px;color:var(--tx2);letter-spacing:.5px;}
.push-cols i{font-style:normal;width:46px;text-align:center;}
.push-group{background:var(--bg2);border:1px solid var(--bd);border-radius:12px;margin-bottom:10px;overflow:hidden;}
.push-group-h{display:flex;align-items:center;gap:12px;padding:14px 16px;min-height:56px;}
.push-group-h .lt{flex:1;font-size:17px;font-weight:500;color:var(--tx3);line-height:1.4;}
.push-kids{border-top:1px solid var(--bd);padding:4px 0;transition:opacity .2s;}
.push-group.off .push-kids{opacity:.4;pointer-events:none;}
.push-kid{display:flex;align-items:center;gap:12px;padding:10px 16px 10px 28px;min-height:44px;}
.push-kid-t{flex:1;font-size:15px;color:var(--tx2);line-height:1.4;}
.push-lock{font-style:normal;font-size:11px;color:var(--tx2);opacity:.7;border:1px solid var(--bd);border-radius:4px;padding:0 5px;margin-left:8px;vertical-align:1px;}
.push-sw{display:flex;flex-shrink:0;}
.push-sw .tog{margin:0 8px;}
.push-sw .tog.lock,.push-sw .tog.dim{opacity:.3;pointer-events:none;}
.tog{position:relative;width:30px;height:16px;background:var(--bd);border-radius:8px;cursor:pointer;flex-shrink:0;transition:background .2s;}.tog::before{content:'';position:absolute;inset:-12px;}.tog.on{background:var(--ac);}.tog::after{content:'';position:absolute;top:2px;left:2px;width:12px;height:12px;background:#fff;border-radius:50%;transition:transform .25s cubic-bezier(.34,1.56,.64,1);box-shadow:0 1px 2px rgba(0,0,0,.08);}.tog.on::after{transform:translateX(14px);}
.amb-pill{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:16px;font-size:13px;font-weight:500;cursor:pointer;border:1.5px solid var(--bd);background:var(--bg3);color:var(--tx2);transition:all .15s;-webkit-tap-highlight-color:transparent;}.amb-pill:active{transform:scale(.95);}.amb-pill.active{border-color:var(--ac);background:var(--acl);color:var(--ac);}.amb-pill.locked{opacity:.45;}.amb-pill svg{width:14px;height:14px;}
.pcmd-panel{position:fixed;bottom:0;left:0;right:0;z-index:251;background:var(--bg2);border-top:1px solid var(--bd);border-radius:16px 16px 0 0;height:calc(var(--app-h,100dvh)*.6);overflow:hidden;padding:0 16px 20px;display:flex;flex-direction:column;transform:translateY(100%);transition:transform .25s cubic-bezier(.25,.46,.45,.94);}.pcmd-panel.show{transform:translateY(0);}
.pcmd-panel-handle{width:36px;height:4px;background:var(--bd2);border-radius:2px;margin:10px auto 6px;}
.pcmd-overlay{position:fixed;inset:0;z-index:250;background:rgba(0,0,0,.25);visibility:hidden;opacity:0;pointer-events:none;transition:opacity .2s,visibility 0s .2s;}.pcmd-overlay.show{visibility:visible;opacity:1;pointer-events:auto;transition:opacity .2s,visibility 0s 0s;}
.batch-del-bar{display:none;padding:10px 16px;background:var(--bg2);border-bottom:1px solid var(--bd);gap:10px;align-items:center;justify-content:space-between;}.batch-del-bar.show{display:flex;}
.batch-dot{width:22px;height:22px;border-radius:50%;border:2px solid var(--bd2);background:transparent;flex-shrink:0;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;}.batch-dot.sel{border-color:var(--ac);background:var(--ac);}
.batch-dot.sel::after{content:'✓';color:var(--ac-fg);font-size:12px;font-weight:700;}
.msg-del-mode .cm{position:relative;}
.msg-del-mode .msg-row{cursor:pointer;transition:all .15s;-webkit-user-select:none;user-select:none;}.msg-del-mode .msg-row.msg-del-sel .msg-bubble{outline:2px solid var(--ach);outline-offset:2px;}.msg-del-mode .msg-bubble{-webkit-user-select:none;user-select:none;}
.msg-del-banner{display:none;padding:8px 16px;background:var(--ach);color:var(--ac-fg);font-size:14px;text-align:center;flex-shrink:0;}.msg-del-banner.show{display:block;}
.msg-ss-banner{display:none;padding:8px 16px;background:var(--ac);color:var(--ac-fg);font-size:14px;text-align:center;flex-shrink:0;}.msg-ss-banner.show{display:block;}
.msg-ss-bar{display:none;padding:12px 16px;flex-shrink:0;z-index:12;flex-direction:column;gap:8px;background:var(--bg2);border-top:1px solid var(--bd);}.msg-ss-bar.show{display:flex;}
.msg-ss-bar .mss-main{width:100%;padding:14px;border-radius:12px;border:none;background:var(--ac);color:var(--ac-fg);font-size:16px;font-weight:500;cursor:pointer;font-family:inherit;}
.msg-ss-bar .mss-cancel{width:100%;padding:10px;border-radius:10px;border:1px solid var(--bd);background:var(--bg2);color:var(--tx2);font-size:14px;cursor:pointer;font-family:inherit;}
.mss-toggles{display:flex;gap:8px;margin-bottom:4px;}.mss-toggle{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;padding:10px 0;border-radius:10px;border:1px solid var(--bd);background:var(--bg2);color:var(--tx2);font-size:13px;cursor:pointer;font-family:inherit;transition:background .15s,color .15s,border-color .15s;}.mss-toggle.mss-on{background:var(--ac);color:var(--ac-fg);border-color:var(--ac);}.mss-toggle svg{flex-shrink:0;}
.msg-ss-mode .msg-row{cursor:pointer;transition:opacity .15s;opacity:.3;}.msg-ss-mode .msg-row.msg-ss-sel{opacity:1;}
.msg-del-bar{display:none;padding:12px 16px;flex-shrink:0;z-index:12;flex-direction:column;gap:8px;background:var(--bg2);border-top:1px solid var(--bd);}.msg-del-bar.show{display:flex;}
.msg-del-bar .mdel-main{width:100%;padding:14px;border-radius:12px;border:none;background:var(--ach);color:var(--ac-fg);font-size:16px;font-weight:500;cursor:pointer;font-family:inherit;}@media(hover:hover){.msg-del-bar .mdel-main:hover{opacity:.85;}}
.msg-del-bar .mdel-cancel{width:100%;padding:10px;border-radius:10px;border:1px solid var(--bd);background:var(--bg2);color:var(--tx2);font-size:14px;cursor:pointer;font-family:inherit;}
.pcmd-plus{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--tx2);flex-shrink:0;}@media(hover:hover){.pcmd-plus:hover{color:var(--ac);}}.pcmd-plus.active{color:var(--ac);}
/* Grimoire (書倉) */
.grim-style-bar{display:flex;gap:8px;padding:4px 16px 8px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.grim-style-bar::-webkit-scrollbar{display:none;}
.grim-style-opt{position:relative;flex-shrink:0;width:64px;aspect-ratio:3/4;border-radius:8px;border:1.5px solid var(--bd);background:var(--bg2);cursor:pointer;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:4px;transition:all .15s;color:var(--tx2);}
.grim-style-opt.active{border-color:var(--ac);box-shadow:0 0 0 2px var(--acl);}
.grim-style-opt:active{transform:scale(.94);}
.grim-style-opt .grim-style-label{font-size:10px;font-weight:600;opacity:.7;letter-spacing:.03em;}
.grim-style-opt .grim-style-deco-svg{width:20px;height:20px;opacity:.5;margin-bottom:4px;stroke:currentColor;fill:none;}

.grim-style-opt.locked-style{opacity:.4;}
.grim-style-opt .grim-style-lock{position:absolute;top:2px;right:2px;width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;}
.grim-shelf{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;padding:16px;}
.grim-book{position:relative;border-radius:12px;overflow:hidden;cursor:pointer;aspect-ratio:3/4;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:14px;text-align:center;transition:transform .15s;-webkit-tap-highlight-color:transparent;background:var(--bg2);color:var(--tx);border:1.5px solid var(--bd);}
.grim-book:active{transform:scale(.96);}
.grim-book .grim-title{font-size:15px;font-weight:700;line-height:1.3;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.grim-book .grim-count{font-size:11px;margin-top:4px;opacity:.5;}
.grim-book .grim-spine{position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--bd);}
/* Tome (古書) */
/* — 書架造型（全域切換，書卡本體變形） — */
/* 古書：左書脊縫線 + 右側書頁層疊 */
.grim-shelf.gs-tome .grim-book{border-radius:4px 14px 14px 4px;}
.grim-shelf.gs-tome .grim-book .grim-spine{width:12px;background:var(--bd);border-right:none;background-image:repeating-linear-gradient(180deg,transparent 0 22px,var(--bg2) 22px 25px);}
.grim-shelf.gs-tome .grim-book::after{content:'';position:absolute;top:5px;bottom:5px;right:3px;width:7px;background:repeating-linear-gradient(90deg,var(--bd) 0 1px,transparent 1px 3px);opacity:.7;border-radius:0 10px 10px 0;}
/* 卷軸：上下滾筒桿凸出 */
.grim-shelf.gs-scroll .grim-book{border-radius:2px;border-left:none;border-right:none;overflow:visible;margin:6px 6px 0;}
.grim-shelf.gs-scroll .grim-book .grim-spine{display:none;}
.grim-shelf.gs-scroll .grim-book::before,.grim-shelf.gs-scroll .grim-book::after{content:'';position:absolute;left:-7px;right:-7px;height:11px;background:var(--bd);border-radius:6px;}
.grim-shelf.gs-scroll .grim-book::before{top:-6px;}
.grim-shelf.gs-scroll .grim-book::after{bottom:-6px;}
/* 奏折：直向摺頁 + 雙線框 */
.grim-shelf.gs-memorial .grim-book{border-radius:2px;border-style:double;border-width:3px;background-image:repeating-linear-gradient(90deg,transparent 0 25%,rgba(127,127,127,.07) 25% 50%),repeating-linear-gradient(90deg,transparent 0 calc(25% - 1px),var(--bd) calc(25% - 1px) 25%);}
.grim-shelf.gs-memorial .grim-book .grim-spine{display:none;}
/* 聖旨：左右卷桿凸出 */
.grim-shelf.gs-edict .grim-book{border-radius:2px;border-top:none;border-bottom:none;overflow:visible;margin:0 7px;}
.grim-shelf.gs-edict .grim-book .grim-spine{display:none;}
.grim-shelf.gs-edict .grim-book::before,.grim-shelf.gs-edict .grim-book::after{content:'';position:absolute;top:-6px;bottom:-6px;width:11px;background:var(--bd);border-radius:6px;}
.grim-shelf.gs-edict .grim-book::before{left:-6px;}
.grim-shelf.gs-edict .grim-book::after{right:-6px;}
/* 符咒：窄長符紙 + 頂端符頭 + 底部尖角 */
.grim-shelf.gs-talisman .grim-book{width:74%;justify-self:center;border-radius:3px;border-style:dashed;clip-path:polygon(0 0,100% 0,100% 93%,50% 100%,0 93%);padding-bottom:26px;}
.grim-shelf.gs-talisman .grim-book .grim-spine{display:none;}
.grim-shelf.gs-talisman .grim-book::before{content:'';position:absolute;top:0;left:0;right:0;height:16px;background:var(--bd);opacity:.6;}
/* 石板：不規則鑿角 + 裂縫 */
.grim-shelf.gs-tablet .grim-book{border:none;background:var(--bg3,var(--bg2));clip-path:polygon(7% 0,94% 1%,100% 9%,99% 91%,90% 100%,7% 99%,0 90%,2% 7%);box-shadow:inset 0 0 0 2px var(--bd);}
.grim-shelf.gs-tablet .grim-book .grim-spine{display:none;}
.grim-shelf.gs-tablet .grim-book::after{content:'';position:absolute;top:7%;right:16%;width:2px;height:22%;background:var(--bd);transform:rotate(20deg);opacity:.8;}
.grim-add{border:2px dashed var(--bd);background:var(--bg3);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--tx2);font-size:14px;border-radius:12px;aspect-ratio:3/4;cursor:pointer;transition:border-color .15s;}
.grim-add:active{border-color:var(--ac);color:var(--ac);}
.grim-open-btn{display:flex;align-items:center;gap:6px;padding:10px 14px;margin:0 0 6px;border:1px solid var(--bd);border-radius:10px;background:var(--bg3);color:var(--tx2);font-size:13px;cursor:pointer;transition:all .15s;-webkit-tap-highlight-color:transparent;}
.grim-open-btn:active{background:var(--ac);color:var(--ac-fg);border-color:var(--ac);}
.grim-spell-item{display:flex;align-items:center;gap:10px;padding:14px;border:1px solid var(--bd);border-radius:12px;margin-bottom:8px;background:var(--bg3);cursor:pointer;-webkit-tap-highlight-color:transparent;}
.grim-spell-item:active{background:var(--bgi);}
.grim-spell-item .lt{font-size:15px;font-weight:500;}
.grim-spell-item .ls{font-size:13px;color:var(--tx2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:2px;}
.grim-pin{position:relative;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;flex-shrink:0;cursor:pointer;color:var(--tx2);transition:all .15s;}.grim-pin::before{content:'';position:absolute;inset:-6px;}
.grim-pin.on{color:var(--ac);background:color-mix(in srgb,var(--ac) 12%,transparent);}
.emb-progress{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);background:var(--bg2);border:1px solid var(--bd);border-radius:12px;padding:14px 20px;box-shadow:0 4px 16px rgba(0,0,0,.1);z-index:600;min-width:260px;display:none;text-align:center;}.emb-progress.show{display:block;}
.emb-progress .prog-bar{width:100%;height:6px;background:var(--bgi);border-radius:3px;margin-top:8px;overflow:hidden;}.emb-progress .prog-fill{height:100%;background:var(--ac);border-radius:3px;transition:width .3s;}
.splash{position:fixed;inset:0;z-index:9999;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;transition:opacity .4s ease;}.splash.hide{opacity:0;pointer-events:none;}
.splash-cloud{position:relative;width:220px;height:200px;display:flex;align-items:center;justify-content:center;}
/* 讀取動畫 v3（v2.1.380，阿奈定調）：完整「思考」迴圈——小點冒、大點跟上、
 * 雲（含字）從中間軟Q地彈出來、停留（絹光掃過、星星亮著）、整組淡去、重來。
 * 週期 3.4s，所有元素共用同一 duration、用百分比對齊時間軸，方便之後調節奏。
 * 雲的彈出是 scale 多段回彈（.3→1.08→.96→1.02→1），不是 opacity 硬切。
 *
 * 基底狀態原則（2026-07-27，模糊雲＋閱讀器隱形雲案）：
 * ① 基底＝「靜止可見姿態」（opacity:1、translateX(-50%)、原尺寸），動畫跑的時候
 *    關鍵影格每一格都有定義 opacity/transform，畫面與舊版完全相同；動畫不跑的環境
 *    （電子閱讀器瀏覽器凍結動畫、reduced-motion）則直接顯示靜止的雲，不會隱形跑位。
 *    可見與定位絕不可只存在於關鍵影格裡。
 * ② will-change 讓雲/標題在動畫開始前就以 1 倍被提升成合成層並點陣化——
 *    無限迴圈 scale 動畫的層若在縮小階段（.3）才被點陣化，整個循環都拿低解析度
 *    圖放大＝雲糊掉、1.5px 描邊最慘（泡泡是純色小圓看不出來）。
 * ③ reduced-motion 直接 animation:none 落回靜止姿態；舊 hack（0.01s 跑一次）
 *    結束後停在關鍵影格 100% 的 opacity:0，這群使用者整個 splash 是空白的。 */
.splash-cloud .splash-title{position:absolute;z-index:3;top:50px;left:50%;font-size:26px;font-weight:700;color:var(--tx3);letter-spacing:1px;white-space:nowrap;opacity:1;transform:translateX(-50%);will-change:transform,opacity;animation:sPopC 3.4s ease infinite;}
.splash-cloud svg.cloud-bg{position:absolute;z-index:2;top:0;left:50%;opacity:1;transform:translateX(-50%);will-change:transform,opacity;animation:sPopC 3.4s ease infinite;}
.cloud-sheen{opacity:0;transform:translateX(-70px) skewX(-18deg);animation:sSheen 3.4s ease-in-out infinite;}
.splash-star{position:absolute;z-index:3;top:-4px;left:74%;width:16px;height:16px;opacity:.9;animation:sStarPop 3.4s ease infinite;}
/* 泡泡改 SVG circle（v2.1.637）：CSS border 在 1x DPR 螢幕會取整成 ~2px、SVG stroke 反鋸齒維持 1.5px，
   兩種管線同標 1.5 卻視覺不同粗（阿奈桌機實測）。統一走 SVG 管線後任何 DPR 都與雲朵等粗。 */
.splash-dot{position:absolute;z-index:1;opacity:1;}
.splash-dot.d1{width:10px;height:10px;bottom:32px;left:38%;animation:sThink1 3.4s ease infinite;}
.splash-dot.d2{width:18px;height:18px;bottom:48px;left:18%;animation:sThink2 3.4s ease infinite;}
@keyframes sThink1{0%{opacity:0;transform:translateY(5px) scale(.6);}6%{opacity:1;transform:translateY(0) scale(1);}76%{opacity:1;}88%,100%{opacity:0;transform:translateY(0) scale(1);}}
@keyframes sThink2{0%,10%{opacity:0;transform:translateY(5px) scale(.6);}16%{opacity:1;transform:translateY(0) scale(1);}76%{opacity:1;}88%,100%{opacity:0;transform:translateY(0) scale(1);}}
@keyframes sPopC{0%,20%{opacity:0;transform:translateX(-50%) scale(.3);}27%{opacity:1;transform:translateX(-50%) scale(1.08);}31%{transform:translateX(-50%) scale(.96);}35%{transform:translateX(-50%) scale(1.02);}39%{opacity:1;transform:translateX(-50%) scale(1);}76%{opacity:1;transform:translateX(-50%) scale(1);}88%,100%{opacity:0;transform:translateX(-50%) scale(1);}}
@keyframes sSheen{0%,38%{opacity:0;transform:translateX(-70px) skewX(-18deg);}46%{opacity:.13;}58%{opacity:.13;}66%,100%{opacity:0;transform:translateX(240px) skewX(-18deg);}}
@keyframes sStarPop{0%,32%{opacity:0;transform:scale(.4) rotate(-30deg);}40%{opacity:.9;transform:scale(1) rotate(0);}56%{opacity:.5;transform:scale(.9) rotate(0);}70%{opacity:.9;transform:scale(1) rotate(0);}76%{opacity:.9;}86%,100%{opacity:0;transform:scale(1) rotate(0);}}
@media(prefers-reduced-motion:reduce){.splash-cloud *{animation:none!important;}}
.splash-dots{display:flex;gap:6px;margin-top:24px;}.splash-dots span{width:6px;height:6px;background:var(--ac);border-radius:50%;animation:sDot 1.4s ease-in-out infinite;opacity:.3;}.splash-dots span:nth-child(2){animation-delay:.22s;}.splash-dots span:nth-child(3){animation-delay:.44s;}
@keyframes sDot{0%,100%{opacity:.25;transform:scale(.85);}45%{opacity:1;transform:scale(1);}}
.sb-fab{display:none;align-items:center;justify-content:center;color:var(--tx2);cursor:pointer;padding:6px;flex-shrink:0;-webkit-user-select:none;user-select:none;}
.sb-fab:active{opacity:.7;}
@media(hover:hover){.sb-fab:hover{color:var(--ac);}}
.sb-fab svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.sf-editor{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.35);display:none;align-items:center;justify-content:center;padding:16px;}
.sf-editor.show{display:flex;}
.sf-editor-panel{background:var(--bg2);border-radius:16px;width:100%;max-width:500px;max-height:75vh;min-height:420px;overflow-y:auto;padding:22px;box-shadow:0 8px 30px rgba(0,0,0,.18);display:flex;flex-direction:column;animation:sfPop .2s ease;}
@keyframes sfPop{from{transform:scale(.95);opacity:0;}to{transform:scale(1);opacity:1;}}

.sb-tabs{display:flex;margin-bottom:12px;position:relative;}.sb-tabs::after{content:'';position:absolute;bottom:-1px;left:var(--ti-left,0);width:var(--ti-w,0);height:2px;background:var(--ac);border-radius:1px;transition:left .25s cubic-bezier(.4,0,.2,1),width .25s cubic-bezier(.4,0,.2,1);}.sb-tabs.dragging::after{transition:none;}
.sb-tab{flex:1;text-align:center;padding:10px 0;font-size:15px;color:var(--tx2);cursor:pointer;transition:color .15s,font-weight .15s;}
.sb-tab.active{color:var(--ac);font-weight:600;}
/* 知識圖譜 tabs — 橫向 scroll；底線用 ::after 偽元素，可跟手 lerp */
.kg-tabs{display:flex;flex-direction:row;flex-wrap:nowrap;gap:4px;padding:0 16px;flex-shrink:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;width:100%;box-sizing:border-box;position:relative;}
.kg-tabs::after{content:'';position:absolute;bottom:-1px;left:var(--ti-left,0);width:var(--ti-w,0);height:2px;background:var(--ac);border-radius:1px;transition:left .25s cubic-bezier(.4,0,.2,1),width .25s cubic-bezier(.4,0,.2,1);}
.kg-tabs.dragging::after{transition:none;}
/* ── 記憶圖譜 2.0 卡片（對齊 kg2-demo v3，2026-06-11）── */
.kgc{background:var(--bg2);border:1px solid var(--bd);border-radius:12px;margin-bottom:10px;overflow:hidden;position:relative;}
.kgc.child{margin-left:26px;}
.kgc.child::before{content:'';position:absolute;left:-15px;top:-12px;bottom:50%;width:13px;border-left:2px solid var(--bd2);border-bottom:2px solid var(--bd2);border-radius:0 0 0 8px;}
.kgc.idle{opacity:.55;}
.kgc-row{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;}
.kgc-badge{flex-shrink:0;font-size:12px;padding:2px 8px;border-radius:9px;background:var(--bgi);color:var(--tx2);}
.kgc-badge.k-character{color:var(--ach);background:var(--acl);}
.kgc-badge.k-location{color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,transparent);}
.kgc-badge.k-item{color:var(--warn);background:color-mix(in srgb,var(--warn) 14%,transparent);}
.kgc-badge.k-organization{color:var(--org);background:color-mix(in srgb,var(--org) 14%,transparent);}
.kgc-main{flex:1;min-width:0;}
.kgc-name{font-size:15px;font-weight:500;color:var(--tx3);display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.kgc-line{font-size:13px;color:var(--tx2);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.kgc-arr{flex-shrink:0;color:var(--tx2);transition:transform .2s;font-size:12px;}
.kgc.open .kgc-arr{transform:rotate(90deg);}
.kgc-detail{display:none;border-top:1px dashed var(--bd2);padding:11px 14px 13px;background:var(--bg3);}
.kgc.open .kgc-detail{display:block;}
.kgc-dtag{display:inline-block;font-size:12px;color:var(--warn);border:1px solid color-mix(in srgb,var(--warn) 40%,transparent);border-radius:8px;padding:1px 8px;margin-bottom:8px;}
.kgc-drow{font-size:14px;line-height:1.65;}
.kgc-drow b{color:var(--tx2);font-weight:400;font-size:13px;}
.kgc-drow.tap{cursor:pointer;}
.kgc-stag{display:inline-block;font-size:12px;border-radius:8px;padding:1px 8px;}
.kgc-stag.live{color:var(--ac);border:1px solid var(--ac);opacity:.85;}
.kgc-stag.pin{color:var(--warn);border:1px solid var(--warn);opacity:.85;}
.kgc-stag.idle{color:var(--tx2);border:1px solid var(--bd2);}
.kgc-duty{font-size:12px;color:var(--org);font-weight:400;}
.kgc-acts{display:flex;gap:18px;margin-top:9px;padding-top:9px;border-top:1px dashed var(--bd2);font-size:13px;}
.kgc-acts span{color:var(--ac);cursor:pointer;}
.kgc-pin{flex-shrink:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.kgc-chk{flex-shrink:0;width:22px;height:22px;border-radius:50%;border:2px solid var(--ac);display:flex;align-items:center;justify-content:center;}
.kg-chips{display:flex;gap:8px;margin:4px 0 12px;flex-wrap:wrap;}
.kg-chip{font-size:13px;padding:5px 12px;border-radius:14px;border:1px solid var(--bd2);color:var(--tx2);cursor:pointer;}
.kg-chip.a{background:var(--acl);border-color:var(--ac);color:var(--ach);}
.kg-rel{background:var(--bg2);border:1px solid var(--bd);border-radius:12px;padding:12px 14px;margin-bottom:10px;cursor:pointer;position:relative;}
.kg-rel .pair{font-size:15px;color:var(--tx3);font-weight:500;padding-right:30px;}
.kg-rel .pair span{color:var(--ac);font-weight:400;font-size:13px;margin:0 6px;}
.kg-rel .rnote{font-size:13px;color:var(--tx2);margin-top:3px;line-height:1.5;}
.kg-ms{display:flex;gap:12px;cursor:pointer;position:relative;}
.kg-ms .dotcol{display:flex;flex-direction:column;align-items:center;width:14px;flex-shrink:0;}
.kg-ms .dot{width:9px;height:9px;border-radius:50%;background:var(--ac);margin-top:6px;flex-shrink:0;}
.kg-ms .vline{width:2px;flex:1;background:var(--bd2);margin-top:3px;}
.kg-ms:last-child .vline{display:none;}
.kg-ms .mbody{flex:1;padding-bottom:16px;padding-right:30px;}
.kg-ms .mdate{font-size:12px;color:var(--tx2);}
.kg-ms .mtxt{font-size:15px;color:var(--tx);line-height:1.5;margin-top:1px;}
.kg-sect-h{font-size:13px;color:var(--tx2);margin:18px 0 8px;}
.kg-aiv-note{font-size:13px;color:var(--tx2);line-height:1.6;background:var(--bg3);border:1px solid var(--bd);border-radius:12px;padding:10px 12px;margin-bottom:14px;}
.kg-aiv-note b{color:var(--ach);font-weight:500;}
.kg-aiv-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px;gap:8px;}
.kg-aiv-h .t{font-size:14px;font-weight:600;color:var(--tx3);min-width:0;}
.kg-aiv-pill{font-size:12px;padding:2px 10px;border-radius:10px;background:var(--acl);color:var(--ach);flex-shrink:0;white-space:nowrap;}
.kg-aiv-pill.warn{background:color-mix(in srgb,var(--warn) 14%,transparent);color:var(--warn);}
.kg-aiv-box{background:var(--bgi);border:1px solid var(--bd);border-radius:12px;padding:11px 12px;font-size:13px;line-height:1.7;color:var(--tx);white-space:pre-wrap;word-break:break-all;font-family:ui-monospace,Menlo,Consolas,'Noto Sans TC',monospace;user-select:text;-webkit-user-select:text;margin-bottom:16px;}
.kg-aiv-box .hl{color:var(--ach);font-weight:500;}
.kg-aiv-box.empty{color:var(--tx2);font-style:italic;}
.kg-aiv-sum{font-size:13px;color:var(--tx2);text-align:center;margin-top:2px;padding-bottom:8px;}
.kg-aiv-sum b{color:var(--ach);font-weight:500;}

.kg-tabs::-webkit-scrollbar{display:none;}
.kg-tab{flex-shrink:0;flex-grow:0;padding:10px 14px;font-size:14px;color:var(--tx2);cursor:pointer;transition:color .15s,font-weight .15s;white-space:nowrap;}
.kg-tab.active{color:var(--ac);font-weight:600;}
/* 角色卡編輯 tabs — 3 個均寬 tab；底線用 ::after 偽元素，可跟手 lerp */
.ce-tabs{display:flex;flex-direction:row;flex-shrink:0;background:var(--bg);position:relative;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;}
.ce-tabs::-webkit-scrollbar{display:none;}
.ce-tabs::after{content:'';position:absolute;bottom:-1px;left:var(--ti-left,0);width:var(--ti-w,0);height:2px;background:var(--ac);border-radius:1px;transition:left .25s cubic-bezier(.4,0,.2,1),width .25s cubic-bezier(.4,0,.2,1);}
.ce-tabs.dragging::after{transition:none;}
.ce-tab{flex:0 0 auto;min-width:80px;text-align:center;padding:12px 16px;font-size:15px;color:var(--tx2);cursor:pointer;transition:color .15s,font-weight .15s;white-space:nowrap;}
.ce-tab.active{color:var(--ac);font-weight:600;}
/* 內容框＝置頂時鐘區塊 + 編輯框（2026-09-01：時鐘住在框裡最上方，編輯框本身不放時間行） */
.sb-content-wrap{display:flex;flex-direction:column;height:300px;border:1px solid var(--bd);border-radius:8px;background:var(--bg2);overflow:hidden;}
.sb-content-wrap:focus-within{border-color:var(--ac);}
.sb-content-area{font-size:16px;color:var(--tx);background:transparent;border:none;padding:12px 14px;flex:1;min-height:0;line-height:1.7;outline:none;resize:none;width:100%;box-sizing:border-box;font-family:inherit;white-space:pre-wrap;overflow-y:auto;}
.sb-prompt-area{font-size:15px;color:var(--tx);background:var(--bg2);border:1px solid var(--bd);border-radius:8px;padding:12px 14px;height:310px;line-height:1.6;outline:none;resize:none;width:100%;box-sizing:border-box;font-family:inherit;overflow-y:auto;}
.sb-prompt-area:focus{border-color:var(--ac);}
.sb-hint{font-size:14px;color:var(--tx2);line-height:1.6;margin-bottom:10px;}
.sb-btn-on{background:var(--ac)!important;color:var(--ac-fg)!important;border-color:var(--ac)!important;}
.sb-btn-on svg{stroke:var(--ac-fg)!important;}
/* 生成鈕冷卻（2026-09-01 阿奈二修）：不蓋掉按鈕原本的顏色與圖樣——
   保留原色，罩一層深色薄膜（.sb-gen-veil）隨剩餘時間從左往右慢慢褪掉，文字換成剩餘時間。
   仍可按：按了走 3 Teka 付費確認。薄膜寬度由 js/chat-sidebar.js 每秒更新。 */
.sb-gen-cd{position:relative;overflow:hidden;font-variant-numeric:tabular-nums;}
.sb-gen-veil{position:absolute;top:0;right:0;bottom:0;background:rgba(20,20,20,.34);pointer-events:none;transition:width .9s linear;}
/* ── 記憶面板卡片（v2.1.427 精緻化）──
   雲朵＝珍藏標記。重要卡片：淡 accent 染底＋上緣漸層 hairline（呼應 inspire-card 語彙但用 --ac，金色保留給儀式感時刻）；
   點擊標記時雲朵播一次 pop＋柔光（memCloudPop/Glow），reduced-motion 停用。
   「只看重要」pill 沿 amb-pill / insp-pill 的 on 態語彙。篩選狀態不持久化（chat-sidebar.js _memImpOnly）。 */
.mem-skel{padding:6px 16px 0;}
.mem-skel .skel{border-radius:4px 12px 12px 4px;border-left:3px solid var(--bd);margin-bottom:12px;}
.mem-skel-page{height:210px;}
.mem-skel-half{height:140px;}
.mem-filter{display:flex;justify-content:flex-end;padding:0 16px 10px;}
.mem-filter-pill{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--tx2);border:1px solid var(--bd);border-radius:999px;padding:5px 13px;cursor:pointer;background:var(--bg2);-webkit-tap-highlight-color:transparent;transition:background .15s,border-color .15s,color .15s;}
.mem-filter-pill svg{width:17px;height:11px;fill:none;stroke:currentColor;stroke-width:9;flex-shrink:0;}
.mem-filter-pill.on{background:color-mix(in srgb,var(--ac) 12%,var(--bg2));border-color:var(--ac);color:var(--ach);font-weight:600;}
.mem-filter-pill.on svg{fill:var(--ac);stroke:var(--ac);}
.mem-sep{display:flex;align-items:center;gap:12px;padding:12px 26px 8px;font-size:12px;color:var(--tx2);letter-spacing:.06em;}
.mem-sep::before,.mem-sep::after{content:'';flex:1;height:1px;}
.mem-sep::before{background:linear-gradient(90deg,transparent,var(--bd2));}
.mem-sep::after{background:linear-gradient(90deg,var(--bd2),transparent);}
.mem-card{position:relative;margin:0 16px 12px;background:var(--bg2);border:1px solid var(--bd);border-left:3px solid var(--bd);border-radius:4px 12px 12px 4px;box-shadow:2px 2px 8px var(--sh);overflow:hidden;transition:border-color .25s,background .25s;}
.mem-card.imp{border-color:color-mix(in srgb,var(--ac) 35%,var(--bd));border-left-color:var(--ac);background:linear-gradient(150deg,color-mix(in srgb,var(--ac) 8%,var(--bg2)),var(--bg2) 58%);}
.mem-card.imp::before{content:'';position:absolute;top:0;left:14px;right:14px;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ac) 55%,transparent),transparent);}
.mem-head{display:flex;align-items:center;justify-content:space-between;padding:6px 6px 0;}
.mem-cloud{position:relative;display:flex;align-items:center;justify-content:center;width:44px;height:34px;cursor:pointer;color:var(--tx2);-webkit-tap-highlight-color:transparent;}
.mem-cloud svg{width:26px;height:16px;fill:none;stroke:currentColor;stroke-width:6;transition:fill .2s,stroke .2s;}
.mem-card.imp .mem-cloud{color:var(--ac);}
.mem-card.imp .mem-cloud svg{fill:var(--ac);stroke:var(--ac);}
.mem-cloud.pop svg{animation:memCloudPop .5s cubic-bezier(.34,1.56,.64,1);}
.mem-cloud.pop::after{content:'';position:absolute;inset:-2px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--ac) 40%,transparent),transparent 72%);animation:memCloudGlow .7s ease-out forwards;pointer-events:none;}
@keyframes memCloudPop{0%{transform:scale(.7);}60%{transform:scale(1.18);}100%{transform:scale(1);}}
@keyframes memCloudGlow{0%{opacity:0;transform:scale(.5);}35%{opacity:1;}100%{opacity:0;transform:scale(1.5);}}
.mem-dots{display:flex;align-items:center;justify-content:center;width:38px;height:34px;color:var(--tx2);cursor:pointer;-webkit-tap-highlight-color:transparent;}
.mem-body{padding:2px 18px 14px;font-size:14px;line-height:1.8;color:var(--tx);cursor:pointer;}
@media(prefers-reduced-motion:reduce){.mem-cloud.pop svg{animation:none;}.mem-cloud.pop::after{display:none;}}

/* ── Character Profile Overlay ── */
.cpf-overlay{position:fixed;inset:0;z-index:260;background:var(--bg);display:flex;flex-direction:column;visibility:hidden;opacity:0;pointer-events:none;transform:translateX(40px);transition:transform .25s cubic-bezier(.4,0,.2,1),opacity .25s cubic-bezier(.4,0,.2,1),visibility 0s .25s;}
.cpf-overlay.show{visibility:visible;opacity:1;pointer-events:auto;transform:translateX(0);transition:transform .25s cubic-bezier(.4,0,.2,1),opacity .25s cubic-bezier(.4,0,.2,1),visibility 0s 0s;}
.cpf-card{width:100%;height:100%;background:var(--bg2);overflow:hidden;display:flex;flex-direction:column;position:relative;}
.cpf-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;}
.cpf-hero{position:relative;width:100%;aspect-ratio:2/3;background:var(--bgi);overflow:hidden;}
.cpf-hero img{width:100%;height:100%;object-fit:cover;display:block;}
.cpf-hero-empty{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:80px;font-weight:600;color:var(--ac);opacity:.3;background:linear-gradient(160deg,var(--acl) 0%,var(--bgi) 100%);}
.cpf-hero::after{content:'';position:absolute;bottom:0;left:0;right:0;height:60%;background:linear-gradient(to top,rgba(0,0,0,.65) 0%,rgba(0,0,0,.35) 35%,transparent 100%);pointer-events:none;}
.cpf-hero.no-after::after{display:none;}
.cpf-back{position:absolute;top:max(12px,env(safe-area-inset-top,12px));left:12px;z-index:2;width:36px;height:36px;border-radius:50%;border:none;background:rgba(0,0,0,.25);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;}
.cpf-back:active{background:rgba(0,0,0,.5);}
.cpf-back svg{width:20px;height:20px;}
.cpf-dl{position:absolute;top:max(12px,env(safe-area-inset-top,12px));right:12px;z-index:2;width:36px;height:36px;border-radius:50%;border:none;background:rgba(0,0,0,.25);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s;}
.cpf-dl:active{background:rgba(0,0,0,.5);}
.cpf-dl svg{width:18px;height:18px;}
.cpf-hero-text{position:absolute;bottom:0;left:0;right:0;z-index:2;padding:0 20px 24px;}
.cpf-hero-label{font-family:'Cormorant Garamond',serif;font-size:12px;font-weight:500;letter-spacing:.25em;text-transform:uppercase;color:rgba(255,255,255,.7);margin-bottom:8px;}
.cpf-hero-name{font-size:32px;font-weight:700;color:#fff;line-height:1.2;letter-spacing:.04em;text-shadow:0 2px 12px rgba(0,0,0,.35);margin-bottom:8px;}
.cpf-hero-slogan{font-size:15px;font-weight:400;font-style:italic;color:#fff;letter-spacing:.02em;margin-top:20px;line-height:1.7;text-shadow:0 1px 6px rgba(0,0,0,.35);padding:0 0 6px;text-align:center;border-bottom:1.5px solid transparent;border-image:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent) 1;}
.cpf-hero-slogan::before{content:'\201C';display:block;font-family:'Cormorant Garamond',serif;font-size:32px;font-style:normal;line-height:0.6;color:rgba(255,255,255,.45);margin-bottom:-2px;text-align:left;}
.cpf-hero-slogan::after{content:'\201D';display:block;font-family:'Cormorant Garamond',serif;font-size:32px;font-style:normal;line-height:1;color:rgba(255,255,255,.45);text-align:right;margin-top:2px;margin-bottom:4px;}
.cpf-hero-tagline:has(+.cpf-hero-slogan){padding-bottom:0;border-bottom:none;}
.cpf-hero-tagline{font-size:15px;font-weight:400;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.35);display:flex;align-items:center;gap:8px;letter-spacing:.02em;}
.cpf-hero-by{font-size:14px;color:#fff;margin-top:8px;cursor:pointer;letter-spacing:.02em;text-shadow:0 1px 6px rgba(0,0,0,.35);}.cpf-hero-by:active{opacity:.7;}
.cpf-hero-tagline .sep{width:3.5px;height:3.5px;border-radius:50%;background:rgba(255,255,255,.5);flex-shrink:0;}
/* ═══ 角色圖庫（多圖 + 拼圖蒐集）═══
   .cpf-gal 是 hero 第一個子元素、絕對填滿：漸層 ::after 與 hero-text（z2）照舊壓在上面。
   track 有 transform → 自成 stacking context，slide 內任何 z-index 都不會蓋過漸層與按鈕。 */
.cpf-gal{position:absolute;inset:0;overflow:hidden;}
.cpf-gal-track{display:flex;height:100%;will-change:transform;}
.cpf-gal-slide{position:relative;flex:0 0 100%;height:100%;overflow:hidden;}
.cpf-gal-slide>img{width:100%;height:100%;object-fit:cover;display:block;}
.cpf-gal-dots{position:absolute;top:max(22px,env(safe-area-inset-top,22px));left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:3;}
.cpf-gal-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.4);transition:background .2s,transform .2s;cursor:pointer;}
.cpf-gal-dots i.on{background:#fff;transform:scale(1.15);}
.cpf-gal-nav{position:absolute;top:22%;bottom:38%;width:20%;z-index:1;cursor:pointer;}
.cpf-gal-nav.prev{left:0;}
.cpf-gal-nav.next{right:0;}
/* 拼圖遮罩：每片是一個全尺寸 div、clip-path 裁成片形（拼圖凸凹超出格框，
   全尺寸＋objectBoundingBox clip 不用算擴張框，材質漸層也在片間連續）。
   裁切線由 .gal-lines SVG 統一畫（clip-path 沒有 border 可用）。 */
.gal-defs{position:absolute;width:0;height:0;overflow:hidden;}
.gal-mask{position:absolute;inset:0;pointer-events:none;}
.gal-cell{position:absolute;inset:0;background:linear-gradient(155deg,var(--bgi) 0%,color-mix(in srgb,var(--bgi) 86%,var(--ac)) 100%);transition:opacity .45s ease;}
.gal-cell.got{opacity:0;}
.gal-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.gal-lines path{fill:none;stroke:color-mix(in srgb,var(--tx2) 55%,transparent);stroke-width:1.2;opacity:.65;transition:opacity .5s ease;}
.gal-lines path.off{opacity:0;}
.gal-lines.ms-veil path{stroke:rgba(255,255,255,.45);}
.gal-lines.ms-paper path{stroke:rgba(115,95,65,.55);}
.gal-lines.ms-night path{stroke:rgba(255,255,255,.22);}
/* 新碎片「拼上」：蓋板淡出讓該片畫面浮現；金光由 .gal-hl 輪廓閃爍層負責 */
.gal-cell.placing{animation:galPlace .8s ease forwards;}
@keyframes galPlace{to{opacity:0;}}
/* 片形輪廓金光閃爍：粗模糊層墊光暈、細實線層描邊，opacity 波動數下後散去 */
.gal-hl{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.gal-hl path{fill:none;stroke:var(--gold);}
.gal-hl .hl-glow,.gal-hl .hl-line{opacity:0;}
.gal-hl .hl-glow{stroke-width:5;filter:blur(3px);}
.gal-hl .hl-line{stroke-width:1.4;}
/* 嵌合收尾（2026-07-29 阿奈定案，掃光描邊全套退役）：新片輪廓金邊脈衝——
   亮起（30%）再緩緩散去。只做 opacity、無 dash 動畫，non-scaling-stroke 安全。 */
.gal-hl.pulse .hl-glow,.gal-hl.pulse .hl-line{animation:galHlFull 1.9s ease-in-out forwards;}
@keyframes galHlFull{0%{opacity:0;}30%{opacity:1;}100%{opacity:0;}}
/* 聊天內碎片掉落：全螢幕演出（背景模糊＋大拼圖＋置中文字，2026-07-29） */
.gal-drop-ov{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:rgba(18,14,12,.5);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);opacity:0;pointer-events:none;transition:opacity .4s ease;}
.gal-drop-ov.show{opacity:1;pointer-events:auto;}
.gal-drop-wrap{text-align:center;padding:20px;transform:scale(.94) translateY(12px);opacity:0;transition:transform .6s cubic-bezier(.16,1,.3,1),opacity .45s ease;}
.gal-drop-ov.show .gal-drop-wrap{transform:none;opacity:1;}
.gal-drop-stage{position:relative;width:min(64vw,300px);aspect-ratio:2/3;margin:0 auto 22px;border-radius:14px;overflow:hidden;background:var(--bgi);box-shadow:0 24px 70px rgba(0,0,0,.45);}
.gal-drop-stage img{width:100%;height:100%;object-fit:cover;display:block;}
.gal-drop-eyebrow{font-family:'Cormorant Garamond',serif;font-size:13px;font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:rgba(255,255,255,.82);margin-bottom:6px;}
.gal-drop-title{font-size:20px;font-weight:700;letter-spacing:.1em;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.4);}
.gal-drop-sub{margin-top:10px;font-size:14px;line-height:1.9;color:rgba(255,255,255,.75);}
.gal-drop-cnt{display:block;margin-top:6px;font-size:15px;font-weight:600;color:var(--gold);letter-spacing:.14em;font-variant-numeric:tabular-nums;}
.gal-drop-hint{margin-top:26px;font-size:13px;color:rgba(255,255,255,.42);opacity:0;animation:galHintIn .6s ease 1.8s forwards;}
@keyframes galHintIn{to{opacity:1;}}
/* 集滿恭喜字卡（揭示收尾） */
.gal-complete{position:absolute;top:38%;left:50%;transform:translate(-50%,-50%);text-align:center;color:#fff;pointer-events:none;text-shadow:0 2px 14px rgba(0,0,0,.45);animation:galCompIn 2.6s ease forwards;}
.gal-complete .gc-eyebrow{font-family:'Cormorant Garamond',serif;font-size:13px;font-weight:500;letter-spacing:.3em;text-transform:uppercase;opacity:.85;margin-bottom:6px;}
.gal-complete .gc-title{font-size:22px;font-weight:700;letter-spacing:.12em;}
.gal-complete i{display:block;width:64px;height:1.5px;margin:10px auto 0;background:linear-gradient(90deg,transparent,var(--gold),transparent);}
@keyframes galCompIn{0%{opacity:0;transform:translate(-50%,-46%);}12%{opacity:1;transform:translate(-50%,-50%);}78%{opacity:1;transform:translate(-50%,-50%);}100%{opacity:0;transform:translate(-50%,-50%);}}
/* 進度 chip：頂部右側（避開角落按鈕與底部漸層文字區） */
.gal-chip{position:absolute;top:58px;right:12px;display:flex;align-items:center;gap:5px;padding:5px 11px;border-radius:999px;background:rgba(0,0,0,.38);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:#fff;font-size:13px;font-weight:500;letter-spacing:.02em;cursor:pointer;}
.gal-chip svg{opacity:.85;}
/* 視窗頭貼 sheet：單列橫捲圖庫（可選頭貼＋蒐集中拼圖進度同列，2026-07-29 定版排版）
   .sel 選中框同 .ce-gal-tile.sel 語彙；padding/負 margin 是為了不讓捲動容器裁掉選中框 */
.cav-row{display:flex;gap:9px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:3px 2px 4px;margin:0 -2px 12px;}
.cav-row::-webkit-scrollbar{display:none;}
.cav-tile{position:relative;flex:0 0 auto;width:96px;aspect-ratio:2/3;border-radius:10px;overflow:hidden;border:1px solid var(--bd);background:var(--bgi);cursor:pointer;-webkit-tap-highlight-color:transparent;}
.cav-tile img{width:100%;height:100%;object-fit:cover;display:block;}
.cav-tile:active{opacity:.85;}
.cav-tile.sel{border-color:var(--ac);box-shadow:0 0 0 2px color-mix(in srgb,var(--ac) 35%,transparent);}
.cav-tile.dim{cursor:default;}
.cav-tile.dim:active{opacity:1;}
.cav-badge{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:12px 4px 5px;font-size:13px;text-align:center;color:#fff;background:linear-gradient(to top,rgba(0,0,0,.55),transparent);letter-spacing:.03em;font-variant-numeric:tabular-nums;pointer-events:none;}
.cav-fallback{display:flex;align-items:center;justify-content:center;height:100%;font-size:13px;color:var(--tx2);}
/* 創作者端：編輯頁圖庫格 + 設定 sheet 段選 */
.ce-gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.ce-gal-tile{position:relative;aspect-ratio:2/3;border-radius:10px;overflow:hidden;border:1px solid var(--bd);cursor:pointer;background:var(--bgi);}
.ce-gal-tile img{width:100%;height:100%;object-fit:cover;display:block;}
.ce-gal-tile:active{opacity:.8;}
.ce-gal-badge{position:absolute;left:0;right:0;bottom:0;padding:14px 6px 5px;font-size:13px;text-align:center;color:#fff;background:linear-gradient(to top,rgba(0,0,0,.58),transparent);}
.ce-gal-tile.add{display:flex;align-items:center;justify-content:center;border-style:dashed;background:var(--bg2);color:var(--tx2);font-size:26px;}
/* segmented control：相連膠囊、13px 緊湊（字級規範 .rp-sel-sm 層級） */
.gal-seg{display:inline-flex;border:1px solid var(--bd);border-radius:9px;overflow:hidden;}
.gal-seg-btn{padding:7px 11px;border:none;border-left:1px solid var(--bd);background:none;color:var(--tx2);font-size:13px;cursor:pointer;display:flex;align-items:center;gap:4px;white-space:nowrap;transition:color .15s,background .15s;}
.gal-seg-btn:first-child{border-left:none;}
.gal-seg-btn.on{background:color-mix(in srgb,var(--ac) 14%,transparent);color:var(--ac);font-weight:600;}
/* 遮罩樣式（創作者可選）：mist 霧面（預設）/ veil 薄紗 / paper 信箋 / night 夜幕
   swatch 與遮罩格共用同一組背景定義，設定 sheet 的段選按鈕能直接預覽質感 */
.gal-mask.ms-veil .gal-cell,.ms-swatch.ms-veil{background:color-mix(in srgb,var(--bg) 30%,transparent);backdrop-filter:blur(22px) saturate(1.15);-webkit-backdrop-filter:blur(22px) saturate(1.15);}
.gal-mask.ms-paper .gal-cell,.ms-swatch.ms-paper{background:linear-gradient(150deg,#f2ecdc 0%,#e7ddc6 100%);}
.gal-mask.ms-night .gal-cell,.ms-swatch.ms-night{background:linear-gradient(160deg,#1a1c24 0%,#242836 100%);}
.ms-swatch{width:11px;height:11px;border-radius:3px;border:1px solid var(--bd);display:inline-block;flex-shrink:0;background:linear-gradient(155deg,var(--bgi) 0%,color-mix(in srgb,var(--bgi) 86%,var(--ac)) 100%);}
.gal-seg-btn{display:flex;align-items:center;justify-content:center;gap:5px;}
/* 創作者設定 sheet：眉標標題＋拼圖設定群組卡＋主次分明的動作列 */
.gal-ed{padding:22px 22px 24px;color:var(--tx);}
.gal-ed-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;row-gap:6px;min-height:46px;padding:5px 0;border-top:1px solid color-mix(in srgb,var(--bd) 70%,transparent);}
.gal-prev-wrap+.gal-ed-row{border-top:none;margin-top:12px;}
.gal-ed-k{font-size:14px;font-weight:500;color:var(--tx2);flex-shrink:0;margin-right:12px;}
.gal-ed-row .gal-seg,.gal-ed-row input{margin-left:auto;}
.gal-ed-note{font-size:12px;color:var(--tx2);line-height:1.7;padding:2px 0 8px;}
.gal-ed-actions{display:flex;gap:10px;margin-top:6px;padding-top:16px;border-top:1px solid var(--bd);}
.gal-ed-del{padding:10px 18px;border-radius:10px;border:1px solid color-mix(in srgb,var(--del) 45%,transparent);background:none;color:var(--del);font-size:15px;cursor:pointer;}
.gal-ed-save{flex:1;padding:10px 18px;border-radius:10px;border:none;background:var(--ac);color:#fff;font-size:15px;font-weight:600;cursor:pointer;letter-spacing:.04em;}
.gal-ed-save:active,.gal-ed-del:active{opacity:.82;}
/* 創作者設定 sheet：玩家視角實際預覽 */
.gal-prev-wrap{margin-bottom:14px;}
.gal-prev{position:relative;width:150px;aspect-ratio:2/3;margin:0 auto;border-radius:10px;overflow:hidden;border:1px solid var(--bd);background:var(--bgi);}
.gal-prev img{width:100%;height:100%;object-fit:cover;display:block;}
/* 拼圖資訊卡 */
.gal-info{padding:24px 24px 22px;color:var(--tx);}
.gal-info-eyebrow{font-family:'Cormorant Garamond',serif;font-size:12px;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--tx2);margin-bottom:4px;}
.gal-info-title{font-size:19px;font-weight:700;letter-spacing:.04em;margin-bottom:14px;}
.gal-info-cells{display:flex;align-items:center;gap:5px;margin-bottom:16px;}
.gal-info-cells i{width:14px;height:14px;border-radius:4px;border:1px solid var(--bd);background:var(--bg2);}
.gal-info-cells i.on{background:var(--ac);border-color:var(--ac);}
.gal-info-count{margin-left:8px;font-size:14px;color:var(--tx2);font-variant-numeric:tabular-nums;}
.gal-info-div{height:1px;background:linear-gradient(90deg,var(--bd),transparent);margin-bottom:12px;}
.gal-info-row{display:flex;gap:14px;font-size:15px;line-height:2.0;}
.gal-info-row .k{flex-shrink:0;color:var(--tx2);font-weight:500;min-width:3.2em;}
.gal-info-row .v{color:var(--tx);}
.gal-info-note{margin-top:14px;font-size:13px;color:var(--tx2);line-height:1.7;}
/* 視窗頭貼：圖庫 2:3 直圖進圓形小頭貼時裁切偏上取臉部 */
.gal-av{object-position:50% 22%;}
.ce-gal-tile.sel{border-color:var(--ac);box-shadow:0 0 0 2px color-mix(in srgb,var(--ac) 35%,transparent);}
.cpf-body{padding:32px 28px 48px;display:flex;flex-direction:column;}
/* Showcase tabs */
.cpf-tabs{display:flex;position:sticky;top:0;z-index:5;background:var(--bg2);padding:0 28px;border-bottom:1px solid transparent;border-image:linear-gradient(90deg,transparent,var(--bd),transparent) 1;}/* 原本尾端多寫了一個 position:relative 把 sticky 蓋掉（v2.1.367 修）——sticky 本身就是定位元素，::after indicator 不需要 relative。懸浮分界用兩端淡出 hairline（語彙 #8） */.cpf-tabs::after{content:'';position:absolute;bottom:0;left:var(--ti-left,0);width:var(--ti-w,0);height:1.5px;background:var(--ac);border-radius:1px;transition:left .25s cubic-bezier(.4,0,.2,1),width .25s cubic-bezier(.4,0,.2,1);}.cpf-tabs.dragging::after{transition:none;}
.cpf-tab{flex:1;text-align:center;padding:16px 0 14px;font-family:'Cormorant Garamond',serif;font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--tx2);cursor:pointer;transition:color .2s,opacity .2s;opacity:.5;}
.cpf-tab-wrap{overflow:hidden;}
.cpf-tab-track{display:flex;width:300%;transition:transform .3s cubic-bezier(.25,.46,.45,.94);will-change:transform;}
.cpf-tab-page{flex-shrink:0;min-width:0;}
/* 分頁切換淡入（v2.1.483）：複用 gridIn（管理頁 char-grid 同款），角色頁與統計頁換分頁時目標內容淡入上移 */
.cpf-body.pg-in,.dash-page.pg-in{animation:gridIn .3s ease both;}
.cpf-comments-panel{position:relative;}
.cpf-comment-bar{display:none;position:absolute;bottom:0;left:0;right:0;z-index:10;padding:10px 12px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0));background:var(--bg2);border-top:1px solid var(--bd);flex-direction:column;}
.cpf-comment-bar.show{display:flex;}
#cmt-thread-bar{left:0;right:0;padding:10px 16px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0));background:var(--bg2);}
#fp-cmt-thread{background:var(--bg2);}
#fp-cmt-thread .cpf-comment{border-bottom:none;}
.cpf-comment-bar textarea{flex:1;border:1px solid var(--bd);border-radius:18px;padding:10px 14px;font-size:14px;line-height:20px;font-family:inherit;resize:none;background:var(--bg3);color:var(--tx);min-height:42px;margin-left:-3px;}/* 圓角與橫向 padding 對齊 .sup-bar 的膠囊樣式；-3 收圖示到框的可見距離（gap 6＋內縮 5.5） *//* 行高釘死：單行 42px，按鈕補償以此為準 */
/* ── 故事三態 + 購買特寫 + 書架 + 贊助（2026-07-02）── */
.story-locked{opacity:.55;}
.story-cond-item.miss{color:var(--del);}
.story-st-chip{display:inline-flex;align-items:center;margin-left:8px;padding:2px 8px;border-radius:999px;font-size:12px;line-height:1.4;color:var(--tx2);background:var(--bg3);border:1px solid var(--bd);white-space:nowrap;vertical-align:middle;}
.story-st-chip.buy{color:var(--ac);border-color:var(--ac);}
.story-st-chip.open{opacity:.8;}
/* 購買特寫 */
.sb-hero{position:relative;display:flex;justify-content:center;margin-bottom:18px;}
.sb-cover{width:140px;height:186px;border-radius:10px;overflow:hidden;background:var(--bg3);border:1px solid var(--bd);display:flex;align-items:center;justify-content:center;}
.sb-cover img{width:100%;height:100%;object-fit:cover;display:block;}
.sb-seal{position:absolute;bottom:-12px;left:50%;transform:translateX(31px);width:49px;height:49px;}
.sb-title{font-size:18px;font-weight:700;text-align:center;color:var(--tx);margin-top:8px;}
.sb-summary{font-size:14px;color:var(--tx2);line-height:1.8;margin-top:10px;white-space:pre-wrap;}
.sb-meta{font-size:13px;color:var(--tx2);text-align:center;margin-top:8px;}
.sb-price-row{display:flex;align-items:center;justify-content:space-between;font-size:15px;color:var(--tx);padding:12px 0;border-bottom:1px solid var(--bd);margin-top:6px;}
.sb-price{font-weight:700;color:var(--ac);}
/* 書架 */
.bs-group-head{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--tx);margin:18px 0 6px;}
.bookshelf-item{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--bd);cursor:pointer;}
.bookshelf-item.dead{opacity:.5;cursor:default;}
/* 贊助 */
.sp-amt-row{display:flex;gap:8px;}
/* 贊助頁 v2.1.355：頂部愛心定調、金額卡兩行式（數字＋Nub 小字）、選中柔光＋微彈 */
.sp-hero{display:flex;flex-direction:column;align-items:center;gap:8px;padding:6px 0 22px;}
.sp-hero svg{width:34px;height:34px;color:var(--ac);opacity:.55;}
.sp-hero-txt{font-size:14px;color:var(--tx2);text-align:center;}
.sp-amt{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;padding:10px 0 8px;border-radius:12px;border:1px solid var(--bd);background:var(--bg3);color:var(--tx);cursor:pointer;font-family:inherit;transition:border-color .2s,box-shadow .2s,transform .25s cubic-bezier(.34,1.56,.64,1);-webkit-tap-highlight-color:transparent;}
.sp-amt b{font-size:17px;font-weight:600;font-variant-numeric:tabular-nums;line-height:1.2;}
.sp-amt span{font-size:11px;color:var(--tx2);letter-spacing:.06em;}
/* 選中態（v2.1.480 阿奈定案）：光暈保留、只修字——v478 連光暈一起拆被打回。
   數字恆 var(--tx) 高對比（問題根源是字染 accent 變糊，不是光暈），其餘維持原配方 */
.sp-amt.on{border-color:var(--ac);transform:translateY(-2px);box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 12%,transparent),0 4px 12px color-mix(in srgb,var(--ac) 18%,transparent);}
.sp-amt.on span{color:var(--ac);}
/* 思考鏈四段選擇（API 設定表單） */
/* 思考鏈四段選擇（分段控制器）：外框一個容器、內部四段共用底，四段看起來是「一個選擇器」
   而不是四顆各自獨立的按鈕（舊版每段各有 border 又用 gap 隔開，讀起來像四個開關）。
   選中段改為淺一階的底色浮起＋accent 文字，不再整塊填實心 accent——
   這頁其餘元件（輸入框、rp-sel）都是淡底細框，實心色塊在其中像異物。
   浮起靠 --bg2 與 --bg3 的亮度差，八套明暗主題都成立；文字色不再寫死 #fff。 */
.think-seg{display:flex;gap:2px;padding:3px;background:var(--bg3);border:1px solid var(--bd);border-radius:11px;}
.think-seg button{flex:1;height:32px;border:none;background:none;border-radius:8px;color:var(--tx2);font-size:14px;font-family:inherit;cursor:pointer;transition:background .18s,color .18s;}
.think-seg button.on{background:var(--bg2);color:var(--ac);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.08);}
/* Teka 兌換 Nub 的數字加減選量列（#cvt-ov） */
.cvt-stepper{display:flex;align-items:center;justify-content:center;gap:12px;margin:14px 0 8px;}
.cvt-step{width:44px;height:44px;border-radius:12px;border:1px solid var(--bd);background:var(--bg3);color:var(--tx);font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;user-select:none;}
.cvt-step:active{background:var(--bd);}
#cvt-val{width:84px;height:44px;text-align:center;font-size:18px;font-weight:600;border:1px solid var(--bd);border-radius:12px;background:var(--bg);color:var(--tx);}
/* 事件「僅閱讀」膠囊（創作者事件列表 + 聊天側欄共用）：
   標示這條事件只給玩家看、不進 AI 上下文 */
.ev-reader-chip{flex:none;display:inline-flex;align-items:center;padding:2px 8px;margin-right:4px;border-radius:999px;font-size:12px;line-height:1.4;color:var(--tx2);background:var(--bg3);border:1px solid var(--bd);white-space:nowrap;}
/* ── 留言附件：工具鈕（附圖 / 劇透標記）── */
.cmt-tool{flex:none;width:32px;height:34px;display:flex;align-items:center;justify-content:center;background:none;border:none;padding:0;color:var(--tx2);cursor:pointer;margin-bottom:4px;}
.cpf-comment-bar .cmt-tool:first-child{margin-left:-4px;}/* 同 .sup-attach 的視覺平衡補償：圖示在 32px 鈕內縮 5.5px，拉 -4 讓可見邊 13.5px ≈ 送出圓 12px */
.cmt-tool svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.cmt-tool.on{color:var(--ac);}
/* 輸入列上方的待傳縮圖列 */
.cmt-pending{display:none;gap:8px;width:100%;margin-bottom:8px;flex-wrap:wrap;}
.cmt-pend-thumb{position:relative;width:52px;height:52px;border-radius:8px;overflow:hidden;background:var(--bg3);border:1px solid var(--bd);}
.cmt-pend-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.cmt-pend-busy{display:flex;align-items:center;justify-content:center;color:var(--tx2);font-size:15px;}
.cmt-pend-x{position:absolute;top:2px;right:2px;width:18px;height:18px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font-size:12px;line-height:18px;text-align:center;cursor:pointer;}
/* 留言內圖片縮圖列（點開放大） */
.cmt-imgs{display:flex;gap:6px;margin-top:8px;}
.cmt-imgs img{width:calc((100% - 12px)/3);max-width:110px;aspect-ratio:1/1;object-fit:cover;border-radius:8px;border:1px solid var(--bd);cursor:pointer;display:block;}
.cmt-imgs.sm img{max-width:92px;}
/* 劇透遮罩（點一下展開，不記住狀態） */
.cmt-spoiler{margin-top:6px;padding:12px;background:var(--bg3);border:1px dashed var(--bd);border-radius:8px;font-size:13px;color:var(--tx2);text-align:center;cursor:pointer;user-select:none;}
/* 圖片放大檢視：全螢幕黑底置中（z 低於 toast/crop 的 9999） */
#img-lightbox{display:none;position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.92);align-items:center;justify-content:center;padding:16px;}
#img-lightbox.show{display:flex;}
#img-lightbox img{max-width:100%;max-height:calc(var(--app-h,100vh) - 32px);object-fit:contain;border-radius:4px;}
.cpf-tab.active{color:var(--ac);font-weight:600;opacity:1;}
/* Showcase: creator pinned */
.cpf-pinned{background:var(--bg3);border:1px solid var(--bd);border-radius:12px;padding:16px;margin-bottom:20px;}
.cpf-pinned-text{font-size:15px;color:var(--tx);line-height:1.7;}
/* 左直條 v2.1.366 退場：intro 有了 Introduction 分隔標籤後，直條的「這是一區」功能被取代，
   長文時一條線從頭陪跑到底反而突兀（阿奈：這區塊微妙） */
.cpf-intro{position:relative;margin-bottom:32px;}
.cpf-intro-text{font-size:16px;line-height:2;color:var(--tx);letter-spacing:.02em;}
.cpf-intro-text p{margin:0 0 .8em;}.cpf-intro-text p:last-child{margin:0;}
.cpf-div-label{display:flex;align-items:center;gap:14px;margin:36px 0 24px;}
/* 分隔線用真元素 <i> 不用偽元素（v2.1.472）：html2canvas-pro 對 flex 容器內偽元素排版會炸（線全擠左、字被推到右緣），真元素兩邊引擎都畫得對 */
.cpf-div-label i{flex:1;height:1px;background:var(--bd);}
.cpf-div-label span{font-family:'Cormorant Garamond',serif;font-size:13px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--tx2);white-space:nowrap;}
.cpf-hr{height:1px;background:var(--bd);margin:32px 0;}
.cpf-encounter{position:relative;background:var(--bg3);border-radius:12px;padding:24px 24px 20px;margin-bottom:6px;}
.cpf-encounter-text{font-size:16px;line-height:2;color:var(--tx);word-break:break-word;}
.cpf-encounter-text p{margin:0 0 .8em;}.cpf-encounter-text p:last-child{margin:0;}
.cpf-section-head{font-size:14px;font-weight:600;color:var(--tx3);margin-bottom:12px;display:flex;align-items:center;gap:7px;letter-spacing:.02em;}
.cpf-section-head svg{width:16px;height:16px;stroke:var(--ac);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

.cpf-events{margin-bottom:0;}
.cpf-ev-item{border:1px solid var(--bd);border-radius:12px;margin-bottom:10px;overflow:hidden;background:var(--bg2);cursor:pointer;-webkit-tap-highlight-color:transparent;}
.cpf-ev-header{display:flex;align-items:center;gap:10px;padding:16px 18px;}.cpf-ev-header:active{background:var(--bg3);}
.cpf-ev-info{flex:1;min-width:0;}
.cpf-ev-name{font-size:16px;font-weight:500;color:var(--tx3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cpf-ev-trigger{font-size:14px;color:var(--tx2);margin-top:4px;}
.cpf-ev-chevron{width:18px;height:18px;color:var(--tx2);flex-shrink:0;opacity:.5;}
.cpf-ev-item:active{background:var(--bg3);}
.cpf-ev-item.locked{cursor:default;opacity:.6;}.cpf-ev-item.locked:active,.cpf-ev-item.locked .cpf-ev-header:active{background:var(--bg2);}
.cpf-card.no-img .cpf-hero{aspect-ratio:unset;height:220px;background:linear-gradient(160deg,var(--acl) 0%,var(--bgi) 100%);}
.cpf-empty-intro{color:var(--tx2);font-style:italic;font-size:15px;padding-left:20px;}
.cpf-empty-intro.dim{opacity:.5;}
.cpf-ev-count{margin-left:auto;font-size:12px;font-weight:600;color:var(--ac);background:var(--acl);padding:2px 8px;border-radius:10px;line-height:1.4;}
.cpf-footer{margin-top:auto;padding-top:20px;text-align:center;}
.cpf-footer-line{width:40px;height:1.5px;background:var(--ac);opacity:.4;margin:0 auto 12px;}
.cpf-footer-text{font-family:'Cormorant Garamond',serif;font-size:14px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--tx2);opacity:.4;}
/* Showcase: hashtags */
/* v2.1.365 去 pill 化（阿奈：這區塊微妙）：tags 是氣質速覽不是按鈕，pill 牆在 tag 多的角色會佔掉
   分頁開頭一大塊。改書封底式小字流：#號淡、字實，多到 11 顆也只是幾行小字 */
.cpf-hashtags{display:flex;flex-wrap:wrap;gap:6px 16px;margin-bottom:26px;padding-top:2px;}
.cpf-hashtag{font-size:13px;color:var(--tx2);white-space:nowrap;letter-spacing:.02em;}
.cpf-hashtag::first-letter{color:var(--ac);opacity:.7;}
.cr-follow-btn{padding:8px 28px;border-radius:20px;border:1.5px solid var(--ac);background:var(--ac);color:var(--ac-fg);font-size:14px;font-weight:600;cursor:pointer;transition:all .15s;}.cr-follow-btn:active{transform:scale(.96);}
.cr-follow-btn.following{background:transparent;color:var(--ac);}
.cr-follower-count{font-size:13px;color:var(--tx2);text-align:center;margin-top:6px;margin-bottom:14px;}
/* 個人頁 stats 內可點的「N 粉絲」「N 追蹤中」（owner 視角才掛 onclick） */
.cr-stat-link{cursor:pointer;-webkit-tap-highlight-color:transparent;}
.cr-stat-link:active{opacity:.5;}
/* ── 粉絲 / 追蹤中名單面板 ── */
.fl-list{padding:8px 0;}
.fl-row{display:flex;align-items:center;gap:12px;padding:10px 16px;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.fl-row:active{background:var(--bg2);}
.fl-av{width:44px;height:44px;font-size:16px;flex-shrink:0;}
.fl-name{flex:1;min-width:0;font-size:15px;color:var(--tx);font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fl-btn{flex-shrink:0;padding:6px 18px;font-size:13px;}
.fl-loading{text-align:center;padding:16px 0 24px;color:var(--tx2);font-size:13px;}
.fl-empty{text-align:center;padding:48px 24px;color:var(--tx2);font-size:14px;}
.cr-badges.cb-empty{justify-content:center;}
.cb-empty.click{cursor:pointer;}
.cb-empty span{font-size:12px;color:var(--tx2);}
.cr-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-bottom:0;padding:0 16px;cursor:pointer;max-height:44px;overflow:hidden;transition:max-height .25s ease;}
.cr-badges.expanded{max-height:600px;}
.cr-badge-toggle{display:flex;justify-content:center;padding:2px 0 12px;cursor:pointer;color:var(--tx2);transition:transform .2s;}
.cr-badge-toggle svg{transition:transform .2s;}
.cr-badge-toggle.expanded svg{transform:rotate(180deg);}
.cr-badge{width:36px;height:36px;border-radius:50%;background:var(--bg3);border:1.5px solid var(--bd);display:flex;align-items:center;justify-content:center;font-size:18px;color:var(--ac);transition:transform .15s;position:relative;}.cr-badge:active{transform:scale(.9);}.cr-badge svg{width:18px;height:18px;}
.cr-badge.locked{opacity:.25;filter:grayscale(1);}
.badge-tip{position:fixed;background:var(--bg);color:var(--tx);border:1px solid var(--bd);border-radius:10px;padding:8px 12px;font-size:12px;line-height:1.5;white-space:nowrap;box-shadow:0 4px 16px rgba(0,0,0,.15);z-index:800;pointer-events:none;animation:badgeTipIn .15s ease-out;}
.badge-tip-arrow{position:absolute;top:100%;width:12px;height:6px;overflow:hidden;pointer-events:none;}.badge-tip-arrow::after{content:'';position:absolute;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--bg);}
.badge-tip .bt-name{font-weight:600;color:var(--tx3);}
.badge-tip .bt-desc{color:var(--tx2);margin-top:2px;}
@keyframes badgeTipIn{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}}
/* Achievement page */
.ach-list{padding:8px 0;}
.ach-cat-count{font-size:12px;font-weight:500;color:var(--ac);}
.ach-series{border-bottom:1px solid var(--bd);}
.ach-series-head{display:flex;align-items:center;gap:14px;padding:14px 16px;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.ach-series-head:active{background:var(--bg3);}
.ach-detail-ov{position:fixed;inset:0;z-index:800;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);visibility:hidden;opacity:0;pointer-events:none;transition:opacity .2s,visibility 0s .2s;}.ach-detail-ov.show{visibility:visible;opacity:1;pointer-events:auto;transition:opacity .2s,visibility 0s 0s;}
.ach-detail-card{width:300px;max-height:80vh;overflow-y:auto;background:var(--bg2);border-radius:18px;padding:24px 20px 20px;box-shadow:0 16px 48px rgba(0,0,0,.25);animation:rewardIn .3s cubic-bezier(.16,1,.3,1);}
.ach-detail-top{display:flex;align-items:center;gap:14px;margin-bottom:16px;}
.ach-detail-series-name{font-size:18px;font-weight:700;color:var(--tx3);}
.ach-detail-progress{font-size:12px;color:var(--ac);margin-top:2px;}
.ach-detail-steps{padding:0;}
.ach-detail-step{display:flex;align-items:flex-start;gap:10px;padding:10px 0;position:relative;}
.ach-detail-step+.ach-detail-step{border-top:1px solid var(--bd);}
.ach-detail-step-dot{width:10px;height:10px;border-radius:50%;border:2px solid var(--bd);flex-shrink:0;margin-top:4px;}.ach-detail-step.done .ach-detail-step-dot{background:var(--ac);border-color:var(--ac);}
.ach-detail-step.current .ach-detail-step-dot{border-color:var(--ac);}
.ach-detail-step-info{flex:1;min-width:0;}
.ach-detail-step-name{font-size:14px;font-weight:600;color:var(--tx3);}
.ach-detail-step.locked .ach-detail-step-name{color:var(--tx2);}
.ach-detail-step-desc{font-size:12px;color:var(--tx2);margin-top:2px;}
.ach-icon{width:46px;height:46px;border-radius:50%;background:var(--bg3);border:1.5px solid var(--bd);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;color:var(--ac);}.ach-icon svg{width:22px;height:22px;}
.ach-icon.locked-icon{opacity:.25;filter:grayscale(1);}
.ach-name.locked-name{color:var(--tx2);}
.ach-info{flex:1;min-width:0;}
.ach-name{font-size:15px;font-weight:600;color:var(--tx3);}
.ach-desc{font-size:13px;color:var(--tx2);margin-top:2px;}
.story-card{position:relative;display:flex;gap:12px;padding:14px 0;border-bottom:1px solid var(--bd);cursor:pointer;}.story-card:last-child{border-bottom:none;}.story-card:active{opacity:.7;}
.story-card.story-draft{opacity:.6;}
.se-tip-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;color:var(--tx2);cursor:pointer;margin-left:6px;vertical-align:middle;flex-shrink:0;transition:color .15s;}.se-tip-icon svg{width:18px;height:18px;}.se-tip-icon:active{color:var(--ac);}
.story-cover{width:52px;height:70px;border-radius:8px;background:var(--bgi);flex-shrink:0;overflow:hidden;display:flex;align-items:center;justify-content:center;}
.story-cover img{width:100%;height:100%;object-fit:cover;}
.story-cover-icon{font-size:24px;opacity:.4;}
.story-info{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;}
.story-title{font-size:15px;font-weight:600;color:var(--tx3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.story-read-cover-bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.story-read-cover-bg .lay{position:absolute;inset:-4%;background-size:cover;background-position:center;}
.story-read-cover-bg::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.55);}
.story-read-inner{padding:32px 22px 16px;position:relative;z-index:1;}
.story-read-title{font-size:26px;font-weight:600;color:var(--tx3);line-height:1.3;}
.story-read-divider{height:1px;background:var(--bd);margin:24px 0;}
.story-read-body{font-size:16px;line-height:2;color:var(--tx);letter-spacing:.3px;}.story-read-body p{margin:0 0 1.4em;}.story-read-body p:last-child{margin:0;}
.story-read-body em{font-style:italic;color:var(--txem,var(--tx2));}
.story-read-body strong{font-weight:600;}
.story-read-body blockquote{border-left:3px solid var(--ac);padding-left:10px;margin:.5em 0;color:var(--tx2);}
#fp-story-read{overflow:hidden;background:var(--bg2);}
.readclose{position:absolute;top:12px;right:12px;z-index:5;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;color:rgba(255,255,255,.88);background:rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);}
.readclose:active{background:rgba(0,0,0,.5);}
#fp-story-read:not(.has-cover) .readclose{color:var(--tx2);background:var(--bg3);border-color:var(--bd);}
#fp-story-read .fp-body{position:relative;overflow-y:auto;padding:0;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
#fp-story-read.has-cover .story-read-inner{color:#e8e8e8;}
#fp-story-read.has-cover .story-read-body{color:rgba(255,255,255,.9);}
#fp-story-read.has-cover .story-read-body em{color:rgba(255,255,255,.6);}
/* 故事編輯：封蠟選擇器
 * 縮圖 48px、靠左排（不撐滿），flex-wrap 自動換行 */
.seal-rows{margin-top:8px;display:flex;flex-direction:column;gap:15px;}
.seal-picker{display:flex;flex-wrap:wrap;gap:10px;}
.seal-pick-item{position:relative;width:49px;height:49px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;border:2px solid transparent;transition:border-color .15s,transform .15s;filter:drop-shadow(0 1px 3px rgba(0,0,0,.22));flex-shrink:0;}
.seal-pick-item svg{width:100%;height:100%;}
.seal-pick-item.active{border-color:var(--tx);transform:scale(1.06);box-shadow:0 0 0 1px var(--bg),0 0 0 3px var(--tx);}
.seal-pick-item.locked{cursor:not-allowed;opacity:.6;}
/* 編輯表單上的封蠟摘要列：點了開全頁 */
/* 已發布故事的編輯狀態列（v2.1.766 未發布修改機制）：固定一行高，兩態只換字不換版面。
   捨棄鈕隱藏用 display:none 完全讓位：info 態文字才吃得到全寬。
   曾用 visibility:hidden 保位防跳版，但兩態文字本來就不同、各排各的，保位是多餘保護，
   反而讓 info 態右側平白空一塊還把長文案擠到折行（v2.1.771 教訓）。 */
.se-status{display:flex;align-items:center;gap:8px;padding:10px 12px;margin:2px 0 14px;background:var(--acl);border:1px solid var(--bd2);border-radius:10px;min-height:42px;}
.se-status .ic{display:inline-flex;flex-shrink:0;}
.se-status .ic svg{width:15px;height:15px;stroke:var(--ac);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.se-status .t{flex:1;font-size:14px;color:var(--tx);line-height:1.4;}
.se-status .t.quiet{color:var(--tx2);}
.se-status .discard{background:none;border:none;font-family:inherit;font-size:14px;color:var(--del);font-weight:500;flex-shrink:0;padding:4px 2px 4px 8px;cursor:pointer;}
.se-status .discard.off{display:none;}
.se-status .discard:active{opacity:.5;}
.se-seal-row{display:flex;align-items:center;gap:12px;background:var(--bg3);border:1px solid var(--bd);border-radius:10px;padding:10px 12px;margin-top:4px;cursor:pointer;transition:border-color .15s;}
.se-seal-row:active{border-color:var(--ac);}
.ssr-ico{width:44px;height:44px;flex-shrink:0;}
.ssr-ico svg{width:100%;height:100%;display:block;}
.ssr-txt{flex:1;min-width:0;}
.ssr-t{font-size:15px;color:var(--tx);line-height:1.35;}
.ssr-s{font-size:12.5px;color:var(--tx2);margin-top:1px;}
.ssr-chev{color:var(--tx2);font-size:20px;line-height:1;flex-shrink:0;opacity:.7;}
/* 封蠟面板 */
.sp-stage{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 0 22px;}
.sp-preview{width:96px;height:96px;filter:drop-shadow(0 4px 11px rgba(0,0,0,.34));}
.sp-preview svg{width:100%;height:100%;display:block;}
.sp-cap{font-family:'Cormorant Garamond',serif;font-size:16px;color:var(--tx2);letter-spacing:.05em;}
.sp-sub{font-size:12px;color:var(--tx2);letter-spacing:.08em;margin-bottom:9px;padding-left:2px;}
.sp-lk{position:absolute;right:-2px;bottom:-2px;width:17px;height:17px;border-radius:50%;background:var(--bg2);border:1px solid var(--bd2);display:flex;align-items:center;justify-content:center;}
.sp-lk svg{width:9px;height:9px;stroke:var(--goldtx,var(--ac));stroke-width:2.6;fill:none;}
.sp-colors{display:flex;flex-wrap:wrap;gap:9px;}
.sp-chip{width:46px;text-align:center;cursor:pointer;}
.sp-chip.locked{opacity:.6;}
.sp-dot{position:relative;width:46px;height:46px;border-radius:50%;border:2px solid transparent;transition:border-color .15s;}
.sp-dot svg{width:100%;height:100%;display:block;}
.sp-chip.active .sp-dot{border-color:var(--tx);box-shadow:0 0 0 1px var(--bg),0 0 0 3px var(--tx);}
.sp-nm{font-size:11px;color:var(--tx2);margin-top:3px;}
/* ── 相紙：故事封面照片的外框（元件本體，先定義再給下面的面板用）──
   共用給三處：信紙後面那張照片、封面風格面板的預覽、購買特寫的封面。

   基底 .ph 就是「無框」。COVER_FRAMES 裡無框的 id 是空字串、不會帶任何
   class，所以白邊只能寫在三個外框各自的 class 上，寫進基底就會變成
   「選了無框還是有白邊」（v2.1.670 之前就是這個 bug）。

   照片一律橫幅 + cover 裁切。直式來源會被裁掉上下，這是刻意的：
   要讓創作者自己裁就得另存一份裁切圖，多一份儲存與失效路徑，不划算。
   比例 30:17 ＝ 信封本體 300×170，照片跟信封是同一個矩形語言
   （順帶跟 16:9 只差 0.7%，肉眼等同）。要改比例只改這一個地方。
   ──────────────────────────────────────────────────────────── */
.ph{position:relative;border-radius:2px;box-shadow:0 8px 20px rgba(0,0,0,.4),0 2px 5px rgba(0,0,0,.26);}
.ph.paper{background:#efece4;padding:7px;}              /* 相紙白邊 */
.ph.polaroid{background:#efece4;padding:8px 8px 26px;}  /* 拍立得：下緣留簽名的位置 */
.ph.thin{background:#efece4;padding:3px;}               /* 細白邊 */
.ph .img{position:relative;width:100%;aspect-ratio:30/17;overflow:hidden;}
/* 位移類的畫風濾鏡會把邊緣往內推，內層放大 4% 把 artifact 裁在框外 */
.ph .img .lay{position:absolute;inset:-4%;background-size:cover;background-position:center;}
.ph .img:after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 30px rgba(60,40,20,.32);pointer-events:none;}
.ph .grain{position:absolute;inset:0;pointer-events:none;}
/* 撐滿外層容器、比例交給容器決定（購買特寫的直式封面格用這個）。
   必須排在 .ph 之後：同分特異性靠順序決勝負。 */
.ph-fill{width:100%;height:100%;padding:0;background:transparent;box-shadow:none;border-radius:0;}
.ph-fill .img{height:100%;aspect-ratio:auto;}

/* ── 封面風格面板 ──────────────────────────────────────── */
/* 表單那一列的縮圖跟著實際輸出走 4:3，創作者在編輯畫面就看得到裁切結果 */
.ssr-thumb{width:60px;height:34px;border-radius:5px;overflow:hidden;flex-shrink:0;background:var(--bgi);}
.ssr-thumb .ph{width:100%;height:100%;box-shadow:none;border-radius:0;}
.ssr-thumb .ph .img{height:100%;aspect-ratio:auto;}
.ssr-empty{border:1px dashed var(--bd);}
.cv-stage{display:flex;justify-content:center;padding:6px 0 20px;}
.cv-stage .ph{width:min(230px,72%);}
.cv-none{font-size:13px;color:var(--tx2);padding:26px 0;}
.cv-chips{display:flex;flex-wrap:wrap;gap:7px;}
.cv-chip{font-family:inherit;font-size:13.5px;padding:7px 13px;border-radius:9px;border:1px solid var(--bd2);background:var(--bg3);color:var(--tx2);cursor:pointer;}
.cv-chip.on{background:var(--acl);border-color:var(--ac);color:var(--tx);}
.cv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;}
.cv-cell{cursor:pointer;}
.cv-cell .ph.on,.cv-cell.on .ph{outline:2px solid var(--tx);outline-offset:3px;}
.cv-ph{width:100%;aspect-ratio:30/17;background:var(--bgi);border-radius:2px;}
.cv-nm{font-size:12px;color:var(--tx2);text-align:center;margin-top:5px;}
.cv-cell.on .cv-nm{color:var(--tx);}

/* ══ 拆信預覽 ═════════════════════════════════════════════════
   幾何基準（信封 wrap 300×210，C＝場景垂直中心）
     信封本體 y = C-65 → C+105（高 170），C-65 這條邊就是開口
     封口鉸鏈在開口那條邊，闔上時三角尖端落在 C+15，封蠟壓在尖端
     信紙對摺後 148 高，攤開 296 高；摺線在對摺後的上緣，往上打開

   圖層（同一個 stacking context，數字愈大愈靠近觀眾）
     信封背面＋開口 0 ＜ 信紙 1 ＜ 信封正面（三片摺葉）2 ＜ 封口 3 ＜ 封蠟 4
     信封被拆成「背面」和「正面」兩層，信紙夾在中間，這是實體結構：
       開口（.env-mouth）是一個洞，透過它看得到的是信封裡面，也就是信紙，
       所以它必須在信紙後面；三片摺葉才是遮住信紙的那一面。
       整片壓在信紙上（舊寫法）會變成「信封是開的但看不見裡面的信」。
     信紙沒抽出來的部分是被三片摺葉擋住的，不是用 opacity 藏
     封口翻完會降到 0：它這時已經折到信封背面，信紙要從它前面出來

   時間軸在 <script> 的 envSteps()，改順序只要改那張表

   【這一整段禁止使用 color-mix()】
   信紙紙色原本是 `--paper:color-mix(...)`、蠟色原本是 fill="color-mix(...)"，
   兩處都在舊瀏覽器（2023 年前）上算不出來：紙變全透明、蠟章變全黑。
   而且失效是無聲的 —— 不會報錯，只會整片消失。
   紙色與摺痕改成寫死的色碼，信封的受光改成「不透明底色 + rgba 疊層」，
   數學上跟原本的 color-mix 完全等價（sRGB 逐分量內插），但沒有任何相依。
   蠟色改在 js/stories.js 的 getWaxPaint() 用 JS 算完吐 rgb()。
   ════════════════════════════════════════════════════════════ */

/* ── 舞台 ───────────────────────────────────────────────── */
.env-overlay{position:fixed;inset:0;z-index:9999;overflow:hidden;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);opacity:0;visibility:hidden;transition:opacity .5s,visibility 0s .5s}
.env-overlay.show{opacity:1;visibility:visible;transition:opacity .5s,visibility 0s 0s}
.env-overlay.fade-out{opacity:0;transition:opacity .8s;pointer-events:none}
/* 整組輕輕浮上來，信封不是憑空出現在畫面正中央 */
.env-scene{--env-s:1;
  position:relative;width:100%;height:100%;overflow:hidden;cursor:default;
  opacity:0;transform:translateY(12px) scale(calc(var(--env-s) * .985));
  transition:opacity .55s cubic-bezier(.3,0,.3,1),transform .55s cubic-bezier(.3,0,.3,1)}
.env-overlay.show .env-scene{opacity:1;transform:scale(var(--env-s))}
/* 桌機縮放（--env-s）
   底下整套幾何是照手機 390×780 畫的，座標全部寫死 px。桌機視窗大兩三倍，
   若只是「擺在正中央」，信封會小得像一枚郵票。這裡不重排也不改任何座標，
   而是把整個場景等比放大 —— 時間軸、圖層順序、位移量一行都不用動，
   以後要改動畫也只要顧手機那一組數字，維護成本不會變兩倍。
   要放大／縮小只改這裡的三個數字，不要去動下面的幾何。
     寬高都要過門檻才升級：只有寬夠但視窗很扁（筆電、手機橫放）時放大，
     攤開的信紙會頂到上下邊，所以 min-height 是必要條件不是保險。
     上限 1.45 —— 紙面 244→354px；再大字級與行距就開始顯得鬆散。 */
@media (min-width:600px) and (min-height:600px){.env-scene{--env-s:1.15}}
@media (min-width:820px) and (min-height:720px){.env-scene{--env-s:1.3}}
@media (min-width:1024px) and (min-height:840px){.env-scene{--env-s:1.45}}
/* 窄機種整個場景縮小；信紙固定 244 邏輯寬，行寬與字數的關係在所有裝置一致 */
@media (max-width:379px){.env-scene{--env-s:.9}}

/* 重播前歸零用：把這一幀的所有過場吃掉，避免看到倒帶 */


/* ── 信封本體：背面（含開口）與正面（三片摺葉）是兩層，信紙夾在中間 ──
   兩層幾何完全一樣（300×170、貼齊 wrap 底部），差別只有 z-index 和內容物。
   要動幾何請兩邊一起動。 */
.env-wrap{position:absolute;top:50%;left:50%;width:300px;height:210px;margin:-105px 0 0 -150px}
/* 背面：整組的底色與落影掛在這裡。z-index 0，在信紙之後 */
.env-back{position:absolute;bottom:0;width:300px;height:170px;background:var(--bg2);border-radius:3px;overflow:hidden;z-index:0;
  transition:opacity .55s .3s,transform .85s cubic-bezier(.36,0,.42,1);
  box-shadow:0 12px 34px rgba(0,0,0,.42),0 3px 8px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.07),inset 0 -1px 0 rgba(0,0,0,.22)}
/* 掀開封口後露出來的開口。它是一個洞：比信封表面暗，而且信紙會從它前面經過，
   所以看得到裡面那張信 —— 這才是「這封信是開著的」的視覺依據 */
.env-mouth{position:absolute;top:0;left:0;width:300px;height:80px;clip-path:polygon(0 0,100% 0,50% 100%);
  background-color:var(--bg2);
  background-image:linear-gradient(to bottom,rgba(0,0,0,.44),rgba(0,0,0,.18) 56%,rgba(0,0,0,.05))}
/* 正面：三片摺葉。z-index 2，壓在信紙之上，信紙還沒抽出來的部分被它擋住 */
.env-front{position:absolute;bottom:0;width:300px;height:170px;border-radius:3px;overflow:hidden;z-index:2;pointer-events:none;
  transition:opacity .55s .3s,transform .85s cubic-bezier(.36,0,.42,1)}
/* 頂點 50% 47% 對齊封口尖端，跟背面那片開口三角剛好把矩形拼滿 */
.ep{position:absolute;inset:0;pointer-events:none}
.ep-l{clip-path:polygon(0 0,50% 47%,0 100%);background-color:var(--bg2);
  background-image:linear-gradient(102deg,rgba(255,255,255,.13),rgba(255,255,255,0) 74%)}
.ep-r{clip-path:polygon(100% 0,50% 47%,100% 100%);background-color:var(--bg2);
  background-image:linear-gradient(258deg,rgba(0,0,0,.08),rgba(0,0,0,0) 76%)}
/* 下片壓在左右兩片之上，所以它的兩條斜邊要往上投影 */
.ep-b{clip-path:polygon(0 100%,50% 47%,100% 100%);z-index:2;
  background-color:var(--bg2);
  background-image:linear-gradient(to top,rgba(255,255,255,.12),rgba(255,255,255,0) 58%);
  filter:drop-shadow(0 -2px 3px rgba(0,0,0,.34)) drop-shadow(0 -1px 0 rgba(255,255,255,.09))}
/* 信封表面的受光，純顏色不用顆粒。開口那塊三角要挖掉：那裡是洞不是紙面，
   受光疊上去會連帶把露在洞裡的信紙一起壓暗 */
.env-front:after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
  clip-path:polygon(0 0,0 100%,100% 100%,100% 0,50% 47%);
  background:linear-gradient(158deg,rgba(255,255,255,.06),transparent 42%,rgba(0,0,0,.10))}

/* ── 封口：鉸鏈在開口那條邊，往觀眾方向掀起，再翻到信封背面 ── */
.env-flap-wrap{position:absolute;top:40px;left:0;width:300px;height:80px;z-index:3;pointer-events:none;perspective:820px;
  transition:opacity .55s .3s,transform .85s cubic-bezier(.36,0,.42,1)}
.env-flap-wrap.behind{z-index:0}
.env-flap{width:100%;height:100%;transform-origin:top center;transform:rotateX(0);clip-path:polygon(0 0,100% 0,50% 100%);
  transition:transform 1.15s cubic-bezier(.5,.02,.28,1),background 1.15s,filter 1.15s;
  background-color:var(--bg2);
  background-image:linear-gradient(to bottom,rgba(255,255,255,.20),rgba(255,255,255,0) 78%),
                   linear-gradient(to top,rgba(0,0,0,.12),rgba(0,0,0,0) 22%);
  filter:drop-shadow(0 4px 7px rgba(0,0,0,.36)) drop-shadow(0 1px 0 rgba(255,255,255,.08))}
/* 翻過去之後朝上的是封口內面（上膠那一面）：比較平、也不該再投影到信封上 */
.env-flap.open{transform:rotateX(171deg);
  background-image:linear-gradient(to bottom,rgba(0,0,0,.10),rgba(0,0,0,0) 82%),
                   linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.10) 82%);
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.2))}

/* ── 封蠟：壓在封口尖端，掀封口之前先裂開掉下去 ─────────── */
.env-seal{position:absolute;top:99px;left:50%;width:44px;height:44px;z-index:4;
  transform:translateX(-50%);filter:drop-shadow(0 2px 5px rgba(0,0,0,.28))}
@keyframes sealBreak{
  0%{transform:translateX(-50%) translateY(0) scale(1) rotate(0deg);opacity:1}
  24%{transform:translateX(-50%) translateY(-2px) scale(1.03) rotate(0deg);opacity:1}
  100%{transform:translateX(-50%) translateY(15px) scale(.9) rotate(2.5deg);opacity:0}}
.env-seal.broken{animation:sealBreak .85s cubic-bezier(.42,0,.28,1) forwards;opacity:0}

/* ── 信紙：對摺，字全部在內側，由下而上打開 ─────────────────
   .p3 固定 148 高（＝對摺後的大小），裝的是信紙「下半張」（分隔線＋摘要）。
   上半張 .sh-fold 掛在 bottom:100%（也就是 .p3 正上方），鉸鏈在兩者交界
   的摺線上。收起來時 rotateX(-180deg) 整片往下翻蓋住下半張，這時朝外的是
   .fold-out（紙背，空白），有字的 .fold-in 被 backface-visibility 擋掉。
   所以「摺著的時候畫面上一個字都不存在」是結構保證的，不靠 clip。
   攤開＝上半張繞摺線往上立起來，收在 -4deg（紙攤平也不會真的完全平）。

   三個位置：
     預設      信封裡（縮 .82），封口闔著時被封口＋三片摺葉整個蓋住
     .out      抽出來，摺線落在最終中心線上方 74px
     .unfold   往下沉 74px，讓攤開後的 296 高剛好對稱在中心線上

   信紙**全程 opacity:1**，不用淡入。它一開始就在信封裡，封口一掀開就該
   從開口看見它 —— 這是「信本來就在裡面」跟「信是抽的時候才生出來的」的
   差別。預設位置（頂端 C-58、寬 200、高 121）完全落在封口(C-65~C+15)
   加三片摺葉(C-65~C+105)的覆蓋範圍內，所以「還沒開之前看不到」是幾何
   保證的，不是靠 opacity 藏。改預設位置或信封尺寸時要重新驗這件事。
   ─────────────────────────────────────────────────────────── */
.sheets{position:absolute;left:50%;top:calc(50% - 58px);width:244px;z-index:1;
  --paper:#f2ecdf;
  --ink:rgba(74,60,42,.34);--ink2:rgba(74,60,42,.14);
  --edge:inset 3px 0 5px -3px rgba(90,70,45,.24),inset -3px 0 5px -3px rgba(90,70,45,.24);
  --tex: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='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .28 0 0 0 .055 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  transform:translateX(-50%) scale(.82);transform-origin:50% 0;
  transition:top .95s cubic-bezier(.24,.9,.3,1),transform .95s cubic-bezier(.24,.9,.3,1)}
.sheets.out{top:calc(43% - 74px);transform:translateX(-50%) scale(1)}
.sheets.unfold{top:43%;transition:top 1.8s cubic-bezier(.4,.08,.55,1)}

.sh-paper{position:relative;z-index:2}
.p3{position:relative;height:148px;perspective:1200px}
/* 兩張紙面共用一張 296 高的受光，上下半各取一段，接起來才連續 */
.sh-face,.fold-in{background-color:var(--paper);
  background-image:var(--tex),linear-gradient(to bottom,
    rgba(0,0,0,.055),rgba(255,255,255,.055) 13%,rgba(255,255,255,.085) 31%,
    rgba(255,255,255,.03) 45%,rgba(0,0,0,.014) 50%,rgba(255,255,255,.008) 57%,
    rgba(255,255,255,.03) 66%,rgba(255,255,255,.075) 84%,rgba(0,0,0,.05));
  background-size:140px 140px,100% 296px;background-repeat:repeat,no-repeat}
/* 下半張：分隔線＋摘要，永遠在原位不動。落影只往下。
   垂直置中，不是靠著摺線往下排 —— 靠著排的話內容全擠在摺線附近，
   下面留一大塊空白，整張紙看起來是歪的。
   不設 align-items（用預設 stretch），子元素才有完整寬度，
   摘要的 line-clamp 才量得到行寬。 */
/* translateZ(-1px)：.p3 的 perspective 建立 3D 環境後，face 裡的 positioned 子元素
   （框飾、淡染、引文）會跟躺平的摺頁蓋子共面爭層，摺著時內容鬼影會透出紙背。
   把整個 face 往後退 1px，蓋子永遠在前面；perspective 1200 下縮放 0.08%，肉眼不可見 */
.sh-face{position:absolute;inset:0;background-position:0 0,0 100%;padding:6px 30px 14px;
  transform:translateZ(-1px);
  display:flex;flex-direction:column;justify-content:center;
  box-shadow:0 14px 30px rgba(0,0,0,.42),0 3px 9px rgba(0,0,0,.26),var(--edge)}
/* 上半張：整片會翻的紙。慢速、無反彈，全程等速偏慢，不是掉下來 */
.sh-fold{position:absolute;bottom:100%;left:0;right:0;height:148px;
  transform-origin:bottom center;transform:rotateX(-180deg);
  transform-style:preserve-3d;-webkit-transform-style:preserve-3d;
  transition:transform 1.8s cubic-bezier(.4,.08,.55,1)}
.sh-paper.open .sh-fold{transform:rotateX(-4deg)}
.fold-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
/* 內面：標題＋飾線，攤開才朝向觀眾。落影只往上，摺線那邊不能有。
   左右邊界 30px 跟下半張對齊，兩半張的文字欄才是同一條直線。
   上下不對稱（上 24 下 6）：標題群往摺線微偏，跟下半張的引文彼此靠攏，
   攤開後整張讀起來是一個版面，不是各自置中的兩座孤島。 */
.fold-in{background-position:0 0,0 0;padding:24px 30px 6px;
  display:flex;flex-direction:column;justify-content:center;
  box-shadow:0 -12px 28px rgba(0,0,0,.38),0 -2px 7px rgba(0,0,0,.22),var(--edge)}
/* 外面：紙背，摺著的時候朝上，上面什麼都沒有 */
.fold-out{transform:rotateX(180deg);
  background-color:var(--paper);
  background-image:var(--tex),linear-gradient(to top,rgba(0,0,0,.05),rgba(255,255,255,.05) 22%,rgba(255,255,255,.07) 66%,rgba(0,0,0,.045));
  background-size:140px 140px,100% 100%;background-repeat:repeat,no-repeat;
  box-shadow:0 0 14px rgba(0,0,0,.28),var(--edge)}
/* 摺痕：不是打光也不是陰影，是兩塊照著紙色調出來的細長楔形色塊。
   上緣一塊亮的、左厚右尖；下緣一塊暗的、右厚左尖。兩塊反向錯開，
   看起來才像手摺出來的痕，不是印上去的直線。
   長出來的過程：上半張越過垂直（約 36% 進度）才開始有，
   之後從摺線往外撐開到全寬。scaleY 和 opacity 都走合成執行緒，不吃影格。 */
.crease{position:absolute;left:0;right:0;top:-6px;height:12px;z-index:4;pointer-events:none;opacity:0;transition:opacity .4s}
@keyframes creaseForm{
  0%,36%{opacity:0;transform:scaleY(.12)}
  58%{opacity:1;transform:scaleY(.55)}
  100%{opacity:1;transform:scaleY(1)}}
.sh-paper.open .crease{opacity:1;animation:creaseForm 1.8s linear forwards}
.crease i{position:absolute;display:block}
.crease .lt{left:0;right:0;bottom:50%;height:2.5px;clip-path:polygon(0 0,100% 100%,0 100%);
  background:#f3eee3}
.crease .dk{left:0;right:0;top:50%;height:3px;clip-path:polygon(0 0,100% 0,100% 100%);
  background:#e6decf}
/* ── 信紙上的字 ───────────────────────────────────────────────
   信箋的克制比張揚重要：244px 的紙放 26px 粗題字是海報不是信。
   標題 17px 細字重、.2em 字距，靠留白撐份量；十字以上整段降 15px，
   text-wrap:balance 均衡斷行，20 字上限也保證只排兩行。
   不用 text-indent 補置中偏移——它會偷走首行一個字的行寬，
   造成明明在上限內卻被 clamp 截斷；1px 級的偏移肉眼看不見。
   引文退成 13px 的低語（行距 1.95、墨色更淡），跟標題拉出層次。
   line-clamp 是硬保險：紙面固定 148px，字再多也不能壓到摺線與紙外。
   ───────────────────────────────────────────────────────────── */
.sh-title{font-family:"Cormorant Garamond","Noto Serif TC","Songti TC",serif;
  font-size:17px;font-weight:400;color:#3a2f24;
  line-height:1.55;text-align:center;letter-spacing:.2em;text-wrap:balance;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;flex-shrink:0}
.sh-title.ttl-long{font-size:15px;letter-spacing:.18em}
/* 分隔飾線是 SVG（stories.js 的 _SHDIV），掛在標題底下、屬於標題群 */
.sh-div{display:block;margin:10px auto 0;flex-shrink:0}
.sh-sum{font-family:"Cormorant Garamond","Noto Serif TC","Songti TC",serif;font-size:13px;
  color:rgba(58,47,36,.66);line-height:1.95;text-align:center;
  letter-spacing:.04em;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}

/* ── 紙面框飾：細雙線框＋框間淡染＋雕版角飾 ─────────────────
   物理上信紙是上下兩張半頁，框飾拆成兩半各自持有：
   上半張帶頂部、下半張帶底部，左右邊線在摺線處對齊接續。
   飾框 SVG（.fdec）不能設 z-index——設了會浮到摺頁蓋子之上，
   信還沒攤開裝飾就穿幫（2026-08 踩過）。摺線上的菱窗因此獨立成
   .seam 疊層，跟摺痕同節奏，攤開落定後才淡入。 */
.fold-in::before,.sh-face::before,.fold-in::after,.sh-face::after{
  content:'';position:absolute;pointer-events:none}
.fold-in::before{top:10px;left:10px;right:10px;bottom:0;border:1px solid var(--ink);border-bottom:0}
.fold-in::after{top:14px;left:14px;right:14px;bottom:0;border:1px solid var(--ink2);border-bottom:0}
.sh-face::before{top:0;left:10px;right:10px;bottom:10px;border:1px solid var(--ink);border-top:0}
.sh-face::after{top:0;left:14px;right:14px;bottom:14px;border:1px solid var(--ink2);border-top:0}
.matq{position:absolute;pointer-events:none;border:3px solid rgba(74,60,42,.028)}
.matq.t{top:11px;left:11px;right:11px;bottom:0;border-bottom:0}
.matq.b{top:0;left:11px;right:11px;bottom:11px;border-top:0}
.fdec{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.seam{position:absolute;left:0;top:-4px;width:244px;height:8px;z-index:5;pointer-events:none;overflow:visible;
  opacity:0;transition:opacity .5s 1.25s}
.sh-paper.open .seam{opacity:1}

/* ── 卡片：標題≤10 字且引文≤28 字的故事走這裡——
   跟對摺的信同尺寸（244×148），不攤頁，抽出後滑到中心、微轉落定。
   裝飾語彙跟信紙同一家但更清爽，小卡就該輕。 */
.sh-card{position:relative;z-index:2;width:244px;height:148px;border-radius:2px;
  background-color:var(--paper);
  background-image:var(--tex),linear-gradient(to bottom,
    rgba(0,0,0,.05),rgba(255,255,255,.06) 30%,rgba(255,255,255,.02) 62%,rgba(0,0,0,.05));
  background-size:140px 140px,100% 100%;background-repeat:repeat,no-repeat;
  box-shadow:0 18px 38px rgba(0,0,0,.48),0 4px 10px rgba(0,0,0,.3),var(--edge);
  transform:rotate(-1.8deg);transition:transform 1s cubic-bezier(.16,.84,.28,1)}
.sh-card.in{transform:rotate(0deg)}
.sh-card::before,.sh-card::after{content:'';position:absolute;pointer-events:none}
.sh-card::before{inset:8px;border:1px solid var(--ink)}
.sh-card::after{inset:12px;border:1px solid var(--ink2);box-shadow:0 0 0 3px rgba(74,60,42,.028)}
.shc-dot{position:absolute;width:4px;height:4px;background:rgba(74,60,42,.28);
  transform:rotate(45deg);pointer-events:none}
.shc-dot.a{top:10px;left:10px}.shc-dot.b{top:10px;right:10px}
.shc-dot.c{bottom:10px;left:10px}.shc-dot.d{bottom:10px;right:10px}
.shc-in{position:absolute;inset:12px 20px;display:flex;flex-direction:column;
  justify-content:center;text-align:center}
.sh-card .sh-title{margin-bottom:4px}
.sh-card .sh-div{margin:0 auto 10px}
.sh-card .sh-sum{line-height:1.75;-webkit-line-clamp:2}
/* 卡片模式的容器落點：卡片只有 148 高，置中位置跟 296 的信不同 */
.sheets.settle{top:calc(50% - 74px);transition:top 1s cubic-bezier(.16,.84,.28,1)}

/* ── 信封退場：本體和封口一起往下沉，把信紙整張讓出來。
      先位移再淡出，半透明時才不會透出還沒露出來的紙 ── */
.env-wrap.gone .env-back,
.env-wrap.gone .env-front,
.env-wrap.gone .env-flap-wrap{opacity:0;transform:translateY(150px)}

/* ── 附在信紙後面的照片 ───────────────────────────────────
   寬度＝信紙寬（也就是折起來那半張的大小），一開始整張躺在下半張後面
   幾乎看不見；.spread 往右下滑出去，露出來的是照片下緣一大塊。
   位移用百分比（相對照片自己的尺寸），換比例或換寬度都不用重算。
     20% → 往右 49px，右側露出一條
     64% → 往下 89px，照片下緣有約六成落在信紙外
   右側刻意收斂：照片跟信紙同寬，再往右推就會在小螢幕（360px）撞到畫面邊。
   照片在信紙後面（z-index 1 vs .sh-paper 的 2），所以只有超出信紙那塊看得到。

   起始位置：往右上偏一點，讓右上角先露出來（右 8.6px、上 4.6px）。
   照片跟信紙同寬，只靠旋轉的話左右兩邊會同時冒出對稱的細邊，看起來像沒對齊；
   偏移之後只剩右上一個角露出，才像「後面夾了一張照片」。
   左下與下緣都還在信紙裡（下方留 5px），不會兩邊都探頭。
   位移全部用百分比，跟 .spread 同單位，過場才不會混著 px 和 % 內插。 */
.sh-photo{position:absolute;top:4px;left:0;width:100%;z-index:1;transform:translate(2.5%,-3%) rotate(2.2deg);transition:transform 1s cubic-bezier(.22,.9,.36,1)}
.sheets.spread .sh-photo{transform:translate(20%,64%) rotate(6deg)}

.fan-story-card{background:var(--bg2);border:1px solid var(--bd);border-radius:12px;padding:14px 16px;margin-bottom:10px;cursor:pointer;box-shadow:0 1px 2px var(--sh);}.fan-story-card:active{opacity:.7;}
.fan-story-title{font-size:16px;font-weight:600;color:var(--tx3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.fan-story-meta{font-size:12px;color:var(--tx2);margin-top:4px;}
.fan-story-summary{font-size:13px;color:var(--tx2);margin-top:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.5;}
.story-conds{flex-shrink:0;display:flex;align-items:center;gap:0;margin-left:4px;}
.story-cond-item{display:flex;align-items:center;justify-content:center;gap:2px;font-size:12px;color:var(--tx2);width:40px;}
.story-cond-item svg{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.6;}
/* Showcase: comment section */
.cpf-comments{margin-top:12px;padding-bottom:68px;}
.cpf-comment{display:flex;gap:10px;padding:14px 0;border-bottom:1px solid var(--bd);}
.cpf-comment:last-child{border-bottom:none;}
.cpf-comment .av{width:32px;height:32px;font-size:13px;flex-shrink:0;}
.cpf-comment .av img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;}
.cpf-comment-body{flex:1;min-width:0;}
.cpf-comment-author{font-size:14px;font-weight:600;color:var(--tx3);}
.cpf-comment-name{cursor:pointer;padding:3px 0;display:inline-block;}
.cpf-comment-time{font-size:11px;color:var(--tx2);margin-left:6px;font-weight:400;}
.cpf-comment-text{font-size:15px;color:var(--tx);margin-top:8px;line-height:1.7;}
/* 作者列 / 內文 / 動作列之間拉開，免得按動作列誤觸名字或頭貼（2026-08-26） */
.cpf-comment-actions{display:flex;align-items:center;margin-top:12px;}
/* 通知跳轉定位：目標留言背景短暫泛起再淡掉 */
.cmt-focus{animation:cmtFocus 2.4s ease-out;border-radius:8px;}
@keyframes cmtFocus{0%,40%{background:color-mix(in srgb,var(--ac) 14%,transparent);}100%{background:transparent;}}
.cpf-comment-send{width:36px;height:36px;border-radius:50%;border:none;background:var(--ac);color:var(--ac-fg);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:opacity .15s;margin-bottom:3px;}.cpf-comment-send:active{opacity:.7;}
.cpf-comment-send svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;}
/* ── 留言按讚（雜誌風格 SVG 版，v2.1.72） ── */
/* 未按：細線描邊（stroke 1.4px）/ 已按：填滿同色 + 變 var(--del) */
/* 用同一個 SVG path，靠 data-liked + CSS 切 stroke / fill，形狀完全一致 */
.cpf-like-btn{display:inline-flex;align-items:center;gap:5px;cursor:pointer;color:var(--tx2);padding:4px 2px;-webkit-tap-highlight-color:transparent;}
.cpf-like-btn svg{width:18px;height:18px;display:block;stroke:currentColor;fill:none;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;}
.cpf-like-btn[data-liked="1"]{color:var(--del);}
.cpf-like-btn[data-liked="1"] svg{fill:currentColor;stroke:currentColor;stroke-width:1;}
.cpf-like-btn .like-count{font-size:12px;font-family:-apple-system,BlinkMacSystemFont,'Noto Sans TC',sans-serif;line-height:1;}
/* ── Thread 雜誌風格（v2.1.70） ── */
/* 沿用 cpf-intro 左直條語言：父留言整塊左側 2px ac 色直條 + ORIGINAL POST 襯線標籤 */
/* 回覆「READER REPLIES · N」分隔線同 cpf-div-label 風格，回覆整塊往右縮 44px 對齊頭貼右緣 */
.thd-op{position:relative;padding:18px 0 22px 24px;margin:8px 0 6px;}
.thd-op::before{content:'';position:absolute;left:0;top:18px;bottom:18px;width:2px;border-radius:1px;background:var(--ac);opacity:.7;}
.thd-op-label{font-family:'Cormorant Garamond',serif;font-size:10px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--ac);margin-bottom:8px;}
.thd-op .cpf-comment{padding:0;border-bottom:none;}
.thd-op .cpf-comment .av{width:44px;height:44px;font-size:16px;}
.thd-op .cpf-comment-author{font-size:15px;color:var(--tx);}
.thd-op .cpf-comment-text{font-size:16px;line-height:1.7;margin-top:8px;}
.thd-div{display:flex;align-items:center;gap:14px;margin:18px 0 6px;}
.thd-div::before,.thd-div::after{content:'';flex:1;height:1px;background:var(--bd);}
.thd-div span{font-family:'Cormorant Garamond',serif;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--tx2);white-space:nowrap;}
.thd-reply{padding-left:44px;}
.thd-reply .cpf-comment{padding:12px 0;}
.thd-reply .cpf-comment .av{width:32px;height:32px;font-size:12px;}
.thd-reply .cpf-comment-author{font-size:13px;}
.thd-reply .cpf-comment-text{font-size:14px;line-height:1.65;margin-top:6px;}
.thd-reply .cpf-comment-actions{margin-top:10px;}
/* Creator Page */
/* creator-banner removed — manage is now a nav tab */
.cr-header{text-align:center;padding:32px 24px 20px;}
.cr-av{width:80px;height:80px;border-radius:50%;margin:0 auto 14px;font-size:32px;overflow:hidden;}
.cr-av img{width:100%;height:100%;object-fit:cover;display:block;}
.cr-name{font-size:22px;font-weight:700;color:var(--tx3);margin-bottom:8px;}
.cr-bio{font-size:14px;color:var(--tx2);line-height:1.6;white-space:pre-wrap;word-break:break-word;}
.cr-links{padding:0 24px 8px;}
.cr-link-item{display:flex;align-items:center;gap:8px;padding:3px 0;cursor:pointer;color:var(--ac);font-size:14px;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cr-link-item svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;flex-shrink:0;}
.cr-section-label{font-size:12px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--tx2);opacity:.85;padding:20px 24px 12px;font-family:'Cormorant Garamond',serif;}
.cr-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;padding:0 16px 40px;}
.cr-grid-card{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:2/3;background:var(--bgi);cursor:pointer;}.cr-grid-card:active{opacity:.85;}
.cr-grid-card img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;}
.cr-grid-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:55%;background:linear-gradient(to top,rgba(0,0,0,.6) 0%,rgba(0,0,0,.25) 40%,transparent 100%);pointer-events:none;}
.cr-grid-empty{display:flex;align-items:center;justify-content:center;font-size:36px;font-weight:600;color:var(--ac);opacity:.3;background:linear-gradient(160deg,var(--acl) 0%,var(--bgi) 100%);}
.cr-grid-text{position:absolute;bottom:0;left:0;right:0;z-index:2;padding:10px 12px;}
.cr-grid-name{font-size:14px;font-weight:600;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.4);line-height:1.3;}
.cr-grid-tag{font-size:13px;color:#fff;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 4px rgba(0,0,0,.4);}
.cr-grid-hashtags{font-size:11px;color:rgba(255,255,255,.7);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-shadow:0 1px 4px rgba(0,0,0,.3);}
/* Style picker */
.cr-style-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;}
.cr-style-opt{position:relative;aspect-ratio:3/4;border-radius:10px;border:2px solid var(--bd);background:var(--bg2);cursor:pointer;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:all .15s;padding:8px;}
.cr-style-opt.active{border-color:var(--ac);box-shadow:0 0 0 2px var(--acl);}
.cr-style-opt:active{transform:scale(.96);}
.cr-style-opt .cr-style-label{font-size:10px;color:var(--tx2);margin-top:6px;font-weight:600;letter-spacing:.03em;}
.cr-style-opt.locked-style{opacity:.45;}.cr-style-opt.locked-style.active{opacity:.8;}.cr-style-opt.locked-style::after{content:'';position:absolute;inset:0;pointer-events:none;}
.cr-style-opt .cr-style-lock{position:absolute;top:4px;left:4px;width:14px;height:14px;stroke:var(--tx2);fill:none;stroke-width:2;}
.cr-style-opt .cr-style-eye{position:absolute;top:4px;right:4px;width:16px;height:16px;stroke:var(--bd2);stroke-width:1.8;cursor:pointer;z-index:1;transition:stroke .15s;}.cr-style-opt .cr-style-eye .eye-outer{fill:var(--bg2);}.cr-style-opt .cr-style-eye .eye-pupil{fill:none;stroke:var(--bd2);stroke-width:2;}.cr-style-opt .cr-style-eye:active{stroke:var(--tx2);}.cr-style-opt .cr-style-eye:active .eye-pupil{stroke:var(--tx2);}
/* Minimal style */
.cr-minimal .cr-header{text-align:left;padding:40px 24px 20px;}
.cr-minimal .cr-av{margin:0 0 16px;width:64px;height:64px;font-size:24px;}
.cr-minimal .cr-name{font-size:20px;font-weight:400;letter-spacing:.05em;}
.cr-minimal .cr-follower-count{text-align:left;font-size:13px;}
.cr-minimal .cr-bio{font-size:14px;}
.cr-minimal .cr-links{padding:0 24px 8px;}
.cr-minimal .cr-section-label{font-family:inherit;font-size:11px;letter-spacing:.2em;opacity:.6;}
.cr-minimal .cr-grid{gap:10px;}
.cr-minimal .cr-grid-card{border-radius:4px;}
/* ── Gallery 風格（取代 social）── */
/* 美術館語言由「畫框 + 偶數位移 + 短線英文小標」承擔；
   字級、顏色、字體跟其他版形保持一致，不靠字距/大寫強調風格 */
.cr-gallery .cr-header{text-align:center;padding:48px 28px 32px;}
/* 畫框：邊框加粗到 2px、padding 8、雙重 inset shadow 模擬厚度 */
.cr-gallery .cr-gl-av-frame{display:inline-flex;padding:14px;background:var(--bg2);border:2px solid var(--bd2);box-shadow:0 1px 0 var(--bg) inset,0 0 0 1px var(--bd2) inset,0 8px 24px -8px rgba(0,0,0,.14);margin-bottom:20px;}
/* 頭像方形（跟對話頁玩家頭像語言一致），不再用圓形 */
.cr-gallery .cr-gl-av{width:84px;height:84px;font-size:30px;border-radius:0;}
/* 名字/粉絲數/bio 字體跟其他版形完全一致——畫廊風格不靠字距承擔 */
.cr-gallery .cr-name{font-size:22px;font-weight:700;color:var(--tx3);margin-bottom:8px;}
.cr-gallery .cr-follower-count{font-size:13px;color:var(--tx2);margin-top:6px;margin-bottom:14px;}
/* hairline 作為 bio 上方的 chapter rule，跟 .cpf-footer-line 規格一致 */
.cr-gallery .cr-gl-line{width:40px;height:1.5px;background:var(--ac);opacity:.4;margin:8px auto 18px;}
.cr-gallery .cr-bio{font-size:14px;color:var(--tx2);line-height:1.6;max-width:300px;margin:0 auto;text-align:center;}
/* Section label：「— 角色 —」短線分隔（沿用 .cpf-div-label 結構） */
.cr-gallery .cr-gl-sec{display:flex;align-items:center;gap:14px;padding:24px 24px 12px;}
.cr-gallery .cr-gl-sec::before,.cr-gallery .cr-gl-sec::after{content:'';flex:1;height:1px;background:var(--bd);}
.cr-gallery .cr-gl-sec span{font-family:'Cormorant Garamond',serif;font-size:13px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--tx2);opacity:.7;white-space:nowrap;}
/* 角色 grid：2 欄 2:3 比例、偶數張下移 80px 做交錯（保留） */
.cr-gallery .cr-gl-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:56px 14px;padding:32px 16px 120px;align-items:start;}
.cr-gallery .cr-gl-grid>.cr-gl-piece:nth-child(even){transform:translateY(80px);}
.cr-gallery .cr-gl-piece{cursor:pointer;}
.cr-gallery .cr-gl-piece:active{opacity:.85;}
/* 角色畫框：比頭像畫框薄一階（padding 6 / border 1px），形成主次層次 */
.cr-gallery .cr-gl-frame{padding:6px;background:var(--bg2);border:1px solid var(--bd2);box-shadow:0 1px 0 var(--bg) inset,0 0 0 1px var(--bd2) inset,0 6px 18px -10px rgba(0,0,0,.18);}
.cr-gallery .cr-gl-img{position:relative;aspect-ratio:2/3;background:var(--bgi);overflow:hidden;}
.cr-gallery .cr-gl-img img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;}
.cr-gallery .cr-gl-empty{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:36px;font-weight:500;color:var(--ac);opacity:.4;background:linear-gradient(160deg,var(--acl) 0%,var(--bgi) 100%);}
/* 說明牌：畫框下方（美術館慣例） */
.cr-gallery .cr-gl-label{padding:10px 4px 0;text-align:center;}
/* No. 編號：跟 .cpf-div-label span 同字族（Cormorant + letter .2em） */
.cr-gallery .cr-gl-no{font-family:'Cormorant Garamond',serif;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--tx2);opacity:.7;margin-bottom:4px;}
.cr-gallery .cr-gl-name{font-size:14px;font-weight:600;color:var(--tx3);line-height:1.3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cr-gallery .cr-gl-meta{font-size:13px;color:var(--tx2);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* Poster style */
.cr-poster .cr-hero-banner{position:relative;width:100%;aspect-ratio:3/4;overflow:hidden;max-height:50vh;}
.cr-poster .cr-hero-banner img{width:100%;height:100%;object-fit:cover;}
.cr-poster .cr-hero-banner .cr-hero-scrim{position:absolute;bottom:0;left:0;right:0;height:60%;background:linear-gradient(to top,rgba(0,0,0,.7),transparent);}
.cr-poster .cr-hero-banner .cr-hero-text{position:absolute;bottom:0;left:0;right:0;padding:24px;color:#fff;z-index:1;}
.cr-poster .cr-hero-banner .cr-hero-name{font-size:28px;font-weight:700;text-shadow:0 2px 8px rgba(0,0,0,.4);}
.cr-poster .cr-hero-banner .cr-hero-bio{font-size:14px;margin-top:8px;line-height:1.7;white-space:pre-wrap;text-shadow:0 1px 6px rgba(0,0,0,.5);}
.cr-poster .cr-header{padding:16px 24px 12px;text-align:left;}
.cr-poster .cr-follower-count{text-align:left;}
.cr-poster .cr-grid{gap:10px;}
/* Card style */
.cr-card .cr-header{padding:24px 16px 16px;}
.cr-card .cr-profile-card{background:var(--bg2);border-radius:16px;padding:24px;margin:0 16px 12px;box-shadow:0 2px 8px rgba(0,0,0,.06);text-align:center;}
.cr-card .cr-av{width:80px;height:80px;margin:0 auto 12px;box-shadow:0 2px 12px rgba(0,0,0,.1);}
.cr-card .cr-name{font-size:20px;}
.cr-card .cr-follower-count{margin-bottom:8px;}
.cr-card .cr-links{padding:0 4px;}
.cr-card .cr-grid-card{border-radius:14px;box-shadow:0 2px 8px rgba(0,0,0,.08);}
/* Tree / Timeline style */
.cr-tree .cr-header{text-align:center;padding:32px 24px 20px;}
.cr-tree .cr-timeline{position:relative;padding:0 16px 40px;}
.cr-tree .cr-timeline::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:2px;background:var(--bd);transform:translateX(-50%);}
.cr-tree .cr-tl-node{position:relative;display:flex;align-items:center;gap:0;margin-bottom:20px;}
.cr-tree .cr-tl-node.even{flex-direction:row-reverse;}
.cr-tree .cr-tl-img{width:calc(50% - 18px);flex-shrink:0;aspect-ratio:2/3;border-radius:12px;overflow:hidden;cursor:pointer;position:relative;}
.cr-tree .cr-tl-img:active{opacity:.85;}
.cr-tree .cr-tl-img img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;}
.cr-tree .cr-tl-img .cr-tl-empty{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:600;color:var(--ac);opacity:.3;background:linear-gradient(160deg,var(--acl),var(--bgi));}
.cr-tree .cr-tl-dot{width:10px;height:10px;border-radius:50%;background:var(--ac);border:2px solid var(--bg);flex-shrink:0;z-index:2;margin:0 8px;box-shadow:0 0 0 3px var(--acl);}
.cr-tree .cr-tl-info{width:calc(50% - 18px);flex-shrink:0;}
.cr-tree .cr-tl-name{font-size:17px;font-weight:700;color:var(--tx3);line-height:1.3;}
.cr-tree .cr-tl-tag{font-size:14px;color:var(--tx2);margin-top:4px;}
.cr-tree .cr-tl-hashtags{font-size:12px;color:var(--tx2);opacity:.6;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cr-tree .cr-tl-slogan{font-size:13px;color:var(--tx2);margin-top:6px;line-height:1.5;font-style:italic;opacity:.75;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.cr-tree .cr-tl-node.even .cr-tl-info{text-align:right;}
.cr-tree .cr-tl-node.odd .cr-tl-info{text-align:left;}
/* Creator link editor in account page */
.cr-link-edit-item{display:flex;align-items:center;gap:6px;margin-bottom:8px;}
.cr-link-edit-item input{flex:1;font-size:14px;min-width:0;}
.cr-lk-grip{display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--bd2);padding:6px 2px;touch-action:none;cursor:grab;}.cr-lk-grip svg{width:14px;height:14px;}
.cr-link-del{width:32px;height:32px;border-radius:8px;border:none;background:var(--bg3);color:var(--tx2);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;}.cr-link-del:active{background:var(--del);color:#fff;}
.cr-link-del svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;}
/* Shop */
.shop-plan-card{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--bd);cursor:pointer;}.shop-plan-card:last-child{border-bottom:none;}.shop-plan-card:active{opacity:.7;}
.shop-plan-icon{width:44px;height:44px;border-radius:12px;background:var(--acl);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.shop-plan-info{flex:1;min-width:0;}
.shop-plan-name{font-size:15px;font-weight:600;color:var(--tx3);}
.shop-plan-desc{font-size:12px;color:var(--tx2);margin-top:2px;}
.shop-nub-list{padding:4px 0;}
.shop-nub-row{display:flex;align-items:center;justify-content:space-between;padding:13px 14px;border-radius:12px;border:1px solid var(--bd);margin-bottom:8px;cursor:pointer;transition:all .15s;background:var(--bg3);}.shop-nub-row:last-child{margin-bottom:0;}.shop-nub-row:active{transform:scale(.98);}.shop-nub-row.popular{border-color:var(--ac);}
.shop-nub-left{font-size:15px;color:var(--tx);font-weight:500;}
.shop-nub-left .shop-nub-amount{font-weight:700;color:var(--tx3);font-size:16px;}
.shop-nub-right{font-size:15px;font-weight:600;color:var(--tx3);}
/* ═══ 商店：餘額三格 / 優惠橫幅 / 帳本（2026-08-24 重整，設計脈絡：handoff/frontend.md 商店段）═══
   金色一律走 :root --gold 與主題 --goldtx，不另起色票；橫幅不用色塊、不用徽章（阿奈：商業廉價感） */
.shop-bal{display:flex;justify-content:center;gap:16px;padding:20px 16px 4px;}
.shop-bal-cell{text-align:center;flex:1;cursor:pointer;}.shop-bal-cell:active{opacity:.7;}
.shop-bal-hint{cursor:pointer;}
.shop-bal-num{font-size:28px;font-weight:700;color:var(--tx);font-variant-numeric:tabular-nums;}
.shop-bal-lbl{font-size:13px;color:var(--tx2);margin-top:2px;}
.shop-bal-sep{width:1px;background:var(--bd);}
.shop-bal-hint{text-align:center;font-size:12px;color:var(--tx2);margin:2px 0 26px;}
.shop-promo{margin:16px 2px 30px;padding:0 2px;}
.shop-promo::before{content:'';display:block;width:28px;height:1px;background:var(--gold);opacity:.7;margin-bottom:16px;}
.shop-promo+.shop-promo{margin-top:-4px;}
.shop-eb{font-family:'Cormorant Garamond',serif;font-size:11px;font-weight:600;letter-spacing:.36em;text-transform:uppercase;color:var(--goldtx);opacity:.9;}
.shop-promo-name{font-size:21px;font-weight:600;color:var(--tx3);margin-top:10px;letter-spacing:.06em;}
.shop-promo-when{font-size:13px;color:var(--tx2);margin-top:8px;}
.shop-promo-when em{font-style:normal;color:var(--goldtx);}
.shop-promo-when em.urgent{color:var(--del);}
.shop-promo-desc{font-size:14px;color:var(--tx);margin-top:16px;line-height:1.6;}
.shop-nub-row.sale{border-color:color-mix(in srgb,var(--gold) 50%,transparent);}
.shop-nub-row .shop-eb{margin-left:8px;letter-spacing:.3em;position:relative;top:-1px;}
.shop-strike{text-decoration:line-through;color:var(--tx2);font-size:13px;font-weight:400;}
.shop-sale{color:var(--goldtx);font-weight:700;}
.shop-renew{font-size:12px;color:var(--tx2);font-weight:400;margin-right:4px;}
.ledger-head{text-align:center;padding:8px 0 18px;}
.ledger-head-num{font-size:34px;font-weight:700;color:var(--tx3);font-variant-numeric:tabular-nums;}
.ledger-head-lbl{font-size:13px;color:var(--tx2);margin-top:2px;}
.ledger-head .btn{margin-top:12px;font-size:15px;font-weight:600;color:var(--ac);border:1px solid var(--ac);border-radius:10px;padding:8px 20px;background:var(--acl);}.ledger-head .btn:disabled{opacity:.4;}
.ledger-head-rule{font-size:12px;color:var(--tx2);margin-top:8px;}
.ledger-day{font-family:'Cormorant Garamond',serif;font-size:12px;font-weight:600;letter-spacing:.2em;color:var(--tx2);padding:14px 2px 6px;}
.ledger-row{display:grid;grid-template-columns:44px 1fr auto;gap:10px;align-items:center;padding:11px 0;border-bottom:1px solid var(--bd);}
.ledger-row:last-child{border-bottom:none;}
.ledger-row-t{font-size:12px;color:var(--tx2);font-variant-numeric:tabular-nums;}
.ledger-row-l{min-width:0;}
.ledger-row-name{font-size:15px;color:var(--tx);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ledger-row-sub{font-size:12px;color:var(--tx2);margin-top:1px;}
.ledger-row-v{text-align:right;}
.ledger-row-amt{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--tx);}
.ledger-row-amt.in{color:var(--ac);}
.ledger-row-bal{font-size:11px;color:var(--tx2);font-variant-numeric:tabular-nums;margin-top:1px;}
/* ═══ 拾星（每月星圖簽到）═══
   夜窗與獎勵卡自帶深色調（跨主題一致）；頁面元件走主題變數
   星圖引擎：js/checkin-sky.js；設計脈絡：handoff/frontend.md 簽到段 */
.sk-win{position:relative;width:calc(100% - 68px);max-width:322px;height:308px;margin:16px auto 0;border-radius:18px;border:1px solid rgba(200,168,110,.3);overflow:hidden;touch-action:manipulation;background:radial-gradient(ellipse at 50% 38%,#242c48,#161b2e 66%,#10141f);box-shadow:0 10px 30px rgba(16,20,31,.4);}
.sk-win svg{position:absolute;left:0;top:0;width:100%;height:100%;}
.sk-wm{position:absolute;left:18px;top:14px;font-family:'Noto Serif TC',serif;font-size:12px;letter-spacing:2px;color:rgba(255,255,255,.62);}
.sk-wc{position:absolute;right:18px;bottom:12px;font-size:12px;letter-spacing:1px;color:rgba(216,188,132,.8);font-weight:600;}
.sk-wdone{position:absolute;left:50%;top:44%;-webkit-transform:translateX(-50%);transform:translateX(-50%);text-align:center;padding:14px 24px;border-radius:14px;background:rgba(9,12,21,.78);border:1px solid rgba(200,168,110,.28);opacity:0;transition:opacity 1.2s ease;pointer-events:none;}
.sk-wdone .wd1{white-space:nowrap;font-family:'Noto Serif TC',serif;font-size:15px;letter-spacing:6px;color:#f2e6c8;text-shadow:0 0 14px rgba(232,217,176,.6);}
.sk-win.fin .sk-wdone{opacity:1;}
.sk-wdone.bye{opacity:0 !important;transition:opacity 1s ease;}
.sk-win.glowpulse{animation:skWinGlow 1.4s ease 2;}
@keyframes skWinGlow{0%,100%{box-shadow:0 10px 30px rgba(16,20,31,.4);}50%{box-shadow:0 10px 30px rgba(16,20,31,.4),0 0 34px rgba(200,168,110,.55);}}
/* 星的三態（未來／今天／已拾），子元素透明度過場 */
.sk-day .f,.sk-day .fm,.sk-day .fr,.sk-day .lg,.sk-day .ls{transition:opacity .45s ease;opacity:0;}
.sk-day.st-future .f{opacity:1;}
.sk-day.st-future.m .f{opacity:0;}
.sk-day.st-future.m .fm,.sk-day.st-future.m .fr{opacity:1;}
.sk-day.st-lit .lg,.sk-day.st-lit .ls{opacity:1;}
.sk-day .hit{pointer-events:none;}
.sk-day.st-today .hit{pointer-events:all;cursor:pointer;}
.sk-win.toy .sk-day .hit{pointer-events:all;cursor:pointer;}
#skTodayMark{transition:opacity .4s;pointer-events:none;} /* 光圈不吃觸控，點擊交給感應圈 */
#skTodayMark.off{opacity:0;}
#skTodayMark.calm{opacity:.5;} /* 今天已簽：標記留著但不呼吸 */
#skTodayMark .pulse{transform-box:fill-box;transform-origin:center;animation:skInvite 2.4s ease-in-out infinite;}
#skTodayMark.calm .pulse{animation:none;}
@keyframes skInvite{0%,100%{transform:scale(1);opacity:.75;}50%{transform:scale(1.18);opacity:1;}}
.sk-day .burst{transform-box:fill-box;transform-origin:center;opacity:0;}
.sk-day.pop .burst{animation:skBurstK .7s ease-out forwards;}
@keyframes skBurstK{0%{transform:scale(.3);opacity:.9;}100%{transform:scale(3.2);opacity:0;}}
.sk-day.pop .ls{animation:skPop .55s cubic-bezier(.34,1.5,.64,1) forwards;transform-box:fill-box;transform-origin:center;}
@keyframes skPop{0%{transform:scale(.2);}60%{transform:scale(1.35);}100%{transform:scale(1);}}
.sk-pair{opacity:0;}
.sk-pair.lit{opacity:1;transition:opacity .6s ease;}
.sk-pair.draw{transition:stroke-dashoffset .5s ease,opacity .3s ease;}
.sk-day.st-lit .ls{animation:skTw 5s ease-in-out infinite;}
@keyframes skTw{0%,100%{opacity:1;}50%{opacity:.72;}}
.sk-day.cele .ls{animation:skCele .8s ease both;transform-box:fill-box;transform-origin:center;}
@keyframes skCele{0%{transform:scale(1);}45%{transform:scale(1.7);filter:brightness(1.5);}100%{transform:scale(1);}}
/* 里程碑列：數量隨後台設定，等寬分格 */
.sk-msrow{position:relative;width:calc(100% - 68px);max-width:322px;margin:24px auto 0;height:66px;}
.sk-rail{position:absolute;left:10%;right:10%;top:11px;height:1px;background:var(--bd);}
.sk-railfill{position:absolute;top:11px;height:1px;background:var(--gold);transition:width .6s ease;}
.sk-mscell{position:absolute;top:0;text-align:center;}
.sk-mscell svg{width:22px;height:22px;display:block;margin:0 auto;}
.sk-mscell .mc-ring{stroke:var(--bd2);opacity:.8;}
.sk-mscell .mc-star{fill:none;stroke:var(--tx2);opacity:.75;}
.sk-mscell .d{font-size:12px;font-weight:700;color:var(--tx2);margin-top:2px;}
.sk-mscell .l{font-size:12px;color:var(--tx2);margin-top:1px;letter-spacing:1px;}
.sk-mscell.done .mc-ring{stroke:var(--gold);opacity:.5;}
.sk-mscell.done .mc-star{fill:var(--gold);stroke:none;opacity:1;}
.sk-mscell.done .d,.sk-mscell.done .l{color:var(--goldtx);}
.sk-mscell.next .mc-ring{stroke:var(--ac);opacity:.55;}
.sk-mscell.next .mc-star{stroke:var(--ac);opacity:1;}
.sk-mscell.next .d,.sk-mscell.next .l{color:var(--ac);font-weight:700;}
.sk-mscell.next svg{animation:skInvite 2.4s ease-in-out infinite;}
/* 頁面元件（吃主題變數） */
.sk-sub{font-size:13px;color:var(--tx2);letter-spacing:2px;margin-top:auto;padding-top:30px;opacity:.85;}
.sk-pgbar{width:160px;height:3px;background:var(--bd);border-radius:2px;margin:18px auto 0;overflow:hidden;}
.sk-pgfill{height:3px;background:var(--ac);border-radius:2px;transition:width .6s ease;}
.sk-ptext{font-size:13px;color:var(--tx2);font-weight:600;margin-top:12px;letter-spacing:1px;text-align:center;}
.sk-hint{font-size:14px;color:var(--ac);margin-top:18px;text-align:center;letter-spacing:.5px;cursor:pointer;user-select:none;-webkit-user-select:none;transition:color .4s;}
.sk-hint:active{opacity:.6;}
.sk-hint{margin-bottom:26px;}
.sk-hint.done{color:var(--goldtx);cursor:default;}
/* 補簽小膠囊：次要動作，幽靈外框、券數縮小放膠囊內（設計脈絡見 handoff/frontend.md） */
.sk-ticket-row{display:none;justify-content:center;margin:0 0 22px;}
.sk-ticket-row.on{display:flex;}
.sk-ticket-btn{display:inline-flex;align-items:center;gap:6px;padding:6px 16px;border-radius:16px;background:none;border:1px solid var(--bd2);color:var(--tx2);font-size:15px;font-family:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .1s,opacity .1s;}
.sk-ticket-btn:active{transform:scale(.95);opacity:.7;}
.sk-ticket-btn .n{font-size:12px;opacity:.65;}
/* 獎勵卡（夜空覆層，跨主題一致的深色） */
.sk-ov{position:fixed;inset:0;z-index:900;display:none;background:rgba(10,13,22,.86);opacity:0;transition:opacity .35s ease;}
.sk-ov.on{display:block;}
.sk-ov.show{opacity:1;}
.sk-ov .sk-field{position:absolute;left:0;top:0;width:100%;height:100%;}
.sk-oglow{position:absolute;left:50%;top:50%;width:380px;height:380px;margin:-190px 0 0 -190px;background:radial-gradient(ellipse at center,rgba(240,225,190,.16),rgba(240,225,190,0) 70%);}
#sk-dust{position:absolute;inset:0;pointer-events:none;}
.sk-card{position:absolute;left:50%;top:50%;width:280px;height:430px;margin:-215px 0 0 -140px;background:linear-gradient(180deg,#20263c,#141827);border-radius:14px;border:1px solid rgba(200,168,110,.42);box-shadow:0 0 38px rgba(200,168,110,.28),0 18px 50px rgba(0,0,0,.6);opacity:0;transform:translateY(16px) scale(.94);transition:opacity .4s ease,transform .5s cubic-bezier(.34,1.2,.64,1);}
.sk-ov.reveal .sk-card{opacity:1;transform:translateY(0) scale(1);}
.sk-chdr{margin-top:24px;text-align:center;font-size:12px;color:#d8bc84;letter-spacing:3px;font-weight:600;}
.sk-csub{margin-top:5px;text-align:center;font-size:12px;color:rgba(216,188,132,.55);letter-spacing:2px;min-height:14px;}
.sk-gemwrap{position:relative;width:140px;height:140px;margin:6px auto 0;}
.sk-gemwrap svg{position:absolute;left:0;top:0;width:100%;height:100%;}
.gem{transform-box:fill-box;transform-origin:center;transform:scale(0);opacity:0;}
.sk-ov.reveal .gem{animation:skGemIn .55s .15s cubic-bezier(.34,1.4,.64,1) forwards;}
@keyframes skGemIn{0%{transform:scale(.2) rotate(-18deg);opacity:0;}70%{transform:scale(1.1) rotate(3deg);opacity:1;}100%{transform:scale(1) rotate(0);opacity:1;}}
.gring{transform-box:fill-box;transform-origin:center;opacity:0;}
.sk-ov.reveal .gring{animation:skGring .8s .2s ease-out forwards;}
@keyframes skGring{0%{transform:scale(.4);opacity:.8;}100%{transform:scale(1.9);opacity:0;}}
.halo{opacity:0;transition:opacity .8s .35s ease;}
.sk-ov.reveal .halo{opacity:1;}
.sk-rname{margin-top:14px;text-align:center;font-family:'Noto Serif TC',serif;font-size:21px;font-weight:700;color:#f0e8d8;}
.sk-ramt{margin-top:4px;text-align:center;font-size:14px;color:rgba(240,232,216,.65);font-weight:500;}
.sk-dia{margin-top:14px;text-align:center;font-size:6px;color:#fff;opacity:.28;}
.sk-flv{margin:8px 34px 0;text-align:center;font-size:13px;color:rgba(255,255,255,.58);font-style:italic;line-height:1.8;}
.sk-btnrow{position:absolute;bottom:24px;left:0;right:0;text-align:center;}
.sk-close{display:inline-block;padding:10px 38px;border:1px solid rgba(200,168,110,.5);border-radius:8px;font-size:15px;color:#e8d9b0;cursor:pointer;user-select:none;-webkit-user-select:none;transition:transform .12s;}
.sk-close:active{transform:scale(.95);}
.stag{opacity:0;transform:translateY(8px);transition:opacity .35s ease,transform .35s ease;}
.sk-ov.reveal .stag{opacity:1;transform:none;}
.sk-ov.msday .sk-chdr{color:#e0c98f;letter-spacing:4px;}
.sk-ov.msday .sk-card{border-color:rgba(216,188,132,.7);box-shadow:0 0 46px rgba(216,188,132,.4),0 18px 50px rgba(0,0,0,.6);}
.sk-ov.msday .sk-rname{color:#f2e3bc;}
/* 星光粒子（點亮爆散／開卡聚攏共用） */
.sk-pt{position:absolute;pointer-events:none;background:#e8d9b0;border-radius:50%;box-shadow:0 0 6px rgba(232,217,176,.8);}
.sk-pt.s4{border-radius:0;background:#f0e1be;box-shadow:none;-webkit-clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);}
@media(prefers-reduced-motion:reduce){
  #skTodayMark .pulse,.sk-day.st-lit .ls,.sk-mscell.next svg{animation:none;}
}
/* Public toggle in char editor */
.tag-editor{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:44px;padding:8px 10px;border:1px solid var(--bd);border-radius:10px;background:var(--bg3);cursor:text;}
.tag-editor input{border:none;background:transparent;font-size:16px;font-family:inherit;color:var(--tx);outline:none;min-width:60px;flex:1;padding:2px 0;}
/* 框中框防治（同 .in-wrap 規範，v2.1.353 加好友頁實例）：focus 光圈畫在外容器，
   內層裸 input 一律不自帶光圈——否則全域 input[type=text]:focus 的 3px 光圈會在框裡再長一個框 */
.tag-editor:focus-within{border-color:var(--ac);box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 14%,transparent);transition:border-color .15s,box-shadow .15s;}
.tag-editor input:focus{box-shadow:none!important;border:none!important;background:transparent!important;}
/* 已有標籤時不需要導覽文字（2026-08-28）：placeholder 只在空框時當使用說明 */
.tag-editor:has(.tag-pill) input::placeholder{color:transparent;}
.tag-preset-row{display:flex;flex-wrap:wrap;gap:8px;}
.tag-preset{padding:6px 14px;border-radius:16px;font-size:14px;font-weight:500;border:1px solid var(--bd);background:var(--bg3);color:var(--tx2);cursor:pointer;transition:all .15s;}.tag-preset:active{transform:scale(.96);}
.tag-preset.sel{background:var(--acl);border-color:var(--ac);color:var(--ac);}
.tag-pill{display:inline-flex;align-items:center;gap:4px;background:var(--acl);color:var(--ac);font-size:14px;font-weight:500;padding:4px 10px;border-radius:14px;white-space:nowrap;touch-action:none;transition:opacity .15s,transform .15s;}/* touch-action:none：手指落在標籤上不啟動頁面捲動，長按拖曳才不會被捲動手勢搶走（2026-07-17）；要捲頁從標籤框外圍捲 */
.tag-pill-x{position:relative;width:14px;height:14px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:.6;font-size:16px;line-height:1;}.tag-pill-x::before{content:'';position:absolute;inset:-10px;}.tag-pill-x:active{opacity:1;}
.ce-public-row{display:flex;align-items:center;justify-content:space-between;padding:0;}
.ce-public-label{font-size:14px;color:var(--tx);display:flex;align-items:center;gap:6px;}
.ce-public-label svg{width:16px;height:16px;stroke:var(--ac);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
/* Utility classes for repeated patterns */
.u-sub{font-size:13px;color:var(--tx2);}
.u-sub2{font-weight:400;color:var(--tx2);font-size:12px;}
.u-row{display:flex;align-items:center;gap:10px;}
.u-btn-full{width:100%;padding:10px;font-size:15px;}
.u-av-sm{width:28px;height:28px;font-size:12px;}
.u-bar{height:44px;display:flex;align-items:center;}
.u-head{font-size:15px;font-weight:600;}
.u-notif-dot{position:relative;top:-1px;left:4px;}
.u-hint{font-size:14px;color:var(--tx2);line-height:1.5;}
.u-hint2{font-size:14px;color:var(--tx2);line-height:1.8;}
.u-hint3{font-size:12px;color:var(--tx2);line-height:1.5;margin-top:4px;}
.u-dim{opacity:.7;font-size:12px;}
.u-flex-c{display:flex;align-items:center;justify-content:center;gap:6px;}
.u-flex-sb{display:flex;justify-content:space-between;align-items:baseline;}
.u-flex-g6{display:flex;align-items:center;gap:6px;}
.u-tap{flex:1;min-width:0;cursor:pointer;}
.u-cover{width:100%;height:100%;object-fit:cover;}
.u-link{color:var(--ac);cursor:pointer;}
.u-sec-title{font-weight:600;color:var(--tx);margin-top:20px;}
.u-av-cover{width:100%;height:100%;object-fit:cover;border-radius:50%;}
.u-ico16{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
.u-ico15{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;}
.u-bs-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px 10px;}

/* ── 動畫總體檢（v2.1.251）：進聊天室過場、新訊息進場、導覽輕彈 ── */
@keyframes cwIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
@keyframes msgIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.msg-row.msg-new{animation:msgIn .28s cubic-bezier(.4,0,.2,1);}
/* 系統開啟「減少動態」時關閉全部動畫與過渡（暈動症友善） */
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}
}

/* ── 統一空狀態元件（v2.1.257）：淡 icon＋標題＋說明＋可選虛線行動鈕 ── */
.es{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:36px 12px 20px;text-align:center;}
.es>svg{width:36px;height:36px;color:var(--bd2);stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.es-t{font-size:15px;color:var(--tx);font-weight:500;}
.es-d{font-size:13px;line-height:1.7;color:var(--tx2);margin-top:-4px;align-self:stretch;}
.es-dl{display:block;text-wrap:balance;}
.es-btn{display:flex;align-items:center;gap:6px;margin-top:6px;padding:9px 18px;border:1.5px dashed var(--bd2);border-radius:12px;color:var(--tx2);font-size:15px;cursor:pointer;}
.es-btn:active{opacity:.7;}
.es-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.es-sm{padding:20px 16px;text-align:center;font-size:14px;line-height:1.7;color:var(--tx2);}
.es-sm span{font-size:12px;color:var(--tx3);}
/* ── 管理頁整理模式（長按卡片網格進入，js/tidy.js）── */
.tidy-ov{position:fixed;inset:0;z-index:250;background:var(--bg);display:none;flex-direction:column;height:var(--app-h);}
.tidy-ov.show{display:flex;}
.tidy-head{padding:18px 20px 6px;flex-shrink:0;}
.tidy-title{font-size:20px;font-weight:700;color:var(--tx3);}
.tidy-hint{font-size:14px;color:var(--tx2);margin-top:4px;}
.tidy-list{flex:1;overflow-y:auto;padding:10px 16px calc(90px + env(safe-area-inset-bottom,0));display:flex;flex-direction:column;gap:8px;}
.tidy-row{display:flex;align-items:center;gap:12px;min-height:64px;padding:8px 4px 8px 8px;background:var(--bg2);border:1px solid var(--bd);border-radius:14px;box-shadow:0 1px 2px var(--sh);will-change:transform;animation:tidyRowIn .25s ease both;}
@keyframes tidyRowIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.tidy-row.dragging{position:relative;z-index:30;box-shadow:0 8px 22px rgba(0,0,0,.16);transition:none;}
.tidy-row.shift{transition:transform .22s ease;}
.tidy-thumb{width:48px;height:48px;border-radius:11px;flex-shrink:0;overflow:hidden;background:var(--bgi);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:600;color:var(--tx2);}
.tidy-thumb img{width:100%;height:100%;object-fit:cover;}
.tidy-mid{flex:1;min-width:0;}
.tidy-name{font-size:17px;font-weight:600;color:var(--tx3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tidy-sub{font-size:14px;color:var(--tx2);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tidy-handle{flex-shrink:0;width:52px;align-self:stretch;display:flex;align-items:center;justify-content:center;color:var(--tx2);touch-action:none;cursor:grab;}
/* 邊框混文字色＋陰影加深：同 toast/彈窗的 v2.1.860 配方——黑陰影在深色主題上等於隱形，浮起感要靠邊框分離（阿奈 2026-08-29 抓的）*/
.tidy-done{position:fixed;left:50%;bottom:max(26px,env(safe-area-inset-bottom));transform:translateX(-50%);padding:11px 30px;border-radius:999px;border:1px solid color-mix(in srgb,var(--tx) 24%,var(--bd));background:var(--bg2);color:var(--tx);font-size:15px;font-weight:600;font-family:inherit;box-shadow:0 4px 18px rgba(0,0,0,.28);cursor:pointer;z-index:251;-webkit-tap-highlight-color:transparent;}
.um-price{font-size:14px;color:var(--tx2);padding:2px 2px 0;}
.um-price b{color:var(--goldtx);font-weight:600;}
.um-price-sep{margin:0 2px;opacity:.6;}
.es-hang{margin-right:-1em;}

/* ═══ 精緻細節統一層（2026-07 polish pass）═══
   語彙來源：靈感骰子（inspire-card）與記憶圖譜的細節做法——
   髮絲漸層線、color-mix 柔光、彈性 easing、tabular 數字、空狀態飾線。
   全部為附加規則放在檔尾，不改動既有版面與尺寸。細節清單見 handoff/frontend.md「精緻細節語彙」。 */

/* 1. 彈窗頂部髮絲線（accent 版；gold 保留給簽到／靈感）＋彈性進場 */
.popup,.confirm-box,.ach-detail-card,.reward-card,.bs-popup{background-image:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ac) 45%,transparent),transparent);background-size:62% 1px;background-position:top center;background-repeat:no-repeat;}
.popup{transition:transform .25s cubic-bezier(.34,1.56,.64,1),opacity .2s;}
.confirm-box{transition:transform .25s cubic-bezier(.34,1.56,.64,1);}
/* 彈窗邊框同吐司（v2.1.860 阿奈）：混文字色 24% 進邊框色，暗色主題下彈窗跟遮罩才分得開。
   一併加深陰影一階。改這裡請同步 .toast 的比例，兩者要一致 */
.confirm-box,.popup{border:1px solid color-mix(in srgb,var(--tx) 24%,var(--bd));box-shadow:0 10px 30px rgba(0,0,0,.22);}

/* 2. 彈窗遮罩：柔和放射漸層（中心亮、周圍暗，聚焦感） */
.popup-ov{background:radial-gradient(120% 120% at 50% 30%,rgba(0,0,0,.18),rgba(0,0,0,.32));}

/* 3. Toast 頂部髮絲線 */
.toast{background-image:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ac) 45%,transparent),transparent);background-size:56% 1px;background-position:top center;background-repeat:no-repeat;}

/* 4. 輸入框 focus 柔光圈（聊天輸入匣除外——它有自己的容器框） */
textarea,input[type="text"],input[type="number"],input[type="password"],select{transition:border-color .15s,box-shadow .15s,background .15s;}
textarea:focus,input[type="text"]:focus,input[type="number"]:focus,input[type="password"]:focus,select:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 14%,transparent);}
.ci-box textarea:focus{box-shadow:none;}
/* 留言列（含討論串回覆）與聯絡官方的輸入框：自身 border 宣告同分且順序在後，蓋掉了全域 focus 亮邊，
   光圈孤零零掛著看不出效果——明確補回「亮邊＋光圈」整組（2026-08-12 阿奈要求，v2.1.731） */
.cpf-comment-bar textarea:focus,.sup-bar textarea:focus{border-color:var(--ac);box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 14%,transparent);}

/* 5. 主要按鈕柔光投影 */
.bp{box-shadow:0 1px 8px color-mix(in srgb,var(--ac) 28%,transparent);}

/* 6. 開關 on 微光 */
.tog{transition:background .2s,box-shadow .2s;}
.tog.on{box-shadow:0 0 8px color-mix(in srgb,var(--ac) 38%,transparent);}

/* 7. 統計數字 tabular-nums：數字等寬，跳動時不位移 */
.dash-rev-total,.dash-rev-amt,.svl,.ctr,.bond-bar-val,.emo-bar-val,.chat-time,.mm{font-variant-numeric:tabular-nums;}

/* 8. 空狀態飾線（置中細漸層線，取代光禿禿的一行字） */
.empty::before,.fl-empty::before,.popup-empty::before,.dash-rev-empty::before{content:'';display:block;width:56px;height:1px;margin:0 auto 14px;background:linear-gradient(90deg,transparent,var(--bd2),transparent);}

/* 9. 底部導覽 icon 微彈（切頁時 icon 輕輕上浮） */
.nv svg{transition:transform .3s cubic-bezier(.34,1.56,.64,1);}
.nv.a svg{transform:translateY(-1.5px);}

/* 10. 區塊標題延伸線：只用在好友頁與儀表板（首頁改用雙語標題，見第 14 條——線在首頁密度過高，阿奈定案） */

/* 11. 分類 pill 收斂（首頁探索）：導覽元素退一步，別跟內容搶戲；觸控範圍用 ::before 補回 */
.disc-tab{padding:7px 14px;font-size:14px;position:relative;}
.disc-tab::before{content:'';position:absolute;inset:-6px;}

/* 12. 聊天列表升級：頭像細環（與聊天室 msg-av 同語彙）、內縮分隔線、預覽吃滿寬、釘選淡底 */
/* 分隔線與預覽滿寬 v2.1.339 已移除——右側留白是刻意模仿 LINE 的設計，分組靠留白不靠線（阿奈定案，勿再加回） */
.li-chat .av-list{border:none;box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px var(--acl);}
.li-chat.pinned{background:color-mix(in srgb,var(--ac) 4%,var(--bg));}

/* 13. 頁面大標題定調：標題下一小段主題色短線（與 KG tab 底線同語彙），大標題不再只是孤零零的粗字 */
.sht::after{content:'';display:block;width:26px;height:3px;border-radius:2px;background:var(--ac);margin-top:6px;opacity:.9;}

/* 14. 首頁雙語標題（v2.1.343 定案，取代延伸線）：中文標題右側配 Cormorant 小字英文（.st-en）；
   純英文標題（Resuts）整個換 serif（.st-serif）。英文是裝飾標籤不是資訊，資訊一律走黑體大字。 */
.discover-section-title{display:flex;align-items:baseline;gap:9px;letter-spacing:.4px;}
.discover-section-title .st-en{font-family:'Cormorant Garamond',serif;font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--tx2);opacity:.65;transform:translateY(-1px);}
.discover-section-title .st-serif{font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:600;letter-spacing:.04em;line-height:1;}
.discover-section-title>svg{margin-left:auto;align-self:center;flex-shrink:0;}

/* 15. 浮起陰影的高度階層（v2.1.345-346）：陰影是高度的語言，越是主角浮得越高。
   第 1 層（最高）＝輪播主卡；第 2 層＝官方頭像、內容卡片；平面元素（表單容器、列表列、pill、標題）一律不加 */
.disc-card,.char-card,.card{box-shadow:0 1px 3px rgba(0,0,0,.04),0 4px 14px rgba(0,0,0,.05);}
/* 16. 底部留白單一所有權（2026-08-10，阿奈點名統一）：每個分頁的底部總留白一律＝捲動容器的
   var(--scr-pb)，內容鏈的最後一層 margin/padding 歸零。每多包一層容器就要重查一次是否
   又疊了一份（歷史慣犯）。個別處理：進階頁各 .sp 最後一張卡歸零；管理頁聊天模式列表用
   容器 -10px 抵銷 .um-item 的尾端 margin（兩個子群組誰收尾都成立，群組間距不受影響）；
   首頁 disc 分頁的 24px 見 .disc-swipe-wrap 的 -24px 抵銷；提示詞頁新增鈕的 inline
   margin-bottom 已歸零（index.html）。 */
.sp>.card:last-child{margin-bottom:0;}
#um-list{margin-bottom:-10px;}
.carousel-card{box-shadow:0 2px 6px rgba(0,0,0,.06),0 10px 28px rgba(0,0,0,.12);}
.home-off-av{box-shadow:0 2px 5px rgba(0,0,0,.06),0 5px 14px rgba(0,0,0,.10);}

/* 16. 容器式搜尋框（v2.1.353 建立；v2.1.732 最終定案）：focus 效果全由「看得見的外框」呈現
   （:focus-within 亮邊＋貼框光圈），跟更正訊息框等單一元素輸入框同款視覺。
   內層 input 是透明的打字元件，範圍不含 icon、上下有留白——它若自帶光圈，會浮在框中間
   變成「不貼框的影子」（阿奈 Win7 截圖實例，v730/v731 反覆的癥結就是這圈）。
   !important 是必要的：這條歸零跟全域光圈同特異性、靠順序取勝，但 color-mix-shim
   （舊瀏覽器）會把含 color-mix 的規則算成死 rgba 注入文件尾端，順序反轉、光圈復活。
   之後所有「icon＋輸入」組合直接用 .in-wrap，不要再 inline 手刻 */
.in-wrap{display:flex;align-items:center;gap:8px;background:var(--bg3);border:1px solid var(--bd);border-radius:10px;padding:0 12px;min-height:40px;transition:border-color .15s,box-shadow .15s;}
.in-wrap:focus-within{border-color:var(--ac);box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 14%,transparent);}
.in-wrap>svg{width:18px;height:18px;stroke:var(--tx2);fill:none;stroke-width:2;stroke-linecap:round;flex-shrink:0;}
.in-wrap input{flex:1;min-width:0;border:none;background:transparent;padding:8px 0;font-size:16px;color:var(--tx);font-family:inherit;outline:none;}
.in-wrap input:focus{box-shadow:none!important;}

/* 17. 口味 chips（加好友頁）：預填偏好關鍵字，重用 .tag-preset 樣式 */
.taste-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:4px;}

/* 18. 匿名頭像（小幽靈 _ico.anon）：通知卡與收益明細的匿名贊助者 */
.anon-av{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:27px;color:var(--tx2);}.anon-av svg{display:block;}

/* 19. 贊助頁滿版布局（v2.1.356，阿奈定案）：留言區吃掉剩餘高度，餘額與送出鈕沉底、落在拇指區 */
.sp-body{display:flex;flex-direction:column;}
.sp-msg-f{flex:1;display:flex;flex-direction:column;min-height:0;}
.sp-msg-f textarea{flex:1;min-height:80px;resize:none;}

/* 20. 角色展示頁回頭升級（v2.1.357）：全站質感拉平後，把新工具箱回饋給原本的王者，讓它重新領先一個身位 */
/* 20a. Hero 進場 Ken Burns 已移除（v2.1.482 阿奈定案：雜誌風格不需要縮放動畫，靜態才對味；9 秒緩縮被當成故障回報過） */
/* 20b. 事件卡入第二階陰影＋按壓微縮（跟全站內容卡片同高度） */
.cpf-ev-item{box-shadow:0 1px 3px rgba(0,0,0,.04),0 4px 14px rgba(0,0,0,.05);transition:transform .25s cubic-bezier(.34,1.56,.64,1);}
.cpf-ev-item:not(.locked):active{transform:scale(.98);}
/* 20c. 釘選卡（作者的話）：accent 頂部髮絲線＋淡浮起 */
.cpf-pinned{background-image:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ac) 45%,transparent),transparent);background-size:62% 1px;background-position:top center;background-repeat:no-repeat;box-shadow:0 1px 3px rgba(0,0,0,.04),0 4px 14px rgba(0,0,0,.05);}
/* 20d. 相遇卡：左上 serif 大引號浮水印（書摘感），文字保持在上層 */
.cpf-encounter::before{content:'\201C';position:absolute;top:2px;left:10px;font-family:'Cormorant Garamond',serif;font-size:64px;line-height:1;color:var(--ac);opacity:.14;pointer-events:none;}
.cpf-encounter-text{position:relative;}

/* 21. 投稿浮動鈕（v2.1.358，阿奈定案）：角色頁投稿分頁的主行動改貼底浮動膠囊——列表變長也永遠在拇指區。
 * 【v2.1.373 幽靈按鈕修正】fab 的可見/可點必須綁 `.cpf-overlay.show` 祖先：
 * visibility 跟 pointer-events 都會被子元素「重新開啟」——面板收掉（visibility:hidden+opacity:0）後，
 * 殘留 .show 的 fab 吃母層 opacity 看不見，卻因自己的 visibility:visible+pointer-events:auto
 * 變成疊在底部導覽上方（z 260 > nav 200）的隱形可點按鈕。同模式新元件一律照此綁祖先 .show。
   顯隱由 switchCpfTab 控制（idx===2），同 cpf-comment-bar 模式 */
.cpf-fab{position:absolute;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0));z-index:10;display:flex;visibility:hidden;pointer-events:none;align-items:center;gap:6px;padding:13px 30px;border-radius:999px;border:none;background:var(--ac);color:var(--ac-fg);font-size:15px;font-weight:600;font-family:inherit;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.08),0 8px 24px color-mix(in srgb,var(--ac) 35%,transparent);-webkit-tap-highlight-color:transparent;opacity:0;transform:translateX(-50%) translateY(10px);transition:opacity .25s,transform .3s cubic-bezier(.34,1.56,.64,1),visibility 0s .3s;}
.cpf-overlay.show .cpf-fab.show{visibility:visible;pointer-events:auto;opacity:1;transform:translateX(-50%) translateY(0);transition:opacity .25s,transform .3s cubic-bezier(.34,1.56,.64,1),visibility 0s 0s;}
.cpf-fab:active{transform:translateX(-50%) scale(.96);}
#cpf-fan-stories{padding-bottom:76px;}/* 投稿列表底部留位，最後一筆不被浮動鈕蓋住 */

/* 22. 角色頁聊天選擇彈窗（v2.1.359）：「開新對話」列＋既有視窗（重用 li-chat 同款） */
.cpf-newchat-li{display:flex;align-items:center;gap:12px;padding:10px 4px;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.cpf-newchat-plus{width:46px;height:46px;border-radius:50%;border:1.5px dashed var(--ac);color:var(--ac);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;}
#cpf-chat-list .li-chat .av-list{width:46px;height:46px;}
/* li-chat 是為聊天頁設計的（--bg 底、-16px 負 margin 滿版）；放進 popup（--bg2 底、20px padding）會變成一塊
   灰底又左右差 4px 沒填滿——彈窗情境改透明底、負 margin 對齊 20px（v2.1.361 修） */
#cpf-chat-list .li-chat{background:transparent;margin-left:-20px;margin-right:-20px;padding:12px 20px;}
#cpf-chat-list .li-chat.pinned{background:color-mix(in srgb,var(--ac) 4%,transparent);}

/* 22a. 聊天選擇彈窗加寬（v2.1.360）：列表型彈窗（頭像＋兩行預覽）需要橫向空間，預設 320px 過瘦 */
#popup-cpf-chat .popup{width:min(400px,calc(100vw - 32px));max-height:76vh;}

/* 23. 劇透標記眼睛（v2.1.361）：未標記＝睜眼（內容公開）、已標記＝閉眼（會被遮）。
   原本永遠閉眼只變色，玩家看不出目前狀態 */
.cmt-tool .eye-off{display:none;}
.cmt-tool.on .eye-off{display:block;}
.cmt-tool.on .eye-open{display:none;}

/* 24. 角色資訊小卡（v2.1.363）：版權頁式的 key-value 行 */
.info-row{display:flex;justify-content:space-between;align-items:baseline;padding:9px 2px;border-bottom:1px dashed var(--bd);}
.info-row:last-child{border-bottom:none;}
.info-k{font-size:14px;color:var(--tx2);}
.info-v{font-size:14px;color:var(--tx);font-variant-numeric:tabular-nums;}

/* 25. 圖片瀏覽縮放（v2.1.368）：全 app 鎖縮放後，lightbox 圖片自寫 pinch/pan/雙擊手勢 */
#img-lightbox img{touch-action:none;transform-origin:center;will-change:transform;}
#img-lightbox img.lb-anim{transition:transform .25s cubic-bezier(.4,0,.2,1);}

/* 26. 輕量選擇彈窗（v2.1.372）：底部面板內的欄位選擇（咒語選書）。
 * 面板本身已是焦點，中央彈窗＋第二層暗遮罩對「選一個選項」這種輕動作太重——
 * 遮罩改透明（點外面仍可關）、彈窗縮小貼著觸發欄位出現、動畫收斂成短距淡入。
 * 定位由 JS 依觸發欄位 rect 設 top/left（spellbook.js _openSpellBookPicker）。
 * 之後面板內同類「輕量單選」都走這組，不要再開滿版遮罩彈窗。 */
.popup-ov.lite{background:none;display:block;}
.popup-ov.lite .popup.mini{position:absolute;width:230px;max-height:40vh;padding:12px 14px;border-radius:12px;border:1px solid var(--bd);box-shadow:0 4px 18px rgba(0,0,0,.14);transform:translateY(-4px);transition:transform .16s ease,opacity .14s;}
.popup-ov.lite.show .popup.mini{transform:none;}
.popup.mini .popup-title{font-size:14px;font-weight:500;color:var(--tx2);margin-bottom:8px;}
.popup.mini .popup-item{padding:9px 12px;font-size:15px;margin-bottom:4px;}

/* ═══ 對話造型（風格家）═══
   class 掛在 <html>（cs-letter / cs-frost / cs-script），theme 只動 body 不衝突。
   .sys（系統訊息）一律排除，維持原樣式。 */

/* ── 信箋：角色正文排在紙上；玩家的話是夾進信裡的便箋（淡色紙片＋右緣墨線）── */
html.cs-letter .cm{font-family:'Noto Serif TC','Noto Sans TC',serif;padding:22px 30px 14px;gap:0;}
/* 宋體 400 橫筆過細＋字級偏小＋旁白墨淡三者疊加造成可讀性差（阿奈 2026-07-13）：
   字重 400→500（字型檔本就載了 500）、字級補到與小說/劇本同級再加半點、旁白墨色向正文拉近 */
html.cs-letter .msg-row:not(.sys) .msg-bubble{font-weight:500;}
html.cs-letter .msg-row.ai:not(.sys) .msg-bubble em{color:color-mix(in srgb,var(--tx) 45%,var(--txem,var(--tx2)));}
html.cs-letter .msg-row:not(.sys){display:block;margin-bottom:0;max-width:100%;width:100%;}
html.cs-letter .msg-row:not(.sys) .msg-av{display:none;}
/* 署名（v2.1.462，阿奈提議）：msg-name 不藏了，改移到正文後方當落款——
   DOM 不動、用 flex order 重排；連續 AI 訊息視為同封信續頁，只有最後一則署名 */
html.cs-letter .msg-row:not(.sys) .msg-body{display:flex;flex-direction:column;}
html.cs-letter .msg-row:not(.sys) .msg-name{order:2;align-self:flex-end;display:block;font-size:13px;font-weight:500;letter-spacing:.08em;color:var(--tx2);margin:8px 2px 0 0;}
html.cs-letter .msg-row:not(.sys) .msg-name::before{content:'── ';letter-spacing:0;}
html.cs-letter .msg-row.ai:has(+ .msg-row.ai) .msg-name,html.cs-letter #typing-row .msg-name{display:none;}
html.cs-letter .msg-row:not(.sys) .msg-meta{display:none;}
html.cs-letter .msg-row:not(.sys) .msg-bubble{max-width:100%;padding:0;background:none;box-shadow:none;border-radius:0;font-size:16px;line-height:1.9;}
html.cs-letter .msg-row.ai:not(.sys)+.msg-row.ai:not(.sys)::before{content:'⁂';display:block;text-align:center;color:var(--bd2);font-size:11px;margin:20px 0;}
html.cs-letter .msg-row.user{display:flex;flex-direction:row;justify-content:flex-end;width:100%;margin:26px 0 20px;}
/* v2.1.463：紙片盒從 msg-bubble 上移到 msg-body——署名節點在 body 內 bubble 外，要進信紙只能把紙畫在 body 上 */
html.cs-letter .msg-row.user .msg-body{flex:0 1 auto;max-width:92%;position:relative;background:color-mix(in srgb,var(--acl) 55%,transparent);border:1px solid color-mix(in srgb,var(--ach) 24%,transparent);border-radius:2px;padding:12px 16px 9px;}
html.cs-letter .msg-row.user .msg-body::before{content:'';position:absolute;top:-1px;right:-1px;width:0;height:0;border-style:solid;border-width:0 14px 14px 0;border-color:transparent var(--bg) color-mix(in srgb,var(--ach) 34%,transparent) transparent;}
/* 玩家＝一張夾進信裡的「回箋」（v2.1.461 改版，阿奈：要更像信件往來、別像小說）：
   信紙三記號——細框紙片、右上摺角、右下落款短線。摺角用 border 三角：右上半＝頁底色（裁角）、左下半＝摺片色 */
html.cs-letter .msg-row.user .msg-bubble{color:var(--ach);line-height:1.8;}
html.cs-letter .msg-row.user .msg-name{color:color-mix(in srgb,var(--ach) 80%,var(--tx2));margin:6px 0 0;}
html.cs-letter .msg-row.user.noname .msg-name{display:none;}
html.cs-letter .msg-row.user.noname .msg-bubble::after{content:'──';display:block;text-align:right;font-size:12px;letter-spacing:1px;line-height:1;color:color-mix(in srgb,var(--ach) 65%,transparent);margin-top:7px;}
html.cs-letter .msg-row.user .msg-bubble em{color:color-mix(in srgb,var(--ach) 75%,var(--tx2));}
html.cs-letter .ci-box{border-radius:4px;background:var(--bg2);}
/* cm gap:0 讓日期分隔貼死前一天最後一句——換日在信箋裡是換頁感，上方留白要足 */
html.cs-letter .date-sep{margin:34px auto 24px;}
/* 信箋 .cm gap:0——警語條自己補與首則訊息的間距；左右內縮取消（.cm 已給 30px）*/
html.cs-letter .cnb{margin-bottom:16px;padding-left:0;padding-right:0;}

/* ── 霧面：氛圍層打底；角色寬幅霧板、玩家凝露膠囊 ── */
html.cs-frost .cm{padding:20px 14px 14px;background:
  radial-gradient(ellipse 100% 60% at 12% 5%,color-mix(in srgb,var(--ac) 22%,transparent),transparent 68%),
  radial-gradient(ellipse 90% 55% at 92% 50%,color-mix(in srgb,var(--acl) 80%,transparent),transparent 70%),
  radial-gradient(ellipse 80% 50% at 25% 100%,color-mix(in srgb,var(--ac) 15%,transparent),transparent 68%),
  var(--bg);}
html.cs-frost .msg-row:not(.sys) .msg-av{display:none;}
html.cs-frost .msg-row.ai:not(.sys){max-width:96%;}
html.cs-frost .msg-row.ai:not(.sys) .msg-bubble{padding:14px 18px;background:color-mix(in srgb,var(--msg-ai) 42%,transparent);backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);border:1px solid color-mix(in srgb,var(--msg-ai) 65%,transparent);border-radius:24px;box-shadow:0 8px 28px color-mix(in srgb,var(--ac) 16%,transparent),inset 0 1px 0 color-mix(in srgb,#fff 55%,transparent);}
html.cs-frost .msg-row.user .msg-bubble{padding:11px 16px;background:color-mix(in srgb,var(--ac) 26%,transparent);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid color-mix(in srgb,#fff 35%,transparent);border-radius:20px 20px 6px 20px;color:var(--tx3);box-shadow:0 4px 14px color-mix(in srgb,var(--ac) 20%,transparent);}
html.cs-frost .msg-meta{opacity:.55;}
html.cs-frost .ci-box{background:color-mix(in srgb,var(--bg3) 55%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-color:color-mix(in srgb,#fff 40%,var(--bd));}

/* ── 劇本：舞台劇本排法。無頭像無泡泡，說話者標籤立在回合上方，
       敘述退為小字舞台指示 ── */
html.cs-script .cm{padding:26px 22px 14px;gap:24px;}
html.cs-script .msg-row:not(.sys){display:block;max-width:100%;width:100%;}
html.cs-script .msg-row:not(.sys) .msg-av{display:none;}
html.cs-script .msg-row:not(.sys) .msg-name{display:block;font-size:12px;font-weight:600;letter-spacing:2.5px;color:var(--tx2);margin:0 0 8px;}
html.cs-script .msg-row.user .msg-name{color:var(--ac);text-align:right;}
html.cs-script .msg-row:not(.sys) .msg-meta{display:none;}
html.cs-script .msg-row:not(.sys) .msg-bubble{max-width:100%;padding:0;background:none;box-shadow:none;border-radius:0;line-height:1.85;font-size:16px;}
html.cs-script .msg-row:not(.sys) .msg-bubble p{padding-left:1em;text-indent:-1em;}
html.cs-script .msg-row:not(.sys) .msg-bubble em{color:var(--txem,var(--tx2));}
html.cs-script .msg-row.user .msg-bubble{text-align:right;}
html.cs-script .msg-row.user .msg-bubble p{padding:0;text-indent:0;color:var(--ach);}
html.cs-script .ci-box{border-radius:10px;}

/* ── 小說：中文書頁排法。通篇靠左、首行縮排兩字、無標籤無時間戳；
       玩家回合用墨色＋左緣細線識別 ── */
html.cs-novel .cm{padding:24px 26px 14px;gap:18px;}
html.cs-novel .msg-row:not(.sys){display:block;max-width:100%;width:100%;}
html.cs-novel .msg-row:not(.sys) .msg-av{display:none;}
html.cs-novel .msg-row:not(.sys) .msg-name{display:none;}
html.cs-novel .msg-row:not(.sys) .msg-meta{display:none;}
html.cs-novel .msg-row:not(.sys) .msg-bubble{max-width:100%;padding:0;background:none;box-shadow:none;border-radius:0;font-size:16px;line-height:1.9;}
html.cs-novel .msg-row:not(.sys) .msg-bubble p{text-indent:2em;margin:0 0 .55em;}
html.cs-novel .msg-row:not(.sys) .msg-bubble p:last-child{margin-bottom:0;}
html.cs-novel .msg-row.user .msg-bubble{border-left:2px solid color-mix(in srgb,var(--ach) 55%,transparent);padding-left:12px;color:var(--ach);}
html.cs-novel .msg-row.user .msg-bubble em{color:var(--txem,var(--tx2));}
html.cs-novel .ci-box{border-radius:10px;}
/* ── 分享連結訪客展示頁（share-view.js）──
   內容區直接共用 .cpf-* 樣式類（hero/眉標/tagline/hashtag/section-head/intro），
   這裡只放訪客頁專屬的殼：全螢幕外框、捲動容器、開場白引文卡、CTA、訊息頁。 */
#gv-overlay{position:fixed;inset:0;z-index:10000;background:var(--bg);overflow:hidden;}
/* 訪客角色頁 z-index 10000 壓過 bs-overlay(9999)，登入彈窗必須再浮上去一層。
   2026-08-30：原本這條掛在 body.guest 底下，但從分享連結進來的人沒按過「先逛逛」，
   body 沒有 guest 這個 class，彈窗就開在角色頁「底下」——按登入完全沒反應，
   返回鍵還會先被那層看不見的彈窗吃掉一次。改成無條件生效。
   只壓過 gv-overlay，仍在 confirm-ov(10000) 之上、但兩者不會同時出現。 */
.bs-overlay{z-index:10001;}
.gv-back{position:absolute;top:calc(env(safe-area-inset-top,0px) + 10px);left:10px;z-index:2;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.35);color:#fff;margin:0;cursor:pointer;}
#gv-overlay .gv-scroll{height:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;}
#gv-overlay .cpf-hero{max-height:72vh;}
#gv-overlay .gv-body{padding:24px 22px calc(96px + env(safe-area-inset-bottom,0));max-width:560px;margin:0 auto;}/* 底部留位給浮動 CTA */
/* 訪客頁 CTA＝本尊 .cpf-fab 同款，但 fab 預設隱藏＋依附 .cpf-overlay.show 才現身——訪客頁自己蓋顯示條件 */
#gv-overlay .gv-fab{visibility:visible;pointer-events:auto;opacity:1;transform:translateX(-50%) translateY(0);position:fixed;transition:none;}
#gv-overlay .gv-fab:active{transform:translateX(-50%) scale(.96);}
#gv-overlay .gv-fab-inline{position:static;transform:none;margin-top:28px;}
#gv-overlay .gv-fab-inline:active{transform:scale(.96);}
/* 18+ 打碼模式 */
#gv-overlay .gv-censor{position:relative;background:var(--bg2);border:1px solid var(--bd);border-radius:12px;padding:28px 24px;text-align:center;overflow:hidden;}
#gv-overlay .gv-censor-bars{display:flex;flex-direction:column;gap:10px;margin-bottom:22px;}
#gv-overlay .gv-censor-bars i{display:block;height:12px;border-radius:6px;background:var(--bg3);width:100%;}
#gv-overlay .gv-censor-badge{display:inline-flex;align-items:center;gap:5px;font-size:14px;font-weight:700;letter-spacing:.04em;color:var(--del);margin-bottom:10px;}
#gv-overlay .gv-censor-badge svg{flex:none;position:relative;top:1px;}
#gv-overlay .gv-censor-t{font-size:16px;font-weight:600;color:var(--tx3);}
#gv-overlay .gv-censor-s{font-size:14px;color:var(--tx2);margin-top:6px;line-height:1.7;}
#gv-overlay .gv-fab{white-space:nowrap;max-width:calc(100vw - 32px);}
#gv-overlay .gv-fab svg{flex:none;position:relative;top:1px;}
#gv-overlay .cpf-hashtags{margin-bottom:24px;}
#gv-overlay .gv-cta-sub{font-size:13px;color:var(--tx2);margin-top:32px;text-align:center;}
#gv-overlay .gv-msg{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px;text-align:center;}
#gv-overlay .gv-msg-t{font-size:22px;font-weight:700;color:var(--tx3);margin-bottom:10px;}
#gv-overlay .gv-msg-s{font-size:15px;color:var(--tx2);line-height:1.8;}
/* §DT ═══ 桌機版面 ═══
   鐵則：本區所有規則包在 min-width media query 內（唯一例外：.nav-brand 基礎隱藏），
   手機版行為零影響。桌機斷點 900px（側欄導覽＋閱讀寬度＋置中卡片），
   聊天雙欄斷點 1024px（LINE 桌面版式：左清單右對話）。
   設計決策詳見 handoff/frontend.md「桌機版面」。 */
.nav-brand{display:none;}
@media (min-width:900px){
/* ── 底部導覽 → 左側導覽欄 ── */
body{--scr-pb:36px;}
.nav-w{top:0;right:auto;bottom:0;left:0;width:84px;padding-bottom:0;border-right:1px solid var(--bd);}
body.in-chat .nav-w{display:block;}/* 桌機進聊天不藏導覽欄（覆蓋 §7 的 display:none） */
.nav-i{flex-direction:column;height:100%;padding:16px 0 18px;gap:8px;}
.nav-brand{display:flex;align-items:center;justify-content:center;height:56px;margin-bottom:6px;color:var(--ac);user-select:none;-webkit-user-select:none;}
.nav-brand svg{width:34px;height:auto;}
.nv{flex:0 0 auto;height:58px;gap:4px;font-size:12px;}
/* 指示線放右緣（貼內容區那側）：放左緣會貼著視窗邊，被螢幕邊框吃掉看不清楚（2026-08-12 阿奈） */
.nv::after{top:20%;bottom:20%;left:auto;right:0;width:2.5px;height:auto;border-radius:2px 0 0 2px;transform:scaleY(0);}
.nv.a::after{transform:scaleY(1);}
.main{margin-left:84px;}
/* ── 內容閱讀寬度：捲軸留在容器邊緣，內容以 padding 置中到 720px ── */
.scr{padding:0 max(36px,calc((100% - 720px)/2)) var(--scr-pb);}
/* 管理頁的捲動容器是 .acct-swipe-page（非 .scr）。
   ⚠️ 這裡不能用 % padding 置中：page 的 containing block 是 400% 寬的 swipe track，
   百分比會以 track 寬度解算、直接爆掉（v2.1.630 卡片消失事故）。
   改為對 page 的直接子元素上 max-width 蓋帽置中，與 track 數學完全脫鉤。 */
.acct-swipe-page>*{max-width:720px;margin-inline:auto;}
/* .band＝位在捲動容器「外面」的頁首列／分頁列（管理與進階頁的標題、pill 列）。
   它們帶 inline padding，需 !important 才能把左右對齊到同一條 720px 欄。 */
.band{padding-left:max(36px,calc((100% - 720px)/2)) !important;padding-right:max(36px,calc((100% - 720px)/2)) !important;}
/* ── 全頁面板（fp／角色檔案／整理工具）→ 置中卡片 ── */
.fp:not(#fp-auth),.cpf-overlay{left:50%;right:auto;top:36px;bottom:36px;width:min(780px,calc(100vw - 200px));border-radius:18px;overflow:hidden;border:1px solid var(--bd);box-shadow:0 24px 80px rgba(0,0,0,.28);transform:translate(-50%,16px);}
.fp.show:not(#fp-auth),.cpf-overlay.show{transform:translate(-50%,0);}
/* 登入頁 #fp-auth 刻意「不」卡片化：它是牆不是對話框，必須整面蓋住導覽欄，
   否則未登入者點得到左側導覽（nav() 會順手關掉所有 fp 含登入頁＝直接繞過登入）。
   桌機僅把登入內容收窄置中。 */
#fp-auth .fp-body{max-width:460px;margin-inline:auto;width:100%;}
/* z-index:260＝與 fp/cpf 同層、在遮罩 259 之上——250 會被壓在遮罩底下，
   所有點擊都落在遮罩（=body）觸發「點空白處＝返回鍵」直接把面板收掉（2026-08-19 實測事故）。
   transform 同時讓 .tidy-done（position:fixed）以本卡為定位基準，置中在卡片底部。 */
.tidy-ov{left:50%;right:auto;top:36px;bottom:36px;width:min(780px,calc(100vw - 200px));height:auto;border-radius:18px;overflow:hidden;border:1px solid var(--bd);box-shadow:0 24px 80px rgba(0,0,0,.28);transform:translateX(-50%);z-index:260;}
/* 卡片背後的遮罩：擋掉背景點擊（fp 自身沒有 overlay 元素，桌機卡片化後必須補）。
   z-index 259 = 恰在 fp 起始層 260 之下、內容之上；多層 fp 疊開也只有一層遮罩，不疊加變黑。
   ⚠️ 不用 :has()：Win7 上的 Firefox 115 ESR 不支援，遮罩會整個消失＝背景可點（實測事故）。
   改由 nav.js 的 MutationObserver 同步 body.ovl-open class，所有瀏覽器都吃得到。 */
body.ovl-open::after{content:'';position:fixed;inset:0;z-index:259;background:rgba(0,0,0,.32);cursor:pointer;}
/* ── 底部抽屜（模式選擇器／指令匣）→ 置中浮出卡片 ── */
.mp-sheet{left:50%;right:auto;bottom:28px;width:min(560px,94vw);border-radius:18px;border:1px solid var(--bd);padding-bottom:0;transform:translate(-50%,calc(100% + 44px));}
.mp-sheet.show{transform:translate(-50%,0);}
.pcmd-panel{left:50%;right:auto;bottom:28px;width:min(640px,94vw);border-radius:18px;border:1px solid var(--bd);transform:translate(-50%,calc(100% + 44px));}
.pcmd-panel.show{transform:translate(-50%,0);}
/* 勾選／名單／日期／世界書掛載這種 .wb-sheet 抽屜：桌機同樣收成置中浮出卡片，五種抽屜一個樣（2026-08-31） */
.popup-ov.sheet-mode{justify-content:center;padding-bottom:28px;}
.popup-ov.sheet-mode .wb-sheet{width:min(560px,94vw);border-radius:18px;border:1px solid var(--bd);transform:translateY(calc(100% + 44px));}
.popup-ov.sheet-mode.show .wb-sheet{transform:translateY(0);}
.wb-sheet-list,.sheet-empty{min-height:260px;}
/* ── 角色分享訪客頁（/c/ 連結、未登入）：滿版直式 hero 改為置中雜誌卡 ── */
#gv-overlay .gv-scroll{padding-top:48px;}
#gv-overlay .cpf-hero{max-width:640px;max-height:none;margin:0 auto;border-radius:20px;border:1px solid var(--bd);box-shadow:0 24px 80px rgba(0,0,0,.28);}
#gv-overlay .gv-body{max-width:640px;}
/* ── 提示訊息置中窄版 ── */
.toast{left:50%;right:auto;width:max-content;max-width:min(480px,90vw);transform:translate(-50%,-20px);}
.toast.show{transform:translate(-50%,0);}
/* ── 聊天訊息欄：閱讀寬度用容器 padding 收成 820px 置中欄，捲軸留在容器邊緣。
   ⚠️ 不能用 .cm>*{margin-inline:auto}：.cm 是 flex column，auto margin 在交叉軸
   優先於 align-self，短列（AI 回應中的打字動畫、短訊息）會整列被水平置中
   （2026-08-12 阿奈截圖實例）。padding 置中欄，列在欄內才能正常靠左／靠右。 */
/* 邊距 10px＝頭像貼邊（跟手機一致）。v2.1.735 曾改 24px 去對齊輸入匣，被阿奈連兩輪
   指正「頭貼不貼邊了」——泡泡欄本來就因頭像＋gap 內縮 44px，跟輸入匣對齊的是頭像
   而不是泡泡，那個對齊不成立。寬螢幕時 max() 取置中值，頭像貼 820px 欄緣。
   左側恆比右側多 9px＝捲軸軌道寬（自動隱藏只是 thumb 透明、佔位不變）：右側視覺
   留白＝軌道 9px＋padding，左側不補的話兩邊頭像距邊差一根捲軸（阿奈指正）。
   Firefox on macOS 的 overlay 捲軸不佔位、會反向多 9px，邊緣情況可接受。 */
.cm{padding-left:max(19px,calc((100% - 820px)/2 + 9px));padding-right:max(10px,calc((100% - 820px)/2));}
/* 訊息分邊（classic 造型限定）：列寬上限 88%，長訊息也在對側留出空隙——
   玩家靠右、AI 靠左的分邊感這樣才看得出來（阿奈：玩家看起來沒有靠右）。
   sys 列有 inline maxWidth:100% 蓋過此規則；四種文學造型（letter/frost/script/novel）
   是滿寬排版，分邊概念不適用，用 :not 明確排除。 */
html:not(.cs-letter):not(.cs-frost):not(.cs-script):not(.cs-novel) .cm .msg-row.ai,
html:not(.cs-letter):not(.cs-frost):not(.cs-script):not(.cs-novel) .cm .msg-row.user{max-width:88%;}
.ci{padding:10px 24px 16px;}
.ci-box{width:100%;max-width:820px;margin-inline:auto;}
/* ── 桌機開放選取聊天與故事文字（手機維持長按選單、不可選取）── */
.msg-bubble,.msg-bubble *{-webkit-user-select:text;user-select:text;}
.story-read-body{-webkit-user-select:text;user-select:text;}
/* ── 細捲軸（手機隱藏捲軸的規則在桌機還原成可見細軸）── */
.scr,.cm,.fp-body,.sidebar,#chat-list{scrollbar-width:thin;scrollbar-color:var(--bd2) transparent;}
.scr::-webkit-scrollbar,.cm::-webkit-scrollbar,.fp-body::-webkit-scrollbar,.sidebar::-webkit-scrollbar,#chat-list::-webkit-scrollbar{display:block;width:9px;}
.scr::-webkit-scrollbar-thumb,.cm::-webkit-scrollbar-thumb,.fp-body::-webkit-scrollbar-thumb,.sidebar::-webkit-scrollbar-thumb,#chat-list::-webkit-scrollbar-thumb{background:var(--bd2);border-radius:5px;border:2px solid transparent;background-clip:padding-box;}
.scr::-webkit-scrollbar-track,.cm::-webkit-scrollbar-track,.fp-body::-webkit-scrollbar-track,.sidebar::-webkit-scrollbar-track,#chat-list::-webkit-scrollbar-track{background:transparent;}
/* ── 聊天畫面捲軸自動隱藏（2026-08-12 阿奈）：平時透明、佔位不變（不跳版），
   滾動中（.scrolling 由 init.js 掛 scroll listener）或滑鼠懸停才顯示。
   規則必須排在上面常駐 thumb 之後（同特異性靠順序；無 color-mix，shim 不會反轉）。 */
.cm,#chat-list{scrollbar-color:transparent transparent;}
.cm:hover,.cm.scrolling,#chat-list:hover,#chat-list.scrolling{scrollbar-color:var(--bd2) transparent;}
.cm::-webkit-scrollbar-thumb,#chat-list::-webkit-scrollbar-thumb{background:transparent;}
.cm:hover::-webkit-scrollbar-thumb,.cm.scrolling::-webkit-scrollbar-thumb,#chat-list:hover::-webkit-scrollbar-thumb,#chat-list.scrolling::-webkit-scrollbar-thumb{background:var(--bd2);border-radius:5px;border:2px solid transparent;background-clip:padding-box;}
}
@media (min-width:900px) and (hover:hover){
.nv:hover{color:var(--ac);}
}
/* ── 聊天雙欄（LINE 桌面版式）── */
@media (min-width:1024px){
#p-chat.a{flex-direction:row;}
/* !important 對付 openChat/closeChat 寫入的 inline display：桌機清單永遠在場。
   清單改 flex column 不捲動、捲動交給 #chat-list——「聊天」標題與批次列常駐在上，
   中間那根捲軸從標題下方才開始，不再貫穿 header（2026-08-12 阿奈）。
   #chat-list 負 margin 撐滿欄寬，捲軸貼著兩欄分界線；內容 padding 補回。 */
#p-chat>#cl{display:flex !important;flex-direction:column;overflow:hidden;flex:0 0 clamp(368px,26vw,460px);width:clamp(368px,26vw,460px);border-right:1px solid var(--bd);padding:0 16px 0;}
#p-chat>#cl>.sh,#p-chat>#cl>.batch-del-bar{flex-shrink:0;}
#p-chat>#cl>#chat-list{flex:1;overflow-y:auto;margin:0 -16px;padding:0 16px 32px;}
#p-chat>.cw{display:flex;flex:1;min-width:0;}
/* 未開對話：右半窗留白＋提示；!important 蓋掉子元素的 .show inline/class 顯示 */
.cw:not(.a)>*{display:none !important;}
.cw:not(.a)::after{content:'從左側選擇一段對話';margin:auto;font-size:15px;color:var(--tx2);letter-spacing:.08em;}
/* 清單常駐 → 返回鍵多餘；改顯示對話名稱（蓋掉 #c-name 的 inline display:none）*/
#cv>.ch .bk{display:none;}
#c-name{display:block !important;}
}

/* ═══ 管理頁 pill：五個才塞得下（2026-08-31 曆法分頁）；只動管理頁，設定頁的 .sbb 不變 ═══ */
#acct-pills{gap:5px;}
#acct-pills .sbb{font-size:14px;line-height:1;padding:10px 8px;height:36px;flex:1 1 auto;text-align:center;}
/* ═══ 故事曆法：管理頁分頁 + 編輯器（js/calendars.js；UI 定案見 docs/calendar-tab-mockup.html） ═══ */
.cal-hide{display:none !important;}
.cal-today{font-size:13px;color:var(--tx2);margin:0 2px 10px;}
.cal-card{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--bg2);border:1px solid var(--bd);border-radius:12px;margin-bottom:10px;position:relative;min-height:56px;box-shadow:0 1px 2px var(--sh);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .1s;}
.cal-card:active{transform:scale(.985);}
.cal-card-glyph{width:40px;height:40px;border-radius:10px;background:var(--acl);color:var(--ach);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:'Noto Serif TC',serif;font-size:18px;font-weight:600;}
.cal-card-body{flex:1;min-width:0;}
.cal-card-name{font-size:17px;font-weight:500;color:var(--tx3);line-height:1.4;padding-right:32px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cal-card-date{font-size:15px;color:var(--tx2);margin-top:4px;line-height:1.4;font-family:'Noto Serif TC',serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cal-card-menu{top:50%;transform:translateY(-50%);right:10px;background:none;color:var(--tx2);}
/* 樣本／顯示方式：單選卡，選中用金混主色（沿用世界書掛載抽屜的選取色階） */
.cal-opts{display:flex;flex-direction:column;gap:8px;}
.cal-opt{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 14px;border:1px solid var(--bd);border-radius:12px;background:var(--bg3);cursor:pointer;-webkit-tap-highlight-color:transparent;}
.cal-opt>div{flex:1;min-width:0;}
.cal-dot{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--bd2);flex:none;position:relative;}
/* 選取態用 --sel（與世界書掛載／勾選抽屜的勾選色同一條規則；純金 --gold 只留給裝飾字，2026-09-01 同步） */
.cal-opt.on{border-color:var(--sel);background:color-mix(in srgb,var(--sel) 8%,var(--bg2));}
.cal-opt.on .cal-dot{border-color:var(--sel);}
.cal-opt.on .cal-dot::after{content:'';position:absolute;inset:4px;border-radius:50%;background:var(--sel);}
.cal-opt-t{font-size:17px;color:var(--tx3);}
.cal-opt-s{font-size:15px;color:var(--tx2);margin-top:2px;line-height:1.4;}
.cal-opt-ex{font-family:'Noto Serif TC',serif;font-size:16px;color:var(--tx3);}
.cal-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;align-items:center;}
.cal-g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;}
.cal-adv{margin-top:18px;padding-top:12px;border-top:1px dashed var(--bd);}
.cal-adv-t{font-size:14px;color:var(--tx2);letter-spacing:.04em;font-weight:500;}
/* 開關列：跟上下欄位保持距離，觸控高度 44 */
.tg-row{display:flex;align-items:center;justify-content:space-between;min-height:44px;margin-top:14px;padding-bottom:2px;}
.tg-row label{margin:0;}
.tg-row+.cal-g3{margin-top:8px;}
/* 日期挑選觸發鈕 */
.dp-btn{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--bd);border-radius:8px;background:var(--bg3);font-size:16px;color:var(--tx);cursor:pointer;font-family:inherit;text-align:left;-webkit-tap-highlight-color:transparent;}
.dp-btn svg{color:var(--tx2);flex-shrink:0;}
/* 名單列：主畫面只放預覽，點進抽屜才編 */
.nl-rows{margin-top:18px;border-top:1px solid var(--bd);}
.nl-row{display:flex;align-items:center;gap:10px;min-height:52px;padding:8px 2px;border-bottom:1px solid var(--bd);cursor:pointer;-webkit-tap-highlight-color:transparent;}
.nl-row:active{background:var(--bg3);}
.nl-lab{font-size:16px;color:var(--tx3);flex-shrink:0;}
.nl-val{flex:1;min-width:0;text-align:right;font-size:14px;color:var(--tx2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.nl-chev{color:var(--bd2);flex-shrink:0;}
/* 名單抽屜內容 */
#nl-list{padding:8px 16px 12px;}
.nl-it{display:flex;align-items:center;gap:8px;padding:6px 4px;}
.nl-it.dragging{background:var(--bg3);border-radius:10px;}
.nl-grip{touch-action:none;}
.nl-idx{width:24px;text-align:right;font-size:13px;color:var(--tx2);flex-shrink:0;}
.nl-it input{margin:0;}
.nl-it .nl-days{width:72px;flex-shrink:0;text-align:center;}
.nl-unit{font-size:13px;color:var(--tx2);flex-shrink:0;}
.nl-x{width:32px;height:40px;border:none;background:none;color:var(--tx2);font-size:22px;cursor:pointer;flex-shrink:0;font-family:inherit;}
/* 日期挑選抽屜（date-picker.js） */
.dp-nav{display:flex;align-items:center;justify-content:center;gap:4px;padding:4px 12px 8px;}
.dp-nav button{width:40px;height:40px;border:none;background:none;color:var(--tx2);font-size:18px;cursor:pointer;border-radius:50%;font-family:inherit;-webkit-tap-highlight-color:transparent;}
.dp-nav button:active{background:var(--bg3);}
.dp-ym{flex:1;text-align:center;font-size:17px;font-weight:500;color:var(--tx3);}
.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px 0;padding:0 12px 12px;}
.dp-wd{text-align:center;font-size:13px;color:var(--tx2);padding:6px 1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dp-d{height:44px;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--tx);cursor:pointer;-webkit-tap-highlight-color:transparent;}
.dp-d span{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;}
.dp-d.sel span{background:var(--ac);color:var(--ac-fg);font-weight:600;}
.dp-d.dim{color:var(--bd2);}
/* 年份格（點標題切換）：4 欄 5 列 = 20 年 */
.dp-ym{cursor:pointer;-webkit-tap-highlight-color:transparent;}
.dp-years .dp-grid{grid-template-columns:repeat(4,1fr);gap:6px;}
.dp-y{height:59px;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--tx);cursor:pointer;-webkit-tap-highlight-color:transparent;}
.dp-y span{padding:8px 0;width:100%;text-align:center;border-radius:10px;}
.dp-y.sel span{background:var(--ac);color:var(--ac-fg);font-weight:600;}
/* 月份格（2026-09-01 補件：JS 切 .dp-mons 但樣式當初漏了，月份全擠進 7 欄的日格裡）
   故事曆法可能 13、14 個月、名字也可能很長（宇宙之月／神恩日），3 欄自排、名字可換行，沿年份格的語彙 */
.dp-mons .dp-grid{grid-template-columns:repeat(3,1fr);gap:8px;}
.dp-mo{min-height:56px;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--tx);cursor:pointer;-webkit-tap-highlight-color:transparent;}
.dp-mo span{width:100%;padding:8px 6px;text-align:center;border-radius:10px;line-height:1.35;overflow-wrap:anywhere;}
.dp-mo.sel span{background:var(--ac);color:var(--ac-fg);font-weight:600;}
.dp-y:active span{background:var(--bg3);}
.dp-y.dim{color:var(--bd2);}
/* 年份格才出現的「直接跳某年」輸入列 */
.dp-jump{display:none;gap:8px;padding:0 12px 10px;}
.dp-years .dp-jump{display:flex;}
.dp-jump input{flex:1;min-width:0;font-size:16px;color:var(--tx);background:var(--bg3);border:1px solid var(--bd);border-radius:8px;padding:8px 12px;outline:none;font-family:inherit;}
.dp-jump input:focus{border-color:var(--ac);}
/* ── 時間挑選（tp-sheet；2026-09-01 阿奈定案：一般版點選錶盤、訂閱版保險箱轉環，滾輪退場）──
   共同原則：吃主題變數；主題色當線不當面（描邊、標記、指針）；主題色上一律 --ac-fg 白字。 */
.tp-body{padding:4px 0 20px;}
/* 一般版：點選錶盤 */
.tp-cd-time{display:flex;align-items:baseline;justify-content:center;gap:6px;margin:6px 0 2px;font-family:"Cormorant Garamond","Noto Serif TC","Songti TC",serif;font-variant-numeric:tabular-nums;}
.tp-cd-seg{font-size:44px;font-weight:600;color:var(--tx2);padding:0 6px;border-radius:10px;cursor:pointer;line-height:1.25;-webkit-tap-highlight-color:transparent;}
.tp-cd-seg.on{color:var(--tx);background:var(--bgi);}
.tp-cd-colon{font-size:40px;color:var(--tx2);transform:translateY(-2px);}
.tp-cd-wrap{display:flex;justify-content:center;padding:10px 0 12px;}
.tp-cd{position:relative;width:288px;height:288px;border-radius:50%;background:var(--bgi);touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;}
.tp-cd-num{position:absolute;width:36px;height:36px;margin:-18px 0 0 -18px;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:16px;color:var(--tx);font-variant-numeric:tabular-nums;pointer-events:none;}
.tp-cd-num.inner{font-size:13px;color:var(--tx2);}
.tp-cd-num.on{color:var(--ac-fg);font-weight:600;}
.tp-cd-hub{position:absolute;left:50%;top:50%;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--ac);}
.tp-cd-hand{position:absolute;left:50%;top:50%;width:2px;background:var(--ac);transform-origin:top center;pointer-events:none;}
.tp-cd-knob{position:absolute;left:50%;top:50%;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;background:var(--ac);pointer-events:none;}
.tp-cd-knob.dotless::after{content:'';position:absolute;inset:15px;border-radius:50%;background:var(--ac-fg);}
/* 訂閱版：保險箱轉環（讀數只在中央窗，面板不另放大字） */
.tp-rd-wrap{display:flex;justify-content:center;padding:14px 0 12px;}
.tp-rd{position:relative;width:312px;height:312px;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;}
.tp-rd-ring{position:absolute;border-radius:50%;will-change:transform;}
.tp-rd-ring.hr{inset:0;background:radial-gradient(circle,var(--bg2) 0 58%,var(--bgi) 58% 100%);box-shadow:inset 0 0 0 1px var(--bd2),0 6px 18px rgba(0,0,0,.14);}
.tp-rd-ring.mi{inset:62px;background:radial-gradient(circle,var(--bg2) 0 52%,var(--bg3) 52% 100%);box-shadow:inset 0 0 0 1px var(--bd2);}
.tp-rd-ring.snap{transition:transform .22s cubic-bezier(.2,.7,.3,1.1);}
.tp-rd-n{position:absolute;left:50%;top:50%;width:30px;height:30px;margin:-15px 0 0 -15px;display:flex;align-items:center;justify-content:center;font-family:"Cormorant Garamond","Noto Serif TC","Songti TC",serif;font-size:15px;color:var(--tx);font-variant-numeric:tabular-nums;pointer-events:none;}
.tp-rd-ring.mi .tp-rd-n{font-size:12px;color:var(--tx2);}
.tp-rd-tk{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);pointer-events:none;}
.tp-rd-tk circle{fill:none;stroke:var(--bd2);}
.tp-rd-idx{position:absolute;left:50%;top:-2px;transform:translateX(-50%);width:0;height:0;border:9px solid transparent;border-top:14px solid var(--ac);pointer-events:none;z-index:5;}
.tp-rd-hub{position:absolute;left:50%;top:50%;width:92px;height:92px;transform:translate(-50%,-50%);border-radius:50%;display:flex;align-items:center;justify-content:center;pointer-events:none;background:var(--bg2);box-shadow:inset 0 0 0 1px var(--ac),inset 0 0 0 4px var(--bg2),inset 0 0 0 5px color-mix(in srgb,var(--ac) 40%,transparent),0 2px 8px rgba(0,0,0,.12);}
.tp-rd-hv{font-family:"Cormorant Garamond","Noto Serif TC","Songti TC",serif;font-size:23px;font-weight:600;color:var(--tx);font-variant-numeric:tabular-nums;letter-spacing:.02em;}
/* 勾選抽屜的順序徽章（曆法主／副，點一下對調） */
.ck-badge{flex-shrink:0;font-size:13px;font-weight:600;color:var(--wb-sel);border:1px solid var(--wb-sel);border-radius:8px;padding:2px 8px;line-height:1.4;cursor:pointer;}
/* 場景板編輯框下的曆法對照行（故事曆法第 3 段） */
/* 置頂時鐘區塊（2026-09-01）：樣式承 docs/calendar-demo-4.html 的 .scene .date / .clock；日期、時鐘各自可點改 */
.sb-cal-head{display:flex;align-items:flex-start;gap:8px;padding:9px 6px 8px 14px;border-bottom:1px solid var(--bd);flex:none;}
.sb-cal-txt{flex:1;min-width:0;position:relative;}
.sb-cal-sync{width:40px;height:40px;flex:none;display:flex;align-items:center;justify-content:center;border:none;background:none;color:var(--tx2);border-radius:50%;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.sb-cal-sync:active{background:var(--bg3);}
.sb-cal-date{font-family:'Noto Serif TC',serif;font-weight:500;font-size:17px;line-height:1.45;color:var(--tx);overflow-wrap:anywhere;cursor:pointer;}
.sb-cal-date.sub{font-size:13px;font-weight:400;color:var(--tx2);margin-top:1px;}
.sb-cal-date.empty{font-family:inherit;font-weight:400;color:var(--tx2);}
.sb-cal-clock{font-family:'Noto Serif TC',serif;font-size:15px;color:var(--ach);letter-spacing:.08em;margin-top:1px;line-height:1.4;cursor:pointer;}
.sb-cal-clock:empty{display:none;}
/* 時鐘沒動的原因（追蹤器寫的推移／日期看不懂） */
.sb-clock-note{font-size:13px;color:var(--del);margin:6px 2px 0;line-height:1.5;}
/* 抽屜清單空狀態：標題一行、去哪裡新增一行；垂直置中在撐開的高度裡 */
.sheet-empty{min-height:34vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:16px;}
.sheet-empty-t{font-size:16px;color:var(--tx3);line-height:1.6;}
.sheet-empty-h{font-size:16px;color:var(--tx2);margin-top:6px;line-height:1.6;}