:root{
  --tg-bg:#F6F1FA; --tg-surface:#FFFFFF; --tg-line:#E4D8EE; --tg-text:#33263C;
  --tg-muted:#7A6B85; --tg-accent:#C0A0E0; --tg-accent2:#C0A0E0;
  --tg-on-accent:#2B1F35;
  --tg-font:"Zen Maru Gothic","Noto Sans TC",sans-serif; --tg-scale:1; --tg-radius:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--tg-bg);color:var(--tg-text);font-family:var(--tg-font);
  font-size:calc(16px * var(--tg-scale));line-height:1.7;min-height:100vh;
  padding-bottom:env(safe-area-inset-bottom);overflow-wrap:break-word}
button,input,textarea,select{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
/* 韓文照空格換行，不要把一個詞切成兩半；太長的英文網址之類還是可以斷（2026-10-15） */
html:lang(ko){word-break:keep-all;overflow-wrap:anywhere}
/* 只有一種粗細、本身就很粗的字型（宇文天穹）：不要讓瀏覽器再假裝加粗（2026-10-16） */
html.no-fake-bold{font-synthesis:style}
button{background:none;border:none;cursor:pointer}
:focus-visible{outline:2.5px solid var(--tg-accent);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.shell{max-width:900px;margin:0 auto;padding:0 16px 110px}
.topbar{position:sticky;top:0;z-index:40;background:var(--tg-bg);display:flex;align-items:center;
  gap:10px;padding:14px 16px;margin:0 -16px 4px;border-bottom:1px solid var(--tg-line)}
.brand{display:flex;align-items:center;gap:9px;font-weight:700;letter-spacing:.02em}
/* 左上角兔子和名字是「回首頁」按鈕（2026-10-27）：看起來跟以前一樣，只有游標變小手 */
button.brand{background:none;border:none;padding:0;margin:0;color:inherit;font:inherit;font-weight:700;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.brand .dot{width:48px;height:48px;flex:none;object-fit:contain;display:block;
  margin:-5px 0;transform:translateX(-2px)}
.spacer{flex:1}
/* 右上角、視窗✕、欄位旁的圖示按鈕：跟其他按鈕一樣沒有底色和外框，按下去才有淡淡的主題色（2026-10-14） */
.icon-btn{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:none;border:none;color:inherit;font-size:1.05em;
  line-height:1;padding:0;-webkit-tap-highlight-color:transparent;transition:background .12s ease}
.icon-btn>*,.iconbtn>*{display:block}

/* 按鈕：沒有外框，只有文字；周圍留著看不見的點擊範圍，手指好按 */
/* 文字用的主題色：主題色都是粉彩，直接當字太淡，所以混一些文字色，每個主題的對比都在 4.5 以上 */
:root{--tg-accent-text:color-mix(in srgb,var(--tg-accent) 35%,var(--tg-text));
  --tg-danger:color-mix(in srgb,#C2456F 70%,var(--tg-text))}
.pill,.ghost,.solid,.minibtn{position:relative;border:none;background:none;border-radius:10px;
  white-space:nowrap;-webkit-tap-highlight-color:transparent;transition:background .12s ease}
/* 按鈕文字太長、一行放不下時換行，不要衝出框框把整個畫面撐寬（2026-11-08，英文和日文的長按鈕在iPhone上會這樣）。
   分類標籤和標籤列是左右滑的，維持一行 */
.pill,.ghost,.solid{white-space:normal;overflow-wrap:anywhere;max-width:100%}
.sectiontabs .pill,.tagbar .pill{white-space:nowrap;max-width:none}
.pill{padding:8px 12px;color:color-mix(in srgb,var(--tg-muted) 65%,var(--tg-text));min-width:fit-content}
.pill.on,.pill[aria-pressed=true]{color:var(--tg-text);font-weight:700}
.ghost{padding:8px 12px;color:var(--tg-accent-text)}
.solid{padding:8px 12px;color:var(--tg-accent-text);font-weight:700}
.danger,.ghost.danger,.minibtn.danger{color:var(--tg-danger)}
/* 被選到的那一個：文字右上角一顆小愛心，離文字 1px，顏色就是主題色；不佔寬度，選了也不會讓按鈕變寬 */
.pill.on::after,.pill[aria-pressed=true]::after,.minibtn.active::after,.hpop::after{content:"❤︎";
  display:inline-block;width:0;margin-left:1px;font-size:.62em;font-weight:400;line-height:1;
  vertical-align:top;position:relative;top:-.15em;color:var(--tg-accent)}
/* 按下去時愛心輕輕跳一下 */
.hpop::after{animation:hpop .35s ease-out 1}
@keyframes hpop{0%{transform:translateY(0) scale(1)}45%{transform:translateY(-3px) scale(1.25)}100%{transform:translateY(0) scale(1)}}
.pill:active,.ghost:active,.solid:active,.minibtn:active,.icon-btn:active,.iconbtn:active{background:color-mix(in srgb,var(--tg-accent) 20%,transparent)}
@media (hover:hover) and (pointer:fine){
  .pill:hover,.ghost:hover,.solid:hover,.minibtn:hover,.icon-btn:hover,.iconbtn:hover{background:color-mix(in srgb,var(--tg-accent) 12%,transparent)}
}
.pill:disabled,.ghost:disabled,.solid:disabled,.minibtn:disabled{opacity:.45;cursor:default}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

input[type=text],input[type=password],textarea,select{width:100%;background:var(--tg-surface);
  border:1px solid var(--tg-line);border-radius:14px;padding:11px 14px;resize:vertical}
textarea{min-height:104px;line-height:1.75}
.field.tall textarea{aspect-ratio:5/3;height:auto;min-height:0;
  max-width:560px;resize:none;overflow-y:auto}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--tg-accent)}
label.fl{display:block;font-size:.86em;color:var(--tg-muted);margin:0 0 5px 4px}
.mono{font-variant-numeric:tabular-nums;letter-spacing:.02em}

.segbar{display:flex;gap:8px;margin:16px 0 4px}
.searchbar{display:flex;gap:8px;margin:12px 0}
.searchbar input{border-radius:999px}
.tagbar{display:flex;gap:7px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:none}
.tagbar::-webkit-scrollbar{display:none}
.tagbar .pill{font-size:.86em;padding:5px 10px}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.card{background:var(--tg-surface);border:1px solid var(--tg-line);border-radius:var(--tg-radius);
  padding:15px;text-align:left;display:flex;gap:12px;width:100%;position:relative;overflow:hidden;
  align-items:flex-start}
.card:hover{border-color:var(--tg-accent)}
.card.picked{border-color:var(--tg-accent);
  background:color-mix(in srgb,var(--tg-accent) 12%,var(--tg-surface))}
.card .tick{float:right;color:var(--tg-accent);font-weight:700}
.card::before{content:"";position:absolute;inset:0 auto 0 0;width:5px;
  background:linear-gradient(180deg,var(--tg-accent),var(--tg-accent2))}
.card .body{flex:1;min-width:0;padding-left:4px}
.card h3{font-size:1.02em;margin-bottom:2px}
.card p{font-size:.86em;color:var(--tg-muted);display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.card .meta{font-size:.75em;color:var(--tg-muted);margin-top:8px;display:block}
.thumb{width:46px;height:46px;border-radius:50%;flex:none;object-fit:cover;
  background:linear-gradient(140deg,var(--tg-accent),var(--tg-accent2));
  display:grid;place-items:center;color:var(--tg-on-accent);font-weight:700;font-size:1.05em;overflow:hidden}
.thumb img{width:100%;height:100%;object-fit:cover}
.empty{border:2px dashed var(--tg-line);border-radius:var(--tg-radius);padding:44px 22px;
  text-align:center;color:var(--tg-muted)}
.empty strong{display:block;color:var(--tg-text);margin-bottom:6px;font-size:1.05em}

.sectiontabs{display:flex;gap:7px;overflow-x:auto;padding:10px 0;scrollbar-width:none;
  position:sticky;top:66px;background:var(--tg-bg);z-index:30}
.sectiontabs::-webkit-scrollbar{display:none}
.sectiontabs .pill{font-size:.88em;padding:6px 10px}
.field{margin-bottom:18px}
.pair{display:flex;gap:10px}
.pair>.field{flex:1;min-width:0}
.trio .fieldhead{flex-wrap:wrap}
@media (max-width:520px){.trio .fieldhead label.fl{flex:1 0 100%}}
.fieldhead{display:flex;align-items:center;gap:5px;margin-bottom:5px}
.fieldhead label.fl{margin:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.minibtn{font-size:.75em;padding:4px 8px;color:var(--tg-accent-text)}
.minibtn.active{color:var(--tg-text);font-weight:700}
.iconbtn{position:relative;width:28px;height:28px;padding:0;display:inline-grid;place-items:center;flex:none;
  border-radius:50%;border:none;background:none;-webkit-tap-highlight-color:transparent;transition:background .12s ease;
  color:var(--tg-muted);font-size:.82em;line-height:1;text-align:center}
.iconbtn:hover{color:var(--tg-accent-text)}
/* 打開中（例如想法筆記）：圖示變主題色，右上角一顆小愛心，和其他被選到的按鈕一樣 */
.iconbtn.active{color:var(--tg-accent-text)}
.iconbtn.active::after{content:"❤︎";position:absolute;top:0;right:0;font-size:.62em;line-height:1;color:var(--tg-accent)}
.notebox{margin-top:7px;max-width:560px;background:color-mix(in srgb,var(--tg-accent) 9%,transparent);
  border:1px dashed var(--tg-line);border-radius:14px;padding:10px 12px}
.notebox textarea,.field.tall .notebox textarea{background:transparent;border:none;padding:0;
  aspect-ratio:5/1;height:auto;min-height:96px;max-width:100%;resize:none;overflow-y:auto}
.notebox .cap{font-size:.75em;color:var(--tg-muted);margin-bottom:4px}
.counter{font-size:.74em;color:var(--tg-muted);text-align:right;margin-top:3px}
/* 角色的token估算（2026-10-16）：編輯畫面上方一行，點了展開明細；匯出頁直接顯示明細 */
.toklink{display:inline-flex;align-items:center;gap:6px;font-size:.82em;color:var(--tg-accent-text);
  padding:2px 0;margin:0 0 10px;text-align:left}
.toklink .car{font-size:.8em}
.tokbox{background:var(--tg-surface);border:1px solid var(--tg-line);border-radius:12px;
  padding:10px 14px;margin:0 0 14px;font-size:.86em}
.tokrow{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:2px 0}
.toknum{flex:none;font-variant-numeric:tabular-nums;white-space:nowrap}
.tokrow.tokall{border-top:1px dashed var(--tg-line);margin-top:4px;padding-top:6px;font-weight:700}
.tokall+.tokmore{margin-top:6px}
.tokrow.tokmore{color:var(--tg-muted)}
.tokbox .hint{margin-top:8px}
/* 刪除保護（2026-10-16）：按住刪除鍵時，字後面從左到右慢慢填滿（不用::after，那是按鈕的小愛心）；
   小東西按第一下變成紅字粗體的「再按一下確定」 */
.holdbtn{position:relative;isolation:isolate;overflow:hidden;border-radius:10px;touch-action:none;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.holdbtn::before{content:"";position:absolute;inset:0;z-index:-1;transform-origin:left center;
  transform:scaleX(var(--p,0));background:color-mix(in srgb,var(--tg-danger) 24%,transparent)}
.armed{color:var(--tg-danger)!important;font-weight:700}
.srsay{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* 開場圖（2026-10-16）：按住拖曳換順序；拖的時候原位置變淡，手上拿著一張小圖 */
.opimg,.bgimg{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
/* 手指按到的是按鈕不是圖，Android長按才不會當成「長按圖片」把拖曳取消（2026-10-27） */
.opimg img,.bgimg img{pointer-events:none;-webkit-user-drag:none}
.opimg.dragging,.bgimg.dragging{opacity:.3}
/* 開場圖放在段落之間（2026-10-27）：縮圖下面一行小字顯示位置，透明的下拉選單蓋在上面，點了就是系統的選單 */
.opimgs{align-items:start}
.opimg>.photo{display:block;width:100%}
.oppos{position:relative;display:block;margin-top:4px;padding:3px 2px;border-radius:10px;font-size:.72em;text-align:center;
  color:var(--tg-accent-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oppos span::after{content:" ▾"}
.oppos select{position:absolute;inset:0;width:100%;height:100%;padding:0;opacity:0;cursor:pointer;font-size:16px}
.oppos:focus-within{outline:2px solid var(--tg-accent);outline-offset:1px}
/* 預覽框：文字照段落排，圖放在選好的位置 */
.opprev{margin-top:10px;background:var(--tg-surface);border:1px solid var(--tg-line);border-radius:16px;padding:12px 14px;line-height:1.75}
.opprev p{margin:0 0 10px;white-space:pre-wrap;overflow-wrap:anywhere}
.opprev img{display:block;max-width:min(100%,320px);height:auto;border-radius:12px;margin:2px 0 12px}
/* App背景圖輪播（2026-10-17）：畫面最底下兩層固定的圖層，上面那層淡入；減少動態效果時上面的全域規則會關掉淡入 */
.bglayer{position:fixed;inset:0;z-index:-2;background:center/cover no-repeat;opacity:0;transition:opacity 1s ease;pointer-events:none}
.bglayer.top{z-index:-1}
.bglayer.on{opacity:1}
.dragghost{position:fixed;left:0;top:0;z-index:999;pointer-events:none;opacity:.9;margin:0;box-shadow:0 6px 18px rgba(0,0,0,.25);transform-origin:center}

.avatarrow{display:flex;align-items:center;gap:14px;margin:6px 0 22px}
.avatar{width:82px;height:82px;border-radius:50%;flex:none;overflow:hidden;
  border:2px solid var(--tg-line);display:grid;place-items:center;
  background:linear-gradient(140deg,var(--tg-accent),var(--tg-accent2));color:var(--tg-on-accent);
  font-size:1.6em;font-weight:700}
.avatar img{width:100%;height:100%;object-fit:cover}
.photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:9px;margin-top:9px}
.photo{aspect-ratio:1;border-radius:14px;overflow:hidden;border:1px solid var(--tg-line);
  position:relative;background:var(--tg-surface)}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.photo.add{display:grid;place-items:center;color:var(--tg-muted);border-style:dashed;font-size:1.5em}
.photo .sz{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.58);color:#fff;
  font-size:.62em;text-align:center;padding:1px 0}
/* 背景圖縮圖照真的形狀放在格子裡（2026-10-20 你選B）：直的看起來直、橫的看起來橫，下面留位置給形狀小字 */
.bgimg img{object-fit:contain;padding:6px 6px 18px}
.photo .play{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.photo .play i{width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,.5);
  display:grid;place-items:center;box-shadow:0 1px 6px rgba(0,0,0,.35)}
.photo .play i::before{content:"";border-left:9px solid #fff;border-top:6px solid transparent;
  border-bottom:6px solid transparent;margin-left:3px}

.scrim{position:fixed;inset:0;background:rgba(40,26,52,.42);z-index:160;display:none}
.scrim.open{display:block;animation:scrimin .2s ease}
/* 彈出視窗外面再包一層不會捲動的框（2026-11-13）：紙膠帶貼在這層，才能跨到視窗上緣外面不被切掉 */
.sheetbox{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:min(560px,100%);z-index:170;pointer-events:none}
.sheet{position:relative;pointer-events:auto;
  max-height:88vh;overflow-y:auto;background:var(--tg-bg);border-radius:26px 26px 0 0;
  display:none;padding:22px 20px calc(28px + env(safe-area-inset-bottom));
  border:1px solid var(--tg-line);border-bottom:none}
/* 打開時從下面輕輕滑上來（系統設定「減少動態效果」時不動，見最上面） */
.sheet.open{display:block;animation:sheetin .24s cubic-bezier(.2,.8,.3,1)}
@keyframes sheetin{from{transform:translateY(36px);opacity:0}to{transform:none;opacity:1}}
@keyframes scrimin{from{opacity:0}to{opacity:1}}
.sheethead{display:flex;align-items:center;margin-bottom:16px}
.sheethead h2{font-size:1.32em;flex:1}
/* 彈出視窗的標題列：往下捲時固定在頂端，✕一直按得到；捲動過才出現分隔線（2026-10-15） */
.sheet>.sheethead{position:sticky;top:-22px;z-index:3;background:var(--tg-bg);
  margin:-22px -20px 16px;padding:22px 20px 8px;border-bottom:1px solid transparent;transition:border-color .15s}
.sheet.scrolled>.sheethead{border-bottom-color:var(--tg-line)}
/* 彈出視窗底部的按鈕列：主要按鈕在前、取消在後；視窗很長時固定在底部，下面還有內容時才出現分隔線 */
.sheetbtns{display:flex;gap:8px;flex-wrap:wrap;align-items:center;position:sticky;z-index:3;
  bottom:calc(-28px - env(safe-area-inset-bottom));background:var(--tg-bg);
  margin:18px -20px calc(-28px - env(safe-area-inset-bottom));
  padding:10px 20px calc(18px + env(safe-area-inset-bottom));border-top:1px solid transparent;transition:border-color .15s}
.sheet.more .sheetbtns{border-top-color:var(--tg-line)}
/* 確認視窗：疊在彈出視窗上面，取消時下面的視窗還在 */
#cscrim{z-index:180}
#confirmbox{z-index:190}
#confirm .sheethead h2{font-size:1.12em;line-height:1.55}
#confirm .sub{margin:-4px 0 4px}
.sub{font-size:.85em;color:var(--tg-muted);margin:-8px 0 12px}
.grouplabel{font-size:.9em;color:var(--tg-muted);margin:20px 0 9px}

.swatches{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px 6px}
.sw span{max-width:100%;overflow-wrap:anywhere}
.sw{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:.72em;color:var(--tg-muted)}
.sw i{width:42px;height:42px;border-radius:50%;display:block;
  box-shadow:inset 0 -5px 9px rgba(255,255,255,.42),0 1px 3px rgba(0,0,0,.09)}
.sw[aria-pressed=true] i{box-shadow:0 0 0 3px var(--tg-bg),0 0 0 5.5px var(--tg-text)}
.sw[aria-pressed=true]{color:var(--tg-text);font-weight:600}
.fontgrid{display:flex;flex-wrap:wrap;gap:8px}
/* 字型頁：名字用那個字型顯示，下面一排小標籤寫它有哪些語言的字（2026-10-15） */
.fontbtn{display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px;white-space:normal;text-align:left}
.ftags{display:flex;flex-wrap:wrap;gap:4px;font-size:.66em;font-weight:400;color:var(--tg-muted);line-height:1.3}
.ftag{white-space:nowrap}
.fontbtn.on::after{position:absolute;top:6px;right:4px}

/* 模型挑選器：所有平台長得一樣，不用系統原生的下拉 */
.mfilter{border-radius:999px!important;margin-bottom:9px}
.mlist{display:flex;flex-direction:column;gap:7px;max-height:290px;overflow-y:auto;
  padding:9px;border-radius:20px;
  background:var(--tg-surface);
  background:linear-gradient(155deg,
    color-mix(in srgb,var(--tg-accent) 20%,transparent),
    color-mix(in srgb,var(--tg-accent2) 20%,transparent));
  border:1px solid var(--tg-line);
  border-color:color-mix(in srgb,var(--tg-accent) 34%,transparent);
  -webkit-backdrop-filter:blur(12px) saturate(1.3);backdrop-filter:blur(12px) saturate(1.3)}
/* 捲軸兩端不要有箭頭（2026-10-16）：Chrome只要設了scrollbar-width或scrollbar-color，就改用系統捲軸、兩端出現箭頭，
   所以這兩個只給沒有::-webkit-scrollbar的瀏覽器（Firefox）用，其他瀏覽器用下面的樣式並藏起箭頭 */
@supports not selector(::-webkit-scrollbar){
  .mlist{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--tg-accent) 55%,transparent) transparent}
}
.mlist::-webkit-scrollbar-button{display:none}
.mlist::-webkit-scrollbar{width:7px}
.mlist::-webkit-scrollbar-track{background:transparent}
.mlist::-webkit-scrollbar-thumb{border-radius:99px;
  background:color-mix(in srgb,var(--tg-accent) 55%,transparent)}
.helplist{display:flex;flex-direction:column;gap:10px;margin-bottom:4px}
.helprow{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:0 10px;align-items:baseline;font-size:.88em;line-height:1.55}
.helprow .hl{display:flex;align-items:center;gap:4px;white-space:nowrap}
.helprow .hl svg{flex:none}
.helprow>span:last-child{overflow-wrap:anywhere}
.helptips{display:flex;flex-direction:column;gap:8px;margin-bottom:4px}
.helptips div{font-size:.88em;line-height:1.6;display:block}
.helptips svg{display:inline;vertical-align:text-bottom}
.tasklist{display:flex;flex-direction:column;gap:8px;margin-bottom:4px}
.taskcard{display:flex;flex-direction:column;gap:3px;text-align:left;padding:11px 14px;
  border-radius:14px;border:1px solid var(--tg-line);background:var(--tg-surface);
  position:relative;overflow:hidden;-webkit-tap-highlight-color:transparent;
  transition:transform .1s ease}
.taskcard strong{font-size:.95em;font-weight:600;color:var(--tg-text)}
.taskcard span{font-size:.78em;color:var(--tg-muted);line-height:1.45}
.taskcard.on{background:linear-gradient(118deg,var(--tg-accent),var(--tg-accent2));border-color:transparent}
.taskcard.on strong,.taskcard.on span{color:var(--tg-on-accent)}
.taskcard:active{transform:scale(.98)}
.taskcard::after{content:'';position:absolute;inset:0;opacity:0;border-radius:inherit;
  background:linear-gradient(120deg,color-mix(in srgb,var(--tg-accent) 50%,transparent),
  color-mix(in srgb,var(--tg-accent2) 46%,transparent));
  transition:opacity .05s ease;pointer-events:none}
.taskcard:active::after{opacity:1}
.mrow{display:flex;align-items:center;gap:9px;width:100%;text-align:left;
  padding:11px 13px;border-radius:15px;color:var(--tg-text);
  background:color-mix(in srgb,var(--tg-surface) 66%,transparent);
  border:1px solid transparent;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6);
  transition:transform .12s ease,box-shadow .18s ease,background .18s ease}
.mrow:hover{background:color-mix(in srgb,var(--tg-surface) 88%,transparent);
  border-color:color-mix(in srgb,var(--tg-accent) 45%,transparent)}
.mrow:active{transform:scale(.985)}
.mrow.on{color:var(--tg-on-accent);border-color:transparent;font-weight:600;
  background:linear-gradient(118deg,var(--tg-accent),var(--tg-accent2));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),
             0 4px 14px color-mix(in srgb,var(--tg-accent) 45%,transparent)}
.mrow .mid{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:.92em;letter-spacing:.01em}
.mrow .mright{flex:none;width:88px;display:flex;flex-direction:column;
  align-items:center;gap:3px}
.mrow .mtag{font-size:.68em;padding:2px 8px;border-radius:999px;
  background:color-mix(in srgb,var(--tg-accent) 26%,transparent);
  color:var(--tg-muted);box-shadow:inset 0 1px 0 rgba(255,255,255,.5);white-space:nowrap}
.mrow.on .mtag{background:rgba(255,255,255,.52);color:var(--tg-on-accent)}
.dd-wrap{position:relative;flex:1}
.dd-btn{width:100%;padding:9px 12px;border:1px solid var(--tg-line);border-radius:12px;
  font-size:.9em;background:var(--tg-surface);color:var(--tg-text);cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  -webkit-tap-highlight-color:transparent;transition:border-color .12s}
.dd-btn:hover{border-color:var(--tg-accent)}
.dd-btn .ddarr{font-size:.7em;color:var(--tg-muted);transition:transform .15s;flex:none}
.dd-btn.open .ddarr{transform:rotate(180deg)}
.dd-list{display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;
  background:var(--tg-surface);border:1px solid var(--tg-line);border-radius:12px;
  overflow:hidden;z-index:50;box-shadow:0 4px 16px rgba(0,0,0,.1)}
.dd-list.show{display:block}
.dd-item{padding:9px 14px;font-size:.9em;cursor:pointer;color:var(--tg-text);
  display:flex;align-items:center;justify-content:space-between;
  transition:background .1s;-webkit-tap-highlight-color:transparent}
.dd-item:hover{background:color-mix(in srgb,var(--tg-surface) 60%,var(--tg-accent))}
.dd-item .ddchk{opacity:0;flex:none}
.dd-item.selected .ddchk{opacity:1}
.mrow .mtick{flex:none;display:grid;place-items:center;width:18px;height:18px;opacity:0}
.mrow.on .mtick{opacity:1}
.mempty{padding:16px 6px;text-align:center;font-size:.85em;color:var(--tg-muted)}
/* AI模型照系列分組（2026-10-22 你選C）：一個系列一張卡，第一行左邊是系列名稱、右邊是版本（中線對齊），下面一行是一句介紹；
   點右邊在卡片裡往下展開所有版本（放在會捲動的地方也不會被切掉）；用的那張外框是主題色，標興奮的兔兔 */
.famlist{display:flex;flex-direction:column;gap:8px}
.famcard{display:grid;grid-template-columns:max-content minmax(0,1fr);grid-template-areas:"name ver" "desc desc";
  align-items:center;gap:4px 10px;
  /* 字到卡片四邊的距離一樣，都是14（2026-10-22 你說的）：上面少一點，因為第一行的高度是版本按鈕撐開的；
     下面少一點，因為介紹那行的行高上下各多留了一點 */
  padding:9.5px 14px 10.6px;border-radius:15px;border:1px dashed var(--tg-line);background:var(--tg-surface)}
.famcard.on{border-color:var(--tg-accent);background:color-mix(in srgb,var(--tg-accent) 12%,var(--tg-surface))}
.famhead{grid-area:name;display:flex;align-items:center;text-align:left;background:none;border:none;padding:0;color:var(--tg-text);min-width:0}
.famname{display:flex;align-items:center;gap:6px;font-weight:600;line-height:1.2}
.famdef{display:inline-flex;color:var(--tg-accent-text)}
.famdesc{grid-area:desc;font-size:.8em;color:var(--tg-muted);line-height:1.45;cursor:pointer}
.famver{grid-area:ver;justify-self:end;display:flex;align-items:center;gap:6px;max-width:100%;min-width:0;padding:3px 10px;line-height:1.2;border-radius:999px;
  border:1px solid var(--tg-line);background:var(--tg-surface);color:var(--tg-text);font-size:.82em}
.famver .mono{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.famver .ddarr{font-size:.7em;color:var(--tg-muted);flex:none}
.famver[aria-expanded=true] .ddarr{transform:rotate(180deg)}
.famvers{grid-column:1/-1;display:flex;flex-direction:column;gap:2px;max-height:240px;overflow-y:auto;
  border-top:1px solid var(--tg-line);padding-top:6px}
.famvers .dd-item{border:none;background:none;width:100%;text-align:left;border-radius:10px;gap:8px}
.famvers .dd-item.selected{background:color-mix(in srgb,var(--tg-accent) 18%,transparent);font-weight:600}
.famdate{font-size:.75em;color:var(--tg-muted);flex:none}
/* 本機模型的國家標籤（2026-10-22）：一般國家灰色；美國公布的外國對手名單上的國家用刪除按鈕那個紅；認不出來的虛線框 */
.famctry{font-size:.68em;font-weight:400;line-height:1.5;padding:0 8px;border-radius:999px;border:1px solid var(--tg-line);color:var(--tg-muted);white-space:nowrap}
.famctry.risk{border-color:transparent;background:color-mix(in srgb,var(--tg-danger) 16%,transparent);color:var(--tg-danger)}
.famctry.unk{border-style:dashed}
/* 「你的電腦」：瀏覽器看得到的大概規格，建議那行用主題色底 */
.specbox{border:1px solid var(--tg-line);border-radius:14px;padding:10px 14px;font-size:.88em;line-height:1.8;background:var(--tg-surface)}
.specsug{margin:6px 0 2px;padding:4px 10px;border-radius:10px;background:color-mix(in srgb,var(--tg-accent) 14%,transparent);color:var(--tg-accent-text)}
.specbox .hint{line-height:1.6}
/* 記憶體和模型大小的對照，瀏覽器看到的那一行用主題色 */
.spectable{margin:6px 0 2px;display:grid;gap:2px}
/* 指令這類不能從中間斷行的字 */
.nobr{white-space:nowrap}
.spectable div{display:flex;gap:10px;padding:2px 10px;border-radius:8px}
.spectable div span:first-child{min-width:6.5em;color:var(--tg-muted)}
.spectable div.on{background:color-mix(in srgb,var(--tg-accent) 10%,transparent)}
/* 說明頁的安裝步驟：有編號 */
.helpsteps{margin:6px 0 2px;padding-left:1.4em}
.helpsteps li{margin:4px 0}

#notice{position:fixed;left:50%;transform:translateX(-50%);z-index:120;
  bottom:calc(16px + env(safe-area-inset-bottom));width:min(560px,calc(100% - 24px));
  background:var(--tg-surface);border:1px solid var(--tg-line);border-radius:20px;
  padding:14px 16px;box-shadow:0 8px 26px rgba(60,30,80,.18);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
#notice p{font-size:.84em;color:var(--tg-muted);line-height:1.7;margin-bottom:10px}
#notice .row{gap:7px}
#notice .row button{font-size:.84em;padding:6px 14px}
body.has-notice .fab{bottom:calc(104px + env(safe-area-inset-bottom))}
.legal{font-size:.88em;line-height:1.85}
.legal h3{font-size:1em;margin:18px 0 6px}
.legal p{margin-bottom:9px;color:var(--tg-muted)}
.legal ul{margin:0 0 9px 18px;color:var(--tg-muted)}
.legal li{margin-bottom:4px}
.legal b{color:var(--tg-text)}

/* 其餘原生下拉也統一外觀 */
select{appearance:none;-webkit-appearance:none;padding-right:38px;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
    linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 19px) calc(50% + 1px),calc(100% - 14px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:26px;z-index:220;
  background:var(--tg-text);color:var(--tg-bg);padding:11px 22px;border-radius:999px;
  font-size:.9em;opacity:0;pointer-events:none;transition:opacity .2s;max-width:88vw;text-align:center}
.toast.show{opacity:1}
.locked{border:1px solid var(--tg-line);border-radius:14px;padding:12px 14px;font-size:.86em;
  color:var(--tg-muted);background:var(--tg-surface)}
.copyblock{background:var(--tg-surface);border:1px solid var(--tg-line);border-radius:16px;
  padding:13px 14px;margin-bottom:10px}
.copyblock .ch{display:flex;align-items:center;gap:8px;margin-bottom:5px;flex-wrap:wrap}
.copyblock .ch strong{flex:1;font-size:.9em;min-width:0}
.copyblock pre{white-space:pre-wrap;word-break:break-word;font-family:inherit;font-size:.87em;
  color:var(--tg-muted)}
.fab{position:fixed;right:max(18px,calc(50vw - 434px));
  bottom:calc(22px + env(safe-area-inset-bottom));z-index:50;border-radius:999px;padding:14px 24px;
  font-weight:700;color:var(--tg-on-accent);background:linear-gradient(120deg,var(--tg-accent),var(--tg-accent2))}
.hint{font-size:.82em;color:var(--tg-muted);margin-top:8px;line-height:1.6}
hr.sep{border:none;border-top:1px solid var(--tg-line);margin:22px 0}
#splash{position:fixed;inset:0;z-index:200;background:var(--tg-bg);display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:20px;
  transition:opacity .45s ease}
#splash.gone{opacity:0;pointer-events:none}
#splash img{width:min(82vw,380px);height:auto;
  animation:sf-float 3.4s ease-in-out infinite}
@keyframes sf-float{0%,100%{transform:translateX(-5px) translateY(0)}50%{transform:translateX(-5px) translateY(-9px)}}
#splash .heart{width:46px;height:46px;color:var(--tg-accent);
  animation:sf-beat 1.5s ease-in-out infinite}
@keyframes sf-beat{
  0%{transform:scale(1)}   9%{transform:scale(1.26)}  18%{transform:scale(1)}
  27%{transform:scale(1.16)} 40%{transform:scale(1)} 100%{transform:scale(1)}}
#splash .load{font-size:.84em;color:var(--tg-muted);letter-spacing:.06em}
@media (prefers-reduced-motion:reduce){#splash img,#splash .heart{animation:none}}

.reltype{background:var(--tg-surface);border:1px solid var(--tg-line);border-radius:16px;
  padding:0 14px;margin-bottom:9px;overflow:hidden}
.reltype .rh{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:12px 0}
.reltype .rh strong{flex:1;font-size:.94em}
.reltype .rh .cnt{font-size:.78em;color:var(--tg-muted);
  border:1px solid var(--tg-line);border-radius:999px;padding:1px 9px}
.reltype .rh .car{color:var(--tg-muted);font-size:.8em}
.relbody{padding-bottom:12px}
.relmember{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px dashed var(--tg-line)}
.relmember .thumb{width:34px;height:34px;font-size:.85em}
.relmember .rn{flex:1;min-width:0;font-size:.9em}
.relmember .rn small{display:block;color:var(--tg-muted);font-size:.82em}
.cmdtrig{font-weight:700;color:var(--tg-accent)}
.bar{height:8px;border-radius:999px;background:var(--tg-line);overflow:hidden;margin:8px 0 4px}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--tg-accent),var(--tg-accent2))}
/* 名字放得下就一行，螢幕太窄時斷成兩行（軟糖／工廠），所有裝置都一樣 */
.brand{flex-shrink:100}
#brandName{display:flex;flex-wrap:wrap;line-height:1.15}
#brandName span{white-space:nowrap}
@media (max-width:400px){.topbar{gap:6px}.topbar .icon-btn{width:34px;height:34px}}
/* 通知小心心：照軟糖抱抱的樣子，放在名字右邊，沒有外框；平常是主題色，有新版本或新訊息時變粉紅色並閃動 */
.update-heart{width:36px;height:36px;display:grid;place-items:center;padding:0;border:none;border-radius:999px;
  background:transparent;color:color-mix(in oklab,var(--tg-accent) 70%,var(--tg-text));flex-shrink:0;position:relative;cursor:pointer}
