/* ════════════════════════════════════════
   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;
}

/* ── 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:#7a9a70;--acl:#dce8d6;--ach:#5e8054;--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:#c0909a;--acl:#eedce0;--ach:#a07078;--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); }
* { 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; }

/* ════════════════════════════════════════
   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:all .15s; -webkit-tap-highlight-color:transparent;
}
.cat-tab:active { opacity:.7; }
.cat-tab.active { background:var(--ac); border-color:var(--ac); color:#fff; font-weight:600; }
.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; }
.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:10px; 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-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:10px; 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 .3s cubic-bezier(.4,0,.2,1); }
.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:all .2s; }
.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 .1s; -webkit-tap-highlight-color:transparent; }
.btn:active { transform:scale(.95); }
.bp { background:var(--ac); color:#fff; }

/* ════════════════════════════════════════
   Writing Practice — Envelope (練習題)
   ════════════════════════════════════════ */
.wp-ov {
  position:fixed; inset:0; z-index:600; background:rgba(0,0,0,.45);
  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 { position:relative; display:flex; align-items:center; justify-content:center; width:100%; height:100%; }

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

/* ── Envelope ── */
.wp-env-wrap { position:relative; width:280px; height:196px; transition:opacity .4s; }
.wp-env-wrap.hide { opacity:0; pointer-events:none; }

.wp-env-body {
  position:absolute; bottom:0; width:280px; height:160px;
  background:var(--bg2); border-radius:4px;
  box-shadow:0 8px 32px rgba(0,0,0,.25); overflow:hidden; z-index:2;
}
.wp-env-body::before {
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(135deg, transparent 40%, rgba(0,0,0,.03) 40%, rgba(0,0,0,.03) 42%, transparent 42%),
    linear-gradient(225deg, transparent 40%, rgba(0,0,0,.03) 40%, rgba(0,0,0,.03) 42%, transparent 42%);
  pointer-events:none;
}
.wp-env-body::after {
  content:''; position:absolute; bottom:0; left:0; right:0; height:60%;
  background:linear-gradient(to top, rgba(0,0,0,.04), transparent); pointer-events:none;
}
.wp-env-inner-fold { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.wp-env-inner-fold::before {
  content:''; position:absolute; top:0; left:0; width:150%; height:200%;
  border-right:1px solid rgba(0,0,0,.06); transform-origin:top left; transform:rotate(33deg);
}
.wp-env-inner-fold::after {
  content:''; position:absolute; top:0; right:0; width:150%; height:200%;
  border-left:1px solid rgba(0,0,0,.06); transform-origin:top right; transform:rotate(-33deg);
}

.wp-env-flap-wrap { position:absolute; top:36px; left:0; width:280px; height:96px; z-index:3; perspective:800px; }
.wp-env-flap {
  width:100%; height:100%; transform-origin:top center; transform:rotateX(0deg);
  transition:transform 1s cubic-bezier(.3,0,.2,1);
  background:var(--bg2); clip-path:polygon(0 0, 100% 0, 50% 100%);
  box-shadow:0 2px 8px rgba(0,0,0,.08); position:relative;
}
.wp-env-flap::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.01), rgba(0,0,0,.05));
  pointer-events:none;
}
.wp-env-flap.open { transform:rotateX(180deg); }

.wp-env-seal {
  position:absolute; top:118px; left:50%; transform:translateX(-50%);
  width:34px; height:34px; border-radius:50%; background:var(--ac); z-index:4;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,.2); transition:opacity .4s, transform .4s;
}
.wp-env-seal svg { width:16px; height:16px; stroke:#fff; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.wp-env-seal.hide { opacity:0; transform:translateX(-50%) scale(.5); }

/* ── Letter (result card) ── */
.wp-letter {
  position:absolute; width:min(300px, 82vw); background:var(--bg2); border-radius:12px;
  padding:28px 24px; box-shadow:0 8px 40px rgba(0,0,0,.2); z-index:10;
  opacity:0; cursor:pointer;
}
.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);
}
@keyframes wpPillPop { 0% { opacity:0; transform:scale(.8); } 100% { opacity:1; transform:scale(1); } }

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

