/* 句子库 · 样式（/sentences/）
 * 风格：宣纸墨迹 —— 米白纸底、墨色字、朱砂点缀，正文用系统楷体/宋体（不加载任何网络字体）。
 * 正文按句读断行（.ln 逐句成行），字号按长度分级（.s1~.s4），见 app.js。
 * 改样式后记得 bump index.html 里的 ?v=
 * ========================================================= */

:root{
  --bg:#EDE7DA;                      /* 外场：旧宣纸 */
  --card:#FAF7F0;                    /* 卡片：新宣纸 */
  --paper-2:#F4EEE3;
  --primary:#A63B2E;                 /* 朱砂 */
  --primary-deep:#8C3125;            /* 深朱砂 */
  --ink:#2A2724;                     /* 墨 */
  --ink-soft:#5C554B;                /* 次墨 */
  --faint:#9A9288;                   /* 淡墨 */
  --accent-y:#B8892F;                /* 赭黄（星级） */
  --accent-p:#A63B2E;
  --line:#E0D7C6;                    /* 界行线 */
  --line-2:#EDE6D9;
  --shadow:none;
  --shadow-lg:0 1px 2px rgba(42,39,36,.04);
  --r:10px;                          /* 小圆角：书页感，不用大胶囊 */
  /* 纯系统字体栈：楷体优先（Windows KaiTi / macOS Kaiti SC），宋体兜底，零网络成本 */
  --serif:"Kaiti SC",KaiTi,STKaiti,"楷体","Songti SC","Noto Serif CJK SC","Source Han Serif SC",STSong,SimSun,serif;
  --kai:var(--serif);
  --hei:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  --bar-bg:rgba(250,247,240,.92); --bar-fg:var(--ink); --bar-bd:var(--line);
  --bar-btn:transparent;
}
html[data-theme="dark"]{
  --bg:#141209;
  --card:#1D1A14;
  --paper-2:#242019;
  --primary:#C4634F; --primary-deep:#D97A64;
  --ink:#E9E2D4; --ink-soft:#A79C8B; --faint:#6E6559;
  --accent-y:#D2A44E; --accent-p:#C4634F;
  --line:rgba(233,226,212,.13);
  --line-2:rgba(233,226,212,.07);
  --shadow-lg:0 1px 2px rgba(0,0,0,.3);
  --bar-bg:rgba(20,18,9,.9); --bar-fg:#E9E2D4; --bar-bd:rgba(233,226,212,.13);
}
*{box-sizing:border-box}
html,body{
  margin:0;padding:0;
  /* 关键：阻止横向 overscroll 触发浏览器的「滑动前进/后退」 */
  overscroll-behavior-x:contain;
}
body{
  color:var(--ink); font-family:var(--hei); -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  background:
    radial-gradient(ellipse 80% 55% at 50% -8%, rgba(255,253,247,.85), transparent 62%),
    var(--bg);
  min-height:100vh;
}
html[data-theme="dark"] body{
  background:
    radial-gradient(ellipse 80% 55% at 50% -8%, rgba(70,60,42,.35), transparent 62%),
    var(--bg);
}

/* 顶栏 */
.devbar{
  position:sticky; top:0; z-index:50; display:flex; align-items:center; gap:10px;
  padding:11px 16px; background:var(--bar-bg); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--bar-bd); color:var(--bar-fg);
}
.devbar b{font-size:15px; font-family:var(--serif); letter-spacing:1.5px}
.devbar .sp{flex:1}
.db-back{color:var(--ink-soft); text-decoration:none; font-size:18px; line-height:1; padding:0 6px}
.db-back:hover{color:var(--primary)}
.devbar button{
  border:0; border-bottom:1px solid transparent; background:transparent; color:var(--ink-soft);
  padding:2px 2px 3px; font-size:13px; cursor:pointer; letter-spacing:.5px;
}
.devbar button:hover{color:var(--primary); border-bottom-color:var(--primary)}

.page{max-width:920px; margin:0 auto; padding:20px 16px 64px}

/* 品牌行 */
.brand{
  position:relative; display:flex; align-items:center; gap:14px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:15px 20px; margin-bottom:12px;
}
.brand .l{display:flex; align-items:center; gap:13px}
.brand .mark{width:40px; height:40px; flex:none}
.brand h1{margin:0; font-family:var(--serif); font-size:22px; letter-spacing:3px; font-weight:400}
.brand .en{font-size:10.5px; color:var(--faint); letter-spacing:1.6px; margin-top:3px}
.brand .r{margin-left:auto; text-align:right; font-size:13px; color:var(--ink-soft); line-height:1.65}
.brand .r b{color:var(--primary); font-size:18px; font-family:var(--serif); margin:0 2px}
.brand .sub{font-size:11px; color:var(--faint)}