.update-heart-icon{width:17px;height:17px;display:block}
.update-heart-on{color:#ff4f8a;animation:heart-blink .8s ease-in-out infinite}
.update-heart-on .update-heart-icon{width:19px;height:19px;filter:drop-shadow(0 0 5px #ff7eb3) drop-shadow(0 0 12px #ff4f8a)}
@keyframes heart-blink{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.28);opacity:.35}}
@media (prefers-reduced-motion:reduce){.update-heart-on{animation:heart-blink .8s ease-in-out infinite!important}}
/* 置頂公告：左上角放同一顆心，不閃；還沒讀是實心，讀過是空心。心是字的一半大，上、左、右的間距都是字的四分之一 */
.pinbar{position:relative;margin:6px 0 2px;padding:5px 8px 5px 1em;border-radius:10px;font-size:.88em;line-height:1.55;
  background:color-mix(in srgb,var(--tg-accent) 22%,var(--tg-surface));border:1px solid var(--tg-line)}
.pin-heart{position:absolute;left:.25em;top:.25em;width:.5em;height:.5em;color:color-mix(in oklab,var(--tg-accent) 70%,var(--tg-text))}
.pin-heart path{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linejoin:round}
.pin-heart.unread path{fill:currentColor;stroke-width:1.2}
/* 通知頁的標題 */
.inboxhead{font-size:1.32em;margin:10px 0 12px}
/* 使用說明頁：每一段是可以點開收合的卡片，按鈕圖示放在說明的最前面 */
.helpsec{background:var(--tg-surface);border:1px solid var(--tg-line);border-radius:14px;margin:0 0 10px;padding:0 14px}
.helpsec>summary{padding:12px 0;font-weight:700;cursor:pointer;list-style-position:inside}
.helpsec[open]>summary{border-bottom:1px solid var(--tg-line);margin-bottom:6px}
.helpbody{padding:0 0 10px;font-size:.94em;line-height:1.65}
.helpbody p{margin:6px 0}
.helpitems{margin:4px 0 6px;padding-left:1.2em}
.helpitems li{margin:5px 0}
.help-ic{display:inline-flex;vertical-align:-3px;margin-right:3px;color:var(--tg-accent-text)}
/* 還沒解鎖的分頁旁邊的兔子鎖（2026-10-16） */
.lockic{display:inline-flex;vertical-align:-2px;margin-left:3px}
.help-heart{vertical-align:-2px;margin-right:3px;color:color-mix(in oklab,var(--tg-accent) 70%,var(--tg-text))}
/* 還沒備份的提醒條：細細一條，不擋住列表 */
.bkbar{display:flex;align-items:center;gap:8px;margin:0 0 12px;padding:6px 8px 6px 12px;
  border:1px solid var(--tg-line);border-left:4px solid var(--tg-accent);border-radius:10px;
  background:var(--tg-surface);font-size:.85em;color:var(--tg-muted)}
.bkbar span{flex:1;min-width:0}
.bkbar .iconbtn{width:24px;height:24px;font-size:.75em}
.wcard{background:var(--tg-surface);border:1px solid var(--tg-line);border-radius:var(--tg-radius);
  overflow:hidden;text-align:left;display:flex;flex-direction:column;width:100%;padding:0;position:relative}
.wcard .wb::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;
  background:linear-gradient(180deg,var(--tg-accent),var(--tg-accent2))}
