/* ============================================================
   幻境 · 设计系统 v3 「书页沉浸 · 封面时代」
   v2 合成自三方向评审:A 书页沉浸(视觉灵魂) + C 系统可用性(骨架) + B 转化件(发现页)
   v3(2026-07-08 五视角评审):token 归一(hover 统一青,radius 全走阶梯,--edge 顶缘受光)
     + 货架筛选/搜索 + 封面淡显与 accent 光影 + 钩子确认帧 + 回合锚点
     + 触控 44px 层(pointer:coarse) + 弹层软键盘/safe-area 补偿 + 阅读字号档(--fs-adj)
   ============================================================ */
:root{
  color-scheme:dark;
  /* 色板:近中性暗底 + 暖纸白正文 */
  --bg:#0b0c0f; --bg2:#12141a; --panel:#14171d; --line:#232830;
  --line-soft:rgba(255,255,255,.07);
  --ink:#e8ebf0; --ink-story:#e9e4d8; --muted:#8b93a0; --faint:#7a8290;
  --player:#b9c3cf;
  --accent:#46c7b0; --accent-strong:#2fa48d; --accent-ink:#04140f;
  --accent-dim:rgba(70,199,176,.55); --accent-soft:#0e1620; --accent-tint:#13201c;
  --gold:#d6b273; --crim:#d2536a; --crim-text:#e07084;
  --bg-input:#0d1117; --bg-chip:#10141b; --bg-hover:#1b212b;
  /* 圆角 / 阴影 / 动效 */
  --radius-s:8px; --radius-m:12px; --radius-l:16px; --radius-xl:20px; --radius-pill:999px;
  --edge:inset 0 1px 0 rgba(255,255,255,.05);   /* 面板顶缘受光(亮度封顶 5%,防灰塑料感) */
  --fs-adj:0px;             /* 阅读字号档(Aa 按钮),JS 回写,只作用于 .story */
  --shadow-1:0 2px 10px rgba(0,0,0,.35);
  --shadow-2:0 10px 28px rgba(0,0,0,.45);
  --shadow-3:0 24px 60px rgba(0,0,0,.55);
  --t-fast:120ms; --t-base:200ms; --t-slow:320ms;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ring:0 0 0 2px var(--bg),0 0 0 4px var(--accent-dim);
  --story-font:"Noto Serif SC","Source Han Serif SC",Georgia,"Songti SC","STSong","SimSun",serif;
  --composer-h:220px;      /* JS ResizeObserver 实时回写 */
  --kb:0px;                /* 软键盘高度补偿(visualViewport) */
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
html.lock{overflow:hidden}
body{background:radial-gradient(1200px 600px at 50% -10%,#14181f 0%,var(--bg) 60%);
     color:var(--ink);font:15px/1.6 system-ui,-apple-system,"Segoe UI","Microsoft YaHei",sans-serif;}
a{color:inherit}
button{font:inherit;color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px}
.hide{display:none!important}
.grow{flex:1}

/* 焦点可达:全站统一 focus 戒指 */
:focus{outline:none}
:focus-visible{box-shadow:var(--ring);outline:none}   /* ring 跟随元素自身圆角,不劫持形状 */
.mode:focus-visible,.dtab:focus-visible{border-radius:6px}   /* 这两类自身无圆角,单补 */

/* ---------- 顶栏 ---------- */
header{position:sticky;top:0;z-index:20;backdrop-filter:blur(10px);
       background:linear-gradient(180deg,rgba(11,12,15,.92),rgba(11,12,15,.6));border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;gap:12px;height:56px}
.logo{font-weight:800;letter-spacing:.14em;font-size:18px}
.logo b{color:var(--accent)}
.nav{display:flex;gap:4px;margin-left:8px}
.navlink{background:none;border:none;color:var(--muted);font-size:14px;padding:7px 12px;border-radius:var(--radius-s);
         cursor:pointer;transition:color var(--t-fast),background var(--t-fast);position:relative}
.navlink:hover,.navlink.on{color:var(--ink);background:var(--bg-hover)}
.navbadge{position:absolute;top:1px;right:2px;min-width:15px;height:15px;padding:0 4px;border-radius:8px;
          background:var(--gold);color:#1d1607;font-size:10px;font-weight:700;line-height:15px;text-align:center}
.btn{background:var(--bg-hover);border:1px solid var(--line);color:var(--ink);border-radius:var(--radius-m);
     padding:8px 14px;cursor:pointer;font:inherit;transition:border-color var(--t-fast),background var(--t-fast),transform var(--t-fast)}
.btn:hover{border-color:var(--accent-dim)}
.btn:active{transform:scale(.97)}
.btn.primary{background:linear-gradient(180deg,var(--accent),var(--accent-strong));color:var(--accent-ink);border:none;font-weight:700}
.btn.primary:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent}
.btn.icon{padding:8px 11px;font-size:16px}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* ============================================================
   发现页:安静的书架
   ============================================================ */
.hero2{position:relative;height:min(40vw,360px);min-height:280px;border-radius:var(--radius-l);overflow:hidden;
       margin:18px 0 8px;border:1px solid var(--line);background:#0c0e12}
.hero2 .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s ease}
.hero2 .bg.on{opacity:1}
.hero2 .poster{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
       background:radial-gradient(closest-side at 32% 24%,color-mix(in srgb,var(--c,#46c7b0) 26%,transparent),#0c0e12 78%)}
.hero2 .poster span{font-size:110px;filter:drop-shadow(0 8px 32px var(--c,#46c7b0))}
.hero2 .veil{position:absolute;inset:0;background:
     linear-gradient(90deg,rgba(8,10,13,.92) 0%,rgba(8,10,13,.5) 42%,rgba(8,10,13,.12) 75%),
     linear-gradient(0deg,rgba(8,10,13,.95) 2%,rgba(8,10,13,0) 46%)}
.hero2 .body{position:absolute;left:0;bottom:0;padding:26px 30px;max-width:640px}
.hero2 .body.in>*{animation:fadeUp .25s var(--ease) both}
.hero2 .kick{color:var(--c,var(--accent));font-size:12px;letter-spacing:.22em;font-weight:700;margin-bottom:8px}
.hero2 h1{font-family:var(--story-font);font-size:clamp(28px,3.6vw,40px);margin:0 0 8px;line-height:1.15}
.hero2 p{color:#c4ccd6;font-size:15px;margin:0 0 14px;max-width:520px;
         display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hero2 .act{display:flex;align-items:center;gap:14px;margin-top:4px}
.hero2 .big{font-size:16px;padding:12px 26px;border-radius:var(--radius-m);
            position:relative;z-index:1}   /* CTA 抬到 dots 之上,窄屏放大后的圆点命中区不截获「进入」点击 */
.dots{position:absolute;right:14px;bottom:16px;display:flex}
.dots button{width:26px;height:26px;padding:0;border:none;background:none;cursor:pointer;
             display:flex;align-items:center;justify-content:center}
.dots button i{display:block;width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.32);
               transition:all var(--t-base) var(--ease);pointer-events:none}
.dots button.on i{background:#fff;width:22px;border-radius:6px}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* 骨架屏(B 方向 shimmer) */
.hero2.loading .veil,.hero2.loading .body,.hero2.loading .dots{visibility:hidden}
.skel,.hero2.loading{background-image:linear-gradient(100deg,#12151c 40%,#1a1f28 50%,#12151c 60%);
     background-size:200% 100%;animation:shimmer 1.4s linear infinite}
.scard.skel{border:1px solid var(--line);cursor:default;pointer-events:none;
     background-image:linear-gradient(100deg,#12151c 40%,#1a1f28 50%,#12151c 60%);background-size:200% 100%}
@keyframes shimmer{from{background-position:120% 0}to{background-position:-80% 0}}

/* 回访快捷续玩条(最近存档,hero 之上) */
.resume{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);
     border-left:3px solid var(--accent);border-radius:var(--radius-m);padding:10px 14px;margin:14px 0 -6px;cursor:pointer;
     transition:border-color var(--t-fast)}
.resume:hover{border-color:var(--accent-dim);border-left-color:var(--accent)}
.resume .rtext{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}
.resume .btn{flex:none}

/* 货架筛选条:题材 chips + 搜索 */
.shelfbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 14px}
.shelfbar .chips{display:flex;gap:7px;flex-wrap:wrap;min-width:0}
.chip{font-size:12.5px;color:var(--muted);background:var(--bg-chip);border:1px solid var(--line);
     border-radius:var(--radius-pill);padding:5px 12px;cursor:pointer;transition:all var(--t-fast)}
.chip:hover{border-color:var(--accent-dim);color:var(--ink)}
.chip.sel{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
#shelfQ{background:var(--bg-input);border:1px solid var(--line);color:var(--ink);border-radius:var(--radius-pill);
     padding:7px 14px;font:inherit;font-size:16px;line-height:1.4;flex:1;max-width:200px;min-width:120px;margin-left:auto;
     -webkit-appearance:none;appearance:none;transition:border-color var(--t-fast)}   /* ≥16px:iOS 聚焦不缩放 */
#shelfQ:focus{border-color:var(--accent-dim)}
#shelfQ::placeholder{color:var(--faint)}

/* 板块标题:书架横档 */
.secTitle{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--faint);
          letter-spacing:.14em;margin:36px 2px 14px;font-weight:600}
.secTitle::after{content:"";flex:1;height:1px;background:var(--line-soft)}
.seclink{background:none;border:none;color:var(--muted);font-size:12px;letter-spacing:0;cursor:pointer;padding:2px 6px}
.seclink:hover{color:var(--accent)}

/* 大卡 · 图为主角 */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px;padding:2px 0 70px}
.scard{position:relative;aspect-ratio:16/10;border-radius:var(--radius-l);overflow:hidden;cursor:pointer;
       border:1px solid var(--line);transition:transform var(--t-base) var(--ease),border-color var(--t-base),box-shadow var(--t-base);
       background:radial-gradient(closest-side at 30% 25%,color-mix(in srgb,var(--c,#46c7b0) 14%,transparent),#0c0e12 75%)}
.scard:hover,.scard:focus-visible{transform:translateY(-2px);border-color:var(--c,var(--accent));
       box-shadow:0 14px 34px color-mix(in srgb,var(--c,#46c7b0) 22%,rgba(0,0,0,.5))}
.scard.flash{animation:cardFlash 1.4s var(--ease)}
@keyframes cardFlash{0%,60%{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}100%{box-shadow:none}}
.scard .cov{position:absolute;inset:0}
.scard .cov img{width:100%;height:100%;object-fit:cover;display:block;
     transition:transform .3s var(--ease),opacity .45s var(--ease);opacity:0}   /* 加载淡显,accent 占位底兜底 */
.sheet .cov img{opacity:0;transition:opacity .45s var(--ease)}
.cov img.ld{opacity:1}
.scard:hover .cov img{transform:scale(1.03)}
.epost{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-size:64px;
     background:radial-gradient(closest-side at 32% 26%,color-mix(in srgb,var(--c,#46c7b0) 28%,transparent),#0c0e12 80%);
     filter:drop-shadow(0 6px 24px var(--c,#46c7b0))}
.sheet .cov .epost{height:180px;font-size:76px;border-radius:var(--radius-xl) var(--radius-xl) 0 0}
.scard .shade{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:16px 18px;
     background:linear-gradient(0deg,rgba(7,9,12,.94) 8%,rgba(7,9,12,.55) 48%,rgba(7,9,12,0) 72%)}
.scard h3{margin:0 0 7px;font-size:20px;font-family:var(--story-font);text-shadow:0 2px 12px rgba(0,0,0,.6)}
.scard .tl{font-size:13px;color:#c4ccd6;margin:-2px 0 8px;text-shadow:0 1px 8px rgba(0,0,0,.8);
     display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.scard .play{position:absolute;top:14px;right:14px;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.25);
     color:var(--ink);border-radius:var(--radius-pill);padding:5px 13px;font-size:13px;cursor:pointer;
     opacity:0;transform:translateY(-4px);transition:all var(--t-base) var(--ease)}
.scard:hover .play,.scard:focus-visible .play{opacity:1;transform:none}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tags span{font-size:11.5px;color:#cdd4de;background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.14);
           border-radius:var(--radius-pill);padding:2px 9px;text-shadow:0 1px 6px rgba(0,0,0,.7)}
.tags span:first-child{background:color-mix(in srgb,var(--c,#46c7b0) 24%,rgba(0,0,0,.4));color:#eafff9}
/* 存档卡 */
.scard .del{position:absolute;top:12px;left:12px;z-index:3;background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.2);
     color:#fff;border-radius:50%;width:34px;height:34px;line-height:1;cursor:pointer;opacity:0;
     transition:opacity var(--t-base),background var(--t-fast);font-size:14px}
.scard:hover .del,.scard .del:focus-visible{opacity:1}
.scard .del:hover{background:var(--crim);border-color:var(--crim)}
@media(hover:none){ .scard .play{opacity:.78;transform:none} .scard .del{opacity:.65} }
.scard .rmeta{font-size:12px;color:#aeb6c2;margin-top:6px}
.scard .cliff{font-size:13px;color:var(--accent);margin-top:6px;font-style:italic;line-height:1.4;
  text-shadow:0 1px 8px rgba(0,0,0,.8);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.scard .badge{position:absolute;top:14px;right:14px;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.22);
     border-radius:var(--radius-pill);padding:4px 11px;font-size:12px}
/* 真实亮色封面下浮层保对比:加深底色,支持毛玻璃则减浓 */
.scard .badge,.scard .play,.scard .del{background:rgba(9,11,15,.66)}
@supports(backdrop-filter:blur(8px)){
  .scard .badge,.scard .play,.scard .del{backdrop-filter:blur(8px);background:rgba(9,11,15,.45)}
}
.empty{color:var(--faint);text-align:center;padding:50px 0;line-height:2}
.empty .big{font-size:44px;display:block;margin-bottom:6px;filter:grayscale(.2)}
.empty .btn{margin:6px 4px 0}
.foot{color:var(--faint);font-size:13px;text-align:center;padding:8px 0 26px;font-family:var(--story-font)}

/* ---------- 账号弹层 / 菜单 ---------- */
.authtabs{display:flex;gap:8px;margin:6px 0 8px}
.authtab{flex:1;text-align:center;padding:9px;border:1px solid var(--line);border-radius:var(--radius-m);cursor:pointer;
         color:var(--muted);background:none;transition:all var(--t-fast)}
.authtab.sel{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.autherr{color:var(--crim-text);font-size:13px;min-height:18px;margin-top:6px}
.autherr[role=alert]:empty{visibility:hidden}
.menu{position:fixed;top:52px;right:14px;z-index:30;background:var(--bg2);border:1px solid var(--line);
     border-radius:var(--radius-m);padding:8px;min-width:180px;box-shadow:var(--edge),var(--shadow-2);
     animation:fadeUp var(--t-base) var(--ease)}
.menu .mi{padding:9px 12px;border-radius:8px;cursor:pointer;font-size:14px;background:none;border:none;
          display:block;width:100%;text-align:left}
.menu .mi:hover{background:var(--bg-hover)}
.menu .who{padding:8px 12px;color:var(--muted);font-size:13px;border-bottom:1px solid var(--line);margin-bottom:4px}

/* ---------- 弹层基建 ---------- */
.modal{position:fixed;inset:0;z-index:50;background:rgba(5,7,10,.7);display:flex;align-items:center;justify-content:center;
       padding:18px;padding-bottom:calc(18px + var(--kb));animation:fadeIn .18s ease}   /* 软键盘弹起时弹层整体上移 */
@keyframes fadeIn{from{opacity:0}}
.sheet{background:var(--bg2);border:1px solid var(--line);border-radius:var(--radius-xl);max-width:600px;width:100%;
       padding:0 0 24px;max-height:90vh;overflow:auto;box-shadow:var(--edge),var(--shadow-3);
       animation:sheetIn var(--t-slow) var(--ease)}
@keyframes sheetIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.sheet .pad{padding:0 26px}
.sheet .cov{font-size:46px;text-align:center;position:relative}
.sheet .cov img{width:100%;height:230px;object-fit:cover;display:block;border-radius:var(--radius-xl) var(--radius-xl) 0 0}
.sheet .cov::after{content:"";position:absolute;left:0;right:0;bottom:0;height:56px;
       background:linear-gradient(0deg,var(--bg2),transparent);pointer-events:none}
.sheet .cov.emoji{padding-top:0}
.sheet .cov.emoji::after{display:none}
.sheet h2{margin:.3em 0;text-align:center;font-family:var(--story-font)}
.sheet .desc{color:var(--muted);text-align:center;margin-bottom:16px}
/* 有置底操作条的 sheet:去掉自身底部 padding,footer 流式落点=sticky 钉住点,
   否则 Chrome 会把 footer 钉得比流式位置高(负 margin 补偿失效),滚到底仍盖住末行控件 */
.sheet.has-foot{padding-bottom:0}
/* footer 本体实心(内容穿底=看不见),羽化放 ::before 且不吃点击(看得见=点得到) */
.sheet .stickyfoot{position:sticky;bottom:0;padding:14px 26px calc(22px + env(safe-area-inset-bottom));background:var(--bg2);z-index:2}
.sheet .stickyfoot::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:22px;
       background:linear-gradient(0deg,var(--bg2),transparent);pointer-events:none}
.sheet .stickyfoot .row{margin-top:0}
.mini-sheet{max-width:400px;padding-bottom:20px}
.mini-sheet h2{font-size:19px;text-align:left;margin:20px 0 6px;font-family:inherit}
.mini-sheet .mbody{color:var(--muted);font-size:14px;line-height:1.7;white-space:pre-wrap}
.mini-sheet textarea{width:100%;background:var(--bg-input);border:1px solid var(--line);color:var(--ink);
       border-radius:var(--radius-m);padding:10px 12px;font:inherit;font-size:16px;line-height:1.6;min-height:76px;resize:vertical;margin-top:10px}
.presets{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.presets button{font-size:12.5px;color:var(--muted);background:var(--bg-chip);border:1px solid var(--line);
       border-radius:var(--radius-pill);padding:5px 12px;cursor:pointer}
.presets button:hover{border-color:var(--accent);color:var(--accent)}
.btn.danger{background:linear-gradient(180deg,var(--crim),#b03d53);border:none;color:#fff;font-weight:700}

.field{margin:14px 0}
.field label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
.field.err input[type=text],.field.err input[type=password],.field.err textarea{border-color:var(--crim);
       animation:errPulse .32s ease 2}
@keyframes errPulse{50%{box-shadow:0 0 0 3px rgba(210,83,106,.25)}}
.opts{display:flex;flex-wrap:wrap;gap:8px}
.opt{border:1px solid var(--line);background:#12161d;border-radius:var(--radius-m);padding:8px 13px;cursor:pointer;
     font-size:14px;transition:all var(--t-fast)}
.opt:hover{border-color:var(--accent-dim)}
.opt.sel{border-color:var(--accent);background:var(--accent-tint);color:#dff3ec}
.row{display:flex;align-items:center;gap:10px;margin-top:18px}
/* 注意:font 简写里混 inherit 是非法 CSS(整条声明被丢弃、输入框跌回 UA 13px 并击穿 iOS 16px 不缩放)——
   必须 font:inherit 整词 + 长属性覆盖,下同 */
input[type=text],input[type=password]{background:var(--bg-input);border:1px solid var(--line);color:var(--ink);
       border-radius:var(--radius-m);padding:10px 12px;font:inherit;font-size:16px;line-height:1.4;width:100%;
       transition:border-color var(--t-fast)}
input[type=text]:focus,input[type=password]:focus,textarea:focus{border-color:var(--accent-dim)}
input[type=number]{background:var(--bg-input);border:1px solid var(--line);color:var(--ink);
       border-radius:var(--radius-m);padding:10px 12px;font:inherit;font-size:16px;line-height:1.4;width:100%}
.live{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:13px;cursor:pointer;user-select:none}
.reco{font-size:10px;color:#1d1607;background:var(--gold);border-radius:var(--radius-pill);padding:1px 7px;font-weight:700}
.fieldnote{color:var(--faint);font-size:12px;margin:8px 0 2px}
.expander{color:var(--accent);font-size:13px;cursor:pointer;background:none;border:none;padding:2px 0}
.expander:hover{text-decoration:underline}

/* ============================================================
   游玩页:一页正在被写出的书
   ============================================================ */
#play{padding-bottom:calc(var(--composer-h) + 48px)}
.titlebar{display:flex;align-items:center;gap:10px;padding:12px 0 2px}
.titlebar h2{margin:0;font-size:16px;font-family:var(--story-font);color:var(--muted);font-weight:600;
     overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.titlebar .cov{font-size:18px;flex:none}
.titlebar .cov img{width:18px;height:18px;border-radius:4px;object-fit:cover;display:block}
.story{font-family:var(--story-font);font-size:calc(19px + var(--fs-adj));line-height:2;letter-spacing:.012em;
       padding:14px 2px 10px;max-width:660px;margin:0 auto}
.seg{margin:0 0 4px;white-space:pre-wrap}
.seg.ai{color:var(--ink-story)}
.seg.ai p{margin:0 0 1.05em;white-space:pre-wrap}
.seg.ai p:last-child{margin-bottom:0}
.seg.ai.stale{opacity:.35;transition:opacity var(--t-base)}
.seg.player{margin:30px 0 18px;font-family:system-ui,-apple-system,"Segoe UI","Microsoft YaHei",sans-serif;
     font-size:15px;color:var(--player);letter-spacing:0;
     padding-left:14px;border-left:2px solid color-mix(in srgb,var(--c,var(--accent)) 55%,transparent)}   /* 剧本 accent 只染结构色 */
.seg.player .kicker{display:block;font-size:11px;letter-spacing:.18em;color:var(--faint);margin-bottom:3px}
.seg.player.say{color:#cfd6e0;font-style:italic}
.seg.player.story{font-family:var(--story-font);font-style:italic;color:var(--gold);text-align:center;
     border-left:none;padding-left:0;margin:26px 0 20px}
.seg.player.story .kicker{letter-spacing:.3em}
.seg.player.enter{animation:penIn .24s var(--ease)}
@keyframes penIn{from{opacity:0;transform:translateY(4px)}}
.seg.sys{color:var(--faint);font-size:14px;font-family:system-ui,-apple-system,"Segoe UI","Microsoft YaHei",sans-serif;
     letter-spacing:0;margin:22px 0}
.seg.sys .inlineRetry{margin-left:8px;font-size:12.5px;color:var(--accent);background:none;
     border:1px solid var(--accent-dim);border-radius:var(--radius-pill);padding:2px 11px;cursor:pointer}
.seg.leaving{opacity:0;transition:opacity .18s ease}
.divider{display:flex;align-items:center;gap:12px;color:var(--faint);font-size:12px;letter-spacing:.2em;
     font-family:system-ui,sans-serif;margin:26px 0}
.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line-soft)}
/* 呼吸光标 + 三点等待 */
.cursor{display:inline-block;width:2px;height:1.1em;vertical-align:-.18em;background:var(--accent);
        animation:breathe 1.1s ease-in-out infinite alternate;border-radius:1px}
@keyframes breathe{from{opacity:.25}to{opacity:.9}}
.think{display:inline-flex;gap:5px;align-items:center;height:1em}
.think i{width:4px;height:4px;border-radius:50%;background:var(--faint);animation:dotPulse .9s ease-in-out infinite}
.think i:nth-child(2){animation-delay:.15s}
.think i:nth-child(3){animation-delay:.3s}
@keyframes dotPulse{0%,100%{opacity:.25}40%{opacity:1}}

/* 底部输入区(在场但不抢戏) */
.composer{position:fixed;left:0;right:0;bottom:var(--kb);z-index:15;
          background:linear-gradient(180deg,rgba(11,12,15,0),var(--bg) 26%);
          padding:10px 0 calc(14px + env(safe-area-inset-bottom))}
.composer .wrap{max-width:700px}
.cbox{background:rgba(19,22,28,.92);border:1px solid var(--line-soft);border-radius:var(--radius-l);
      padding:10px 10px 8px;box-shadow:var(--edge);transition:opacity var(--t-base) var(--ease)}
@supports (backdrop-filter:blur(10px)){ .cbox{backdrop-filter:blur(12px)} }
@media(hover:hover){ .composer.idle .cbox{opacity:.78} }
.modehint{color:var(--faint);font-size:12px;margin:0 4px 7px}
.modes{display:flex;gap:2px;margin-bottom:8px}
.mode{font-size:13px;color:var(--faint);border:none;background:none;padding:5px 12px 7px;cursor:pointer;
      position:relative;transition:color var(--t-fast)}
.mode:hover{color:var(--ink)}
.mode::after{content:"";position:absolute;left:12px;right:12px;bottom:1px;height:2px;border-radius:1px;
      background:var(--c,var(--accent));opacity:0;transform:scaleX(.4);transition:all var(--t-base) var(--ease)}
.mode.sel{color:var(--accent)}
.mode.sel::after{opacity:1;transform:none}
.inrow{display:flex;gap:8px;align-items:flex-end}
.inrow textarea{flex:1;background:var(--bg-input);border:1px solid var(--line);color:var(--ink);border-radius:var(--radius-m);
                padding:11px 13px;font:inherit;font-size:16px;line-height:1.5;resize:none;max-height:140px;min-height:46px;
                transition:border-color var(--t-fast)}
.inrow textarea:focus{border-color:var(--accent-dim)}
.inrow textarea.shake{animation:shake .26s ease}
@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.send{background:linear-gradient(180deg,var(--accent),var(--accent-strong));color:var(--accent-ink);border:none;
      border-radius:var(--radius-m);width:48px;height:46px;font-size:18px;cursor:pointer;flex:none;
      transition:transform var(--t-fast),filter var(--t-fast)}
.send:hover:not(:disabled):not(.busy){filter:brightness(1.06)}
.send:active{transform:scale(.94)}
.send:disabled{opacity:.55;cursor:default}
.send.busy{background:var(--bg-hover);color:var(--muted);border:1px solid var(--line);opacity:1;cursor:pointer}
.cmds{display:flex;gap:7px;margin-top:8px;flex-wrap:wrap;align-items:center}
.cmd{font-size:12.5px;color:var(--muted);background:transparent;border:1px solid transparent;
     border-radius:var(--radius-pill);padding:5px 12px;cursor:pointer;transition:all var(--t-fast)}
.cmd:hover{border-color:var(--accent-dim);color:var(--ink)}
.cmd:disabled{opacity:.4;cursor:default;border-color:transparent}
.hint{color:var(--faint);font-size:12px;margin-left:auto;align-self:center}
.hint.low{color:var(--gold)}
.nudge{font-size:12px;color:var(--gold);background:none;border:1px dashed var(--gold);
       border-radius:var(--radius-pill);padding:4px 11px;cursor:pointer;opacity:.85}
.nudge:hover{opacity:1}
.hooks{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:9px;align-items:center}
.hooks:empty{display:none}
.hooks::before{content:"↘ 下一步";font-size:11px;color:var(--faint);letter-spacing:.14em;flex:none}
.hook{font-size:13px;color:var(--ink-story);background:var(--bg-chip);border:1px solid var(--line);
      border-radius:var(--radius-pill);padding:5px 13px 5px 11px;cursor:pointer;
      transition:all var(--t-fast);animation:fadeUp var(--t-base) var(--ease) both}
.hook::before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;
      background:var(--c,var(--accent));margin-right:7px;vertical-align:2px}
.hook:hover{border-color:var(--accent);color:var(--accent)}
.hook.taken{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.hook:disabled{opacity:.4;cursor:default}
/* 回合发起后:旧引子降透明留场,被采纳的 .taken 保持高亮做确认帧 */
.hooks.consumed .hook{opacity:.35;pointer-events:none}
.hooks.consumed .hook.taken{opacity:1}
/* 回到最新 */
.newest{position:fixed;right:18px;bottom:calc(var(--composer-h) + var(--kb) + 14px);z-index:16;
        background:var(--bg2);border:1px solid var(--accent-dim);color:var(--accent);
        border-radius:var(--radius-pill);padding:7px 15px;font-size:13px;cursor:pointer;
        box-shadow:var(--shadow-1);animation:fadeUp var(--t-base) var(--ease)}
.newest:focus-visible{box-shadow:var(--ring),var(--shadow-1)}

/* ---------- 抽屉 ---------- */
.drawer{position:fixed;top:0;right:0;bottom:0;width:360px;max-width:88vw;z-index:45;background:var(--bg2);
        border-left:1px solid var(--line);transform:translateX(100%);transition:transform var(--t-slow) var(--ease);
        padding:14px 18px 18px;overflow:auto;box-shadow:var(--edge),-12px 0 32px rgba(0,0,0,.35)}
.drawer.open{transform:none}
.dhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.dhead h3{margin:0;font-size:15px}
.drawer h3{margin:.2em 0 .6em;font-size:15px}
.dtabs{display:flex;gap:2px;margin-bottom:12px}
.dtab{font-size:13px;color:var(--faint);padding:6px 11px 8px;border:none;background:none;cursor:pointer;
      position:relative;transition:color var(--t-fast)}
.dtab::after{content:"";position:absolute;left:11px;right:11px;bottom:2px;height:2px;border-radius:1px;
      background:var(--accent);opacity:0;transition:opacity var(--t-base)}
.dtab.sel{color:var(--accent)}
.dtab.sel::after{opacity:1}
.dcard{border:1px solid var(--line);border-radius:var(--radius-m);padding:10px 12px;margin-bottom:9px}
.dcard b{display:block;margin-bottom:3px}
.dcard .k{color:var(--faint);font-size:12px}
.dcard .serif{font-family:var(--story-font);font-size:14px;line-height:1.85;color:var(--ink-story)}
.scrim{position:fixed;inset:0;z-index:44;background:rgba(0,0,0,.45);opacity:0;pointer-events:none;
       transition:opacity var(--t-base)}
.scrim.on{opacity:1;pointer-events:auto}

/* ============================================================
   创作 / 审核
   ============================================================ */
.cwrap{padding:14px 0 90px}
.chead{display:flex;align-items:center;gap:12px;margin:8px 2px 18px;flex-wrap:wrap}
.chead h2{margin:0;font-family:var(--story-font);font-size:22px}
.stat{font-size:11px;padding:3px 10px;border-radius:var(--radius-pill);border:1px solid var(--line);color:var(--muted)}
.stat.pending{color:var(--gold);border-color:var(--gold)}
.stat.approved{color:var(--accent);border-color:var(--accent)}
.stat.rejected{color:var(--crim-text);border-color:var(--crim)}
.clist{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.citem{position:relative;border:1px solid var(--line);border-radius:var(--radius-m);padding:0 0 12px;
       background:var(--panel);display:flex;flex-direction:column;gap:8px;overflow:hidden}
.citem .thumb{height:64px;display:flex;align-items:center;justify-content:center;font-size:30px;
       background:radial-gradient(closest-side at 30% 30%,color-mix(in srgb,var(--c,#46c7b0) 22%,transparent),var(--bg-chip));
       border-bottom:1px solid var(--line)}
.citem .thumb img{width:100%;height:100%;object-fit:cover}
.citem .stat{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.55)}
.citem h3{margin:0;font-size:17px;font-family:var(--story-font)}
.citem .cin{padding:2px 14px 0;display:flex;flex-direction:column;gap:7px;flex:1}
.ctag{color:var(--muted);font-size:13px}
.citem .ctag{flex:1}
.crow{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:8px}
.citem .crow{margin-top:auto}
.mini{font-size:12.5px;padding:6px 11px;border-radius:var(--radius-s);border:1px solid var(--line);
      background:#12161d;cursor:pointer;color:var(--ink);transition:all var(--t-fast)}
.mini:hover{border-color:var(--accent-dim)}
.mini.go{border-color:var(--accent);color:var(--accent)}
.mini.danger:hover{border-color:var(--crim);color:var(--crim-text)}
.mini:disabled{opacity:.45;cursor:not-allowed}
.editor .field textarea{background:var(--bg-input);border:1px solid var(--line);color:var(--ink);border-radius:var(--radius-m);
     padding:10px 12px;font:inherit;font-size:16px;line-height:1.6;width:100%;resize:vertical;min-height:60px;
     transition:border-color var(--t-fast)}   /* ≥16px:iOS 聚焦不触发整页自动缩放 */
.editor .field textarea.serif{font:16px/1.8 var(--story-font)}
.editor input[type=text]{margin-top:2px}
.editor .ehead{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:10px;
     padding:16px 26px 12px;background:var(--bg2)}
.editor .ehead::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px;
     background:linear-gradient(180deg,var(--bg2),transparent);pointer-events:none}
.editor .ehead h2{margin:0;font-size:19px;text-align:left}
.editor .efoot{position:sticky;bottom:0;margin:8px -26px 0;padding:12px 26px calc(20px + env(safe-area-inset-bottom));z-index:3;
     background:var(--bg2);border-top:1px solid var(--line-soft);
     display:flex;align-items:center;gap:10px}
.editor .efoot::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:14px;
     background:linear-gradient(0deg,rgba(0,0,0,.18),transparent);pointer-events:none}
.esec{font-size:12px;color:var(--faint);letter-spacing:.14em;font-weight:600;margin:26px 0 2px;
     display:flex;align-items:center;gap:10px}
.esec::after{content:"";flex:1;height:1px;background:var(--line-soft)}
.grp{border:1px solid var(--line);border-radius:var(--radius-m);padding:12px;margin:12px 0}
.grp h4{margin:0 0 4px;font-size:14px}
.grp .gh{color:var(--faint);font-size:12px;margin-bottom:8px}
.rep{border:1px solid var(--line);border-radius:var(--radius-m);padding:10px;margin-bottom:8px;background:#12161d;position:relative}
.rep .x{float:right;color:var(--faint);cursor:pointer;font-size:13px;line-height:1;background:none;border:none;padding:4px 8px;border-radius:6px}
.rep .x:hover{color:var(--crim-text);background:rgba(210,83,106,.1)}
.rep .x.arm{color:#fff;background:var(--crim);font-size:12px}
.rep label{margin-top:6px}
.addrow{font-size:13px;color:var(--accent);cursor:pointer;padding:6px 2px;display:inline-block;background:none;border:none}
.addrow:hover{text-decoration:underline}
.inline2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.covprev{width:100%;height:150px;object-fit:cover;border-radius:var(--radius-m);border:1px solid var(--line);margin-top:8px}
.filebtn{display:flex;align-items:center;gap:10px;position:relative}
.filebtn input[type=file]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.filebtn .fname{color:var(--faint);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
.chk{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:13px;margin-top:8px;cursor:pointer;user-select:none}
.verdict{font-size:13px;border-radius:var(--radius-m);padding:9px 11px;border:1px solid var(--line);background:var(--bg-chip);margin:8px 0}
.verdict.block{border-left:3px solid var(--crim)}
.verdict b.ok{color:var(--accent)} .verdict b.review{color:var(--gold)} .verdict b.block{color:var(--crim-text)}
.qprev{font-size:13px;color:var(--muted);line-height:1.7;max-height:150px;overflow:hidden;position:relative;
     border-left:2px solid var(--line);padding-left:10px;white-space:pre-wrap;margin:8px 0;
     transition:max-height var(--t-slow) var(--ease)}
.qprev.openq{max-height:none;overflow:auto}
.qprev .serif{font-family:var(--story-font);font-size:14px;line-height:1.8;color:var(--ink-story)}
.sparkle{cursor:pointer;color:var(--accent);font-size:13px;margin-left:4px;user-select:none;opacity:.85;
     background:none;border:none;padding:3px 7px;border-radius:6px}
.sparkle:hover{opacity:1;background:var(--accent-soft)}
.sparkle.busy{opacity:.4;cursor:default}
/* 审核队列 */
.admtabs{display:flex;gap:6px}
.admtab{font-size:13px;color:var(--muted);background:none;border:1px solid var(--line);border-radius:var(--radius-pill);
     padding:6px 14px;cursor:pointer;transition:all var(--t-fast)}
.admtab.sel{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.admin-item{border-left:4px solid var(--line)}
.admin-item.pending{border-left-color:var(--gold)}
.admin-item.approved{border-left-color:var(--accent)}
.admin-item.rejected{border-left-color:var(--crim)}
.admin-item.leaving{opacity:0;transform:translateX(8px);transition:all .25s ease}
.admin-item{margin-bottom:20px}
/* AI 构建器 */
.bprog{height:3px;border-radius:2px;background:var(--line);overflow:hidden;margin:8px 0 2px}
.bprog i{display:block;height:100%;background:var(--accent);width:0;transition:width var(--t-slow) var(--ease)}
.bconvo{max-height:46vh;overflow:auto;display:flex;flex-direction:column;gap:8px;padding:6px 0;margin:6px 0}
.bmsg{white-space:pre-wrap;padding:8px 12px;border-radius:var(--radius-m);font-size:14px;line-height:1.6;max-width:88%;
      animation:fadeUp var(--t-base) var(--ease)}
.bmsg.ai{background:var(--bg-chip);border:1px solid var(--line);align-self:flex-start}
.bmsg.me{background:var(--accent-tint);border:1px solid var(--accent);align-self:flex-end;color:#dff3ec}
.binput{flex:1;background:var(--bg-input);border:1px solid var(--line);color:var(--ink);border-radius:var(--radius-m);
        padding:10px 12px;font:inherit;font-size:16px;line-height:1.5;resize:none;max-height:120px;min-height:44px}

/* ---------- Toast ---------- */
#toasts{position:fixed;right:18px;bottom:calc(var(--composer-h,0px) + var(--kb,0px) + 18px);z-index:60;
        display:flex;flex-direction:column;gap:8px;
        pointer-events:none;max-width:min(360px,86vw);transition:bottom var(--t-base)}
.toast{background:var(--bg2);border:1px solid var(--line);border-left:3px solid var(--accent);
       border-radius:var(--radius-m);padding:10px 14px;font-size:13.5px;box-shadow:var(--edge),var(--shadow-2);
       opacity:0;transform:translateY(8px);transition:all var(--t-base) var(--ease);pointer-events:auto}
.toast.in{opacity:1;transform:none}
.toast.err{border-left-color:var(--crim);color:#f0d5da}
.toast.ok{border-left-color:var(--accent)}
.toast.info{border-left-color:var(--faint);color:var(--muted)}

/* 视图切换入场帧(挂在视图容器上;fixed 元素勿挪入视图容器,transform 会劫持其定位) */
@keyframes viewIn{from{opacity:0;transform:translateY(6px)}}
.viewin{animation:viewIn .18s var(--ease)}

/* ============================================================
   响应式
   ============================================================ */
@media(max-width:900px){
  .drawer{width:min(400px,88vw)}
  .editor .efoot{flex-wrap:wrap}
}
@media(max-width:640px){
  .wrap{padding:0 14px}
  header .wrap{gap:6px}
  .logo{font-size:16px;letter-spacing:.08em;white-space:nowrap}
  .nav{margin-left:0;gap:0;min-width:0;overflow-x:auto;scrollbar-width:none}
  .nav::-webkit-scrollbar{display:none}
  .navlink{font-size:13px;padding:7px 8px;white-space:nowrap;flex:none}
  .btn{padding:8px 10px;white-space:nowrap}
  .clist{grid-template-columns:1fr}
  .hero2{height:min(56vw,320px);min-height:240px}
  .hero2 .body{padding:16px 18px}
  .hero2 .kick{font-size:10px;letter-spacing:.1em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .hero2 p{-webkit-line-clamp:1;font-size:14px}
  .resume .rtext{font-size:13px}   /* 须选到 .rtext:基础规则的显式 14px 特异性更高,选 .resume 本体缩不动文案 */
  .shelfbar{gap:8px}
  .shelfbar .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;flex:1 1 100%}
  .shelfbar .chips::-webkit-scrollbar{display:none}
  .chip{flex:none}
  #shelfQ{max-width:none;flex:1 1 100%;margin-left:0}
  /* 双列紧凑货架;存档区豁免全宽(cliff/rmeta 两行信息 + .del 触达) */
  .grid{grid-template-columns:1fr 1fr;gap:12px}
  #mineGrid{grid-template-columns:1fr}
  #grid .scard{aspect-ratio:3/4}
  #grid .scard h3{font-size:15px;margin-bottom:4px}
  #grid .scard .tl{font-size:11.5px;margin-bottom:0}
  #grid .scard .tags{display:none}
  #grid .scard .shade{padding:10px 12px}
  .scard .play{padding:4px 10px;font-size:12px}
  #loc{font-size:11px;white-space:nowrap}   /* 游玩中的「第 N 回 · 离线」在手机上也要可见(离线状态唯一常显标识) */
  #homeBtn{padding:8px 10px}
  .story{font-size:calc(17px + var(--fs-adj));padding:14px 4px 10px}
  .seg.player{padding-left:10px}
  .composer .wrap{padding:0 10px}
  .hooks{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;scroll-snap-type:x proximity}
  .hooks::-webkit-scrollbar{display:none}
  .hook{flex:none;scroll-snap-align:start}
  /* 横滑溢出暗示:右缘羽化,滚到尽头摘除(.ovf-end),不压最后一个 chip */
  .hooks.ovf:not(.ovf-end){-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);
      mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)}
  .modal{padding:0;align-items:flex-end;padding-bottom:var(--kb)}
  /* 贴底 bottom-sheet:非 has-foot 的普通弹层底部按钮行也要避开 Home 指示条(has-foot 由 stickyfoot 自带,其 0-2-0 特异性不受此影响) */
  .sheet{max-height:calc(94dvh - var(--kb));border-radius:var(--radius-xl) var(--radius-xl) 0 0;border-bottom:none;
         padding-bottom:calc(24px + env(safe-area-inset-bottom))}
  .sheet .cov img{height:max(160px,min(230px,32vh))}
  .inline2{grid-template-columns:1fr}
  #toasts{right:0;left:0;bottom:auto;top:64px;align-items:center}
  .newest{right:12px}
  .mini-sheet{border-radius:var(--radius-xl) var(--radius-xl) 0 0;
              padding-bottom:calc(20px + env(safe-area-inset-bottom))}
}

/* ---------- 触控目标 44px(仅粗指针;只调 padding/命中区,不动字号) ---------- */
@media(pointer:coarse){
  .mode{padding:11px 14px 12px}
  .cmd{padding:10px 14px}
  .hook{padding:10px 15px 10px 13px}
  .dots button{width:32px;height:32px}   /* 只放大命中区,i 圆点视觉不变;38px 会在 ≤390px 宽压住 hero CTA */
  .scard .del{width:42px;height:42px}
  .rep .x{padding:12px 14px}
  .sparkle{padding:9px 10px}
  .dtab{padding:10px 13px 12px}
  .seclink,.expander,.addrow{padding:10px 8px}
  .navlink{padding:11px 10px}
}

/* ---------- 动效降级 ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important;
                       transition-duration:.001s!important;scroll-behavior:auto!important}
  .cursor{animation:none;opacity:.8}
  .think i{animation:none;opacity:.6}
  .skel,.hero2.loading{animation:none}
}