/* 工具条（可折叠，默认收起） */
.toolbar{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:13px 16px; margin-bottom:12px;
}
.toolbar.collapsed{padding:0}
.tbToggle{
  display:none; width:100%; align-items:center; gap:9px; text-align:left;
  border:0; background:transparent; color:var(--ink-soft); cursor:pointer;
  padding:11px 15px; font-size:12.5px; font-family:inherit; border-radius:var(--r);
}
.toolbar.collapsed .tbToggle{display:flex}
.tbToggle:hover{color:var(--primary)}
/* 折叠状态下用一个小放大镜点作标记（不用图片/字体，纯 CSS） */
.tbIco{
  flex:none; width:11px; height:11px; border:1.4px solid currentColor; border-radius:50%;
  position:relative; opacity:.75;
}
.tbIco::after{
  content:''; position:absolute; right:-4px; bottom:-3px; width:6px; height:1.4px;
  background:currentColor; transform:rotate(45deg);
}
#tbSummary{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tbCaret{flex:none; font-size:11px; transition:transform .18s; transform:rotate(-90deg)}
.toolbar:not(.collapsed) .tbCaret{transform:none}
.toolbar:not(.collapsed) .tbToggle{display:flex; border-bottom:1px solid var(--line-2); border-radius:0}
.toolbar .row1,.toolbar .row2{display:flex; align-items:center; gap:10px}
.toolbar .row2{margin-top:10px}
.toolbar .sp{flex:1}
#q{
  flex:1; min-width:0; padding:8px 13px; border-radius:6px; font-size:14px;
  border:1px solid var(--line); background:var(--paper-2); color:var(--ink); outline:none;
  font-family:inherit;
}
#q::placeholder{color:var(--faint)}
#q:focus{border-color:var(--primary)}
.seg{display:flex; border:1px solid var(--line); border-radius:6px; overflow:hidden; flex:none}
.segBtn{
  border:0; background:transparent; color:var(--ink-soft); padding:8px 15px;
  font-size:13px; cursor:pointer; font-family:inherit; letter-spacing:.5px;
}
.segBtn.on{background:var(--primary); color:var(--card)}
.chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:11px}
.chip{
  border:1px solid var(--line); background:transparent; color:var(--ink-soft);
  border-radius:4px; padding:4px 11px; font-size:12.5px; cursor:pointer; font-family:inherit;
  transition:border-color .15s, color .15s;
}
.chip:hover{border-color:var(--primary); color:var(--primary)}
.chip.on{background:var(--primary); color:var(--card); border-color:var(--primary)}
.chip .n{opacity:.6; margin-left:4px; font-size:11px}
.ck{display:flex; align-items:center; gap:6px; font-size:13px; color:var(--ink-soft); cursor:pointer}
.count{font-size:12.5px; color:var(--faint)}
.addBtn{
  border:1px solid var(--primary); background:transparent; color:var(--primary);
  border-radius:4px; padding:6px 15px; font-size:13px; cursor:pointer; font-family:inherit;
}
.addBtn:hover{background:var(--primary); color:var(--card)}

/* ---------- 翻卡 ---------- */
.cardView{margin-top:4px}
.card-wrap{display:flex; align-items:center; gap:6px}
.nav{
  flex:none; width:38px; height:70px; border:0; background:transparent;
  color:var(--faint); font-size:30px; cursor:pointer; border-radius:6px;
  line-height:1; padding:0; transition:color .15s, background .15s;
}
.nav:hover{color:var(--primary); background:rgba(166,59,46,.05)}
.qcard{
  flex:1; min-width:0; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); padding:30px 30px 20px;
  display:flex; flex-direction:column; min-height:320px; position:relative;
  box-shadow:var(--shadow-lg);
  /* 只允许纵向滚动：告诉浏览器这块不做横向 pan，横向手势归页面（翻卡）而非导航 */
  touch-action:pan-y;
  will-change:transform;
}
.qmeta{display:flex; gap:8px; align-items:center; font-size:12px; flex-wrap:wrap}
.cat{
  color:var(--primary); border:1px solid rgba(166,59,46,.32); border-radius:3px;
  padding:2px 9px; font-size:11.5px; letter-spacing:1px;
}
.src{color:var(--faint)}
.qtext{
  font-family:var(--serif); line-height:2.08; letter-spacing:.03em;
  color:var(--ink); flex:1; display:flex; flex-direction:column;
  justify-content:center; word-break:break-word; white-space:pre-wrap;
  padding:18px 0;
}
.qtext .ln{display:block}
/* 按长度分级：短句大字号居中（诗笺感），长句缩小改左对齐（避免参差） */
.qtext.s1{font-size:clamp(23px,4.8vw,30px); text-align:center}
.qtext.s2{font-size:clamp(20px,4vw,25px); text-align:center}
.qtext.s3{font-size:clamp(17px,3.2vw,21px); text-align:left; line-height:2}
.qtext.s4{font-size:clamp(15px,2.7vw,18px); text-align:left; line-height:1.95}
/* 逻辑行被折行时改左对齐（由 fitQText 实测行高后加 .wrapped）——
   否则折行后的续行也会居中，看起来散乱 */