.wcard:hover{border-color:var(--tg-accent)}
.wcard .tags{display:block;font-size:.78em;color:var(--tg-muted);margin-bottom:3px}
.wcard .ban{aspect-ratio:16/9;width:100%;display:grid;place-items:center;font-size:2.2em;color:var(--tg-on-accent);
  background:linear-gradient(160deg,var(--tg-accent),var(--tg-accent2))}
.wcard .ban img{width:100%;height:100%;object-fit:cover;display:block}
.wcard .wb{display:block;padding:14px 16px}
.wcard h3{font-size:1.02em;margin-bottom:2px}
.wcard p{font-size:.86em;color:var(--tg-muted);display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden}
.wcard .meta{font-size:.75em;color:var(--tg-muted);margin-top:8px;display:block}
.bannerrow{display:flex;align-items:center;gap:14px;margin:6px 0 20px}
.bannerbox{width:150px;aspect-ratio:16/9;border-radius:14px;overflow:hidden;flex:none;
  border:2px solid var(--tg-line);display:grid;place-items:center;color:var(--tg-on-accent);font-size:1.5em;
  background:linear-gradient(160deg,var(--tg-accent),var(--tg-accent2))}
.bannerbox img{width:100%;height:100%;object-fit:cover}
.cropwrap{position:relative;width:100%;overflow:hidden;border-radius:16px;
  background:color-mix(in srgb,var(--tg-text) 10%,transparent);touch-action:none;cursor:grab}