/* ════════════════════════════════════════
   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:10px; 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:all .2s; }
.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 .3s cubic-bezier(.4,0,.2,1); }
.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 .3s cubic-bezier(.4,0,.2,1); 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 .3s cubic-bezier(.4,0,.2,1); }
.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; }

/* ════════════════════════════════════════
   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%; background:radial-gradient(circle at 45% 42%,color-mix(in srgb,var(--ac) 12%,var(--bg3)),var(--bg3)); border:none; display:flex; align-items:center; justify-content:center; flex-shrink:0; position:relative; overflow:visible; }
.ci-card-drop { 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%; transition:all .4s; filter:blur(2px); }
.ci-card-pool.done .ci-card-drop { width:40px; height:40px; background:radial-gradient(circle,color-mix(in srgb,var(--ac) 30%,var(--bg3)) 0%,color-mix(in srgb,var(--ac) 10%,transparent) 35%,transparent 100%); border-radius:48% 52% 46% 54% / 54% 48% 52% 46%; filter:blur(3px); }
.ci-card-ripple { position:absolute; inset:0; border-radius:50%; border:1.5px solid var(--ac); opacity:0; animation:ciCardRipple 3s ease-out infinite; }
.ci-card-ripple::after { content:''; position:absolute; inset:0; border-radius:50%; border:1px solid var(--ac); opacity:0; animation:ciCardRipple 3s 1.2s ease-out infinite; }
.ci-card-pool.done .ci-card-ripple, .ci-card-pool.done .ci-card-ripple::after { animation:none; opacity:0; }
@keyframes ciCardRipple { 0% { transform:scale(0); opacity:.5; } 100% { transform:scale(1); opacity:0; } }
.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; }
.pool-drop { width:140px; height:140px; margin:0 auto 28px; position:relative; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.pool-drop:active { transform:scale(.95); }
.pool-drop-core { position:absolute; top:50%; left:50%; width:80px; height:80px; background:radial-gradient(circle,var(--ac) 0%,color-mix(in srgb,var(--ac) 40%,transparent) 20%,color-mix(in srgb,var(--ac) 12%,transparent) 40%,color-mix(in srgb,var(--ac) 3%,transparent) 65%,transparent 100%); border-radius:42% 56% 48% 52% / 54% 44% 58% 46%; transform:translate(-50%,-50%); transition:all .5s cubic-bezier(.4,0,.2,1); filter:blur(3px); }
.pool-drop.done .pool-drop-core { width:110px; height:110px; background:radial-gradient(circle,color-mix(in srgb,var(--ac) 35%,var(--bg3)) 0%,color-mix(in srgb,var(--ac) 14%,transparent) 25%,color-mix(in srgb,var(--ac) 4%,transparent) 50%,transparent 100%); border-radius:46% 54% 52% 48% / 50% 56% 44% 52%; filter:blur(4px); }
.pool-ripple {
  position:absolute; inset:0; border-radius:50%;
  border:1.5px solid var(--ac); opacity:0;
  animation:poolRing 3.5s ease-out infinite;
}
.pool-ripple::after {
  content:''; position:absolute; inset:0; border-radius:50%;
  border:1px solid var(--ac); opacity:0;
  animation:poolRing 3.5s 1.4s ease-out infinite;
}
.pool-drop.done .pool-ripple, .pool-drop.done .pool-ripple::after { animation:none; opacity:0; }
@keyframes poolRing {
  0%   { transform:scale(0); opacity:.5; }
  100% { transform:scale(1); opacity:0; }
}
/* ── 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; }
.ck-ov-ring.r3 { width:320px; height:320px; animation:ckOvRing 3.2s 1.4s ease-out infinite; }
.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); }
}
.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 rgba(0,0,0,.12); z-index:199; transition:transform .2s; border:none; -webkit-tap-highlight-color:transparent; transform:translateZ(0); }
.fab:active { transform:scale(.9); }
.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); }