.qtext.wrapped.s1,.qtext.wrapped.s2{text-align:left}
.qtext .mask{
  background:var(--ink); color:transparent; border-radius:3px;
  padding:0 3px; user-select:none; cursor:pointer; font-style:normal;
}
.qtext .mask:hover{background:var(--primary)}

/* ---------- 正文 / 感想里的 Markdown 元素 ----------
 * 定位：低调，不抢句子本身的风头——标题只做左侧朱砂竖线，引用只做细界行。 */
.qtext,.qnote{counter-reset:oli}
.qtext strong,.qnote strong{font-weight:600}
.qtext em,.qnote em{font-style:normal; text-decoration:underline dotted currentColor; text-underline-offset:3px}
.qtext del,.qnote del{color:var(--faint)}
.qtext code,.qnote code{
  font-family:ui-monospace,"SFMono-Regular",Consolas,monospace; font-size:.86em;
  background:var(--paper-2); border:1px solid var(--line-2); border-radius:3px; padding:1px 5px;
}
.qtext a,.qnote a{color:var(--primary); text-decoration:none; border-bottom:1px solid rgba(166,59,46,.35)}
.qtext h3,.qtext h4,.qtext h5,.qtext h6,
.qnote h3,.qnote h4,.qnote h5,.qnote h6{
  margin:.5em 0 .3em; font-weight:400; font-size:1.02em; letter-spacing:1px;
  padding-left:11px; border-left:2px solid var(--primary);
}
.qtext blockquote,.qnote blockquote{
  margin:.45em 0; padding:.15em 0 .15em 12px; border-left:2px solid var(--line); color:var(--ink-soft);
}
/* 列表项不用原生 list-item：flex 容器里 marker 不一定显示，自己画更稳 */
.qtext li,.qnote li{display:block; margin:.2em 0; padding-left:1.25em; position:relative}
.qtext li::before,.qnote li::before{
  content:'·'; position:absolute; left:.35em; color:var(--primary); font-weight:700;
}
.qtext li.oli,.qnote li.oli{counter-increment:oli}
.qtext li.oli::before,.qnote li.oli::before{content:counter(oli) '.'; font-weight:400; color:var(--ink-soft)}
.qtext hr,.qnote hr{border:0; border-top:1px solid var(--line); margin:13px 0; width:100%}
/* 出现块级元素时整体改左对齐：引用/列表被 .s1/.s2 的居中拉着会错位（实测截图暴露） */
.qtext.hasblock{text-align:left}
.qtext p,.qnote p{margin:.35em 0}
.qnote p:first-child{margin-top:0}
.qnote p:last-child{margin-bottom:0}
/* 落款：出处右对齐，前置朱砂短横 */
.qsign{text-align:right; font-size:13px; color:var(--ink-soft); font-family:var(--serif);
  letter-spacing:.5px; padding-top:6px; min-height:20px}
.qsign .src{display:inline-block}
.qsign .src:not(:empty)::before{
  content:''; display:inline-block; width:20px; height:1px;
  background:var(--primary); vertical-align:middle; margin-right:9px; opacity:.75;
}
.qnote{
  font-size:13px; color:var(--ink-soft); background:var(--paper-2); border-radius:6px;
  padding:10px 13px; margin-top:14px; white-space:pre-wrap; line-height:1.8;
}
.qtags{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px}
.qtags span{
  font-size:11.5px; color:var(--ink-soft); border:1px solid var(--line);
  border-radius:3px; padding:2px 8px;
}
.qact{display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; padding-top:14px; border-top:1px solid var(--line-2)}
.act{
  border:1px solid var(--line); background:transparent; color:var(--ink-soft);
  border-radius:4px; padding:6px 14px; font-size:12.5px; cursor:pointer; font-family:inherit;
  transition:border-color .15s, color .15s;
}
.act:hover{border-color:var(--primary); color:var(--primary)}
.act.on{background:var(--primary); color:var(--card); border-color:var(--primary)}
.act.danger:hover{border-color:var(--primary); color:var(--primary)}
.act.sm{padding:5px 12px; font-size:12px}
.qfoot{display:flex; align-items:center; gap:10px; margin-top:14px; font-size:12.5px; color:var(--faint);
  font-family:var(--serif); letter-spacing:.5px}
.qfoot .sp{flex:1}
/* 手机端保底翻页按钮：侧边箭头在窄屏隐藏，滑动又可能被浏览器边缘手势抢走 */
#footPrev,#footNext{display:none}