.cropwrap.drag{cursor:grabbing}
.cropwrap img{position:absolute;top:0;left:0;transform-origin:0 0;
  user-select:none;-webkit-user-drag:none;pointer-events:none}
.cropmask{position:absolute;inset:0;pointer-events:none}
.cropmask.circle::after{content:"";position:absolute;inset:0;border-radius:50%;
  box-shadow:0 0 0 2px rgba(255,255,255,.85),0 0 0 9999px rgba(28,18,38,.42)}
.cropmask.rect::after{content:"";position:absolute;inset:0;border-radius:16px;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.85)}
input[type=range]{width:100%;accent-color:var(--tg-accent)}

.tagpool{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 10px;padding:4px 0}
.tagpool:empty{display:none}
.tagpool-pill{font-size:.78em;padding:4px 12px;opacity:.75}
.tagpool-pill:hover,.tagpool-pill:active{opacity:1}

/* capitalization modes — only affects UI, not inputs/content */
body.en-caps *:not(input):not(textarea):not(pre):not(select):not(code){text-transform:uppercase}
body.en-lower *:not(input):not(textarea):not(pre):not(select):not(code){text-transform:lowercase}

/* 橫向捲動列（分類、標籤）：有滑鼠的裝置顯示細捲軸和左右箭頭按鈕
   （2026-10-16）捲軸兩端不要箭頭；左右按鈕跟其他按鈕一樣只有字，後面淡淡漸層蓋住捲過去的分類 */
