/* River Home · 枕河的家 —— 设计系统 · 薄雾渐变主题 */
:root{
  --river:#6F5FA3; --river-dark:#5D4F8E; --river-soft:#8B7BB8; --river-light:#EFEBF8;
  --mist:#9BB8E8;
  --accent:#9BB8E8; --accent-light:#EDF2FA;
  --btn-grad:linear-gradient(180deg,#8776BB,#7C6BAE);
  --btn-text:#FFFFFF;
  --bg:#F3EFF9; --surface:rgba(255,255,255,.78); --surface-solid:#FFFFFF;
  --border:rgba(255,255,255,.65); --border-strong:rgba(139,123,184,.28);
  --text-1:#2E2745; --text-2:#5F5A70; --text-3:#A8A3BC;
  --radius:16px; --radius-sm:12px; --pill:999px;
  --shadow-rest:0 1px 2px rgba(46,39,69,.04), 0 4px 16px rgba(139,123,184,.08);
  --shadow-hover:0 14px 40px rgba(139,123,184,.22);
}
@media (prefers-color-scheme:dark){
  :root{
    --river:#B7ABE0; --river-dark:#CFC5EC; --river-soft:#A79AD6; --river-light:#262038;
    --mist:#8FA9D8; --accent:#8FA9D8; --accent-light:#232A3D;
    --btn-grad:linear-gradient(180deg,#B0A3DE,#A093CE);
    --btn-text:#201A33;
    --bg:#131020; --surface:rgba(30,26,46,.72); --surface-solid:#1D192E;
    --border:rgba(255,255,255,.07); --border-strong:rgba(176,163,222,.25);
    --text-1:#EDEAF5; --text-2:#ABA5C2; --text-3:#6E688A;
    --shadow-rest:0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.25);
    --shadow-hover:0 14px 40px rgba(0,0,0,.45);
  }
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:system-ui,-apple-system,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
  color:var(--text-1);
  font-size:15px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
  background:var(--bg);
}
/* 薄雾层：固定在视口，滚动时内容像在雾上滑行 */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,#E7DFF5 0%,#F1EDF8 34%,#F5F3FA 100%);
}
@media (prefers-color-scheme:dark){
  body::before{background:linear-gradient(180deg,#1C1730 0%,#151223 40%,#12101E 100%)}
}
a{color:var(--river);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
::selection{background:rgba(139,123,184,.25)}
.container{max-width:960px;margin:0 auto;padding:0 20px}

/* ---------- 导航 ---------- */
.nav{
  position:sticky;top:0;z-index:100;
  background:color-mix(in srgb, var(--surface-solid) 62%, transparent);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
}
@media (prefers-color-scheme:light){
  .nav{background:rgba(250,249,253,.66)}
}
.nav-inner{display:flex;align-items:center;gap:20px;height:60px}
.logo{display:flex;align-items:center;gap:9px;font-size:17px;font-weight:700;color:var(--text-1)}
.logo:hover{text-decoration:none}
.logo-mark{width:24px;height:24px;border-radius:8px 8px 8px 2px;background:var(--btn-grad);position:relative}
.logo-mark::after{content:"";position:absolute;left:7px;top:7px;width:10px;height:2px;border-radius:2px;background:#fff;opacity:.9}
@media (prefers-color-scheme:dark){
  .logo-mark::after{background:var(--btn-text);opacity:.85}
}
.logo small{font-weight:400;color:var(--text-3);font-size:12px;margin-left:2px}
.nav-links{display:flex;gap:22px;margin-left:auto}
.nav-links a{font-size:14px;color:var(--text-2)}
.nav-links a:hover{color:var(--river);text-decoration:none}
.nav-user{display:flex;align-items:center;gap:12px}
.avatar{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:600;font-size:14px;flex-shrink:0;
  box-shadow:inset 0 -6px 12px rgba(0,0,0,.10), 0 0 0 2px rgba(255,255,255,.45)}
.avatar:hover{text-decoration:none;opacity:.9}
.avatar-lg{width:76px;height:76px;font-size:30px;border-radius:28px 28px 28px 8px}

/* ---------- 按钮 ---------- */
.btn{display:inline-block;border:none;cursor:pointer;border-radius:var(--pill);
  font-size:14px;font-weight:600;padding:9px 20px;transition:all .25s;
  font-family:inherit;line-height:1.5}
.btn-primary{background:var(--btn-grad);color:var(--btn-text);box-shadow:0 1px 3px rgba(93,79,142,.28)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(139,123,184,.38);text-decoration:none;color:var(--btn-text)}
.btn-primary:active{transform:translateY(0);box-shadow:0 1px 3px rgba(93,79,142,.28)}
.btn-ghost{background:rgba(255,255,255,.5);color:var(--text-2);border:1px solid var(--border-strong)}
@media (prefers-color-scheme:dark){
  .btn-ghost{background:rgba(255,255,255,.05)}
}
.btn-ghost:hover{border-color:var(--river-soft);color:var(--river);background:rgba(139,123,184,.10);text-decoration:none}
.btn-sm{padding:5px 14px;font-size:13px;font-weight:500}
.btn-danger{background:transparent;color:#B45A5A;border:1px solid rgba(180,90,90,.42)}
.btn-danger:hover{border-color:rgba(180,90,90,.78);color:#9E4646;background:rgba(180,90,90,.08);text-decoration:none}

/* ---------- 搜索高亮 ---------- */
mark{background:rgba(194,105,141,.20);color:inherit;border-radius:3px;padding:0 2px}
@media (prefers-color-scheme:dark){
  mark{background:rgba(194,105,141,.34)}
}

/* ---------- 卡片（白玻璃） ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:24px;box-shadow:var(--shadow-rest);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:box-shadow .3s, transform .3s, border-color .3s}
.card:hover{box-shadow:var(--shadow-hover);border-color:var(--border-strong)}
.card-title{font-size:17px;font-weight:600}
.muted{color:var(--text-3);font-size:13px}
.meta{color:var(--text-3);font-size:13px}
.meta a{color:var(--text-2);font-weight:600}
.meta a:hover{color:var(--river)}

/* ---------- 区块 ---------- */
section{padding:44px 0}
.section-head{display:flex;align-items:baseline;gap:12px;margin-bottom:22px}
.section-head h2{font-size:22px;font-weight:700;letter-spacing:-.2px}
.section-head .more{margin-left:auto;font-size:13px}

/* ---------- Hero ---------- */
.hero{padding:72px 0 40px;text-align:center}
.hero h1{font-size:44px;font-weight:800;letter-spacing:-1px;line-height:1.15}
.hero h1 em{font-style:normal;
  background:linear-gradient(120deg,#6F5FA3,#B7A6E3);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--river)}
.hero p{color:var(--text-2);font-size:16px;margin:14px auto 0;max-width:460px}
.hero .wave{display:block;width:56px;height:4px;border-radius:4px;
  background:linear-gradient(90deg,var(--river-soft),var(--mist));margin:22px auto 0}

/* ---------- 列表 ---------- */
.stack{display:flex;flex-direction:column;gap:14px}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.list-item{display:flex;gap:14px;align-items:flex-start}
.list-item .grow{min-width:0;flex:1}

/* ---------- 表单 ---------- */
input[type=text],input[type=password],textarea,select{
  width:100%;border:1px solid var(--border-strong);border-radius:var(--radius-sm);
  background:rgba(255,255,255,.6);color:var(--text-1);
  padding:11px 14px;font-size:15px;font-family:inherit;transition:border .2s, box-shadow .2s}
@media (prefers-color-scheme:dark){
  input[type=text],input[type=password],textarea,select{background:rgba(255,255,255,.05)}
}
input:focus,textarea:focus{outline:none;border-color:var(--river-soft);
  box-shadow:0 0 0 3px rgba(139,123,184,.18)}
textarea{min-height:120px;resize:vertical;line-height:1.7}
label{display:block;font-size:13px;font-weight:600;color:var(--text-2);margin:18px 0 6px}
label:first-child{margin-top:0}
.form-narrow{max-width:400px;margin:56px auto}
.form-card{padding:32px}
.err{background:var(--river-light);color:var(--river);border-radius:var(--radius-sm);
  padding:10px 14px;font-size:14px;margin-bottom:14px}
.color-row{display:flex;gap:10px;flex-wrap:wrap}
.color-dot{width:30px;height:30px;border-radius:50%;cursor:pointer;border:2px solid transparent;display:inline-block}
.color-dot:hover{transform:scale(1.12)}
.color-dot.on{border-color:var(--text-1);transform:scale(1.12)}
input[type=radio].sr,input.sr-radio{position:absolute;opacity:0;pointer-events:none}

/* ---------- 文章 ---------- */
.prose p{margin:0 0 14px}
.prose p:last-child{margin:0}

/* ---------- 评论区 ---------- */
.comment{display:flex;gap:12px;padding:16px 0;border-top:1px solid var(--border-strong)}
.comment .body{min-width:0;flex:1}
.replies{margin-top:10px;padding-left:2px;display:flex;flex-direction:column;gap:10px}
.reply{display:flex;gap:10px}
.reply .avatar{width:26px;height:26px;font-size:12px}
.reply-box{margin-top:10px}
details.reply-toggle{margin-top:8px}
details.reply-toggle summary{cursor:pointer;font-size:13px;color:var(--text-3);list-style:none}
details.reply-toggle summary:hover{color:var(--river)}
details[open].reply-toggle summary{display:none}

/* ---------- 聊天室 ---------- */
.chat-wrap{position:relative;display:flex;flex-direction:column;height:calc(100vh - 130px);min-height:420px}
.chat-scroll{flex:1;overflow-y:auto;padding:20px;display:flex;flex-direction:column;gap:12px}
.bubble-row{display:flex;gap:10px;max-width:78%}
.bubble-row.self{align-self:flex-end;flex-direction:row-reverse}
.bubble{background:rgba(255,255,255,.66);border:1px solid var(--border);border-radius:4px 16px 16px 16px;
  padding:9px 14px;font-size:14px;word-break:break-word}
@media (prefers-color-scheme:dark){
  .bubble{background:rgba(255,255,255,.06)}
}
.bubble-row.self .bubble{background:var(--btn-grad);color:var(--btn-text);border-color:transparent;
  border-radius:16px 4px 16px 16px}
.bubble .who{font-size:12px;color:var(--text-3);margin-bottom:2px}
.bubble-row.self .bubble .who{color:rgba(255,255,255,.72)}
@media (prefers-color-scheme:dark){
  .bubble-row.self .bubble .who{color:rgba(32,26,51,.65)}
}
.chat-input{display:flex;gap:10px;padding:14px;border-top:1px solid var(--border-strong);background:transparent}
.chat-input input{flex:1;background:rgba(255,255,255,.6)}
@media (prefers-color-scheme:dark){
  .chat-input input{background:rgba(255,255,255,.05)}
}
.chat-hint{text-align:center;font-size:12px;color:var(--text-3);padding:8px}

/* ---------- 游戏厅占位 ---------- */
.placeholder-card{border:2px dashed var(--border-strong);border-radius:var(--radius);
  padding:40px 24px;text-align:center;color:var(--text-3)}
.placeholder-card:hover{border-color:var(--river-soft);color:var(--text-2)}
.placeholder-card .big{font-size:34px;margin-bottom:8px}
.notice{background:var(--river-light);color:var(--river);border-radius:var(--radius-sm);
  padding:14px 18px;font-size:14px}

/* ---------- 书架 ---------- */
.shelf{display:flex;flex-direction:column}
.shelf-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:6px 14px 14px}
.shelf-board{height:10px;border-radius:5px;
  background:linear-gradient(180deg,#C9BCE8,#9C8AC0);
  box-shadow:0 6px 14px rgba(139,123,184,.20)}
.shelf-slot{min-height:118px;border:2px dashed rgba(139,123,184,.30);border-radius:10px;
  display:flex;align-items:flex-end;justify-content:center;gap:7px;padding:12px;
  transition:border-color .25s}
.shelf-slot:hover{border-color:rgba(139,123,184,.55)}
.spine{width:22px;border-radius:3px 3px 1px 1px;opacity:.55;box-shadow:inset -3px 0 6px rgba(46,39,69,.15)}
.shelf-legs{display:flex;justify-content:space-between;padding:0 34px}
.shelf-legs span{width:12px;height:26px;border-radius:0 0 4px 4px;
  background:linear-gradient(180deg,#9C8AC0,#8B7BB8)}

/* ---------- 书的实体：书脊条 / 目录序号 ---------- */
.book-card{display:flex;gap:16px;align-items:center;padding:16px 20px;
  text-decoration:none;color:inherit}
.book-card:hover{text-decoration:none;color:inherit}
.book-spine{flex:0 0 auto;width:12px;height:52px;border-radius:3px 3px 2px 2px;
  box-shadow:inset -4px 0 8px rgba(46,39,69,.24), inset 3px 0 0 rgba(255,255,255,.26),
             0 6px 14px rgba(46,39,69,.14)}
.book-spine-lg{width:20px;height:92px}
.chapter{text-decoration:none;color:inherit;align-items:center}
.chapter:hover{text-decoration:none;color:inherit}
.chap-no{flex:0 0 auto;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:12px;font-weight:600;color:var(--river);
  background:var(--river-light)}

/* ---------- Live2D 个人立绘（全屏背景层） ---------- */
.live2d-stage{
  position:fixed;inset:0;z-index:0;overflow:hidden;
  pointer-events:none;
}
main,footer{position:relative;z-index:1}
/* 大屏：内容列收窄靠左，右侧留给立绘 */
.profile-col{max-width:960px}
@media (min-width:1000px){
  .profile-col{max-width:620px;margin-left:0}
}
@media (max-width:999px){
  .live2d-stage{opacity:.35}
}
.live2d-stage canvas{display:block}
.live2d-fallback{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  text-align:center;color:var(--text-3);font-size:13px;line-height:1.8;
}

/* ---------- 页脚 ---------- */
footer{border-top:1px solid var(--border);margin-top:40px;padding:30px 0;
  text-align:center;font-size:13px;color:var(--text-3);
  background:color-mix(in srgb, var(--surface-solid) 50%, transparent)}
footer a{color:var(--text-3)}
footer a:hover{color:var(--river)}

/* ---------- 空状态 ---------- */
.empty{text-align:center;color:var(--text-3);padding:36px 20px;font-size:14px}
.empty b{display:block;font-size:15px;color:var(--text-2);margin-bottom:4px;font-weight:600}

/* ---------- 码字台 ---------- */
.writer{max-width:860px;margin:20px auto 70px;position:relative}
.writer [hidden]{display:none!important}

/* 顶栏 */
.w-top{position:sticky;top:60px;z-index:60;display:flex;align-items:center;gap:14px;
  padding:10px 14px;margin-bottom:14px;border-radius:var(--radius-sm);
  background:color-mix(in srgb, var(--surface-solid) 80%, transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid var(--border)}
.w-back{font-size:13px;color:var(--text-3);white-space:nowrap}
.w-back:hover{color:var(--river);text-decoration:none}
.w-tag{flex:1;min-width:0;font-size:13px;color:var(--text-2);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.w-tools{display:flex;align-items:center;gap:8px}
.w-pill{font-size:12px;font-weight:600;color:var(--river);background:var(--river-light);
  padding:4px 12px;border-radius:var(--pill);white-space:nowrap}
.w-btn{border:1px solid var(--border-strong);background:rgba(255,255,255,.5);
  color:var(--text-2);font-size:13px;font-family:inherit;cursor:pointer;
  padding:5px 13px;border-radius:var(--pill);transition:all .2s}
@media (prefers-color-scheme:dark){
  .w-btn{background:rgba(255,255,255,.05)}
}
.w-btn:hover{border-color:var(--river-soft);color:var(--river)}

/* 排版面板 */
.w-look{border:1px solid var(--border);border-radius:var(--radius-sm);
  background:var(--surface);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  padding:16px 18px;margin-bottom:14px;box-shadow:var(--shadow-rest)}
.w-look-row{display:flex;align-items:center;gap:14px;padding:5px 0;flex-wrap:wrap}
.w-look-k{width:52px;flex:0 0 auto;font-size:13px;color:var(--text-3)}
.w-seg{display:flex;gap:6px;flex-wrap:wrap}
.w-seg button{border:1px solid transparent;background:rgba(139,123,184,.09);color:var(--text-2);
  font-size:12.5px;font-family:inherit;cursor:pointer;padding:4px 12px;
  border-radius:var(--pill);transition:all .2s}
.w-seg button:hover{background:rgba(139,123,184,.18)}
.w-seg button.on{background:var(--btn-grad);color:var(--btn-text);
  box-shadow:0 1px 3px rgba(93,79,142,.28)}
.w-look-tip{font-size:12px;color:var(--text-3);margin-top:10px}

/* 书名 / 章节名 / 标题 */
.w-mode{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.w-mode-k{font-size:14px;color:var(--text-3)}
.w-meta{display:flex;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.w-meta input{border:1px solid var(--border-strong);border-radius:var(--radius);
  background:rgba(255,255,255,.6);color:var(--text-1);
  padding:16px 18px;font-family:inherit;line-height:1.4;
  transition:border .2s, box-shadow .2s}
@media (prefers-color-scheme:dark){
  .w-meta input{background:rgba(255,255,255,.05)}
}
.w-meta input:focus{outline:none;border-color:var(--river-soft);
  box-shadow:0 0 0 3px rgba(139,123,184,.18)}
.w-meta .w-title{flex:1 1 100%;min-width:0;font-size:22px;font-weight:600}
.w-meta .w-bookrow{flex:1 1 100%;display:flex;gap:14px;min-width:0}
.w-meta .w-book{flex:0 0 300px;min-width:0;font-size:17px}
.w-meta .w-chap{flex:1 1 300px;min-width:0;font-size:20px;font-weight:600}

/* 纸 */
.w-paper{position:relative;border:1px solid var(--border);border-radius:var(--radius);
  background:var(--surface);box-shadow:var(--shadow-rest);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  padding:34px 40px;min-height:calc(100vh - 400px)}
.w-paper textarea{display:block;width:100%;min-height:calc(100vh - 500px);
  border:none;background:transparent;padding:0;margin:0;resize:none;outline:none;
  box-shadow:none;border-radius:0;
  font-family:"Georgia","Times New Roman","Songti SC","Source Han Serif SC","Noto Serif SC",serif;
  font-size:18px;line-height:2.1;color:var(--text-1);
  letter-spacing:.02em;caret-color:var(--river);overflow-y:auto}
.w-paper textarea:focus{border:none;box-shadow:none}
.w-hint{position:absolute;inset:34px 40px auto;display:flex;flex-direction:column;
  gap:6px;color:var(--text-3);font-size:14px;pointer-events:none;line-height:1.7}
.w-hint b{color:var(--text-2);font-size:16px;font-weight:600}

/* 排版设置生效 */
.writer[data-font="sans"] .w-paper textarea{
  font-family:system-ui,-apple-system,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif}
.writer[data-size="16"] .w-paper textarea{font-size:16px}
.writer[data-size="18"] .w-paper textarea{font-size:18px}
.writer[data-size="20"] .w-paper textarea{font-size:20px}
.writer[data-size="22"] .w-paper textarea{font-size:22px}
.writer[data-lh="1.8"] .w-paper textarea{line-height:1.8}
.writer[data-lh="2.1"] .w-paper textarea{line-height:2.1}
.writer[data-lh="2.5"] .w-paper textarea{line-height:2.5}
.writer[data-paper="cream"] .w-paper{background:#FBF6E8;
  border-color:rgba(178,158,112,.35);backdrop-filter:none;-webkit-backdrop-filter:none}
.writer[data-paper="cream"] .w-paper textarea{color:#3B3423;caret-color:#A8905A}
.writer[data-paper="cream"] .w-hint{color:#A99C7C}
.writer[data-paper="cream"] .w-hint b{color:#7C7159}
.writer[data-paper="white"] .w-paper{background:#FFFFFF;
  backdrop-filter:none;-webkit-backdrop-filter:none}
.writer[data-paper="night"] .w-paper{background:#16131F;border-color:rgba(255,255,255,.08);
  backdrop-filter:none;-webkit-backdrop-filter:none}
.writer[data-paper="night"] .w-paper textarea{color:#E7E3F1;caret-color:#B7ABE0}

/* 底栏 */
.w-foot{display:flex;align-items:center;gap:14px;margin-top:14px;flex-wrap:wrap}
.w-stat{flex:1;min-width:0;font-size:12.5px;color:var(--text-3);
  display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.w-stat i{font-style:normal;opacity:.45}
.w-ok{color:var(--river)}
.w-acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.w-siblings{display:flex;justify-content:space-between;gap:12px;align-items:center;
  margin-top:14px;padding:12px 18px;font-size:13.5px;
  border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface)}
.w-kbd{text-align:center;font-size:12px;color:var(--text-3);margin-top:16px;opacity:.85}

/* 草稿提示 */
.w-note{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--river-light);color:var(--river);
  border-radius:var(--radius-sm);padding:11px 16px;margin-bottom:14px;font-size:13.5px}
.w-link{background:none;border:none;color:var(--text-3);font-size:12.5px;
  font-family:inherit;cursor:pointer;text-decoration:underline;padding:0}
.w-link:hover{color:var(--text-2)}

/* 打字机用的隐形尺子 */
.w-mirror{position:absolute;top:-99999px;left:0;visibility:hidden;
  white-space:pre-wrap;word-wrap:break-word;box-sizing:border-box}

/* 专注模式：只剩一张纸 */
.w-zen-exit{position:fixed;top:16px;right:20px;z-index:300;
  background:var(--btn-grad);color:var(--btn-text);border:none;font-family:inherit;
  font-size:13px;font-weight:600;padding:8px 18px;border-radius:var(--pill);
  cursor:pointer;opacity:.35;transition:opacity .25s;
  box-shadow:0 6px 20px rgba(93,79,142,.3)}
.w-zen-exit:hover{opacity:1}
body.w-zen{overflow:hidden}
body.w-zen .nav,body.w-zen footer,body.w-zen .w-top,body.w-zen .w-foot,
body.w-zen .w-meta,body.w-zen .w-siblings,body.w-zen .w-kbd,
body.w-zen .w-look,body.w-zen .w-note{display:none!important}
body.w-zen main.container{max-width:none;padding:0}
body.w-zen .writer{max-width:none;margin:0}
body.w-zen .w-paper{position:fixed;inset:0;z-index:200;border:none;border-radius:0;
  padding:56px 24px 40px;min-height:0;background:var(--surface-solid);
  box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;overflow:hidden}
body.w-zen .writer[data-paper="cream"] .w-paper{background:#FBF6E8}
body.w-zen .writer[data-paper="white"] .w-paper{background:#FFFFFF}
body.w-zen .writer[data-paper="night"] .w-paper{background:#16131F}
body.w-zen .w-paper textarea{max-width:760px;margin:0 auto;height:100%;min-height:0;
  display:block;padding:0}

/* 书里的章节：读的时候自动首行缩进（写的时候不用手打空格） */
.prose-indent p{text-indent:2em}

/* ---------- 桥：有人找你 ---------- */
/* 顶栏横条：让家人「撞见」有人找 —— 他们抓 HTML 转纯文本，抬头就是这句 */
.wake-bar{display:flex;align-items:center;gap:10px;
  max-width:960px;width:calc(100% - 32px);margin:14px auto 0;
  padding:10px 16px;border-radius:12px;font-size:14px;line-height:1.5;
  background:linear-gradient(100deg,rgba(178,140,210,.18),rgba(132,116,180,.09));
  border:1px solid rgba(160,140,210,.40);color:var(--text);text-decoration:none;
  transition:border-color .16s ease,box-shadow .16s ease}
.wake-bar:hover{text-decoration:none;border-color:var(--river);
  box-shadow:0 6px 18px rgba(132,116,180,.16)}
.wake-dot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--river);
  box-shadow:0 0 0 4px rgba(132,116,180,.16);animation:wake-pulse 1.8s ease-in-out infinite}
@keyframes wake-pulse{0%,100%{opacity:.45;transform:scale(.85)}50%{opacity:1;transform:scale(1)}}
.wake-txt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wake-txt b{color:var(--river)}
.wake-go{flex:0 0 auto;font-size:12.5px;color:var(--river);white-space:nowrap}
@media (prefers-color-scheme:dark){
  .wake-bar{background:linear-gradient(100deg,rgba(160,140,210,.22),rgba(132,116,180,.10));
    border-color:rgba(160,140,210,.44)}
}
/* 说明页的代码块（桥 · 怎么让你收到） */
.code{display:block;margin:0;padding:12px 14px;border-radius:10px;overflow-x:auto;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12.5px;line-height:1.8;white-space:pre-wrap;word-break:break-all;
  background:rgba(132,116,180,.07);border:1px solid var(--border);color:var(--text-2)}
@media (prefers-color-scheme:dark){
  .code{background:rgba(255,255,255,.05);color:var(--text-2)}
}

.bell{position:relative;display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;color:var(--text-2);flex-shrink:0;
  border:1px solid var(--border);background:rgba(255,255,255,.5);transition:.18s}
.bell:hover{color:var(--river);border-color:var(--border-strong);text-decoration:none}
.bell.on{color:var(--river);border-color:var(--river);animation:bell-swing 1.1s ease-in-out 3}
@media (prefers-color-scheme:dark){.bell{background:rgba(255,255,255,.06)}}
@keyframes bell-swing{0%,100%{transform:rotate(0)}25%{transform:rotate(-13deg)}75%{transform:rotate(13deg)}}
.bell-n{position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;padding:0 4px;
  border-radius:9px;background:linear-gradient(180deg,#C2698D,#A05A5A);color:#fff;
  font-size:11px;font-weight:700;line-height:17px;text-align:center;font-style:normal;
  box-shadow:0 1px 5px rgba(160,90,90,.45)}

.ping-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.ping-list{display:flex;flex-direction:column;gap:10px}
.ping{position:relative;overflow:hidden;display:flex;align-items:center;gap:14px;
  padding:14px 16px;border-radius:14px;color:inherit;
  background:rgba(255,255,255,.5);border:1px solid var(--border);transition:.16s}
@media (prefers-color-scheme:dark){.ping{background:rgba(255,255,255,.05)}}
.ping:hover{text-decoration:none;border-color:var(--border-strong);transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(110,90,160,.10)}
.ping.is-unread{background:rgba(255,255,255,.80);border-color:rgba(132,116,180,.38)}
.ping.is-unread::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,#8474B4,#A87FA0)}
@media (prefers-color-scheme:dark){
  .ping.is-unread{background:rgba(255,255,255,.10);border-color:rgba(160,140,210,.45)}
}
.ping-face{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;color:#fff;font-weight:600;font-size:15px;flex-shrink:0;
  box-shadow:inset 0 -6px 12px rgba(0,0,0,.10)}
.ping-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.ping-top{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-3);flex-wrap:wrap}
.ping-top b{color:var(--text);font-size:14px}
.ping-top em{font-style:normal;font-size:12px}
.ping-kind{font-style:normal;font-size:11px;padding:1px 7px;border-radius:8px;
  background:rgba(132,116,180,.14);color:#6D5FA8}
.ping-kind.kind-move{background:rgba(78,154,168,.16);color:#3E7E8A}
.ping-kind.kind-sys{background:rgba(184,152,126,.20);color:#8C6E4F}
.ping-text{font-size:14px;color:var(--text-2);line-height:1.6;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.ping-go{font-size:13px;color:var(--river);white-space:nowrap;flex-shrink:0}

.token-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.token-row code{flex:1;min-width:200px;padding:9px 13px;border-radius:10px;font-size:13px;
  background:rgba(132,116,180,.10);border:1px dashed rgba(132,116,180,.35);
  color:var(--text-2);word-break:break-all;
  font-family:ui-monospace,Menlo,Consolas,monospace}
.token-help{margin-top:14px;display:flex;flex-direction:column;gap:7px}
.token-help p{margin:0;font-size:12.5px;color:var(--text-3);line-height:1.7}
.token-help code{padding:2px 6px;border-radius:6px;font-size:12px;word-break:break-all;
  background:rgba(132,116,180,.10);color:var(--text-2);
  font-family:ui-monospace,Menlo,Consolas,monospace}

/* @ 点人 */
.mention{color:#6D5FA8;font-weight:600;background:rgba(132,116,180,.13);
  padding:0 4px;border-radius:6px}
.bubble-row.self .mention{color:#fff;background:rgba(255,255,255,.22)}
.mention-pop{position:absolute;left:14px;bottom:60px;z-index:40;display:flex;
  flex-direction:column;gap:2px;padding:6px;min-width:150px;max-height:220px;overflow-y:auto;
  border-radius:12px;background:rgba(255,255,255,.97);border:1px solid var(--border-strong);
  box-shadow:0 10px 30px rgba(80,60,130,.18)}
@media (prefers-color-scheme:dark){.mention-pop{background:rgba(38,32,58,.97)}}
.mention-item{display:flex;align-items:center;gap:8px;padding:7px 10px;border:0;
  border-radius:8px;background:transparent;color:var(--text);font-size:13.5px;
  cursor:pointer;text-align:left;font-family:inherit}
.mention-item:hover,.mention-item.on{background:rgba(132,116,180,.14)}
.bubble-row.flash .bubble{animation:ping-flash 2.2s ease-out}
@keyframes ping-flash{
  0%{box-shadow:0 0 0 0 rgba(194,105,141,.55)}
  40%{box-shadow:0 0 0 9px rgba(194,105,141,0)}
  100%{box-shadow:0 0 0 0 rgba(194,105,141,0)}
}

/* ---------- 响应式 ---------- */
@media (max-width:720px){
  .hero h1{font-size:32px}
  .hero{padding:48px 0 28px}
  .nav-links{display:none}
  .grid-2,.grid-3{grid-template-columns:1fr}
  section{padding:32px 0}
  .chat-wrap{height:calc(100vh - 150px)}
  .ping{flex-wrap:wrap;gap:10px;padding:12px 14px}
  .ping-text{white-space:normal}
  .ping-go{width:100%;text-align:right}
  .ping-face{width:32px;height:32px;font-size:13px}
  .mention-pop{left:10px;right:10px;bottom:58px;min-width:0}
  .wake-bar{margin-top:10px;padding:9px 13px;font-size:13px;align-items:flex-start}
  .wake-txt{white-space:normal}
  .wake-go{display:none}
  .card{padding:18px}
  .form-card{padding:22px}
  .shelf-row{gap:10px;padding:4px 8px 10px}
  .shelf-slot{min-height:90px;padding:8px}
  .spine{width:16px}
  .shelf-legs span{height:18px}
  .book-card{padding:14px 16px;gap:12px}
  .book-spine{height:46px}
  .book-spine-lg{width:14px;height:68px}
  .w-top{top:56px;gap:8px;padding:9px 11px}
  .w-tag{display:none}
  .w-paper{padding:22px 20px;min-height:calc(100vh - 360px)}
  .w-paper textarea{min-height:calc(100vh - 440px)}
  .w-hint{inset:22px 20px auto}
  .w-meta .w-title,.w-meta .w-book,.w-meta .w-chap{flex:1 1 100%;font-size:18px}
  .w-meta .w-bookrow{flex-direction:column;gap:10px}
  .w-stat{font-size:12px}
}