/* ---------- 列表 ---------- */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(276px,1fr)); gap:10px}
.gcard{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:16px 18px; cursor:pointer; position:relative;
  transition:border-color .15s;
}
.gcard:hover{border-color:var(--primary)}
.gcard .t{font-family:var(--serif); font-size:15.5px; line-height:1.95; word-break:break-word; letter-spacing:.02em}
.gcard .m{display:flex; gap:8px; align-items:center; margin-top:11px; font-size:11.5px; color:var(--faint); flex-wrap:wrap}
.gcard .c{color:var(--primary); border:1px solid rgba(166,59,46,.28); border-radius:3px; padding:1px 7px}
.gcard .pin{position:absolute; right:12px; top:11px; font-size:12px; color:var(--primary)}
.gcard .stars{color:var(--accent-y); font-size:11.5px; letter-spacing:1px}
.empty{text-align:center; color:var(--faint); padding:44px 0; font-size:14px; font-family:var(--serif)}
.loading{text-align:center; color:var(--faint); padding:44px 0; font-size:14px; font-family:var(--serif)}

/* ---------- 弹窗 ---------- */
.modal{
  position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center;
  background:rgba(30,27,22,.55); padding:20px;
}
/* ⚠️ 必须显式写：上面 .modal 设了 display:flex，会盖掉 HTML hidden 属性自带的
   display:none —— 少了这条，未登录时编辑弹窗会直接糊在页面上（已实测踩到）。 */
.modal[hidden]{display:none}
.mbox{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  width:100%; max-width:560px; max-height:88vh; display:flex; flex-direction:column;
  box-shadow:0 16px 48px rgba(30,27,22,.28);
}
.mhead{display:flex; align-items:center; padding:15px 20px; border-bottom:1px solid var(--line)}
.mhead b{flex:1; font-size:16px; font-family:var(--serif); letter-spacing:1.5px; font-weight:400}
.mhead button{border:0; background:transparent; color:var(--ink-soft); font-size:17px; cursor:pointer}
.mhead button:hover{color:var(--primary)}
.mbody{padding:18px 20px; overflow:auto}
.mbody label{display:block; font-size:12.5px; color:var(--ink-soft); margin-bottom:12px}
.mbody textarea,.mbody input,.mbody select{
  width:100%; margin-top:5px; padding:9px 12px; border-radius:6px; font-size:14px;
  border:1px solid var(--line); background:var(--paper-2); color:var(--ink);
  font-family:inherit; outline:none; resize:vertical;
}
.mbody textarea{font-family:var(--serif); line-height:1.9}
.mbody textarea:focus,.mbody input:focus,.mbody select:focus{border-color:var(--primary)}
.mrow{display:flex; gap:12px}
.mrow label{flex:1}
.ck2{display:flex; align-items:center; gap:7px; font-size:13px !important; margin-top:22px}
.hint{font-size:11.5px; color:var(--faint); line-height:1.9; margin:-4px 0 12px}
.hint code{
  font-family:ui-monospace,Consolas,monospace; font-size:11px; background:var(--paper-2);
  border:1px solid var(--line-2); border-radius:3px; padding:1px 4px; color:var(--ink-soft);
}
.mfoot{display:flex; align-items:center; gap:10px; padding:14px 20px; border-top:1px solid var(--line)}
.mfoot .err{flex:1; color:var(--primary); font-size:12.5px}
.mfoot button{border:1px solid var(--line); background:transparent; color:var(--ink-soft);
  border-radius:4px; padding:8px 20px; font-size:13.5px; cursor:pointer; font-family:inherit}
.mfoot button:hover{border-color:var(--primary); color:var(--primary)}
.mfoot .primary{background:var(--primary); color:var(--card); border-color:var(--primary)}
.mfoot .primary:hover{background:var(--primary-deep); color:var(--card)}

/* toast */
.toast{
  position:fixed; left:50%; bottom:34px; transform:translateX(-50%); z-index:200;
  background:rgba(42,39,36,.94); color:#FAF7F0; padding:10px 20px; border-radius:5px;
  font-size:13.5px; box-shadow:0 6px 22px rgba(30,27,22,.3);
}

@media (max-width:640px){
  .page{padding:14px 12px 52px}
  /* 手机：隐藏侧边箭头，卡片占满宽度，改用左右滑动翻页（见 app.js） */
  .nav{display:none}
  .card-wrap{gap:0}
  .qcard{padding:24px 20px 16px; min-height:280px}
  .qtext{padding:14px 0}
  #footPrev,#footNext{display:block}
  .qfoot{flex-wrap:wrap; column-gap:7px; row-gap:8px}
  .mrow{flex-direction:column; gap:0}
  .ck2{margin-top:6px; margin-bottom:14px}
  .brand .r{font-size:12px}
  .brand h1{font-size:20px; letter-spacing:2px}
}