.scrl{display:none}
@media (hover:hover) and (pointer:fine){
  .sectiontabs,.tagbar{scrollbar-width:auto}
  @supports not selector(::-webkit-scrollbar){
    .sectiontabs,.tagbar{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--tg-accent) 55%,transparent) transparent}
  }
  .sectiontabs::-webkit-scrollbar,.tagbar::-webkit-scrollbar{display:block;height:6px}
  .sectiontabs::-webkit-scrollbar-button,.tagbar::-webkit-scrollbar-button{display:none}
  .sectiontabs::-webkit-scrollbar-track,.tagbar::-webkit-scrollbar-track{background:transparent}
  .sectiontabs::-webkit-scrollbar-thumb,.tagbar::-webkit-scrollbar-thumb{border-radius:99px;
    background:color-mix(in srgb,var(--tg-accent) 55%,transparent)}
  .sectiontabs.grab,.tagbar.grab{cursor:grabbing;user-select:none}
  .scrl{position:sticky;z-index:2;flex:none;width:34px;align-self:stretch;border:none;
    background:linear-gradient(to right,transparent,var(--tg-bg) 45%);color:var(--tg-accent-text);
    font-size:1.35em;line-height:1;padding-bottom:3px}
  .scrl:hover{color:var(--tg-accent)}
  .scrl.l{left:0;order:-1;background:linear-gradient(to left,transparent,var(--tg-bg) 45%)}
  .scrl.r{right:0;order:99}
  .over>.scrl{display:grid;place-items:center;visibility:hidden}
  .more-l>.scrl.l,.more-r>.scrl.r{visibility:visible}
}
/* 直式裁切框不要比畫面高 */
.cropwrap.tallcrop{margin:0 auto}
/* iPhone、iPad 上輸入框字小於 16px 會自動放大畫面，所以觸控裝置至少 16px */
@media (pointer:coarse){
  input[type=text],input[type=password],input:not([type]),textarea,select{font-size:max(16px,1em)}
  .minibtn{padding:7px 9px}
}
/* 開在 Threads、Instagram 等 app 內建瀏覽器時的提醒 */
.inapp{position:relative;z-index:60;display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  padding:10px 16px;background:color-mix(in srgb,var(--tg-accent) 22%,var(--tg-bg));
  border-bottom:1px solid var(--tg-line);font-size:.88em}
