/* ════════════════════════════════════════
   Fonts
   ════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Noto+Serif+TC:wght@400;500;600;700&family=LXGW+WenKai+TC:wght@400;700&display=swap');

/* ════════════════════════════════════════
   Theme Variables
   ════════════════════════════════════════ */
:root {
  --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); --del:#b05050;
  --navh:52px;
  --serif:'Noto Serif TC','Source Han Serif TC',Georgia,serif;
  --display:'Cormorant Garamond','Noto Serif TC',serif;
  /* 動畫節奏：press=點按回饋，sheet=彈窗進場，soft=一般過場 */
  --e-press:cubic-bezier(.34,1.56,.64,1);
  --e-sheet:cubic-bezier(.32,.72,0,1);
  --e-soft:cubic-bezier(.4,0,.2,1);
}

/* ── Light themes ── */
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; }
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; }
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; }
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; }
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; }
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; }
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; }

/* ── Dark themes ── */
body.theme-dark       { --bg:#1e2028;--bg2:#282a34;--bg3:#24262e;--bgi:#303440;--ac:#8aa8b8;--acl:rgba(138,168,184,.15);--ach:#a4c0d0;--tx:#e0e2e8;--tx2:#a8aeb8;--tx3:#eceff4;--bd:#363840;--bd2:#444850;--sh:rgba(0,0,0,.15);--del:#c87070; }
body.theme-dark-warm  { --bg:#24201c;--bg2:#322c26;--bg3:#2c2822;--bgi:#3e3630;--ac:#c8946a;--acl:rgba(200,148,106,.15);--ach:#daa880;--tx:#e8e0d6;--tx2:#b4aa9e;--tx3:#f2ebe0;--bd:#48403a;--bd2:#564e46;--sh:rgba(0,0,0,.15);--del:#c07050; }
body.theme-dark-green { --bg:#1e2220;--bg2:#282e28;--bg3:#242a24;--bgi:#343a34;--ac:#88a880;--acl:rgba(136,168,128,.15);--ach:#a0c098;--tx:#e0e6dc;--tx2:#a8b0a4;--tx3:#ecf2e8;--bd:#3a4238;--bd2:#4a5248;--sh:rgba(0,0,0,.15);--del:#c07060; }
body.theme-midnight   { --bg:#1c1a24;--bg2:#262430;--bg3:#22202a;--bgi:#302e40;--ac:#9a8cc8;--acl:rgba(154,140,200,.15);--ach:#b4a6da;--tx:#e2dced;--tx2:#aea8bc;--tx3:#eee8f6;--bd:#3a3850;--bd2:#484660;--sh:rgba(0,0,0,.2);--del:#b87088; }
body.theme-dark-grey  { --bg:#202020;--bg2:#2a2a2a;--bg3:#262626;--bgi:#363636;--ac:#98a0a0;--acl:rgba(152,160,160,.15);--ach:#b0b8b8;--tx:#e0deda;--tx2:#a8a4a0;--tx3:#eceae6;--bd:#3c3c3c;--bd2:#4a4a4a;--sh:rgba(0,0,0,.15);--del:#c07070; }
body.theme-dark-brown { --bg:#201e18;--bg2:#2c2a22;--bg3:#28261e;--bgi:#3a3830;--ac:#b8a078;--acl:rgba(184,160,120,.15);--ach:#d0b890;--tx:#e4ddd2;--tx2:#b0a898;--tx3:#f0ece2;--bd:#443e36;--bd2:#524c44;--sh:rgba(0,0,0,.15);--del:#c07050; }
body.theme-dark-rose  { --bg:#241e1e;--bg2:#322828;--bg3:#2e2424;--bgi:#403838;--ac:#c87878;--acl:rgba(200,120,120,.15);--ach:#da9090;--tx:#ece4e0;--tx2:#b8aeaa;--tx3:#f4eeea;--bd:#4a3c3c;--bd2:#584c4c;--sh:rgba(0,0,0,.15);--del:#c06868; }
body.theme-black      { --bg:#0c0c0c;--bg2:#161614;--bg3:#121210;--bgi:#222220;--ac:#8a8a88;--acl:rgba(138,138,136,.12);--ach:#a8a8a6;--tx:#d4d2d0;--tx2:#a09e9a;--tx3:#e0dedc;--bd:#2a2a28;--bd2:#363634;--sh:rgba(0,0,0,.4);--del:#c07070; }

/* ════════════════════════════════════════
   Global Reset & Base
   ════════════════════════════════════════ */
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family:'Noto Sans TC',sans-serif; background:var(--bg); color:var(--tx);
  height:100dvh; display:flex; flex-direction:column; overflow:hidden;
  -webkit-user-select:none; user-select:none;
  -webkit-tap-highlight-color:transparent; font-size:16px;
}
textarea, input { -webkit-user-select:text; user-select:text; }
::placeholder { color:var(--tx2); opacity:.6; }
textarea:focus, input:focus { outline:none; border-color:var(--ac); background:var(--bg2); box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 14%,transparent); }
* { scrollbar-width:none; -ms-overflow-style:none; }
*::-webkit-scrollbar { display:none; }

/* ════════════════════════════════════════
   Animations
   ════════════════════════════════════════ */
@keyframes pnlIn   { from { opacity:0; } to { opacity:1; } }
@keyframes fadeUp   { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:translateY(0); } }
@keyframes slideDown{ from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }

/* ════════════════════════════════════════
   Bottom Navigation
   ════════════════════════════════════════ */
.nav-w {
  position:fixed !important; bottom:0; left:0; right:0; z-index:200;
  background:var(--bg2); border-top:1px solid var(--bd);
  padding-bottom:env(safe-area-inset-bottom,0); transition:transform .2s;
  transform:translateZ(0);
}
.nav-i { display:flex; height:var(--navh); }
.nv {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-size:12px; 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; transition:transform .25s var(--e-press); }
.nv.a svg { transform:translateY(-1px) scale(1.06); }

/* ════════════════════════════════════════
   Main Shell & Panels
   ════════════════════════════════════════ */
.main { flex:1; min-height:0; overflow:hidden; padding-bottom:calc(var(--navh) + env(safe-area-inset-bottom,0)); }
.pnl { display:none; height:100%; min-height:0; overflow-y:auto; }
.pnl.a { display:block; animation:pnlIn .18s ease; }

/* ════════════════════════════════════════
   Header
   ════════════════════════════════════════ */
.header { display:flex; align-items:center; justify-content:space-between; padding:18px 20px 12px; position:sticky; top:0; z-index:10; background:var(--bg); }
.header-actions { display:flex; align-items:center; gap:8px; }
.h-btn {
  width:34px; height:34px; border-radius:50%; background:var(--bg2);
  border:1px solid var(--bd); display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--tx2); transition:all .15s;
}
.h-btn:active { background:var(--bg3); transform:scale(.92); }
.h-btn svg { width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* ════════════════════════════════════════
   Common UI Elements
   ════════════════════════════════════════ */
/* ════════════════════════════════════════
   Category Tab Bar + Swipe (Explore page)
   ════════════════════════════════════════ */
.cat-tab-bar {
  display:flex; gap:6px; padding:0 20px 12px; overflow-x:auto;
  -webkit-overflow-scrolling:touch; scrollbar-width:none; position:relative;
}
.cat-tab-bar::-webkit-scrollbar { display:none; }
.cat-tab {
  padding:8px 16px; border-radius:20px; border:1px solid var(--bd); background:var(--bg2);
  color:var(--tx2); font-size:14px; font-weight:500; cursor:pointer; font-family:inherit;
  white-space:nowrap; flex-shrink:0; transition:background .18s, color .18s, border-color .18s, box-shadow .18s; -webkit-tap-highlight-color:transparent;
}
.cat-tab:active { transform:scale(.96); }
.cat-tab.active { background:var(--ac); border-color:var(--ac); color:#fff; font-weight:600; box-shadow:0 2px 8px color-mix(in srgb,var(--ac) 28%,transparent); }
.cat-swipe-wrap { overflow:hidden; position:relative; flex:1; min-height:0; }
.cat-swipe-track { display:flex; will-change:transform; }
.cat-swipe-page { flex-shrink:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:0 0 100px; }

.section-title { font-size:15px; font-weight:600; color:var(--tx3); padding:0 20px; margin-bottom:6px; }
.divider { height:1px; background:var(--bd); margin:0 20px 4px; }
.dot { width:2px; height:2px; border-radius:50%; background:var(--bd2); display:inline-block; }
.tag { padding:1px 7px; border-radius:8px; background:var(--bg3); color:var(--tx2); font-size:12px; border:1px solid var(--bd); }
.empty-state { text-align:center; padding:60px 20px; color:var(--tx2); font-size:14px; }

/* ════════════════════════════════════════
   Logo
   ════════════════════════════════════════ */
.logo { display:flex; align-items:center; gap:10px; }
.logo-icon { width:38px; height:38px; border-radius:50%; background:var(--acl); display:flex; align-items:center; justify-content:center; color:var(--ac); border:1px solid var(--bd); flex-shrink:0; margin-top:2px; }
.logo-icon svg { width:19px; height:19px; }
.logo-text { font-family:var(--display); font-size:21px; font-weight:600; color:var(--tx3); letter-spacing:.3px; line-height:1.1; }
.logo-sub { font-size:12px; color:var(--tx2); letter-spacing:1.2px; margin-top:2px; opacity:.5; }

/* ════════════════════════════════════════
   Search
   ════════════════════════════════════════ */
.search-wrap { padding:0 20px 12px; display:none; animation:slideDown .2s ease; }
.search-wrap.open { display:block; }
.search-inner { display:flex; align-items:center; gap:10px; background:var(--bg3); border:1px solid var(--bd); border-radius:10px; padding:10px 14px; transition:border-color .15s, box-shadow .15s; }
.search-inner:focus-within { border-color:var(--ac); box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 12%,transparent); }
.search-inner:focus-within svg { stroke:var(--ac); }
.search-inner svg { width:15px; height:15px; stroke:var(--tx2); fill:none; stroke-width:1.8; stroke-linecap:round; flex-shrink:0; }
.search-inner input { flex:1; background:none; border:none; color:var(--tx); font-size:15px; font-family:inherit; }

/* ════════════════════════════════════════
   Featured Banner (Explore page)
   ════════════════════════════════════════ */
.featured { margin:0 20px 20px; padding:16px 18px; border-radius:12px; cursor:pointer; background:var(--acl); border:1px solid var(--bd); transition:transform .1s; -webkit-tap-highlight-color:transparent; display:flex; align-items:center; gap:14px; }
.featured:active { transform:scale(.98); }
.featured-icon { width:40px; height:40px; border-radius:10px; background:var(--bg2); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--ac); }
.featured-icon svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; }
.featured-body { flex:1; min-width:0; }
.featured-label { font-size:12px; color:var(--ac); font-weight:600; letter-spacing:.5px; margin-bottom:2px; }
.featured h3 { font-size:16px; font-weight:600; color:var(--tx3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.featured-sub { font-size:13px; color:var(--tx2); margin-top:2px; }
.featured-arrow { color:var(--ac); flex-shrink:0; opacity:.5; }
.featured-arrow svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; }

/* ════════════════════════════════════════
   Story List (Explore page)
   ════════════════════════════════════════ */
.stories { padding:0 20px 100px; }
.story-row { padding:20px 0 22px; border-bottom:1px solid var(--bd); cursor:pointer; transition:opacity .1s; -webkit-tap-highlight-color:transparent; }
.story-row:first-child { padding-top:12px; }
.story-row:last-child { border-bottom:none; padding-bottom:0; }
.story-row:active { opacity:.6; }
.story-cover { width:100%; height:120px; border-radius:10px; overflow:hidden; margin-bottom:10px; background:var(--bgi); }
.story-cover img { width:100%; height:100%; object-fit:cover; display:block; }
.story-top { display:flex; align-items:baseline; gap:8px; margin-bottom:5px; }
.story-title { font-size:16px; font-weight:600; color:var(--tx3); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.story-author { font-size:13px; color:var(--tx2); flex-shrink:0; }
.story-excerpt { font-size:14px; color:var(--tx2); line-height:1.65; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:8px; }
.story-foot { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--tx2); flex-wrap:wrap; }
.story-hashtags { display:flex; gap:4px; flex-wrap:wrap; margin-bottom:8px; }
.hashtag { font-size:12px; color:var(--ac); cursor:pointer; -webkit-tap-highlight-color:transparent; }
.hashtag:active { opacity:.6; }

/* ════════════════════════════════════════
   Collection Page
   ════════════════════════════════════════ */
.coll-folders { padding:0 20px 16px; display:flex; flex-direction:column; gap:10px; }
.coll-folder { display:flex; align-items:center; gap:12px; padding:14px 16px; background:var(--bg2); border:1px solid var(--bd); border-radius:12px; cursor:pointer; transition:transform .1s; -webkit-tap-highlight-color:transparent; }
.coll-folder:active { transform:scale(.98); }
.coll-folder-icon { width:38px; height:38px; border-radius:10px; background:var(--acl); display:flex; align-items:center; justify-content:center; color:var(--ac); flex-shrink:0; }
.coll-folder-icon svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8; }
.coll-folder-info { flex:1; min-width:0; }
.coll-folder-name { font-size:15px; font-weight:600; color:var(--tx3); }
.coll-folder-count { font-size:13px; color:var(--tx2); margin-top:1px; }
.coll-folder-arrow { width:14px; height:14px; stroke:var(--bd2); fill:none; stroke-width:2; stroke-linecap:round; flex-shrink:0; }
.coll-folder-actions { display:flex; gap:4px; margin-left:auto; flex-shrink:0; }
.coll-folder-act { width:30px; height:30px; border-radius:8px; border:none; background:none; color:var(--tx2); cursor:pointer; display:flex; align-items:center; justify-content:center; -webkit-tap-highlight-color:transparent; }
.coll-folder-act:active { color:var(--ac); }
.coll-folder-act svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.coll-folder-act.del:active { background:rgba(220,60,60,.15); color:#d85050; }
.coll-items { padding:0 20px 100px; }
.coll-item { padding:14px 0; border-bottom:1px solid var(--bd); cursor:pointer; -webkit-tap-highlight-color:transparent; }
.coll-item:last-child { border-bottom:none; }
.coll-item:active { opacity:.6; }
.coll-item-title { font-size:15px; font-weight:500; color:var(--tx3); }
.coll-item-meta { font-size:13px; color:var(--tx2); margin-top:3px; display:flex; align-items:center; gap:6px; }

/* ════════════════════════════════════════
   My Page (Creator-style, aligned with Reverie)
   ════════════════════════════════════════ */
/* ═══ My Page — shared ═══ */
.my-page-inner { padding-top:0; }
.my-top-bar { display:flex; justify-content:flex-end; gap:10px; padding:8px 16px; }
.my-top-btn {
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--tx2); transition:color .15s; width:24px; height:24px;
}@media(hover:hover){.my-top-btn:hover{color:var(--ac);}}
.my-top-btn:active { opacity:.6; }
.my-top-btn svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.my-empty-wall { text-align:center; padding:40px 20px; color:var(--tx2); font-size:14px; line-height:1.8; }
.my-branding { text-align:center; padding:20px 0 40px; }
.my-branding-line { width:40px; height:1.5px; background:var(--ac); opacity:.4; margin:0 auto 12px; }
.my-branding-text { font-family:var(--display); font-size:14px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--tx2); opacity:.4; }
/* ── 管理按鈕 ── */
.folder-manage-btn, .mfd-manage-btn, .mch-manage-btn, .mbk-manage-btn, .mix-manage-btn {
  width:24px; height:24px; display:flex; align-items:center; justify-content:center;
  color:var(--tx2); cursor:pointer; opacity:.5; transition:opacity .2s;
  -webkit-tap-highlight-color:transparent;
}
.folder-manage-btn:active, .mfd-manage-btn:active, .mch-manage-btn:active, .mbk-manage-btn:active, .mix-manage-btn:active { opacity:.8; }
.folder-manage-btn svg, .mfd-manage-btn svg, .mch-manage-btn svg, .mbk-manage-btn svg, .mix-manage-btn svg {
  width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.5;
}
.mix-manage-btn { }
.mch-manage-btn { align-self:center; flex-shrink:0; }
.mbk-folder-wrap { position:relative; }
.mbk-manage-btn {
  flex-shrink:0; width:40px; height:80px;
  background:linear-gradient(180deg, var(--bg3) 0%, var(--bg2) 100%);
  border:1px dashed var(--bd);
  border-radius:2px;
  display:flex; align-items:center; justify-content:center;
  opacity:.5; z-index:1; position:relative;
  box-shadow:1px 1px 3px rgba(0,0,0,.05);
}
.mbk-manage-btn svg { width:14px; height:14px; }

/* ── Achievement badges on profile ── */
.my-badges { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; padding:4px 20px 16px; }
.my-badge { width:32px; height:32px; border-radius:50%; background:var(--bg3); border:1.5px solid var(--bd); display:flex; align-items:center; justify-content:center; font-size:16px; color:var(--ac); cursor:pointer; transition:transform .15s; }
.my-badge:active { transform:scale(.9); }
.my-badge svg { width:16px; height:16px; }
.my-badge.locked { opacity:.2; filter:grayscale(1); }

.my-section-label {
  font-size:12px; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  color:var(--tx2); opacity:.6; padding:20px 24px 12px; font-family:var(--display);
}
.dot { width:2px; height:2px; border-radius:50%; background:var(--bd2); display:inline-block; }

/* ── Style A: Gallery ── */
.my-s-gallery .msg-header { padding:20px 20px 16px; }
.my-s-gallery .msg-header-top { display:flex; align-items:center; gap:14px; }
.my-s-gallery .msg-av { width:58px; height:58px; border-radius:50%; background:var(--bgi); display:flex; align-items:center; justify-content:center; font-size:22px; color:var(--ac); font-weight:600; flex-shrink:0; overflow:hidden; order:1; }
.my-s-gallery .msg-av img { width:100%; height:100%; object-fit:cover; }
.my-s-gallery .msg-info { flex:1; min-width:0; }
.my-s-gallery .msg-name { font-family:var(--display); font-size:17px; font-weight:600; color:var(--tx3); letter-spacing:.5px; line-height:1.2; }
.my-s-gallery .msg-stat { font-size:12px; color:var(--tx2); margin-top:6px; }
.my-s-gallery .msg-stat strong { color:var(--tx3); font-weight:600; }
.my-s-gallery .msg-bio { font-size:13px; color:var(--tx2); margin-top:14px; line-height:1.6; word-break:break-word; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.my-s-gallery .msg-bio.expanded { display:block; }
.my-s-gallery .mg-grid { columns:2; column-gap:16px; padding:0 20px; }
.my-s-gallery .mg-frame { break-inside:avoid; margin-bottom:16px; border-radius:6px; overflow:hidden; background:var(--bg2); border:1px solid var(--bd); cursor:pointer; -webkit-tap-highlight-color:transparent; transition:opacity .25s, transform .25s; }
.my-s-gallery .mg-frame:active { opacity:.85; }
.my-s-gallery .mg-cover { width:100%; aspect-ratio:3/4; position:relative; overflow:hidden; }
.my-s-gallery .mg-cover-bg { position:absolute; inset:0; background:linear-gradient(160deg, color-mix(in srgb,var(--ac) 18%,var(--bg3)), var(--bgi)); }
.my-s-gallery .mg-cover-initial { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-family:var(--serif); font-size:48px; font-weight:700; color:var(--ac); opacity:.12; }
.my-s-gallery .mg-frame-info { padding:10px 12px; }
.my-s-gallery .mg-frame-title { font-family:var(--serif); font-size:14px; font-weight:600; color:var(--tx3); line-height:1.3; margin-bottom:3px; }
.my-s-gallery .mg-frame-meta { font-size:12px; color:var(--tx2); }

/* ── Style B: Bunko ── */
.my-s-bunko .mbk-header { padding:24px 20px 16px; text-align:center; }
.my-s-bunko .mbk-av { width:58px; height:58px; border-radius:50%; background:var(--bgi); display:flex; align-items:center; justify-content:center; font-size:22px; color:var(--ac); font-weight:600; margin:0 auto 10px; overflow:hidden; }
.my-s-bunko .mbk-av img { width:100%; height:100%; object-fit:cover; }
.my-s-bunko .mbk-name { font-family:var(--serif); font-size:17px; font-weight:600; color:var(--tx3); letter-spacing:1.5px; }
.my-s-bunko .mbk-stat { font-size:12px; color:var(--tx2); margin-top:6px; }
.my-s-bunko .mbk-stat strong { color:var(--tx3); font-weight:600; }
.my-s-bunko .mbk-bio { font-size:13px; color:var(--tx2); line-height:1.6; max-width:280px; margin:12px auto 0; word-break:break-word; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.my-s-bunko .mbk-bio.expanded { display:block; }
.my-s-bunko .mbk-shelf { padding:0 20px 16px; }
.my-s-bunko .mbk-shelf-label { font-family:var(--display); font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--tx2); opacity:.5; margin-bottom:12px; }
.my-s-bunko .mbk-row { display:flex; gap:10px; overflow-x:auto; padding-bottom:16px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
.my-s-bunko .mbk-row::-webkit-scrollbar { display:none; }
.my-s-bunko .mbk-spine { flex-shrink:0; scroll-snap-align:start; width:52px; display:flex; flex-direction:column; align-items:center; cursor:pointer; -webkit-tap-highlight-color:transparent; align-self:flex-end; }
.my-s-bunko .mbk-spine:active { opacity:.7; }
.my-s-bunko .mbk-spine-bar { width:52px; min-height:150px; max-height:170px; border-radius:1px 4px 4px 1px; position:relative; overflow:hidden; box-shadow:3px 3px 10px rgba(0,0,0,.15),-1px 0 3px rgba(0,0,0,.06); }
.my-s-bunko .mbk-spine-bg { position:absolute; inset:0; }
.my-s-bunko .mbk-spine-bar::before {
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.08;
  background-image:repeating-linear-gradient(0deg,transparent,transparent 1px,rgba(255,255,255,.4) 1px,rgba(255,255,255,.4) 2px),
                    repeating-linear-gradient(90deg,transparent,transparent 1px,rgba(255,255,255,.3) 1px,rgba(255,255,255,.3) 2px);
  background-size:2px 2px;
}
.my-s-bunko .mbk-spine-bar::after {
  content:''; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.12) 0%,transparent 8%,transparent 92%,rgba(0,0,0,.08) 100%);
}
.my-s-bunko .mbk-spine-text { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; writing-mode:vertical-rl; text-orientation:mixed; font-family:var(--serif); font-size:13px; font-weight:600; color:#fff; letter-spacing:2px; text-shadow:0 1px 3px rgba(0,0,0,.35); padding:12px 0; z-index:3; line-height:1.5; }
.my-s-bunko .mbk-spine-text .spine-chap { font-size:12px; font-weight:400; letter-spacing:1px; opacity:.7; margin-left:4px; }
.my-s-bunko .mbk-spine-edge { position:absolute; left:0; top:0; bottom:0; width:4px; z-index:3; background:linear-gradient(90deg,rgba(0,0,0,.12),rgba(255,255,255,.08) 50%,transparent); }
.my-s-bunko .mbk-shelf-row { min-height:170px; align-items:flex-end; }

/* ── Style C: Index ── */
.my-s-index .mix-header { padding:24px 20px 16px; position:relative; }
.my-s-index .mix-av { width:36px; height:36px; border-radius:50%; background:var(--bgi); display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--ac); font-weight:600; position:absolute; top:24px; right:20px; overflow:hidden; }
.my-s-index .mix-av img { width:100%; height:100%; object-fit:cover; }
.my-s-index .mix-name { font-family:var(--serif); font-size:20px; font-weight:700; color:var(--tx3); letter-spacing:2px; line-height:1.2; padding-right:48px; }
.my-s-index .mix-bio { font-family:var(--serif); font-size:14px; color:var(--tx2); font-style:italic; line-height:1.6; margin-top:10px; word-break:break-word; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.my-s-index .mix-bio.expanded { display:block; }
.my-s-index .mix-toc-header { display:flex; align-items:center; gap:10px; padding:12px 20px 6px; }
.my-s-index .mix-toc-title { font-family:var(--display); font-size:11px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--tx2); }
.my-s-index .mix-toc { padding:0 20px 20px; }
.my-s-index .mix-item { display:flex; align-items:baseline; gap:0; padding:10px 0; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.my-s-index .mix-item:active { opacity:.7; }
.my-s-index .mix-item-left { display:flex; align-items:baseline; gap:0; flex:1; min-width:0; overflow:hidden; }
.my-s-index .mix-title { font-family:var(--serif); font-size:15px; font-weight:600; color:var(--tx3); letter-spacing:.3px; white-space:nowrap; flex-shrink:0; }
.my-s-index .mix-dots { flex:1; border-bottom:1px dotted var(--bd2); margin:0 8px; min-width:20px; position:relative; top:-3px; }
.my-s-index .mix-chap { font-family:var(--display); font-size:14px; color:var(--tx2); flex-shrink:0; white-space:nowrap; }
.my-s-index .mix-toc-section { margin-bottom:4px; }
.my-s-index .mix-toc-folder { font-family:var(--serif); font-size:13px; font-weight:600; color:var(--ac); letter-spacing:1px; padding:10px 0 4px; cursor:pointer; }

/* ── Style D: Feed ── */
.my-s-feed .mfd-header { padding:20px 20px 16px; }
.my-s-feed .mfd-header-top { display:flex; gap:14px; align-items:center; }
.my-s-feed .mfd-av { width:58px; height:58px; border-radius:50%; background:var(--bgi); display:flex; align-items:center; justify-content:center; font-size:22px; color:var(--ac); font-weight:600; flex-shrink:0; overflow:hidden; order:1; }
.my-s-feed .mfd-av img { width:100%; height:100%; object-fit:cover; }
.my-s-feed .mfd-info { flex:1; min-width:0; }
.my-s-feed .mfd-name { font-size:17px; font-weight:700; color:var(--tx3); }
.my-s-feed .mfd-stats { display:flex; gap:0; margin-top:6px; }
.my-s-feed .mfd-bio { font-size:13px; color:var(--tx2); line-height:1.6; margin-top:14px; word-break:break-word; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.my-s-feed .mfd-bio.expanded { display:block; }
.my-s-feed .mfd-stat-item { font-size:13px; color:var(--tx2); }
.my-s-feed .mfd-stat-item strong { font-weight:600; color:var(--tx3); }
.my-s-feed .mfd-stat-sep { margin:0 4px; opacity:.4; }
.my-s-feed .mfd-post { padding:16px 20px; border-bottom:1px solid var(--bd); cursor:pointer; -webkit-tap-highlight-color:transparent; }
.my-s-feed .mfd-post:active { background:var(--bg3); }
.my-s-feed .mfd-post-title { font-family:var(--serif); font-size:16px; font-weight:600; color:var(--tx3); margin-bottom:6px; }
.my-s-feed .mfd-post-excerpt { font-size:14px; color:var(--tx2); line-height:1.65; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; margin-bottom:8px; }
.my-s-feed .mfd-post-tags { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:8px; }
.my-s-feed .mfd-post-tag { font-size:12px; color:var(--ac); }
.my-s-feed .mfd-post-foot { font-size:13px; color:var(--tx2); display:flex; align-items:center; gap:6px; }

/* ── Style E: Chapbook ── */
.my-s-chapbook { position:relative; }
.my-s-chapbook::before { content:''; position:absolute; top:0; left:0; right:0; height:180px; background:linear-gradient(180deg,var(--acl) 0%,transparent 100%); opacity:.4; pointer-events:none; }
.my-s-chapbook .mch-header { padding:36px 20px 20px; text-align:center; position:relative; }
.my-s-chapbook .mch-av { width:64px; height:64px; border-radius:50%; background:var(--bgi); display:flex; align-items:center; justify-content:center; font-size:24px; color:var(--ac); font-weight:600; margin:0 auto 14px; overflow:hidden; box-shadow:0 0 0 1px var(--bd), 0 0 0 4px color-mix(in srgb,var(--ac) 14%,transparent); }
.my-s-chapbook .mch-av img { width:100%; height:100%; object-fit:cover; }
.my-s-chapbook .mch-name { font-family:var(--serif); font-size:22px; font-weight:700; color:var(--tx3); letter-spacing:3px; }
.my-s-chapbook .mch-rule { width:36px; height:1.5px; background:var(--ac); margin:8px auto 0; opacity:.5; }
.my-s-chapbook .mch-stat { font-size:12px; color:var(--tx2); margin-top:8px; letter-spacing:1px; }
.my-s-chapbook .mch-stat strong { color:var(--tx3); font-weight:600; }
.my-s-chapbook .mch-bio { font-family:var(--serif); font-size:14px; color:var(--tx2); line-height:1.8; font-style:italic; max-width:300px; margin:14px auto 0; word-break:break-word; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.my-s-chapbook .mch-bio.expanded { display:block; }
.my-s-chapbook .mch-works { padding:0 20px; }
.my-s-chapbook .mch-work { padding:20px 0; border-bottom:1px solid var(--bd); position:relative; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.my-s-chapbook .mch-work:active { opacity:.7; }
.my-s-chapbook .mch-work:last-child { border-bottom:none; }
.my-s-chapbook .mch-work-num { font-family:var(--display); font-size:28px; font-weight:400; color:var(--bd); position:absolute; top:18px; right:0; line-height:1; }
.my-s-chapbook .mch-work-title { font-family:var(--serif); font-size:17px; font-weight:600; color:var(--tx3); letter-spacing:1.5px; margin-bottom:6px; padding-right:32px; }
.my-s-chapbook .mch-work-excerpt { font-family:var(--serif); font-size:14px; color:var(--tx2); line-height:1.85; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.my-s-chapbook .mch-work-foot { font-size:12px; color:var(--tx2); margin-top:6px; display:flex; align-items:center; gap:6px; }

/* ── Gallery: 導覽牌風格篩選 ── */
.mg-guide-board {
  margin:16px 20px;
  padding:14px 18px;
  background:var(--bg2);
  border:1px solid var(--bd);
  position:relative;
}
.mg-guide-board::before {
  content:'';
  position:absolute;
  top:5px; left:5px; right:5px; bottom:5px;
  border:1px solid var(--bd);
  pointer-events:none;
}
.mg-guide-title {
  font-family:var(--display);
  font-size:11px;
  font-weight:600;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--tx2);
  text-align:center;
  margin-bottom:12px;
}
.mg-guide-list { 
  display:flex; justify-content:center; gap:14px; align-items:center;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  position:relative; padding-bottom:4px;
}
.mg-guide-list::-webkit-scrollbar { display:none; }
.mg-guide-list::after {
  content:'';
  position:absolute;
  bottom:2px;
  left:var(--ti-left,0);
  width:var(--ti-w,0);
  height:1px;
  background:var(--ac);
  transition:left .3s cubic-bezier(.4,0,.2,1), width .3s cubic-bezier(.4,0,.2,1);
}
.mg-guide-item {
  font-family:var(--serif);
  font-size:14px;
  color:var(--tx);
  cursor:pointer;
  padding:4px 0;
  transition:color .3s;
}
.mg-guide-item.active { color:var(--ac); }
.mg-guide-item:active { opacity:.7; }

/* ── Bunko: 書擋風格篩選 + 書架 ── */
.mbk-folder-list {
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap:8px;
  padding:20px 16px 14px;
  height:144px;
  margin-bottom:16px;
  background:linear-gradient(180deg, transparent 0%, transparent 70%, #D4CCC0 70%, #C8C0B4 100%);
  position:relative;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.mbk-folder-list::-webkit-scrollbar { display:none; }
body.theme-dark .mbk-folder-list,
body.theme-dark-warm .mbk-folder-list,
body.theme-dark-green .mbk-folder-list,
body.theme-midnight .mbk-folder-list,
body.theme-dark-grey .mbk-folder-list,
body.theme-dark-brown .mbk-folder-list,
body.theme-dark-rose .mbk-folder-list,
body.theme-black .mbk-folder-list {
  background:linear-gradient(180deg, transparent 0%, transparent 70%, #3a3632 70%, #2e2a26 100%);
}
.mbk-folder-list::after {
  content:'';
  position:absolute;
  bottom:0; left:0; right:0;
  height:8px;
  background:linear-gradient(180deg, #C8C0B4 0%, #B8B0A4 50%, #A8A094 100%);
  box-shadow:0 2px 4px rgba(0,0,0,.1);
}
body.theme-dark .mbk-folder-list::after,
body.theme-dark-warm .mbk-folder-list::after,
body.theme-dark-green .mbk-folder-list::after,
body.theme-midnight .mbk-folder-list::after,
body.theme-dark-grey .mbk-folder-list::after,
body.theme-dark-brown .mbk-folder-list::after,
body.theme-dark-rose .mbk-folder-list::after,
body.theme-black .mbk-folder-list::after {
  background:linear-gradient(180deg, #2e2a26 0%, #262220 50%, #1e1c1a 100%);
}
.mbk-folder-tab {
  flex-shrink:0;
  width:40px;
  height:100px;
  background:linear-gradient(180deg, #EAE6E0 0%, #DED8D0 100%);
  border:1px solid #D0CAC2;
  border-radius:2px;
  display:flex;
  align-items:center;
  justify-content:center;
  writing-mode:vertical-rl;
  text-orientation:mixed;
  font-family:var(--serif);
  font-size:14px;
  color:var(--tx);
  letter-spacing:2px;
  box-shadow:1px 1px 3px rgba(0,0,0,.08);
  cursor:pointer;
  transition:all .3s cubic-bezier(.4,0,.2,1);
  position:relative;
  z-index:1;
}
body.theme-dark .mbk-folder-tab,
body.theme-dark-warm .mbk-folder-tab,
body.theme-dark-green .mbk-folder-tab,
body.theme-midnight .mbk-folder-tab,
body.theme-dark-grey .mbk-folder-tab,
body.theme-dark-brown .mbk-folder-tab,
body.theme-dark-rose .mbk-folder-tab,
body.theme-black .mbk-folder-tab {
  background:linear-gradient(180deg, #4a4640 0%, #3e3a36 100%);
  border-color:#5a5650;
  color:var(--tx);
}
.mbk-folder-tab:active { transform:scale(.95); }
.mbk-folder-tab.active {
  height:110px;
  background:linear-gradient(180deg, #8B7B68 0%, #7A6A58 100%);
  border-color:#6A5A48;
  color:#FAF8F5;
  font-weight:600;
  box-shadow:2px 2px 6px rgba(0,0,0,.12);
}
body.theme-dark .mbk-folder-tab.active,
body.theme-dark-warm .mbk-folder-tab.active,
body.theme-dark-green .mbk-folder-tab.active,
body.theme-midnight .mbk-folder-tab.active,
body.theme-dark-grey .mbk-folder-tab.active,
body.theme-dark-brown .mbk-folder-tab.active,
body.theme-dark-rose .mbk-folder-tab.active,
body.theme-black .mbk-folder-tab.active {
  background:linear-gradient(180deg, #6a6050 0%, #5a5040 100%);
  border-color:#7a7060;
  color:#F0EDE8;
}

.mbk-bookcase { padding:0 16px; }
.mbk-shelf-row {
  display:flex;
  align-items:flex-end;
  gap:8px;
  padding:12px 12px 0;
  margin-bottom:16px;
  background:linear-gradient(180deg, transparent 0%, transparent 85%, #D4CCC0 85%, #C8C0B4 100%);
  position:relative;
}
body.theme-dark .mbk-shelf-row,
body.theme-dark-warm .mbk-shelf-row,
body.theme-dark-green .mbk-shelf-row,
body.theme-midnight .mbk-shelf-row,
body.theme-dark-grey .mbk-shelf-row,
body.theme-dark-brown .mbk-shelf-row,
body.theme-dark-rose .mbk-shelf-row,
body.theme-black .mbk-shelf-row {
  background:linear-gradient(180deg, transparent 0%, transparent 85%, #3a3632 85%, #2e2a26 100%);
}
.mbk-shelf-row::after {
  content:'';
  position:absolute;
  bottom:0; left:0; right:0;
  height:8px;
  background:linear-gradient(180deg, #C8C0B4 0%, #B8B0A4 50%, #A8A094 100%);
  border-radius:0 0 2px 2px;
  box-shadow:0 2px 4px rgba(0,0,0,.1);
}
body.theme-dark .mbk-shelf-row::after,
body.theme-dark-warm .mbk-shelf-row::after,
body.theme-dark-green .mbk-shelf-row::after,
body.theme-midnight .mbk-shelf-row::after,
body.theme-dark-grey .mbk-shelf-row::after,
body.theme-dark-brown .mbk-shelf-row::after,
body.theme-dark-rose .mbk-shelf-row::after,
body.theme-black .mbk-shelf-row::after {
  background:linear-gradient(180deg, #2e2a26 0%, #262220 50%, #1e1c1a 100%);
}
.mbk-spacer { flex:1; }

/* ── Index: 目錄分組式 ── */
.mix-toc { padding:0 28px 20px; }
.mix-toc-section { margin-bottom:20px; }
.mix-toc-folder {
  display:flex;
  align-items:center;
  gap:8px;
  font-family:var(--serif);
  font-size:15px;
  font-weight:600;
  color:var(--tx3);
  margin-bottom:10px;
  cursor:pointer;
  letter-spacing:.5px;
}
.mix-toc-folder::before {
  content:'';
  width:6px;
  height:6px;
  background:var(--ac);
  border-radius:50%;
}
.mix-toc-folder.collapsed::after {
  content:'+';
  margin-left:auto;
  font-size:16px;
  color:var(--tx2);
  font-weight:400;
}

/* ── Feed: Tab 篩選 ── */
.mfd-tabs {
  display:flex;
  border-bottom:1px solid var(--bd);
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  position:relative;
}
.mfd-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 .3s cubic-bezier(.4,0,.2,1), width .3s cubic-bezier(.4,0,.2,1);
}
.mfd-tabs::-webkit-scrollbar { display:none; }
.mfd-manage-btn { align-self:center; flex-shrink:0; padding:0 12px; }
.mfd-tab {
  flex:1;
  min-width:fit-content;
  padding:14px 16px;
  font-size:14px;
  color:var(--tx2);
  text-align:center;
  cursor:pointer;
  transition:color .3s;
  white-space:nowrap;
}
.mfd-tab.active {
  color:var(--ac);
  font-weight:600;
}
.mfd-tab:active { opacity:.7; }
.mfd-posts { padding:0; }

/* ── Chapbook: 分卷篩選 ── */
.mch-volumes {
  display:flex;
  justify-content:center;
  gap:20px;
  padding:0 20px 28px;
  position:relative;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.mch-volumes::-webkit-scrollbar { display:none; }
.mch-volumes::after {
  content:'';
  position:absolute;
  bottom:26px;
  left:var(--ti-left,0);
  width:var(--ti-w,0);
  height:1px;
  background:var(--ac);
  transition:left .3s cubic-bezier(.4,0,.2,1), width .3s cubic-bezier(.4,0,.2,1);
}
.mch-volume {
  font-family:var(--serif);
  font-size:14px;
  color:var(--tx2);
  cursor:pointer;
  letter-spacing:2px;
  padding:4px 0;
  transition:color .3s;
}
.mch-volume.active {
  color:var(--ac);
}
.mch-volume:active { opacity:.6; }

/* ── Profile style selector (in edit panel) ── */
.pf-style-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:8px; padding:4px 0; }
.pf-style-opt {
  aspect-ratio:3/4; border-radius:10px; border:2px solid var(--bd); background:var(--bg3);
  cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  gap:0; padding:0 0 6px; transition:all .15s; -webkit-tap-highlight-color:transparent; overflow:hidden;
}
.pf-style-opt:active { transform:scale(.94); }
.pf-style-opt.active { border-color:var(--ac); background:var(--acl); }
.pf-style-preview { flex:1; width:100%; display:flex; align-items:center; justify-content:center; padding:6px; }
.pf-style-preview svg { width:24px; height:24px; stroke:var(--tx2); fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.pf-style-opt.active .pf-style-preview svg { stroke:var(--ac); }
.pf-style-label { font-size:12px; color:var(--tx2); font-weight:600; }
.pf-style-opt.active .pf-style-label { color:var(--ac); }

/* ════════════════════════════════════════
   Manage List
   ════════════════════════════════════════ */
.manage-list { padding:0 16px 80px; }
.manage-item { display:flex; align-items:center; gap:12px; padding:14px 0; border-bottom:1px solid var(--bd); cursor:pointer; -webkit-tap-highlight-color:transparent; }
.manage-item:last-child { border-bottom:none; }
.manage-item:active { opacity:.6; }
.manage-icon { width:36px; height:36px; border-radius:8px; background:var(--bg3); display:flex; align-items:center; justify-content:center; color:var(--tx2); flex-shrink:0; border:1px solid var(--bd); }
.manage-icon svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.8; }
.manage-info { flex:1; min-width:0; }
.manage-name { font-size:15px; font-weight:500; color:var(--tx3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.manage-meta { font-size:13px; color:var(--tx2); margin-top:2px; display:flex; align-items:center; gap:6px; }
.manage-badge { font-size:12px; padding:1px 7px; border-radius:8px; font-weight:500; }
.manage-badge.draft { background:var(--bgi); color:var(--tx2); }
.manage-badge.pub { background:var(--acl); color:var(--ac); }
.manage-arrow { width:14px; height:14px; stroke:var(--bd2); fill:none; stroke-width:2; stroke-linecap:round; flex-shrink:0; }
.manage-reorder { display:flex; flex-direction:column; gap:2px; margin-right:4px; flex-shrink:0; }
.reorder-btn { background:none; border:none; color:var(--tx2); cursor:pointer; padding:2px; -webkit-tap-highlight-color:transparent; }
.reorder-btn:active { color:var(--ac); }
.reorder-btn svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; }
.manage-del-btn {
  width:30px; height:30px; border-radius:8px; border:none; background:none;
  color:var(--tx2); cursor:pointer; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; -webkit-tap-highlight-color:transparent; transition:color .15s;
}
.manage-del-btn:active { color:var(--del); }
.manage-del-btn svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.pin-badge { display:inline-flex; align-items:center; gap:3px; font-size:13px; color:var(--ac); font-weight:500; margin-left:8px; }
.pin-badge svg { width:12px; height:12px; stroke:currentColor; fill:currentColor; stroke-width:0; }

/* ════════════════════════════════════════
   Full-Page Panels
   ════════════════════════════════════════ */
.fp {
  position:fixed; inset:0; z-index:260; background:var(--bg);
  display:flex; flex-direction:column;
  visibility:hidden; opacity:0; 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; 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-bottom:1px solid var(--bd); display:flex; align-items:center; gap:10px; background:var(--bg2); flex-shrink:0; }
.fp-title { font-size:16px; font-weight:600; color:var(--tx3); flex:1; }
.fp-btn { background:none; border:none; color:var(--ac); font-size:15px; font-weight:600; cursor:pointer; padding:6px 2px; font-family:inherit; }
.fp-btn:active { opacity:.5; }

/* ════════════════════════════════════════
   Reading View
   ════════════════════════════════════════ */
.reading-progress { position:fixed; top:0; left:0; height:2px; background:var(--ac); z-index:300; transition:width .1s linear; width:0; border-radius:0 2px 2px 0; }
.reading-body { padding:28px 20px 60px; max-width:640px; margin:0 auto; }
.reading-title-block { display:flex; align-items:flex-end; justify-content:space-between; gap:8px; margin-bottom:8px; }
.reading-title-block h1 { font-size:24px; font-weight:700; color:var(--tx3); font-family:var(--serif); line-height:1.45; margin:0; flex:1; min-width:0; }
.reading-title-block .reading-author { font-size:14px; color:var(--tx2); font-weight:500; flex-shrink:0; white-space:nowrap; padding-bottom:2px; }
.reading-title-block .reading-author .author-link { color:var(--ac); cursor:pointer; }
.reading-subtitle { font-size:17px; font-weight:500; color:var(--tx2); font-family:var(--serif); padding-left:1em; margin-bottom:6px; }
.reading-divider { border:none; border-top:1px solid var(--bd); margin:18px 0 28px; }
.reading-content { font-size:16px; line-height:2; color:var(--tx); font-family:var(--serif); letter-spacing:.02em; }
.reading-content p { margin-bottom:22px; text-indent:2em; }
.reading-content p.no-indent { text-indent:0; }
.reading-content blockquote { margin:28px 0; padding:14px 18px; border-left:3px solid var(--ac); color:var(--tx2); font-style:italic; font-size:15px; text-indent:0; background:var(--bg3); border-radius:0 8px 8px 0; }
.reading-content .end-mark { text-align:center; margin:40px 0; color:var(--tx2); letter-spacing:.4em; font-size:13px; text-indent:0; opacity:.5; }
/* ── Chapter dots (above action bar) ── */
.reading-ch-dots {
  position:fixed; bottom:calc(env(safe-area-inset-bottom,0px) + 46px);
  left:0; right:0; z-index:251;
  display:flex; align-items:center; justify-content:center; gap:6px;
  padding:4px 0; pointer-events:none; background:var(--bg2);
}
.reading-ch-dot {
  width:6px; height:6px; border-radius:50%; background:var(--bd);
  transition:all .25s;
}
.reading-ch-dot.active { background:var(--ac); width:16px; border-radius:3px; }
/* ── Chapter swipe hint (edge arrows) ── */
.reading-swipe-hint {
  position:absolute; top:50%; width:28px; height:28px; border-radius:50%;
  background:var(--bg2); border:1px solid var(--bd); color:var(--tx2);
  display:flex; align-items:center; justify-content:center;
  transform:translateY(-50%); opacity:0; transition:opacity .2s;
  pointer-events:none; box-shadow:0 2px 8px var(--sh); z-index:5;
}
.reading-swipe-hint svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; }
.reading-swipe-hint.left { left:6px; }
.reading-swipe-hint.right { right:6px; }
.reading-swipe-hint.visible { opacity:1; }
.reading-actions-bar { position:fixed; bottom:0; left:0; right:0; z-index:250; background:var(--bg2); border-top:1px solid var(--bd); padding:10px 16px calc(env(safe-area-inset-bottom,0px) + 10px); display:flex; align-items:center; justify-content:center; gap:32px; }
.reading-ch-dots-wrap { position:fixed; bottom:calc(env(safe-area-inset-bottom,0px) + 52px); left:0; right:0; z-index:251; pointer-events:none; }
.reading-act { cursor:pointer; color:var(--tx2); transition:color .15s; -webkit-tap-highlight-color:transparent; display:flex; align-items:center; justify-content:center; padding:4px; }
.reading-act:active { transform:scale(.9); }
.reading-act svg { width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:all .2s; }
.reading-act.liked { color:var(--ac); }
.reading-act.liked svg { fill:var(--ac); }
.reading-act.bookmarked { color:var(--ac); }
.reading-act.bookmarked svg { fill:var(--ac); }

/* ── Vertical reading ── */
.reading-body.vertical { writing-mode:vertical-rl; text-orientation:mixed; overflow-x:auto; overflow-y:hidden; height:calc(100vh - 160px); max-width:none; padding:24px; margin:0; margin-left:auto; }
.reading-body.vertical .reading-title-block { margin-bottom:0; margin-left:24px; flex-direction:row; align-items:flex-start; justify-content:flex-start; }
.reading-body.vertical .reading-title-block h1 { font-size:22px; }
.reading-body.vertical .reading-title-block .reading-author { padding-bottom:0; padding-top:4px; }
.reading-body.vertical .reading-subtitle { padding-left:0; padding-top:1em; margin-bottom:0; margin-left:8px; }
.reading-body.vertical .reading-divider { border-top:none; border-left:1px solid var(--bd); margin:0; margin-left:24px; padding-left:0; height:auto; align-self:stretch; }
.reading-body.vertical .reading-content { letter-spacing:.05em; }
.reading-body.vertical .reading-content p { margin-bottom:0; margin-left:20px; text-indent:0; }
.reading-body.vertical .reading-content blockquote { margin:0; margin-left:20px; border-left:none; border-top:3px solid var(--ac); border-right:none; padding:18px 14px; background:var(--bg3); border-radius:0 0 8px 8px; }
.reading-body.vertical .reading-content .end-mark { margin:0; margin-left:20px; letter-spacing:.2em; }

/* ── Reading settings overlay ── */
.read-settings { position:fixed; bottom:0; left:0; right:0; z-index:280; background:var(--bg2); border-top:1px solid var(--bd); border-radius:16px 16px 0 0; padding:20px 20px calc(env(safe-area-inset-bottom,0px) + 20px); transform:translateY(100%); transition:transform .34s var(--e-sheet); }
.read-settings.show { transform:translateY(0); }
.rs-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.rs-title { font-size:15px; font-weight:600; color:var(--tx3); }
.rs-close { background:none; border:none; color:var(--tx2); font-size:18px; cursor:pointer; padding:4px; }
.rs-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.rs-row:last-child { margin-bottom:0; }
.rs-label { font-size:13px; color:var(--tx2); flex-shrink:0; }
.rs-options { display:flex; gap:6px; }
.rs-opt { padding:6px 14px; border-radius:16px; border:1px solid var(--bd); background:var(--bg3); color:var(--tx2); font-size:12px; cursor:pointer; font-family:inherit; transition:all .15s; -webkit-tap-highlight-color:transparent; }
.rs-opt:active { opacity:.7; }
.rs-opt.a { background:var(--ac); border-color:var(--ac); color:#fff; font-weight:500; }
.rs-size-ctrl { display:flex; align-items:center; gap:12px; }
.rs-size-btn { width:30px; height:30px; border-radius:50%; border:1px solid var(--bd); background:var(--bg3); color:var(--tx2); display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:16px; font-weight:500; -webkit-tap-highlight-color:transparent; }
.rs-size-btn:active { background:var(--ac); color:#fff; border-color:var(--ac); }
.rs-size-val { font-size:13px; color:var(--tx3); font-weight:500; min-width:30px; text-align:center; }
.rs-backdrop { position:fixed; inset:0; z-index:275; background:rgba(0,0,0,.15); visibility:hidden; opacity:0; transition:opacity .3s var(--e-soft), visibility .3s; }
.rs-backdrop.show { visibility:visible; opacity:1; }

/* ════════════════════════════════════════
   Editor
   ════════════════════════════════════════ */
.editor-body { flex:1; overflow-y:auto; display:flex; flex-direction:column; }
.editor-toolbar { display:flex; align-items:center; gap:2px; padding:8px 16px; border-bottom:1px solid var(--bd); background:var(--bg2); flex-shrink:0; }
.fmt-btn { background:none; border:none; color:var(--tx2); cursor:pointer; padding:8px 10px; border-radius:8px; display:flex; align-items:center; justify-content:center; transition:all .15s; font-family:var(--serif); }
.fmt-btn:active { background:var(--bgi); color:var(--ac); }
.fmt-btn svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.editor-area { flex:1; max-width:640px; width:100%; margin:0 auto; padding:28px 20px 120px; }
.editor-area .title-input { width:100%; background:none; border:none; font-size:22px; font-weight:700; color:var(--tx3); font-family:var(--serif); margin-bottom:6px; line-height:1.4; }
.editor-area .subtitle-input { width:100%; background:none; border:none; font-size:16px; font-weight:500; color:var(--tx2); font-family:var(--serif); margin-bottom:18px; line-height:1.4; }
.editor-area .subtitle-input::placeholder { color:var(--tx2); opacity:.5; }
.editor-area .subtitle-input:focus { color:var(--tx3); }
.editor-area .rich-editor { width:100%; min-height:50vh; background:none; border:none; font-size:16px; color:var(--tx); line-height:2; font-family:var(--serif); letter-spacing:.02em; outline:none; }
.editor-area .rich-editor:empty::before { content:'開始書寫⋯⋯'; color:var(--tx2); opacity:.5; pointer-events:none; }
.editor-area .rich-editor p { margin-bottom:16px; }
.editor-area .rich-editor.indent p { text-indent:2em; }
.editor-area .rich-editor h2 { font-size:18px; font-weight:700; color:var(--tx3); margin:24px 0 12px; }
.editor-area .rich-editor blockquote { margin:16px 0; padding:12px 16px; border-left:3px solid var(--ac); color:var(--tx2); font-style:italic; background:var(--bg3); border-radius:0 8px 8px 0; }
.editor-area .rich-editor hr { border:none; border-top:1px solid var(--bd); margin:24px 0; }
.editor-area .rich-editor img { max-width:100%; border-radius:8px; margin:12px 0; }

/* ── Editor: Vertical mode ── */
.editor-area.vertical { 
  writing-mode:vertical-rl; text-orientation:mixed; 
  overflow-x:auto; overflow-y:hidden; 
  max-width:none; height:calc(100vh - 240px); 
  padding:24px; padding-left:120px;
}
.editor-area.vertical .title-input { 
  width:auto; height:auto; 
  margin-bottom:0; margin-left:20px;
  display:inline-block;
}
.editor-area.vertical .subtitle-input { 
  width:auto; height:auto; 
  margin-bottom:0; margin-left:16px;
  display:inline-block;
}
.editor-area.vertical .rich-editor { 
  width:auto; height:auto; min-height:auto; 
  display:inline-block;
}
.editor-area.vertical .rich-editor p {
  margin-bottom:0; margin-left:16px;
}
.editor-area.vertical .rich-editor h2 {
  margin:0; margin-left:24px;
}
.editor-area.vertical .rich-editor blockquote {
  margin:0; margin-left:16px;
  border-left:none; border-top:3px solid var(--ac);
  border-radius:0 0 8px 8px;
}

.editor-foot { position:fixed; bottom:0; left:0; right:0; z-index:250; background:var(--bg2); border-top:1px solid var(--bd); padding:12px 16px calc(env(safe-area-inset-bottom,0px) + 16px); display:flex; align-items:center; justify-content:space-between; }
.word-count { font-size:13px; color:var(--tx2); transition:color .3s; }
.word-count.saved { color:var(--ac); }

/* ── Editor: Meta row (folder + category) ── */
.ed-meta-row {
  display:flex; align-items:center; padding:10px 16px; gap:0;
  border-bottom:1px solid var(--bd); background:var(--bg2); flex-shrink:0;
}
.ed-meta-item {
  display:flex; align-items:center; gap:6px; padding:6px 12px; cursor:pointer;
  color:var(--tx2); font-size:14px; -webkit-tap-highlight-color:transparent;
  border-radius:8px;
}
.ed-meta-item:active { background:var(--bg3); }
.ed-meta-item svg { flex-shrink:0; }
.ed-meta-sep { width:1px; height:20px; background:var(--bd); margin:0 4px; flex-shrink:0; }
.ed-practice-btn {
  display:flex; align-items:center; gap:4px; margin-left:auto;
  font-size:13px; font-weight:500; color:var(--ac); cursor:pointer;
  -webkit-tap-highlight-color:transparent; flex-shrink:0;
}
.ed-practice-btn:active { opacity:.6; }
.ed-practice-btn svg { flex-shrink:0; }

/* ── Editor: Hashtag input ── */
.ed-hashtag-bar {
  display:flex; align-items:center; gap:6px; padding:8px 16px; flex-wrap:wrap;
  border-bottom:1px solid var(--bd); background:var(--bg2); flex-shrink:0; min-height:40px;
}
.ed-hashtag-pills { display:flex; gap:5px; flex-wrap:wrap; }
.ed-hashtag-pill {
  display:inline-flex; align-items:center; gap:4px; padding:3px 10px; border-radius:12px;
  background:var(--acl); color:var(--ac); font-size:13px; font-weight:500;
  -webkit-tap-highlight-color:transparent;
}
.ed-hashtag-pill .ed-ht-x {
  width:14px; height:14px; border-radius:50%; background:none; border:none;
  color:var(--ac); font-size:14px; cursor:pointer; display:flex; align-items:center;
  justify-content:center; line-height:1; opacity:.6;
}
.ed-hashtag-pill .ed-ht-x:active { opacity:1; }
.ed-hashtag-input {
  flex:1; min-width:80px; border:none; background:none; color:var(--tx);
  font-size:14px; font-family:inherit; padding:4px 0;
}
.ed-hashtag-input:focus { outline:none; }
.ed-hashtag-input::placeholder { color:var(--tx2); opacity:.6; }

/* ── Editor: Chapter tabs ── */
.ed-chapter-bar { display:flex; align-items:center; padding:0 16px; border-bottom:1px solid var(--bd); background:var(--bg2); flex-shrink:0; }
.ed-chapter-tabs { display:flex; gap:0; flex:1; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.ed-chapter-tabs::-webkit-scrollbar { display:none; }
.ed-ch-tab {
  padding:10px 16px; font-size:14px; color:var(--tx2); cursor:pointer; font-family:inherit;
  white-space:nowrap; flex-shrink:0; border-bottom:2px solid transparent;
  transition:all .15s; -webkit-tap-highlight-color:transparent; position:relative;
}
.ed-ch-tab:active { opacity:.7; }
.ed-ch-tab.active { color:var(--ac); font-weight:600; border-bottom-color:var(--ac); }
.ed-chapter-add {
  width:32px; height:32px; border-radius:8px; border:none; background:none;
  color:var(--tx2); cursor:pointer; display:flex; align-items:center; justify-content:center;
  flex-shrink:0; -webkit-tap-highlight-color:transparent;
}
.ed-chapter-add:active { color:var(--ac); }
.btn { padding:9px 16px; border-radius:10px; border:none; background:var(--bg3); color:var(--tx); font-size:15px; cursor:pointer; font-family:inherit; font-weight:500; transition:transform .18s var(--e-press); -webkit-tap-highlight-color:transparent; }
.btn:active { transform:scale(.95); }
.bp { background:var(--ac); color:#fff; }

/* ════════════════════════════════════════
   Writing Practice — Envelope (練習題)

   整套拆信沿用 Reverie 的實體結構（css/style.css 的 .env-* 與
   js/stories.js 的 openStoryReadFromData）。幾何數字刻意跟 Reverie
   一模一樣，兩邊哪天要調動畫才對照得起來。
   差別在信封裡裝的東西：Reverie 是一張對摺的信紙，抽出來還要攤開才讀得到
   故事；Lucid 裝的是一張題目卡，一眼看完，所以沒有攤開那一段。

   幾何基準（信封 wrap 300×210，C＝場景垂直中心）
     信封本體 y = C-65 → C+105（高 170），C-65 這條邊就是開口
     封口鉸鏈在開口那條邊，闔上時三角尖端落在 C+15，封蠟壓在尖端

   圖層（同一個 stacking context，數字愈大愈靠近觀眾）
     信封背面＋開口 0 ＜ 題目卡 1 ＜ 信封正面（三片摺葉）2 ＜ 封口 3 ＜ 封蠟 4
     信封拆成「背面」與「正面」兩層、題目卡夾在中間，是照實體結構做的：
     開口（.wp-env-mouth）是一個洞，透過它看到的是信封裡面也就是那張卡，
     所以它必須排在卡片後面；擋住卡片的是三片摺葉那一面。整片壓在卡片上
     會變成「信封是開的但看不見裡面的東西」。
     封口翻完會降到 0：它這時已經折到信封背面，卡片要從它前面出來。
     ⚠ .wp-env-wrap 不能有 z-index 或 transform，否則它會自成一個圖層群組，
       夾在中間的卡片就擠不進去了（退場位移是加在它三個子層上，不是它自己）。

   時間軸是 writing-practice.js 裡的 steps 那張表，改順序只要改那張表。

   顏色全部走主題變數：信封本體與卡片是 --bg2，封蠟與分隔線是 --ac，
   受光與陰影一律用 rgba 疊在上面，換主題不用改任何一條規則。
   【這一整段禁止使用 color-mix()】舊瀏覽器（2023 年前）算不出來，
   而且失效是無聲的：不會報錯，只會整片消失。
   ════════════════════════════════════════ */
.wp-ov {
  position:fixed; inset:0; z-index:600; background:rgba(0,0,0,.55);
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .5s; pointer-events:none;
}
.wp-ov.show { opacity:1; pointer-events:auto; }
.wp-ov.fade-out { opacity:0; transition:opacity .8s; pointer-events:none; }

/* 整組輕輕浮上來，信封不是憑空出現在畫面正中央 */
.wp-scene {
  --wp-s:1;
  position:relative; width:100%; height:100%; overflow:hidden; cursor:pointer;
  opacity:0; transform:translateY(12px) scale(calc(var(--wp-s) * .985));
  transition:opacity .55s var(--e-soft), transform .55s var(--e-soft);
}
.wp-ov.show .wp-scene { opacity:1; transform:scale(var(--wp-s)); }
/* 桌機縮放（--wp-s）
   底下整套幾何是照手機 390×780 畫的，座標全部寫死 px。桌機視窗大兩三倍，
   若只是「擺在正中央」，信封會小得像一枚郵票。這裡不重排也不改任何座標，
   而是把整個場景等比放大，時間軸與位移量一行都不用動。
   要放大／縮小只改這三個數字，不要去動下面的幾何。
     寬高都要過門檻才升級：只有寬夠但視窗很扁（筆電、手機橫放）時放大，
     攤開的信紙會頂到上下邊，所以 min-height 是必要條件不是保險。 */
@media (min-width:600px) and (min-height:600px) { .wp-scene { --wp-s:1.15; } }
@media (min-width:820px) and (min-height:720px) { .wp-scene { --wp-s:1.3; } }
@media (min-width:1024px) and (min-height:840px) { .wp-scene { --wp-s:1.45; } }

/* ── 18+ toggle (top-right corner) ── */
.wp-top-bar {
  position:absolute; top:max(16px, env(safe-area-inset-top, 16px)); right:16px;
  display:flex; align-items:center; gap:8px; z-index:10;
}
.wp-toggle-label { font-size:13px; color:rgba(255,255,255,.6); }
.wp-toggle {
  width:36px; height:20px; border-radius:10px; background:rgba(255,255,255,.15);
  border:1px solid rgba(255,255,255,.2); position:relative; cursor:pointer;
  transition:background .2s, border-color .2s; -webkit-tap-highlight-color:transparent;
}
.wp-toggle::after {
  content:''; position:absolute; top:2px; left:2px; width:14px; height:14px;
  border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2);
  transition:transform .2s;
}
.wp-toggle.on { background:var(--ac); border-color:var(--ac); }
.wp-toggle.on::after { transform:translateX(16px); }

/* ── 信封本體：背面（含開口）與正面（三片摺葉）是兩層，信紙夾在中間 ──
   兩層幾何完全一樣（300×170、貼齊 wrap 底部），差別只有 z-index 和內容物。
   要動幾何請兩邊一起動。 */
.wp-env-wrap { position:absolute; top:50%; left:50%; width:300px; height:210px; margin:-105px 0 0 -150px; }
/* 背面：整組的底色與落影掛在這裡。z-index 0，在信紙之後 */
.wp-env-back {
  position:absolute; bottom:0; width:300px; height:170px; z-index:0;
  background:var(--bg2); border-radius:3px; overflow:hidden;
  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);
}
/* 掀開封口後露出來的開口。它是一個洞：比信封表面暗，而且信紙會從它前面經過，
   所以看得到裡面那張信，這才是「這封信是開著的」的視覺依據 */
.wp-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，壓在信紙之上，信紙還沒抽出來的部分被它擋住 */
.wp-env-front {
  position:absolute; bottom:0; width:300px; height:170px; z-index:2;
  border-radius:3px; overflow:hidden; pointer-events:none;
  transition:opacity .55s .3s, transform .85s cubic-bezier(.36,0,.42,1);
}
/* 頂點 50% 47% 對齊封口尖端，跟背面那片開口三角剛好把矩形拼滿 */
.wp-ep { position:absolute; inset:0; pointer-events:none; }
.wp-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%);
}
.wp-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%);
}
/* 下片壓在左右兩片之上，所以它的兩條斜邊要往上投影 */
.wp-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));
}
/* 信封表面的受光。開口那塊三角要挖掉：那裡是洞不是紙面，
   受光疊上去會連帶把露在洞裡的信紙一起壓暗 */
.wp-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));
}

/* ── 封口：鉸鏈在開口那條邊，往觀眾方向掀起，再翻到信封背面 ──
   下面幾條曲線是照 Reverie 抄的，不套 --e-* 那組通用 token：
   那幾條是為了紙張與封口的重量特別調出來的，換掉手感就不一樣了。 */
.wp-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);
}
.wp-env-flap-wrap.behind { z-index:0; }
.wp-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));
}
/* 翻過去之後朝上的是封口內面（上膠那一面）：比較平、也不該再投影到信封上 */
.wp-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));
}

/* ── 封蠟：壓在封口尖端，掀封口之前先裂開掉下去 ───────────
   Reverie 的蠟章造型由創作者自選，Lucid 沒有這個設定，
   所以用主題色壓一枚圓蠟，受光與凹陷靠兩層 radial-gradient 做出來。 */
.wp-env-seal {
  position:absolute; top:99px; left:50%; width:44px; height:44px; z-index:4;
  transform:translateX(-50%); border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background-color:var(--ac);
  background-image:radial-gradient(circle at 34% 28%, rgba(255,255,255,.34), rgba(255,255,255,0) 62%),
                   radial-gradient(circle at 70% 82%, rgba(0,0,0,.24), rgba(0,0,0,0) 58%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18), inset 0 -2px 4px rgba(0,0,0,.22),
             0 2px 6px rgba(0,0,0,.34);
}
.wp-env-seal svg { width:19px; height:19px; stroke:rgba(255,255,255,.92); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
@keyframes wpSealBreak {
  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; }
}
.wp-env-seal.broken { animation:wpSealBreak .85s cubic-bezier(.42,0,.28,1) forwards; opacity:0; }

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

/* ── 信件內容：卡片，不是 Reverie 的對摺信紙 ─────────────────
   Reverie 的信要「攤開」，因為裡面是一篇故事，展開這個動作本身就是在讀。
   Lucid 抽到的是一張題目卡，題目與關鍵字一眼看完，沒有可展開的東西，
   對摺只會多兩秒沒有意義的等待。所以內容維持卡片造型，
   照 Reverie 做的是外面那層信封的實體結構。

   三個位置（都以 transform-origin:50% 0，也就是卡片上緣為基準）：
     預設      信封裡（縮 .70），上緣落在 C-54，被封口＋三片摺葉整個蓋住
     .out      抽出來，往上停在信封開口上方，同時放大回原尺寸
     .center   信封退場後歸位到畫面正中

   卡片全程 opacity:1，不用淡入。它一開始就在信封裡，
   「還沒開之前看不到」是幾何保證的，不是靠透明度藏。
   ⚠ 卡片內容變高時要重新驗這件事：上緣 C-54、縮 .70，信封往下只剩 159px，
     所以卡片本身高度上限是 225px。目前最壞情況（兩行題目＋兩排關鍵字）
     約 204px，還留 20px 餘裕；再往卡片塞東西之前先量一次高度。
   ─────────────────────────────────────────────────────────── */
.wp-letter {
  position:absolute; left:50%; top:calc(50% - 54px); z-index:1;
  width:min(300px, 82vw); background:var(--bg2); border-radius:12px;
  padding:28px 24px; cursor:pointer;
  box-shadow:0 14px 34px rgba(0,0,0,.34), 0 3px 9px rgba(0,0,0,.2);
  transform:translateX(-50%) scale(.70); transform-origin:50% 0;
  transition:top .95s cubic-bezier(.24,.9,.3,1), transform .95s cubic-bezier(.24,.9,.3,1);
}
.wp-letter.out { top:calc(50% - 150px); transform:translateX(-50%) scale(1); }
/* 排在 .out 之後才蓋得掉它的 transform：兩個 class 是疊著的，靠順序決勝負 */
.wp-letter.center {
  top:50%; transform:translate(-50%,-50%) scale(1);
  transition:top .8s var(--e-sheet), transform .8s var(--e-sheet);
}

.wp-letter-scene {
  font-family:var(--serif); font-size:18px; font-weight:600; color:var(--tx3);
  line-height:1.5; text-align:center;
}
.wp-letter-divider { width:32px; height:2px; background:var(--ac); margin:14px auto; }
.wp-letter-kw-label { font-size:12px; color:var(--tx2); letter-spacing:1px; margin-bottom:8px; text-align:center; }
.wp-letter-pills { display:flex; gap:6px; flex-wrap:wrap; justify-content:center; }
.wp-letter-pill {
  padding:5px 12px; border-radius:10px; background:var(--bg3); border:1px solid var(--bd);
  font-size:13px; font-weight:500; color:var(--tx);
}
/* 關鍵字在卡片抽出來的時候才一個一個浮現。
   綁在 .out 上而不是一載入就跑：卡片這時還在信封裡，跑完也沒人看到。 */
@keyframes wpPillPop { 0% { opacity:0; transform:scale(.8); } 100% { opacity:1; transform:scale(1); } }
.wp-letter .wp-letter-pill { opacity:0; }
.wp-letter.out .wp-letter-pill { animation:wpPillPop .25s both; }
.wp-letter.out .wp-letter-pill:nth-child(1) { animation-delay:.30s; }
.wp-letter.out .wp-letter-pill:nth-child(2) { animation-delay:.38s; }
.wp-letter.out .wp-letter-pill:nth-child(3) { animation-delay:.46s; }

/* 使用者在系統開了「減少動態效果」→ 不演拆信，直接給結果（無障礙慣例，防暈眩）。
   writing-practice.js 會同步跳過時間軸，這裡只負責把殘餘的過場吃掉。 */
@media (prefers-reduced-motion: reduce) {
  /* 延遲也要一起歸零。只關掉長度的話，帶 delay 的那幾條（信封退場的 .3s、
     關鍵字浮現的 .3～.46s）會變成「先空白等半秒，東西才一次跳出來」，
     比原本的動畫更難看。 */
  .wp-ov, .wp-ov * {
    transition-duration:.01ms !important; transition-delay:0s !important;
    animation-duration:.01ms !important; animation-delay:0s !important;
  }
}

/* ── Bottom actions (floating) ── */
.wp-float-actions {
  position:absolute; bottom:max(24px, env(safe-area-inset-bottom, 24px));
  left:16px; right:16px; display:flex; gap:8px; z-index:20;
  opacity:0; transform:translateY(10px);
  transition:opacity .4s, transform .4s;
}
.wp-float-actions.show { opacity:1; transform:translateY(0); }
.wp-float-actions .btn { min-width:0; flex:1; font-size:15px; padding:12px; border-radius:12px; }

/* ════════════════════════════════════════
   Settings
   ════════════════════════════════════════ */
.set-item { display:flex; align-items:center; gap:10px; padding:13px 20px; cursor:pointer; transition:background .1s; -webkit-tap-highlight-color:transparent; }
.set-item:active { background:var(--bg3); }
.set-item svg { width:17px; height:17px; stroke:var(--tx2); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.set-item-text { flex:1; font-size:15px; color:var(--tx); }
.set-arrow { width:14px; height:14px; stroke:var(--bd2); fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }

/* ── 設定列開關（隨主題色變化，淺色深色都讀得清楚）── */
.set-toggle {
  width:38px; height:22px; border-radius:11px; flex-shrink:0;
  background:var(--bgi); border:1px solid var(--bd2); position:relative;
  transition:background .2s, border-color .2s; -webkit-tap-highlight-color:transparent;
}
.set-toggle::after {
  content:''; position:absolute; top:2px; left:2px; width:16px; height:16px;
  border-radius:50%; background:var(--bg2); box-shadow:0 1px 3px rgba(0,0,0,.2);
  transition:transform .2s;
}
.set-toggle.on { background:var(--ac); border-color:var(--ac); }
.set-toggle.on::after { transform:translateX(16px); background:#fff; }
.set-item svg + .set-toggle, .set-item .set-toggle { margin-left:auto; }

/* ── 除錯主控台（管理員專用的「蟲」）── */
.dev-bug-btn {
  position:fixed; bottom:calc(72px + env(safe-area-inset-bottom, 0px)); right:14px;
  width:42px; height:42px; border-radius:50%; z-index:99998;
  background:var(--ac); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 10px rgba(0,0,0,.35); opacity:.85; cursor:pointer;
  touch-action:none; user-select:none; -webkit-tap-highlight-color:transparent;
}
.dev-bug-btn:active { opacity:1; }
.dev-bug-btn svg { stroke:#fff; fill:none; }

.dev-console {
  display:none; position:fixed; bottom:0; left:0; right:0; height:55vh;
  background:#1a1a1a; color:#ddd; font:12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;
  z-index:99999; flex-direction:column; border-top:2px solid var(--ac);
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
/* 尺寸全面比照 Reverie 的主控台（12px 基準、按鈕 4px 10px）。
   這是管理員工具，不吃全站字級規則；輸入框也跟著 12px，
   Reverie 同款（iOS 聚焦縮放那套規則只管使用者介面，不管這裡） */
.dc-head {
  display:flex; justify-content:space-between; align-items:center;
  padding:6px 10px; background:#252525; flex-shrink:0;
}
.dc-title { font-weight:700; }
.dc-head-btns { display:flex; gap:6px; }
.dc-btn {
  background:#3a3a3a; color:#ddd; border:none; padding:4px 10px; border-radius:4px;
  font:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.dc-btn:active { background:#4a4a4a; }
.dc-btn-warn { background:var(--ach); color:#fff; }
.dc-body { flex:1; overflow-y:auto; padding:8px 10px; -webkit-overflow-scrolling:touch; }
.dc-line { border-bottom:1px solid #333; padding:4px 0; word-break:break-all; white-space:pre-wrap; }
.dc-ts { color:#666; }
.dc-input-wrap {
  display:flex; gap:6px; padding:6px; background:#252525; border-top:1px solid #333; flex-shrink:0;
}
.dc-input {
  flex:1; background:#111; color:#ddd; border:1px solid #444; border-radius:4px;
  padding:6px 10px; font:inherit; outline:none;
}
.dc-input:focus { border-color:var(--ac); }
.dc-run {
  background:var(--ac); color:#fff; border:none; padding:0 14px; border-radius:4px;
  font:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.dc-run:active { background:var(--ach); }

/* 主控台內的確認彈窗（取代瀏覽器原生 confirm） */
.dc-confirm-back {
  position:fixed; inset:0; z-index:100000; background:rgba(0,0,0,.5);
  display:flex; align-items:center; justify-content:center; padding:32px;
}
.dc-confirm-box {
  background:#252525; color:#e8e8e8; border-radius:12px; padding:20px;
  max-width:300px; width:100%; box-shadow:0 8px 30px rgba(0,0,0,.5);
}
.dc-confirm-text { font-size:15px; line-height:1.6; margin-bottom:18px; }
.dc-confirm-row { display:flex; gap:10px; }
.dc-confirm-btn {
  flex:1; padding:10px; border-radius:8px; border:none; font-size:15px; cursor:pointer;
  background:#3a3a3a; color:#ddd; -webkit-tap-highlight-color:transparent;
}
.dc-confirm-yes { background:var(--ac); color:#fff; }

/* ════════════════════════════════════════
   Profile Edit Panel (Reverie card style)
   ════════════════════════════════════════ */
.pf-edit { padding:16px 16px 60px; }
.pf-av-wrap {
  display:flex; flex-direction:column; align-items:center; gap:0; margin-bottom:16px;
  position:relative; width:120px; margin-left:auto; margin-right:auto; margin-top:8px;
}
.pf-av-area {
  position:relative; width:120px; height:120px; border-radius:50%; overflow:hidden;
  border:2px solid var(--bd); background:var(--bgi); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  font-size:42px; color:var(--ac); font-weight:500;
}
.pf-av-area img { width:100%; height:100%; object-fit:cover; pointer-events:none; }
.pf-av-badge {
  position:absolute; bottom:4px; 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:2;
  box-shadow:0 2px 6px rgba(0,0,0,.15);
}
.pf-av-badge svg { width:14px; height:14px; stroke:#fff; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.pf-card {
  background:var(--bg2); border:1px solid var(--bd); border-radius:10px;
  padding:14px; margin-bottom:10px; box-shadow:0 1px 2px var(--sh);
}
.pf-card-title { font-size:16px; font-weight:500; color:var(--tx3); margin-bottom:10px; }
.pf-field { margin-bottom:12px; }
.pf-field:last-child { margin-bottom:0; }
.pf-label { display:block; font-size:14px; color:var(--tx2); margin-bottom:4px; }
.pf-input {
  width:100%; padding:10px 12px; border-radius:8px; border:1px solid var(--bd);
  background:var(--bg); color:var(--tx); font-size:16px; font-family:inherit;
}
.pf-textarea {
  width:100%; padding:10px 12px; border-radius:8px; border:1px solid var(--bd);
  background:var(--bg); color:var(--tx); font-size:16px; font-family:inherit;
  resize:none; line-height:1.6;
}

/* ════════════════════════════════════════
   Theme Picker
   ════════════════════════════════════════ */
.theme-picker { padding:20px; }
.theme-section-label { font-size:13px; font-weight:600; color:var(--tx3); margin-bottom:10px; }
.theme-row { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:20px; }
.theme-dot { width:32px; height:32px; border-radius:50%; cursor:pointer; border:2px solid var(--bd); transition:all .15s; }
.theme-dot:active { transform:scale(.9); }
.theme-dot.active { border-color:var(--tx3); box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--tx3); }

/* ════════════════════════════════════════
   Featured Banner (Slider)
   ════════════════════════════════════════ */
.featured-banner { margin:0; padding:28px 22px 24px; background:linear-gradient(135deg,#1a1a2e 0%,#16213e 50%,#0f3460 100%); color:#fff; cursor:pointer; position:relative; overflow:hidden; -webkit-tap-highlight-color:transparent; border-radius:0; box-sizing:border-box; }
#featured-banner-wrap { overflow:hidden; margin-bottom:18px; position:relative; width:100%; }
.fb-slider { display:flex; transition:transform .5s cubic-bezier(.4,0,.2,1); }
.fb-slider .featured-banner { width:100vw; min-width:100vw; max-width:100vw; flex-shrink:0; }
.fb-quote { font-family:var(--serif); font-size:17px; line-height:1.85; font-weight:400; margin-bottom:18px; opacity:.9; letter-spacing:.03em; overflow-wrap:break-word; }
.featured-banner::before { content:''; position:absolute; top:-50%; right:-30%; width:300px; height:300px; background:radial-gradient(circle,rgba(124,158,178,.15) 0%,transparent 70%); pointer-events:none; }
.featured-banner:active { opacity:.9; }
.fb-label { display:flex; align-items:center; gap:4px; color:rgba(255,255,255,.45); margin-bottom:14px; }
.fb-bottom { display:flex; align-items:center; justify-content:space-between; }
.fb-info { display:flex; flex-direction:column; gap:3px; }
.fb-title { font-size:15px; font-weight:600; letter-spacing:.02em; }
.fb-meta { font-size:12px; color:rgba(255,255,255,.45); display:flex; align-items:center; gap:6px; }
.fb-arrow { width:30px; height:30px; border-radius:50%; border:1px solid rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.5); flex-shrink:0; }
.fb-arrow svg { width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2; }

/* ════════════════════════════════════════
   Feed Page
   ════════════════════════════════════════ */
.feed-section { padding:0 20px 20px; }
.feed-section-title { font-size:14px; font-weight:600; color:var(--tx2); margin-bottom:10px; letter-spacing:.3px; }
.feed-continue { display:flex; align-items:center; gap:12px; padding:14px 16px; background:var(--bg2); border:1px solid var(--bd); border-radius:12px; cursor:pointer; transition:transform .1s; -webkit-tap-highlight-color:transparent; margin-bottom:6px; }
.feed-continue:active { transform:scale(.98); }
.feed-continue-info { flex:1; min-width:0; }
.feed-continue-title { font-size:15px; font-weight:600; color:var(--tx3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.feed-continue-meta { font-size:13px; color:var(--tx2); margin-top:2px; }
.feed-continue-progress { width:36px; height:36px; border-radius:50%; background:conic-gradient(var(--ac) var(--prog), var(--bd) 0); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.feed-continue-inner { width:28px; height:28px; border-radius:50%; background:var(--bg2); display:flex; align-items:center; justify-content:center; font-size:12px; color:var(--tx2); font-weight:500; }
.feed-update { padding:14px 0; border-bottom:1px solid var(--bd); cursor:pointer; -webkit-tap-highlight-color:transparent; }
.feed-update:last-child { border-bottom:none; }
.feed-update:active { opacity:.6; }
.feed-update-head { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.feed-update-av { width:24px; height:24px; border-radius:50%; background:var(--bgi); display:flex; align-items:center; justify-content:center; font-size:12px; color:var(--ac); font-weight:600; }
.feed-update-author { font-size:13px; font-weight:500; color:var(--tx3); }
.feed-update-time { font-size:13px; color:var(--tx2); margin-left:auto; }
.feed-update-title { font-size:15px; font-weight:500; color:var(--tx3); padding-left:32px; }
.feed-update-excerpt { font-size:13px; color:var(--tx2); margin-top:3px; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; padding-left:32px; }
.feed-empty { text-align:center; padding:60px 20px; }
.feed-empty-text { font-size:14px; color:var(--tx2); line-height:1.8; }
.feed-empty-quote { font-family:var(--serif); font-size:15px; color:var(--tx2); font-style:italic; margin-bottom:16px; opacity:.7; }

/* ════════════════════════════════════════
   Follow Button
   ════════════════════════════════════════ */
.follow-btn { padding:8px 0; width:100%; border-radius:10px; border:1.5px solid var(--ac); background:var(--ac); color:#fff; font-size:14px; font-weight:600; cursor:pointer; font-family:inherit; transition:all .15s; -webkit-tap-highlight-color:transparent; }
.follow-btn:active { transform:scale(.96); }
.follow-btn.followed { background:transparent; color:var(--ac); }

/* ════════════════════════════════════════
   Author Profile Page (fp-author)
   ════════════════════════════════════════ */
.author-header { text-align:center; padding:32px 24px 20px; }
.author-av { width:80px; height:80px; border-radius:50%; margin:0 auto 14px; background:var(--bgi); display:flex; align-items:center; justify-content:center; font-size:30px; color:var(--ac); font-weight:600; overflow:hidden; box-shadow:0 2px 12px rgba(0,0,0,.1); }
.author-name { font-size:22px; font-weight:700; color:var(--tx3); margin-bottom:6px; }
.author-stat { font-size:13px; color:var(--tx2); margin-bottom:16px; }
.author-stat strong { font-weight:700; color:var(--tx3); }
.author-follow-wrap { padding:0 24px 8px; }
.author-section-label { font-size:12px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--tx2); opacity:.6; padding:20px 24px 12px; font-family:var(--display); }
.author-works { padding:0 16px 40px; }
.author-work-item { padding:14px 0; border-bottom:1px solid var(--bd); cursor:pointer; -webkit-tap-highlight-color:transparent; }
.author-work-item:last-child { border-bottom:none; }
.author-work-item:active { opacity:.6; }
.author-work-title { font-size:16px; font-weight:600; color:var(--tx3); font-family:var(--serif); }
.author-work-meta { font-size:13px; color:var(--tx2); margin-top:4px; display:flex; align-items:center; gap:6px; }

/* ════════════════════════════════════════
   Notifications
   ════════════════════════════════════════ */
.notif-item { display:flex; align-items:flex-start; gap:10px; padding:14px 20px; border-bottom:1px solid var(--bd); }
.notif-icon { width:32px; height:32px; border-radius:50%; background:var(--acl); display:flex; align-items:center; justify-content:center; color:var(--ac); flex-shrink:0; font-size:12px; font-weight:600; }
.notif-body { flex:1; min-width:0; }
.notif-text { font-size:14px; color:var(--tx); line-height:1.5; }
.notif-text b { font-weight:600; color:var(--tx3); }
.notif-time { font-size:13px; color:var(--tx2); margin-top:2px; }
.notif-dot { width:8px; height:8px; border-radius:50%; background:var(--ac); flex-shrink:0; margin-top:6px; }
.notif-badge { display:none; position:absolute; top:0; right:0; width:8px; height:8px; border-radius:50%; background:var(--del); border:1.5px solid var(--bg); }

/* ════════════════════════════════════════
   Bookmark Modal
   ════════════════════════════════════════ */
.bm-backdrop { position:fixed; inset:0; z-index:290; background:rgba(0,0,0,.2); visibility:hidden; opacity:0; transition:opacity .3s var(--e-soft), visibility .3s; }
.bm-backdrop.show { visibility:visible; opacity:1; }
.bm-sheet { position:fixed; bottom:0; left:0; right:0; z-index:295; background:var(--bg2); border-top:1px solid var(--bd); border-radius:16px 16px 0 0; padding:20px 20px calc(env(safe-area-inset-bottom,0px) + 20px); transform:translateY(100%); transition:transform .34s var(--e-sheet); }
.bm-sheet.show { transform:translateY(0); }
.bm-title { font-size:15px; font-weight:600; color:var(--tx3); margin-bottom:14px; }
.bm-folder { display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:10px; cursor:pointer; transition:background .1s; -webkit-tap-highlight-color:transparent; }
.bm-folder:active { background:var(--bg3); }
.bm-folder-icon { width:32px; height:32px; border-radius:8px; background:var(--acl); display:flex; align-items:center; justify-content:center; color:var(--ac); flex-shrink:0; }
.bm-folder-icon svg { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.8; }
.bm-folder-name { flex:1; font-size:14px; color:var(--tx); }
.bm-folder-check { width:20px; height:20px; border-radius:50%; border:2px solid var(--bd); display:flex; align-items:center; justify-content:center; transition:all .15s; flex-shrink:0; }
.bm-folder-check.checked { background:var(--ac); border-color:var(--ac); }
.bm-folder-check.checked::after { content:''; width:6px; height:3px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg) translateY(-1px); }
.bm-confirm { width:100%; padding:12px; border-radius:10px; border:none; background:var(--ac); color:#fff; font-size:14px; font-weight:600; cursor:pointer; font-family:inherit; margin-top:14px; transition:transform .1s; -webkit-tap-highlight-color:transparent; }
.bm-confirm:active { transform:scale(.97); }

/* ════════════════════════════════════════
   Comments Panel
   ════════════════════════════════════════ */
.cm-sheet { position:fixed; bottom:0; left:0; right:0; z-index:295; background:var(--bg2); border-top:1px solid var(--bd); border-radius:16px 16px 0 0; padding:0; transform:translateY(100%); transition:transform .34s var(--e-sheet); max-height:60vh; display:flex; flex-direction:column; }
.cm-sheet.show { transform:translateY(0); }
.cm-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px 12px; flex-shrink:0; }
.cm-title { font-size:15px; font-weight:600; color:var(--tx3); }
.cm-close { background:none; border:none; color:var(--tx2); font-size:18px; cursor:pointer; padding:4px; }
.cm-list { flex:1; overflow-y:auto; padding:0 20px 12px; }
.cm-item { padding:12px 0; border-bottom:1px solid var(--bd); }
.cm-item:last-child { border-bottom:none; }
.cm-item-head { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.cm-avatar { width:24px; height:24px; border-radius:50%; background:var(--bgi); display:flex; align-items:center; justify-content:center; font-size:12px; color:var(--ac); font-weight:600; }
.cm-name { font-size:13px; font-weight:500; color:var(--tx3); }
.cm-date { font-size:13px; color:var(--tx2); margin-left:auto; }
.cm-text { font-size:14px; color:var(--tx); line-height:1.6; }
.cm-input-wrap { display:flex; align-items:center; gap:10px; padding:12px 20px calc(env(safe-area-inset-bottom,0px) + 12px); border-top:1px solid var(--bd); flex-shrink:0; background:var(--bg3); }
.cm-input { flex:1; background:var(--bg2); border:1px solid var(--bd); border-radius:20px; padding:8px 14px; font-size:14px; color:var(--tx); font-family:inherit; }
.cm-send { background:none; border:none; color:var(--ac); cursor:pointer; padding:4px; flex-shrink:0; }
.cm-send svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ════════════════════════════════════════
   Pro Feature Menu
   ════════════════════════════════════════ */
.pro-sheet { position:fixed; bottom:0; left:0; right:0; z-index:295; background:var(--bg2); border-top:1px solid var(--bd); border-radius:16px 16px 0 0; padding:16px 20px calc(env(safe-area-inset-bottom,0px) + 20px); transform:translateY(100%); transition:transform .34s var(--e-sheet); }
.pro-sheet.show { transform:translateY(0); }
.pro-item { display:flex; align-items:center; gap:12px; padding:14px 4px; border-bottom:1px solid var(--bd); cursor:pointer; -webkit-tap-highlight-color:transparent; }
.pro-item:last-child { border-bottom:none; }
.pro-item:active { opacity:.6; }
.pro-item svg { width:18px; height:18px; stroke:var(--tx2); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.pro-item-text { flex:1; font-size:14px; color:var(--tx); }
.pro-badge { font-size:12px; color:var(--ac); font-weight:600; padding:2px 8px; border-radius:10px; background:var(--acl); flex-shrink:0; }

/* ── Daydreamer Pro 方案頁 ── */
.pro-hero { text-align:center; padding:32px 20px 24px; }
.pro-hero-icon { width:64px; height:64px; margin:0 auto 14px; border-radius:20px; background:var(--acl); color:var(--ac); display:flex; align-items:center; justify-content:center; }
.pro-hero-icon svg { width:34px; height:34px; }
.pro-hero-title { font-size:22px; font-weight:700; color:var(--tx3); letter-spacing:.5px; }
.pro-hero-sub { font-size:15px; color:var(--tx2); margin-top:6px; }
.pro-hero-badge { display:inline-block; margin-top:12px; font-size:13px; font-weight:600; color:var(--ac); background:var(--acl); border:1px solid color-mix(in srgb,var(--ac) 40%,transparent); border-radius:14px; padding:4px 14px; }
.pro-feat-list { padding:0 20px; }
.pro-feat-card { display:flex; align-items:flex-start; gap:14px; padding:16px; background:var(--bg2); border:1px solid var(--bd); border-radius:14px; margin-bottom:12px; transition:border-color .35s, box-shadow .35s; }
.pro-feat-card.flash { border-color:var(--ac); box-shadow:0 0 0 3px var(--acl); }
.pro-feat-icon { width:44px; height:44px; border-radius:12px; background:var(--acl); color:var(--ac); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:22px; }
.pro-feat-info { flex:1; min-width:0; }
.pro-feat-name { font-size:17px; font-weight:600; color:var(--tx3); }
.pro-feat-desc { font-size:15px; color:var(--tx2); margin-top:4px; line-height:1.55; }
.pro-cta-wrap { padding:12px 20px calc(env(safe-area-inset-bottom,0px) + 28px); }
.pro-cta { width:100%; padding:14px; border:none; border-radius:12px; background:var(--ac); color:#fff; font-size:16px; font-weight:600; cursor:pointer; font-family:inherit; transition:transform .18s var(--e-press); -webkit-tap-highlight-color:transparent; }
.pro-cta:active { transform:scale(.98); opacity:.9; }
.pro-cta-hint { text-align:center; font-size:12px; color:var(--tx2); margin-top:10px; }

/* ── 工事鎖（正式開放時整段刪除，見 js/gate.js 檔頭） ── */
#site-gate { position:fixed; inset:0; z-index:9999; background:var(--bg); display:flex; align-items:center; justify-content:center; padding:24px; }
.gate-card { text-align:center; max-width:320px; }
.gate-mark { width:64px; height:64px; margin:0 auto 16px; display:block; color:var(--ac); opacity:.85; }
.gate-title { font-size:26px; font-weight:700; letter-spacing:6px; color:var(--tx3); font-family:var(--serif); text-indent:6px; }
.gate-sub { font-size:15px; color:var(--tx2); margin-top:8px; letter-spacing:3px; text-indent:3px; }
.gate-msg { font-size:14px; color:var(--tx2); margin-top:24px; line-height:1.7; }
.gate-btn { margin-top:16px; padding:12px 36px; border:none; border-radius:12px; background:var(--ac); color:#fff; font-size:16px; font-weight:600; cursor:pointer; font-family:inherit; transition:transform .18s var(--e-press); -webkit-tap-highlight-color:transparent; }
.gate-btn:active { transform:scale(.97); opacity:.9; }
.gate-btn.ghost { background:var(--bg3); color:var(--tx); border:1px solid var(--bd); }

/* ════════════════════════════════════════
   Daily Ink: Feed Card
   ════════════════════════════════════════ */
.checkin-card { margin:0 20px 20px; border-radius:16px; overflow:hidden; cursor:pointer; transition:transform .15s; -webkit-tap-highlight-color:transparent; border:1px solid var(--bd); background:var(--bg2); position:relative; }
.checkin-card:active { transform:scale(.98); }
.ci-card-body { padding:18px 20px 16px; display:flex; align-items:center; gap:14px; }
.ci-card-pool { width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; position:relative; overflow:visible; }
/* 簽到前：引擎畫布畫整片水面（波面打光與大墨池同款，見 ink-mark.js），
   canvas 自帶圓形遮罩，這裡不再鋪底色；中央墨滴照舊浮在水上 */
.ci-card-pool canvas.ci-mark-cv { position:absolute; inset:0; width:52px; height:52px; }
.ci-card-drop { position:relative; width:34px; height:34px; background:radial-gradient(circle,var(--ac) 0%,color-mix(in srgb,var(--ac) 35%,transparent) 25%,color-mix(in srgb,var(--ac) 8%,transparent) 50%,transparent 100%); border-radius:44% 56% 48% 52% / 52% 46% 54% 48%; filter:blur(2px); pointer-events:none; }
/* 簽到後：墨暈直接落在卡片紙面上，不再有圓池；
   畫布 78px 外擴（inset -13px），墨的羽化邊得以越出 52px 框 */
.ci-card-pool.done canvas.ci-mark-cv { inset:-13px; width:78px; height:78px; opacity:0; transition:opacity .45s ease; }
.ci-card-info { flex:1; min-width:0; }
.ci-card-title { font-size:15px; font-weight:600; color:var(--tx3); }
.ci-card-sub { font-size:13px; color:var(--tx2); margin-top:3px; }
.ci-card-track { display:flex; align-items:center; gap:0; padding:0 20px 16px; }
.ci-card-dot { width:7px; height:7px; border-radius:50%; background:var(--bgi); flex-shrink:0; transition:background .2s; }
.ci-card-dot.filled { background:var(--ac); }
.ci-card-line { flex:1; height:1px; background:var(--bd); }
.ci-card-btn { padding:8px 18px; border-radius:20px; border:none; background:var(--ac); color:#fff; font-size:14px; font-weight:600; cursor:pointer; font-family:inherit; transition:transform .1s; flex-shrink:0; letter-spacing:.5px; }
.ci-card-btn:active { transform:scale(.92); }
.ci-card-btn.done { background:var(--bg3); color:var(--tx2); border:1px solid var(--bd); }

/* ════════════════════════════════════════
   Daily Ink: Full Panel (Ink Pool)
   ════════════════════════════════════════ */
.pool-scene { position:relative; padding:40px 20px 32px; text-align:center; overflow:hidden; }
.pool-scene::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 65%,color-mix(in srgb,var(--ac) 8%,transparent),transparent 60%); pointer-events:none; }
.pool-quill { color:var(--ac); opacity:.5; margin-bottom:24px; }
.pool-quill svg { width:32px; height:32px; stroke:currentColor; fill:none; stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; }
/* 池的大小以 demo 的 280px 為基準（小螢幕退到 66vw）。140px 是舊漸層小圓的規格，引擎的墨在那個尺寸下施展不開 */
.pool-drop { width:min(66vw,280px); aspect-ratio:1; margin:0 auto 28px; position:relative; cursor:pointer; -webkit-tap-highlight-color:transparent; }
/* 不做 :active 縮放：池是水面不是按鈕，被按到會縮一下像在瑟縮。
   點下去的回饋交給引擎，落點當場濺起真實的波，比縮放誠實得多 */
.pool-drop canvas { position:absolute; inset:0; width:100%; height:100%; border-radius:50%; }
/* 舊的 CSS 墨滴（pool-drop-core / pool-ripple / inkRipple keyframe）已隨
   ink-pool.js 引擎上線而移除：池面現在是即時模擬，簽到前靜候微滴、
   簽到瞬間演完整落墨、簽到後沉墨呼吸且可以隨手滴墨玩 */
/* ── Checkin overlay rings (same pool-ring style, full-screen) ── */
.ck-ov-rings {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:0; height:0; z-index:0; pointer-events:none;
}
.ck-ov-ring {
  position:absolute; top:50%; left:50%; border-radius:50%;
  transform:translate(-50%,-50%); opacity:0;
  border:2px solid color-mix(in srgb, var(--ac) 35%, transparent);
  box-shadow:0 0 12px 6px color-mix(in srgb, var(--ac) 10%, transparent);
  background:none;
}
/* 三圈由內而外遞減粗細與濃度，做出「越遠越淡」的層次，不再是三個等重的平板圈 */
.ck-ov-ring.r1 { width:160px; height:160px; animation:ckOvRing 3.2s ease-out infinite; }
.ck-ov-ring.r2 { width:240px; height:240px; animation:ckOvRing 3.2s .7s ease-out infinite; border-width:1.5px; border-color:color-mix(in srgb, var(--ac) 26%, transparent); }
.ck-ov-ring.r3 { width:320px; height:320px; animation:ckOvRing 3.2s 1.4s ease-out infinite; border-width:1px; border-color:color-mix(in srgb, var(--ac) 18%, transparent); }
.ck-page-ov:not(.show) .ck-ov-ring { animation:none !important; opacity:0 !important; }
@keyframes ckOvRing {
  0%   { opacity:0; transform:translate(-50%,-50%) scale(.85); }
  20%  { opacity:.3; transform:translate(-50%,-50%) scale(.92); }
  65%  { opacity:.06; }
  100% { opacity:0; transform:translate(-50%,-50%) scale(1.1); }
}
/* 使用者在系統開了「減少動態效果」→ 循環動畫停用（無障礙慣例，防暈眩）。
   小墨池的水波由 ink-mark.js 自行偵測同一設定改出靜態畫面 */
@media (prefers-reduced-motion: reduce) {
  .ck-ov-ring { animation:none !important; opacity:0 !important; }
}
.pool-title { font-family:var(--serif); font-size:20px; font-weight:600; color:var(--tx3); letter-spacing:3px; margin-bottom:4px; }
.pool-sub { font-family:var(--display); font-size:13px; font-weight:500; color:var(--tx2); letter-spacing:.2em; margin-bottom:16px; }
.pool-hint { font-size:13px; color:var(--ac); opacity:.8; letter-spacing:.5px; margin-bottom:6px; transition:opacity .3s; }
.pool-stat { font-family:var(--display); font-size:13px; font-weight:600; color:var(--tx2); letter-spacing:.12em; }

/* ── Milestone Track ── */
.ck-ms-track-wrap { width:100%; max-width:340px; margin:24px auto 0; padding:0 16px; }
.ck-ms-title { font-size:13px; color:var(--tx2); letter-spacing:1px; font-weight:600; margin-bottom:12px; }
.ck-ms-track { display:flex; align-items:center; }
.ck-ms-line { flex:1; height:2px; background:var(--bd); }
.ck-ms-line.done { background:var(--ac); }
.ck-ms-node { width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--bg2); border:2px solid var(--bd); position:relative; flex-shrink:0; }
.ck-ms-node.done { border-color:var(--ac); background:var(--ac); }
.ck-ms-node.done .ck-ms-day { color:#fff; }
.ck-ms-node.current { border-color:var(--ac); box-shadow:0 0 12px color-mix(in srgb,var(--ac) 40%,transparent); }
.ck-ms-node.gold { border-color:#c8a86e; }
.ck-ms-node.gold.done { background:#c8a86e; border-color:#c8a86e; }
.ck-ms-day { font-size:12px; font-weight:700; color:var(--tx2); }
.ck-ms-lbl { position:absolute; bottom:-18px; font-size:12px; color:var(--tx2); white-space:nowrap; font-weight:500; }
.ck-ms-node.done .ck-ms-lbl { color:var(--ac); }
.ck-ms-node.gold .ck-ms-lbl { color:#c8a86e; }

/* ── Reward Overlay: Ink Bloom ── */
.ck-page-ov { position:fixed; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; z-index:310; padding:16px; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s; }
.ck-page-ov.show { opacity:1; visibility:visible; }
.ck-page { width:100%; max-width:300px; position:relative; z-index:2; transform:scale(.7); opacity:0; transition:transform .45s cubic-bezier(.16,1,.3,1), opacity .35s; }
.ck-page-ov.show .ck-page.visible { transform:scale(1); opacity:1; }
.ck-paper { background:var(--bg2); border-radius:50%; aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; position:relative; box-shadow:0 0 60px color-mix(in srgb,var(--ac) 20%,transparent),0 16px 48px rgba(0,0,0,.3); overflow:hidden; padding:40px 32px; }
.ck-paper::before { content:''; position:absolute; inset:0; border-radius:50%; border:1px solid color-mix(in srgb,var(--ac) 15%,var(--bd)); pointer-events:none; }
.ck-paper::after { content:''; position:absolute; inset:8px; border-radius:50%; border:1px solid color-mix(in srgb,var(--ac) 8%,var(--bd)); pointer-events:none; }
.ck-paper.milestone { box-shadow:0 0 60px rgba(200,168,110,.2),0 16px 48px rgba(0,0,0,.3); }
.ck-paper.milestone::before { border-color:color-mix(in srgb,#c8a86e 25%,var(--bd)); }
.ck-paper.milestone::after { border-color:color-mix(in srgb,#c8a86e 12%,var(--bd)); }
.ck-page-day { font-size:12px; color:var(--tx2); letter-spacing:1.5px; font-weight:600; margin-bottom:8px; }
.ck-page-mid { display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ck-page-bot { text-align:center; margin-top:4px; }
.ck-page-line { display:none; }
.ck-rw-icon { width:48px; height:48px; margin:0 auto 10px; display:flex; align-items:center; justify-content:center; border-radius:50%; animation:ckRwPop .4s .2s cubic-bezier(.34,1.4,.64,1) both; border:1.5px solid var(--bd); }
.ck-rw-icon.spark { background:color-mix(in srgb,var(--ac) 12%,var(--bg3)); color:var(--ac); }
.ck-rw-icon.lore { background:color-mix(in srgb,var(--ac) 12%,var(--bg3)); color:var(--ac); }
@keyframes ckRwPop { 0% { opacity:0; transform:scale(.5); } 100% { opacity:1; transform:scale(1); } }
.ck-rw-name { font-size:17px; font-weight:700; color:var(--tx3); text-align:center; animation:ckTxtIn .4s .35s both; }
.ck-rw-amount { font-size:16px; color:var(--ac); text-align:center; font-weight:600; animation:ckTxtIn .4s .4s both; margin-top:2px; }
@keyframes ckTxtIn { 0% { opacity:0; } 100% { opacity:1; } }
.ck-ms-badge { width:56px; height:56px; margin:0 auto 10px; position:relative; animation:ckRwPop .5s .15s cubic-bezier(.34,1.4,.64,1) both; }
.ck-ms-ring { position:absolute; inset:0; border:2px solid #c8a86e; border-radius:50%; animation:ckRingGlow 2s ease infinite; }
@keyframes ckRingGlow { 0%,100% { box-shadow:0 0 8px rgba(200,168,110,.2); } 50% { box-shadow:0 0 20px rgba(200,168,110,.4); } }
.ck-ms-inner { position:absolute; inset:6px; border-radius:50%; background:linear-gradient(135deg,#c8a86e,#e8cc8a); display:flex; align-items:center; justify-content:center; color:#fff; font-size:15px; font-weight:900; }
.ck-flavor-diamond { display:none; }
.ck-flavor { font-size:12px; color:var(--tx2); text-align:center; line-height:1.6; font-style:italic; opacity:.7; animation:ckTxtIn .4s .5s both; margin-top:6px; }
.ck-close { display:block; margin:6px auto 0; padding:7px 24px; background:none; border:1px solid var(--bd); border-radius:20px; font-size:14px; color:var(--tx2); cursor:pointer; transition:all .15s; animation:ckTxtIn .3s .6s both; font-family:inherit; }
.ck-close:active { transform:scale(.95); background:var(--ac); color:#fff; border-color:var(--ac); }

/* ════════════════════════════════════════
   Achievement System
   ════════════════════════════════════════ */
.ach-list { padding:8px 0; }
.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-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.locked-icon { opacity:.25; filter:grayscale(1); }
.ach-info { flex:1; min-width:0; }
.ach-name { font-size:15px; font-weight:600; color:var(--tx3); }
.ach-name.locked-name { color:var(--tx2); }
.ach-desc { font-size:13px; color:var(--tx2); margin-top:2px; }
.ach-count { font-size:13px; font-weight:500; color:var(--ac); }
.ach-bar { height:3px; background:var(--bgi); border-radius:2px; overflow:hidden; margin-top:6px; }
.ach-bar-fill { height:100%; background:var(--ac); border-radius:2px; transition:width .4s cubic-bezier(.4,0,.2,1); }

/* ── Achievement Detail Overlay ── */
.ach-detail-ov { position:fixed; inset:0; z-index:310; 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; transition:opacity .2s, visibility 0s .2s; }
.ach-detail-ov.show { visibility:visible; opacity:1; 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:achCardIn .3s cubic-bezier(.16,1,.3,1); }
@keyframes achCardIn { 0% { opacity:0; transform:scale(.92) translateY(10px); } 100% { opacity:1; transform:scale(1) translateY(0); } }
.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:13px; 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:13px; color:var(--tx2); margin-top:2px; }
.ach-detail-step-reward { font-size:13px; color:var(--ac); margin-top:3px; font-weight:500; }

/* ════════════════════════════════════════
   Achievement Unlock Overlay
   ════════════════════════════════════════ */
.ach-unlock-ov {
  position:fixed; inset:0; z-index:320; 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; transition:opacity .25s, visibility 0s .25s; padding:24px;
}
.ach-unlock-ov.show { visibility:visible; opacity:1; transition:opacity .25s, visibility 0s 0s; }
.ach-unlock-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); overflow:hidden;
  transform:scale(.7); opacity:0; transition:transform .45s cubic-bezier(.16,1,.3,1), opacity .35s;
}
.ach-unlock-ov.show .ach-unlock-card.visible { transform:scale(1); opacity:1; }
.ach-unlock-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:achGlow 2s ease-in-out infinite alternate;
}
@keyframes achGlow { from { opacity:.6; transform:translateX(-50%) scale(1); } to { opacity:1; transform:translateX(-50%) scale(1.15); } }
.ach-unlock-icon { font-size:48px; margin-bottom:12px; display:flex; align-items:center; justify-content:center; }
.ach-unlock-icon svg { width:48px; height:48px; color:var(--ac); }
.ach-unlock-title { font-size:18px; font-weight:700; color:var(--tx3); margin-bottom:4px; }
.ach-unlock-desc { font-size:14px; color:var(--tx2); line-height:1.6; }
.ach-ripple-cv { position:absolute; top:0; left:0; z-index:0; pointer-events:none; }

/* ════════════════════════════════════════
   Toast & FAB
   ════════════════════════════════════════ */
.toast { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale(.9); background:var(--bg2); color:var(--tx); padding:10px 20px; border-radius:10px; font-size:13px; z-index:999; opacity:0; transition:all .2s; pointer-events:none; border:1px solid var(--bd); box-shadow:0 4px 16px var(--sh); }
.toast.show { opacity:1; transform:translate(-50%,-50%) scale(1); }
.fab { position:fixed !important; bottom:calc(var(--navh) + env(safe-area-inset-bottom,0) + 16px); right:16px; width:50px; height:50px; border-radius:50%; background:var(--ac); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 4px 16px color-mix(in srgb,var(--ac) 35%,transparent); z-index:199; transition:transform .22s var(--e-press), box-shadow .2s; border:none; -webkit-tap-highlight-color:transparent; transform:translateZ(0); }
.fab:active { transform:scale(.9); box-shadow:0 2px 8px color-mix(in srgb,var(--ac) 30%,transparent); }
.fab svg { width:20px; height:20px; stroke:#fff; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* ════════════════════════════════════════
   Input Modal (centered card)
   ════════════════════════════════════════ */
.input-modal-ov {
  position:fixed; inset:0; z-index:310; background:rgba(0,0,0,.4);
  display:flex; align-items:center; justify-content:center;
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  visibility:hidden; opacity:0; transition:opacity .2s, visibility 0s .2s;
  padding:24px;
}
.input-modal-ov.show { visibility:visible; opacity:1; transition:opacity .2s, visibility 0s 0s; }
.input-modal-card {
  width:100%; max-width:280px; background:var(--bg2); border-radius:16px;
  padding:24px 20px 18px; box-shadow:0 16px 48px rgba(0,0,0,.25);
  animation:achCardIn .25s cubic-bezier(.16,1,.3,1);
}
.input-modal-title { font-size:16px; font-weight:600; color:var(--tx3); margin-bottom:14px; }
.input-modal-input {
  width:100%; padding:10px 14px; border-radius:10px; border:1px solid var(--bd);
  background:var(--bg3); color:var(--tx); font-size:15px; font-family:inherit;
  margin-bottom:16px;
}
.input-modal-input:focus { outline:none; border-color:var(--ac); background:var(--bg2); }
.input-modal-actions { display:flex; gap:8px; }
.input-modal-btn {
  flex:1; padding:10px 0; border-radius:10px; border:none; font-size:14px;
  font-weight:600; cursor:pointer; font-family:inherit; transition:transform .1s;
  -webkit-tap-highlight-color:transparent;
}
.input-modal-btn:active { transform:scale(.96); }
.input-modal-btn.cancel { background:var(--bg3); color:var(--tx2); }
.input-modal-btn.confirm { background:var(--ac); color:#fff; }

/* ════════════════════════════════════════
   Confirm Modal (Reverie confirm-box style)
   ════════════════════════════════════════ */
.confirm-modal-ov {
  position:fixed; inset:0; z-index:310; background:rgba(0,0,0,.3);
  display:flex; align-items:center; justify-content:center;
  visibility:hidden; opacity:0; transition:opacity .2s, visibility 0s .2s;
  padding:24px;
}
.confirm-modal-ov.show { visibility:visible; opacity:1; transition:opacity .2s, visibility 0s 0s; }
.confirm-modal-card {
  width:min(320px,88vw); background:var(--bg2); border-radius:14px;
  padding:22px; 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-modal-ov.show .confirm-modal-card { transform:scale(1); }
.confirm-modal-title { font-size:15px; font-weight:600; color:var(--tx3); margin-bottom:6px; }
.confirm-modal-msg { font-size:14px; color:var(--tx2); line-height:1.6; margin-bottom:18px; }
.confirm-modal-actions { display:flex; gap:8px; justify-content:center; }
.confirm-modal-btn {
  padding:8px 18px; border-radius:10px; font-size:14px;
  font-weight:500; cursor:pointer; font-family:inherit; transition:transform .1s, opacity .1s;
  -webkit-tap-highlight-color:transparent;
}
.confirm-modal-btn:active { transform:scale(.95); opacity:.85; }
.confirm-modal-btn.cancel { background:var(--bg3); color:var(--tx); border:none; }
.confirm-modal-btn.danger { background:none; color:var(--del); border:1px solid color-mix(in srgb,var(--del) 30%,transparent); }
.confirm-modal-btn.danger:active { background:color-mix(in srgb,var(--del) 8%,transparent); }
.confirm-modal-btn.primary { background:var(--ac); color:#fff; border:none; }
.confirm-modal-btn.primary:active { opacity:.85; }

/* ── 頭貼裁切彈窗（沿用 Reverie 的裁切系統）── */
.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;}