.inapp p{flex:1;min-width:200px}

/* ===== 全app的樣子（2026-10-20決定） =====
   不要左邊色帶、不要漸層（改單色；雙色模式時第二色用在＋新角色和輪流的頭像）、不要亮光、不要陰影；
   輸入框沒有底色和框，只有底下一排通知小心心（--heart1等由applyTheme照主題色畫好），點進去變深。
   裁切視窗外面變暗的那圈保留（少了它看不出要裁哪一塊）；外觀頁金屬色的色票保留（那是金屬色本身的樣子）。 */
:root{--hl:var(--heart1);--hlf:var(--heart1f)}
.card::before,.wcard .wb::before{display:none}
.bkbar{border-left-width:1px;border-left-color:var(--tg-line)}

/* 輸入框：沒有底色、沒有框，底下一排通知小心心；點子小筆記框維持原樣 */
:is(input[type=text],input[type=password],input[type=number],input[type=search],input[type=email],input[type=url],textarea,.dd-btn){
  border:none;border-radius:0;box-shadow:none;padding-bottom:12px;
  background:transparent var(--hl) left bottom/8px 7px repeat-x}
:is(input[type=text],input[type=password],input[type=number],input[type=search],input[type=email],input[type=url],textarea):focus{
  background-image:var(--hlf);box-shadow:none}
select{border:none;border-radius:0;box-shadow:none;padding-bottom:12px;background-color:transparent;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%),var(--hl);
  background-position:calc(100% - 19px) calc(50% - 2px),calc(100% - 14px) calc(50% - 2px),left bottom;
  background-size:5px 5px,5px 5px,8px 7px;background-repeat:no-repeat,no-repeat,repeat-x}
select:focus{box-shadow:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%),var(--hlf)}
.notebox textarea,.notebox textarea:focus{border:none;border-radius:0;background:transparent;box-shadow:none;padding:0}

/* 頭像：沒有外框、單色；清單裡一張第一色、一張第二色輪流 */
.avatar{border:none;background:var(--tg-accent)}
.thumb{background:var(--tg-accent)}
:nth-child(even)>.thumb{background:var(--tg-accent2)}
/* 分類標籤列的左右箭頭沒有底色 */
.scrl,.scrl.l{background:none}

/* 漸層改單色 */
.fab{background:var(--tg-accent2)}
.wcard .ban,.bannerbox{background:var(--tg-accent)}
.bannerbox{border:none}
.taskcard.on,.mrow.on{background:var(--tg-accent)}
.taskcard::after{background:color-mix(in srgb,var(--tg-accent) 50%,transparent)}
.mlist{background:color-mix(in srgb,var(--tg-accent) 20%,transparent)}
.bar i{background:var(--tg-accent)}
/* 亮光和陰影拿掉（外觀頁選到的顏色外面那圈是「選到了」的記號，保留） */
.sw i,.mrow,.mrow .mtag,.mrow.on,#notice,.dd-list,.dragghost,.photo .play i{box-shadow:none}

/* ===== 貼紙手帳（2026-10-28，樣品C） =====
   背景淡淡的小愛心花紋（外觀可以關，有背景圖時藏起來）；角色卡、世界卡、欄位、設定頁的每一段、彈出視窗像貼紙：
   2px的邊加一小段紙膠帶。只有頭像和紙膠帶是固定的5種粉彩色（照編號跟著角色），其他都跟著主題色。
   選到的小愛心維持原樣（字的右上角，離字1px）。 */
:root{--p0:#f9cfe0;--p1:#cfe9dc;--p2:#fde0c8;--p3:#cfe0f7;--p4:#e3d3f5;--av-ink:#3a2a48;
  --heart-deep:color-mix(in srgb,var(--tg-accent) 75%,var(--tg-text))}
.theme-dark{--p0:#7f5266;--p1:#47705e;--p2:#7d5b42;--p3:#475f86;--p4:#625087;--av-ink:#f4ecf8}
/* 花紋固定在畫面上不跟著捲動，跟背景圖一樣用固定圖層（iPhone的Safari不支援背景固定，所以不用body的背景） */
.st-pat:not(.has-bg) body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:var(--patbg);background-size:var(--patsz);background-position:var(--patpos);background-repeat:var(--patrep)}
/* 外觀頁的花紋小方塊（2026-11-08）：圓角方塊、底色是背景色、細框，選到的外圈跟主題色色票一樣 */
.patsw .sw i{border-radius:10px;background-color:var(--tg-bg);border:1.5px solid var(--tg-line)}
.patsw .sw span{text-align:center;line-height:1.3}

/* 紙膠帶（共用） */
.card::before,.wcard::before,.stk::before,.helpsec::before{content:"";display:block;position:absolute;
  inset:auto;top:-7px;left:22px;width:52px;height:14px;border-radius:3px;background:var(--tape,var(--p4));
  opacity:.92;transform:rotate(-4deg);pointer-events:none;z-index:1}
.stk::before,.helpsec::before{left:auto;right:26px;width:56px;transform:rotate(3deg)}
.stk:nth-of-type(5n+1),.helpsec:nth-of-type(5n+1){--tape:var(--p0)}
.stk:nth-of-type(5n+2),.helpsec:nth-of-type(5n+2){--tape:var(--p1)}
.stk:nth-of-type(5n+3),.helpsec:nth-of-type(5n+3){--tape:var(--p2)}
.stk:nth-of-type(5n+4),.helpsec:nth-of-type(5n+4){--tape:var(--p3)}
.stk:nth-of-type(5n),.helpsec:nth-of-type(5n){--tape:var(--p4)}
/* 雙色混搭時紙膠帶用兩個主題色（外觀可以選） */
.st-dualtape :is(.card,.wcard,.stk,.helpsec)::before,.st-dualtape .sheettape{background:var(--tg-accent)}
.st-dualtape :is(.grid>:nth-child(even),.stk:nth-of-type(even),.helpsec:nth-of-type(even))::before{background:var(--tg-accent2)}

/* 角色卡和世界卡 */
.grid{gap:20px 14px;padding-top:7px}
.card,.wcard{border-width:2px;overflow:visible}
.card p{-webkit-line-clamp:1}
.card .meta{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin-top:6px}
.tagcap{padding:0 8px;border-radius:999px;background:color-mix(in srgb,var(--tg-accent) 24%,var(--tg-surface));color:var(--tg-text)}
.cmdn{margin-left:4px}
.wcard .ban{border-radius:calc(var(--tg-radius) - 2px) calc(var(--tg-radius) - 2px) 0 0;overflow:hidden}

/* 頭像：粉彩底、白邊（深色模式是卡片底色）、粉彩外圈，右下角一顆主題色小愛心（沒有白底）；照片大小不變 */
.thumbw,.avwrap{position:relative;flex:none;display:block;line-height:0}
.thumbw .thumb{width:52px;height:52px;border:3px solid var(--tg-surface);box-shadow:0 0 0 2px var(--av);
  background:var(--av);color:var(--av-ink);line-height:1.7}
.avh{position:absolute;right:-5px;bottom:-4px;color:var(--heart-deep);line-height:0}
.avwrap .avatar{width:68px;height:68px;border:3px solid var(--tg-surface);box-shadow:0 0 0 2px var(--av);
  background:var(--av);color:var(--av-ink);line-height:1.7}
.avwrap .avh{right:-4px;bottom:-3px}
.avwrap .avh svg{width:17px;height:17px}
.avside{display:flex;flex-direction:column;gap:2px;min-width:0}
.avname{font-size:1.15em;line-height:1.4;overflow-wrap:anywhere}
.avside .row{margin:0}

/* 備份提醒條：圓膠囊，前面一顆小愛心 */
.bkbar{border:2px solid var(--tg-line);border-radius:999px;padding:5px 8px 5px 14px}
.bkh{display:flex;color:var(--heart-deep);flex:none}

/* ＋新角色：膠囊小一點、貼近字，字一樣大 */
.fab{padding:9px 16px}

/* 貼紙區塊（編輯頁的欄位、設定頁的每一段） */
.stk{position:relative;background:var(--tg-surface);border:2px solid var(--tg-line);border-radius:var(--tg-radius);
  padding:18px 16px 10px;margin:0 0 22px}
.stk>:is(.grouplabel,.row,.field,.pair,.hint):first-child{margin-top:0}
.grouplabel.strong{font-weight:700;color:var(--tg-text);font-size:1em}
.cardline{margin:4px 0 6px}
.cardline .row{flex-wrap:wrap;margin:2px 0 6px}
.cardline input{width:100%;margin-bottom:4px}
/* 外觀頁的開關 */
.swrow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:12px 0}
.switch{position:relative;flex:none;width:44px;height:26px;border-radius:999px;border:none;background:var(--tg-line);cursor:pointer}
.switch i{position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:var(--tg-surface);transition:left .15s}
.switch[aria-checked=true]{background:var(--tg-accent)}
.switch[aria-checked=true] i{left:21px}

/* 說明頁、糖包說明的每一段 */
.helpsec{position:relative;border-width:2px;border-radius:var(--tg-radius);margin:0 0 20px}

/* 彈出視窗：還是從下面滑上來，換成貼紙底和2px邊，上面一段紙膠帶 */
.sheet{background:var(--tg-surface);border:2px solid var(--tg-line);border-bottom:none}
.sheet>.sheethead,.sheetbtns{background:var(--tg-surface)}
/* 紙膠帶跨在視窗上緣，一半在外面，跟卡片一樣；跟著視窗一起滑上來 */
.sheettape{display:none;position:absolute;top:-7px;right:34px;width:56px;height:14px;border-radius:3px;
  background:var(--p0);opacity:.92;transform:rotate(3deg);pointer-events:none;z-index:4}
.sheet.open+.sheettape{display:block;animation:tapein .24s cubic-bezier(.2,.8,.3,1)}
@keyframes tapein{from{translate:0 36px;opacity:0}to{translate:0 0;opacity:.92}}

.cardline>.fl{font-size:.9em;color:var(--tg-muted);margin-top:6px}
.stk>hr.sep:first-child{display:none}
.stk>hr.sep:first-child+*{margin-top:0}
/* 花紋上的字（2026-10-28）：直接放在小愛心花紋上的字，筆畫外面一圈背景色的光暈，花紋在字旁邊讓開；
   貼紙、角色卡、世界卡、備份條裡面本來就是實心底，不加。沒有花紋或有背景圖時也不加 */
.st-pat:not(.has-bg) #view{--halo:var(--tg-bg);text-shadow:
  3px 0 1px var(--halo),-3px 0 1px var(--halo),0 3px 1px var(--halo),0 -3px 1px var(--halo),
  2px 2px 1px var(--halo),-2px 2px 1px var(--halo),2px -2px 1px var(--halo),-2px -2px 1px var(--halo),
  0 0 6px var(--halo),0 0 8px var(--halo)}
/* 瀏覽器預設按鈕和輸入框不接光暈，這裡讓它們跟著外面 */
.st-pat:not(.has-bg) #view :is(button,input,textarea,select,input::placeholder){text-shadow:inherit}
.st-pat:not(.has-bg) #view :is(.stk,.card,.wcard,.bkbar,.helpsec,.tagcap){text-shadow:none}

/* HTML輸入框和預覽（狀態欄、介紹頁，2026-11-08）：手機上下排；橫向平板和電腦左右並排，打字時直接看到結果 */
.codebox{display:block;width:100%;min-height:160px;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:.82em;line-height:1.6;resize:vertical}
.codebox.plain{font-family:inherit;font-size:1em;min-height:104px}
.htmlpair{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin-top:8px}
.htmlprev iframe{display:block;width:100%;height:120px;border:1px solid var(--tg-line);border-radius:12px;background:#fff}
.htmlpair.tall .codebox{min-height:260px}
.htmlpair.tall .htmlprev iframe{height:min(70vh,560px)}
@media (min-width:820px) and (orientation:landscape){
  .htmlpair{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
  .htmlpair .codebox{height:100%;min-height:200px;resize:none}
  .htmlpair .htmlprev{display:flex;flex-direction:column}
  .htmlpair .htmlprev iframe{flex:1;min-height:200px}
  .htmlpair.tall .codebox{min-height:min(70vh,560px)}
}

/* 還沒開賣的糖包旁邊的小字「準備中」（2026-11-08） */
.soontag{display:inline-block;margin-inline-start:6px;font-size:.72em;font-weight:400;color:var(--tg-muted);vertical-align:.12em}