/* ============================================================
   marker 标注台 · 2D 几何设计系统
   纸面 + 墨线 + 硬阴影 + 切角，克制的动效
   ============================================================ */
:root {
  --bg: #f4f2ec;
  --paper: #fdfcf8;
  --ink: #201e1a;
  --ink-soft: #55524a;
  --ink-faint: #8f8b80;
  --line: #e3dfd3;
  --line-hard: #201e1a;
  --accent: #3b4ed8;
  --accent-ink: #2b3cae;
  --coral: #e0453a;
  --grid: rgba(32, 30, 26, .045);
  --shadow: 4px 4px 0 rgba(32, 30, 26, .14);
  --shadow-sm: 2px 2px 0 rgba(32, 30, 26, .14);
  --chamfer: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  --font: 15px/1.75 -apple-system, "PingFang SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif;
}
* { box-sizing: border-box; }
/* 不用全局 scroll-behavior:smooth——大文档里任何滚动都会变动画。
   平滑滚动由 JS 在跳转时显式指定（scrollIntoView behavior）。 */
body {
  margin: 0;
  padding: 0 0 90px;
  background: var(--bg);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 28px 28px;
  color: var(--ink);
  font: var(--font);
}
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 28px; }

/* ---------- 顶栏 ---------- */
.topbar {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 18px 0 16px; margin-bottom: 26px;
  border-bottom: 2px solid var(--line-hard);
}
.brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.brand .mark {
  width: 30px; height: 30px; background: var(--accent); position: relative; flex: none;
  clip-path: polygon(0 0, 100% 0, 100% 65%, 65% 100%, 0 100%);
}
.brand .mark::after {
  content: ""; position: absolute; right: 4px; bottom: 4px; width: 9px; height: 9px;
  background: var(--coral);
}
.brand h1 { font-size: 19px; margin: 0; letter-spacing: .06em; font-weight: 800; }
.brand small { color: var(--ink-faint); font-size: 12px; letter-spacing: .18em; }

.me { display: flex; align-items: center; gap: 9px; padding: 5px 12px 5px 6px;
  background: var(--paper); border: 2px solid var(--line-hard); box-shadow: var(--shadow-sm); }
.me img, .me .dot { width: 26px; height: 26px; border-radius: 50%; flex: none; }
.me .dot { display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 13px; font-weight: 700; background: var(--accent); }
.me b { font-size: 13px; font-weight: 600; }
.me a { font-size: 12px; color: var(--ink-faint); margin-left: 4px; }

/* ---------- 按钮 ---------- */
button, .btn {
  font: inherit; font-size: 13px; font-weight: 600; letter-spacing: .04em;
  padding: 7px 16px; cursor: pointer; color: var(--ink);
  background: var(--paper); border: 2px solid var(--line-hard);
  box-shadow: var(--shadow-sm); text-decoration: none; display: inline-block;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
button:hover, .btn:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 rgba(32,30,26,.22); text-decoration: none; }
button:active, .btn:active { transform: translate(1px, 1px); box-shadow: 0 0 0 rgba(0,0,0,0); }
button.primary, .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.primary:hover, .btn.primary:hover { background: var(--accent-ink); }
button.danger { color: var(--coral); border-color: var(--coral); }

/* ---------- 卡片 / 区块 ---------- */
.card {
  background: var(--paper); border: 2px solid var(--line-hard); box-shadow: var(--shadow);
  padding: 20px 24px; margin-bottom: 26px; clip-path: var(--chamfer);
  animation: rise .35s ease both;
}
/* 文本表格可横向滚动（全局，窄 pane 时桌面也生效） */
.tscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.card > h2 {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 800; letter-spacing: .08em; margin: 0 0 14px;
}
.card > h2::before { content: ""; width: 12px; height: 12px; background: var(--accent); flex: none;
  clip-path: polygon(0 0, 100% 0, 100% 100%); }
.muted { color: var(--ink-faint); font-size: 13px; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- 档位 pill ---------- */
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 1px 9px; font-size: 12px;
  font-weight: 600; color: #fff; clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%); }
.legend .pill { margin-right: 6px; }

/* ---------- 目录表格 ---------- */
table { border-collapse: collapse; width: 100%; }
th { text-align: left; font-size: 12px; letter-spacing: .1em; color: var(--ink-faint);
  font-weight: 700; padding: 4px 12px 10px; border-bottom: 2px solid var(--line-hard); }
td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr { transition: background .12s ease; }
tbody tr:hover { background: rgba(59, 78, 216, .05); }
tbody tr:last-child td { border-bottom: none; }
td .tname { font-weight: 600; color: var(--ink); }
td .tname:hover { color: var(--accent); }
.pbar { position: relative; width: 110px; height: 8px; background: var(--line); overflow: hidden; }
.pbar i { position: absolute; inset: 0 auto 0 0; background: repeating-linear-gradient(-45deg,
  var(--accent) 0 6px, var(--accent-ink) 6px 12px); transition: width .3s ease; }
.pnum { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }

/* ---------- 备份列表 ---------- */
.backups { display: flex; flex-direction: column; gap: 8px; }
.bk { display: flex; align-items: center; gap: 14px; padding: 8px 14px;
  border: 1px solid var(--line); background: var(--bg); font-size: 13px; }
.bk:hover { border-color: var(--line-hard); }
.bk .t { color: var(--ink-faint); font-size: 12px; }
.bk a { margin-left: auto; font-size: 12px; font-weight: 600; }

/* ---------- 上传 ---------- */
.uploader { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
input[type=file] { font-size: 13px; }
input[type=file]::file-selector-button {
  font: inherit; font-size: 13px; margin-right: 10px; padding: 6px 14px; cursor: pointer;
  background: var(--paper); border: 2px solid var(--line-hard); box-shadow: var(--shadow-sm);
}
.catpick label { margin-right: 16px; cursor: pointer; font-size: 13px; }
.catpick input { accent-color: var(--accent); }

/* ============================================================
   标注页
   ============================================================ */
.bar {
  position: sticky; top: 0; z-index: 20;
  background: var(--paper); border-bottom: 2px solid var(--line-hard);
  padding: 10px 0 12px; margin-bottom: 22px;
}
.bar .line { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.bar .back { font-weight: 700; font-size: 15px; }
.bar h1 { font-size: 17px; margin: 0; font-weight: 800; letter-spacing: .03em; }
.hint { font-size: 12px; color: var(--ink-faint); }
.hint.dirty { color: var(--coral); font-weight: 700; }
.keys { font-size: 11px; color: var(--ink-faint); }
.keys kbd { border: 1px solid var(--line); border-bottom-width: 2px; padding: 0 5px;
  font: 11px/1.6 ui-monospace, monospace; background: var(--bg); margin: 0 1px; }

.progress { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.progress .track { flex: 1; height: 8px; background: var(--line); position: relative; overflow: hidden; }
.progress .track i { position: absolute; inset: 0 auto 0 0; width: 0;
  background: repeating-linear-gradient(-45deg, var(--accent) 0 6px, var(--accent-ink) 6px 12px);
  transition: width .25s ease; }
.progress .txt { font-size: 12px; color: var(--ink-soft); white-space: nowrap; }

/* 在线成员 */
.online { display: flex; align-items: center; gap: 6px; }
.online .who { position: relative; width: 30px; height: 30px; }
.online .who img, .online .who .dot { width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid var(--oc, var(--line-hard)); display: block; }
.online .who .dot { display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 13px; font-weight: 700; }
.online .who::after { content: ""; position: absolute; right: -1px; bottom: -1px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--oc, #999);
  border: 2px solid var(--paper); }
.online .who:hover::before { content: attr(data-name); position: absolute; top: 110%; left: 50%;
  transform: translateX(-50%); background: var(--ink); color: #fff; font-size: 11px;
  padding: 2px 8px; white-space: nowrap; z-index: 30; }

/* 正文 */
#content { max-width: 860px; margin: 0 auto; }
.sent {
  position: relative; display: flex; gap: 12px; align-items: baseline;
  padding: 5px 14px 5px 16px; margin: 2px 0; cursor: pointer;
  border-left: 5px solid transparent; background: var(--paper);
  transition: background .12s ease, transform .12s ease;
  /* 不戴 content-visibility：实测滚动时反复"现渲染"比全量渲染后纯合成滚动更卡 */
}
.sent:hover { transform: translateX(3px); }
.sent .lv { flex: none; width: 22px; text-align: center; font: 700 12px/1.6 ui-monospace, monospace;
  color: var(--ink-faint); }
.sent .tx { flex: 1; }
.sent.sel { outline: 3px solid var(--accent); outline-offset: -3px;
  box-shadow: 6px 6px 0 rgba(32, 30, 26, .18), inset 0 0 0 999px rgba(47, 107, 255, .05); }
.sent.sel::after { content: "▶"; position: absolute; left: -2px; top: 50%; transform: translate(-100%, -50%);
  color: var(--accent); font-size: 12px; }
/* 注意：.sel 千万别加 z-index——在 1.7 万个 position:relative 兄弟里改层叠序，
   每移一次选中都触发全文档重排层，实测 16ms→39ms/帧 */
.sent.sel .lv { color: var(--ink); }
.gap { height: 14px; }

/* 他人光标 */
.peer {
  position: absolute; left: 6px; top: -11px; z-index: 10;
  display: flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700; color: #fff; line-height: 1;
  padding: 2px 7px 2px 2px; background: var(--pc, #999);
  clip-path: polygon(0 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
  animation: peer-in .18s ease both; pointer-events: none;
}
.peer img, .peer .pdot { width: 14px; height: 14px; border-radius: 50%; }
.peer .pdot { background: rgba(255,255,255,.3); display: flex; align-items: center;
  justify-content: center; font-size: 9px; }
.peer::before { content: ""; position: absolute; left: 0; top: 100%; width: 2px; height: 8px;
  background: var(--pc, #999); animation: blink 1.1s steps(2) infinite; }
@keyframes peer-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; } }
@keyframes blink { 50% { opacity: 0; } }

/* 选档弹板 */
#palette {
  display: none; position: absolute; z-index: 40; gap: 6px; flex-wrap: wrap;
  background: var(--paper); border: 2px solid var(--line-hard); box-shadow: var(--shadow);
  padding: 10px; max-width: 420px; clip-path: var(--chamfer);
  animation: rise .15s ease both;
}
#palette button { font-size: 12px; padding: 5px 12px; border-width: 2px; }

/* 标注更新闪一下 */
@keyframes flash { from { filter: brightness(1.35); } to { filter: none; } }
.sent.flash { animation: flash .6s ease; }

/* ============================================================
   登录页
   ============================================================ */
.login-hero { min-height: 92vh; display: flex; align-items: center; justify-content: center; }
.login-box { width: min(430px, 92vw); text-align: center; padding: 44px 40px 38px; }
.login-box .mark { width: 54px; height: 54px; margin: 0 auto 20px; background: var(--accent);
  clip-path: polygon(0 0, 100% 0, 100% 65%, 65% 100%, 0 100%); position: relative;
  animation: float 3.2s ease-in-out infinite; }
.login-box .mark::after { content: ""; position: absolute; right: 8px; bottom: 8px;
  width: 16px; height: 16px; background: var(--coral); }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-7px) rotate(3deg); } }
.login-box h1 { font-size: 26px; letter-spacing: .1em; margin: 0 0 6px; font-weight: 800; }
.login-box .sub { color: var(--ink-faint); font-size: 13px; margin-bottom: 28px; letter-spacing: .12em; }
.discord-btn { display: inline-flex; align-items: center; gap: 10px; font-size: 15px;
  padding: 12px 26px; background: #5865f2; border-color: #5865f2; color: #fff; }
.discord-btn:hover { background: #4752c4; }
.login-err { margin-top: 18px; font-size: 13px; color: var(--coral); font-weight: 600;
  border: 1px dashed var(--coral); padding: 8px 12px; }

/* ============================================================
   v2 追加：档位标准网格 / 顶栏重设计 / 评论区
   ============================================================ */
.lvgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 26px; }
.lvrow { display: flex; align-items: center; gap: 10px; }
.lvrow .pill { min-width: 76px; justify-content: center; flex: none; }
.lvcrit { font-size: 13px; color: var(--ink-soft); }
@media (max-width: 720px) { .lvgrid { grid-template-columns: 1fr; } }

/* 顶栏：外层 sticky 渐变，内层卡片 */
.barwrap { position: sticky; top: 0; z-index: 20; padding: 14px 0 12px;
  background: linear-gradient(var(--bg) 80%, rgba(244, 242, 236, 0)); }
.barwrap .bar { background: var(--paper); border: 2px solid var(--line-hard);
  box-shadow: var(--shadow); clip-path: var(--chamfer); padding: 12px 18px 11px; }
.backbtn { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; font-size: 15px; font-weight: 800; text-decoration: none;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
  transition: transform .12s ease, background .12s ease; flex: none; }
.backbtn:hover { transform: translateX(-2px); background: var(--accent-ink); text-decoration: none; }
.spacer { flex: 1; }
.panelbtn { padding: 4px 12px; font-size: 14px; }
.panelbtn.on { background: var(--accent); border-color: var(--accent); }
.keyhelp { position: relative; color: var(--ink-faint); cursor: help; font-size: 13px;
  padding: 3px 9px; border: 1.5px solid var(--line); flex: none; }
.keyhelp .keytip { display: none; position: absolute; right: 0; top: 135%; background: var(--ink);
  color: #fff; font-size: 12px; padding: 8px 12px; width: max-content; z-index: 30; line-height: 2; }
.keyhelp:hover .keytip { display: block; }
.keytip kbd { border: 1px solid rgba(255, 255, 255, .45); padding: 0 5px;
  font: 11px/1.6 ui-monospace, monospace; margin: 0 1px; }

/* 双栏：正文 + 评论区 */
.cols { display: flex; gap: 26px; align-items: flex-start; }
.cols #content { max-width: none; margin: 0; flex: 1; min-width: 0; }
#panel { width: 320px; flex: none; position: sticky; top: 108px; max-height: calc(100vh - 134px);
  display: flex; flex-direction: column; background: var(--paper); border: 2px solid var(--line-hard);
  box-shadow: var(--shadow); clip-path: var(--chamfer); }
body.panel-off #panel { display: none; }
@media (max-width: 1100px) {
  #panel { position: fixed; right: 0; top: 0; bottom: 0; z-index: 40; width: min(340px, 88vw);
    max-height: none; clip-path: none; }
}

.phead { padding: 12px 14px 10px; border-bottom: 2px solid var(--line-hard); }
.phead { position: relative; }
.pclose { display: none; position: absolute; right: 10px; top: 10px; width: 30px; height: 30px;
  padding: 0; font-size: 13px; }
.ptitle { font-weight: 800; font-size: 14px; letter-spacing: .04em; }
.psent { font-size: 12px; color: var(--ink-faint); margin-top: 4px; line-height: 1.5; }
.cbody { flex: 1; overflow-y: auto; padding: 12px; }
.clist { display: flex; flex-direction: column; gap: 10px; }
.cmt { display: flex; gap: 8px; }
.cav { flex: none; }
.cav img, .cav .dot { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--oc, var(--line)); display: block; }
.cav .dot { display: flex; align-items: center; justify-content: center; color: #fff;
  font-size: 12px; font-weight: 700; }
.cmain { flex: 1; min-width: 0; }
.cmeta { font-size: 11px; color: var(--ink-faint); display: flex; gap: 8px; align-items: baseline; }
.cmeta b { color: var(--ink); font-size: 12px; }
.ctext { font-size: 13px; line-height: 1.6; background: var(--bg); border: 1px solid var(--line);
  padding: 6px 10px; margin-top: 3px; word-break: break-word; }
.cempty { color: var(--ink-faint); font-size: 12px; text-align: center; padding: 28px 0; }
.cinput { display: flex; gap: 8px; padding: 10px 12px; border-top: 2px solid var(--line-hard); }
.cinput textarea { flex: 1; font: inherit; font-size: 13px; resize: none; padding: 7px 10px;
  border: 2px solid var(--line-hard); background: var(--bg); outline: none; }
.cinput textarea:focus { border-color: var(--accent); }
.cinput button { flex: none; }

.cmt.pop { animation: pop .25s ease; }
@keyframes pop { from { opacity: 0; transform: translateY(6px) scale(.97); } }
.cbody.slide-up .clist { animation: cin-up .18s ease; }
.cbody.slide-down .clist { animation: cin-down .18s ease; }
@keyframes cin-up { from { opacity: 0; transform: translateY(12px); } }
@keyframes cin-down { from { opacity: 0; transform: translateY(-12px); } }

/* 句子行右侧的评论数 */
.cc { flex: none; align-self: center; min-width: 20px; height: 20px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700;
  color: var(--accent); border: 1.5px solid var(--accent); background: var(--paper);
  clip-path: polygon(4px 0, 100% 0, calc(100% - 4px) 100%, 0 100%); }

/* 常驻档位条 */
.lvbar { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.lvbtn { padding: 4px 14px; font-size: 12.5px; font-weight: 700; letter-spacing: .03em;
  color: var(--lc); border: 2px solid var(--lc); background: var(--paper); box-shadow: none;
  clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%); }
.lvbtn:hover { transform: translateY(-1px); box-shadow: 0 2px 0 var(--lc); }
.lvbtn.on { background: var(--lc); color: #fff; }

/* 多人投票点 */
.vd { flex: none; align-self: center; display: inline-flex; gap: 3px; align-items: center;
  padding: 0 2px; }
.vd i { width: 9px; height: 9px; border-radius: 50%; display: block;
  box-shadow: 0 0 0 1.5px var(--paper); }
.vd em { font-style: normal; font-size: 10px; color: var(--ink-faint); }

/* ============================================================
   手机端适配（≤760px）
   ============================================================ */
#dock { display: none; }

@media (max-width: 760px) {
  /* 全局：禁双击缩放、缩小页边距 */
  body { touch-action: manipulation; }
  .wrap { padding: 0 10px; }

  /* 顶栏压缩：藏键盘提示和横向档位条（停靠栏替代） */
  .barwrap { padding: 6px 0 8px; }
  .barwrap .bar { padding: 8px 10px 7px; }
  .bar .line { gap: 8px; }
  .bar h1 { font-size: 14.5px; }
  .keyhelp { display: none; }
  .lvbar { display: none; }
  .hint { font-size: 11px; }
  .online .who, .online .who img, .online .who .dot { width: 24px; height: 24px; }
  .panelbtn { width: 30px; height: 30px; }
  .progress { margin-top: 6px; }
  .progress .txt { font-size: 10.5px; }

  /* 正文给右侧停靠栏让位 */
  .cols { gap: 0; }
  #content { padding-right: 62px; }
  .sent { padding: 7px 10px 7px 12px; gap: 8px; border-left-width: 4px; }
  .sent .tx { font-size: 15px; line-height: 1.75; }
  .sent .lv { width: 16px; font-size: 11px; }

  /* 右侧竖排打分停靠栏 */
  #dock {
    display: flex; flex-direction: column; gap: 5px;
    position: fixed; right: calc(6px + env(safe-area-inset-right, 0px)); top: 50%;
    transform: translateY(-50%); z-index: 35;
  }
  .dbtn {
    width: 52px; min-height: 40px; padding: 3px 2px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: var(--paper); border: 2px solid var(--lc, var(--line-hard));
    color: var(--lc, var(--ink)); box-shadow: 2px 2px 0 rgba(32,30,26,.2);
    clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
    border-radius: 0; touch-action: manipulation;
  }
  .dbtn b { font-size: 15px; line-height: 1.15; font-weight: 800; }
  .dbtn span { font-size: 9px; font-weight: 600; letter-spacing: 0; }
  .dbtn.on { background: var(--lc); color: #fff; }
  .dbtn.nav { border-color: var(--line-hard); color: var(--ink-soft); min-height: 34px; font-size: 13px; }
  .dbtn.tap, .dbtn:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 rgba(32,30,26,.2); }

  /* 不弹选档浮板 */
  #palette { display: none !important; }

  /* 评论区：全屏覆盖，带关闭钮 */
  #panel { width: 100vw; }
  .pclose { display: block; }

  /* 多人光标旗标缩小 */
  .peer { font-size: 10px; }
  .peer img, .peer .pdot { width: 18px; height: 18px; }
}

/* 首页移动端 */
@media (max-width: 760px) {
  .topbar { gap: 10px; padding: 12px 0 10px; margin-bottom: 16px; }
  .topbar h1 { font-size: 16px; }
  .card { padding: 14px 14px; margin-bottom: 16px; }
  .tscroll table { min-width: 620px; font-size: 12px; }
  .backups { max-height: 180px; overflow-y: auto; }
}

/* ============================================================
   左侧标签页框架
   ============================================================ */
.shell { display: flex; gap: 24px; align-items: flex-start; }
.sidenav { flex: none; width: 168px; position: sticky; top: 20px;
  display: flex; flex-direction: column; gap: 8px; }
.ntab { display: flex; align-items: baseline; gap: 10px; padding: 10px 14px;
  background: var(--paper); border: 2px solid var(--line-hard); box-shadow: var(--shadow-sm);
  clip-path: var(--chamfer); text-align: left; cursor: pointer;
  transition: transform .12s ease, background .12s ease; }
.ntab i { font: 700 11px/1 ui-monospace, monospace; font-style: normal; color: var(--ink-faint); }
.ntab span { font-size: 13.5px; font-weight: 700; letter-spacing: .04em; }
.ntab:hover { transform: translateX(3px); }
.ntab.on { background: var(--accent); border-color: var(--accent); }
.ntab.on span, .ntab.on i { color: #fff; }
.ntab.dim span { color: var(--ink-faint); }
.ntab.dim.on { background: var(--ink-faint); border-color: var(--ink-faint); }
.panes { flex: 1; min-width: 0; }
.pane { display: none; }
.pane.on { display: block; animation: rise .25s ease both; }

/* 占位页 */
.card.placeholder { text-align: center; padding: 60px 24px; border-style: dashed; }
.phmark { font: 800 44px/1 ui-monospace, monospace; color: var(--line);
  letter-spacing: .1em; margin-bottom: 10px; }

/* GPU 监控 */
.gpu { margin-bottom: 18px; }
.gname { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.gname b { font-size: 15px; }
.gname .muted { font-size: 12px; }
.grow { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.glab { flex: none; width: 34px; font-size: 12px; font-weight: 700; color: var(--ink-soft); }
.gbar { flex: 1; height: 16px; background: var(--line); position: relative; overflow: hidden;
  clip-path: polygon(3px 0, 100% 0, calc(100% - 3px) 100%, 0 100%); }
.gbar i { position: absolute; inset: 0 auto 0 0; width: 0;
  background: repeating-linear-gradient(-45deg, var(--accent) 0 6px, var(--accent-ink) 6px 12px);
  transition: width .5s ease; }
.gbar.hot i { background: repeating-linear-gradient(-45deg, var(--coral) 0 6px, #b03a22 6px 12px); }
.gval { flex: none; min-width: 110px; text-align: right; font: 700 12px/1 ui-monospace, monospace;
  color: var(--ink-soft); }
.ghist { display: flex; align-items: flex-end; gap: 2px; height: 34px; margin: 10px 0 2px;
  padding: 4px; background: var(--bg); border: 1px solid var(--line); }
.ghist i { flex: 1; background: var(--accent); min-height: 2px; }
.ghist i.hot { background: var(--coral); }
h3.sub { font-size: 13px; margin: 20px 0 8px; letter-spacing: .06em; color: var(--ink-soft); }
.gproc { display: flex; align-items: center; gap: 10px; margin: 5px 0; }
.gpid { flex: none; width: 70px; font: 12px/1 ui-monospace, monospace; color: var(--ink-faint); }
.gpname { flex: none; min-width: 130px; font-size: 12.5px; font-weight: 600; }
.gproc .gbar { height: 12px; }

/* 手机端：标签栏变顶部横条 */
@media (max-width: 760px) {
  .shell { flex-direction: column; gap: 12px; }
  .sidenav { position: static; width: 100%; flex-direction: row; flex-wrap: wrap;
    align-items: flex-start; overflow-x: auto; padding-bottom: 4px; }
  .ntab { flex: none; padding: 8px 12px; }
  .bulletin { flex: 0 0 100%; margin-top: 8px; }
  .bulletin .b-item { display: inline-block; border-top: none; padding: 2px 0; margin-right: 14px; }
  .ntab:hover { transform: none; }
  .gval { min-width: 86px; }
  .gpid { width: 56px; }
  .gpname { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .gproc .gbar { flex: 1.2; }
  .gproc .gval { min-width: 64px; }
}

/* 带标签栏的主页加宽一点 */
body.home .wrap { max-width: 1240px; }

/* GPU 卡片防溢出补丁 */
.gpu, .grow, .gproc { min-width: 0; }
.gname { flex-wrap: wrap; }
.gpname { flex: 0 1 auto; min-width: 0; max-width: 260px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gbar { min-width: 40px; }
@media (max-width: 760px) {
  .gpname { max-width: 110px; }
  .gname b { font-size: 13.5px; }
  .gname .muted { font-size: 11px; }
  .grow { flex-wrap: wrap; }
  .grow .gbar { flex: 1 1 calc(100% - 50px); }
  .grow .gval { min-width: 0; margin-left: 44px; }
}

/* ---------- JEV 评测场 ---------- */
#jevinput {
  width: 100%; resize: vertical; font: inherit; font-size: 14px; line-height: 1.8;
  padding: 10px 12px; background: var(--paper); color: var(--ink);
  border: 2px solid var(--line-hard); border-radius: 0; display: block;
}
#jevinput:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.jevbar { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.jevlimit { margin-left: auto; font-size: 12px; }
button:disabled { opacity: .45; cursor: not-allowed; transform: none !important; }

.jmodel { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.jmodel .jtitle { font-weight: 800; font-size: 16px; letter-spacing: .03em; }
.jerr { color: var(--coral); font-size: 12px; word-break: break-all; }
.jhist { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 10px; }
.jhisthead { font-size: 12px; letter-spacing: .12em; color: var(--ink-faint); margin-bottom: 4px; }
.jh { display: flex; gap: 10px; padding: 4px 0; font-size: 13px; align-items: baseline; flex-wrap: wrap; }
.jh .jdate { font: 700 12px/1.6 ui-monospace, monospace; color: var(--ink-soft); flex: none; }

.jverdict {
  border: 2px solid; padding: 10px 14px; margin-bottom: 14px;
  background: var(--paper); box-shadow: var(--shadow-sm);
  display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap;
}
.jverdict b { font-size: 16px; letter-spacing: .04em; }

.jsent { display: flex; gap: 10px; align-items: baseline; padding: 7px 8px;
  cursor: pointer; border-bottom: 1px solid var(--line); }
.jsent:hover { background: rgba(59, 78, 216, .05); }
.jsent .jheat { flex: none; width: 10px; height: 10px; align-self: center; }
.jsent .jtext { flex: 1; min-width: 0; }
.jsent .jpct { flex: none; font: 700 12px/1.75 ui-monospace, monospace; color: var(--ink-soft); }
.jdetail { padding: 8px 12px 12px 28px; border-bottom: 1px solid var(--line);
  background: rgba(32, 30, 26, .025); animation: rise .18s ease both; }
.jcat { display: flex; align-items: center; gap: 10px; margin: 6px 0; }
.jcat .jcname { flex: none; width: 56px; font-size: 13px; font-weight: 600; text-align: right; }
.jcat .jbar { position: relative; flex: 1; height: 10px; background: var(--line); }
.jcat .jbar i { position: absolute; inset: 0 auto 0 0; }
.jcat .jcval { flex: none; width: 52px; font: 700 12px/1 ui-monospace, monospace; color: var(--ink-soft); }

@media (max-width: 760px) {
  .jevlimit { margin-left: 0; width: 100%; }
  .jdetail { padding-left: 16px; }
  .jverdict b { width: 100%; }
}

/* ---------- 手机端：文本表改堆叠卡片 ---------- */
@media (max-width: 760px) {
  .wrap { padding: 0 16px; }
  #pane-texts .tscroll { overflow-x: visible; }
  #pane-texts .tscroll table { min-width: 0; font-size: 13px; }
  #pane-texts thead { display: none; }
  #pane-texts tbody tr { display: block; padding: 12px 2px 10px;
    border-bottom: 2px solid var(--line-hard); }
  #pane-texts tbody tr:last-child { border-bottom: none; }
  #pane-texts td { display: block; border: none; padding: 2px 0; }
  #pane-texts td:nth-child(1) { font-size: 15px; padding-bottom: 6px; }
  #pane-texts td:nth-child(4) { display: flex; align-items: center; gap: 10px; }
  #pane-texts td:nth-child(4) .pbar { flex: none; }
  #pane-texts td:nth-child(4) .pnum { margin-top: 0; }
  #pane-texts td:nth-child(8) { font-size: 12px; }
  #pane-texts .raterow td { padding: 0 0 12px; }
  #pane-texts .raterow .ratebox { border-left: none; padding-left: 0; }
  .lvrow { align-items: baseline; }
  .lvrow .pill { min-width: 68px; }
  .lvcrit { min-width: 0; }
}

/* ---------- 小说打分 ---------- */
.sortbar { display: flex; align-items: center; gap: 8px; margin: -4px 0 12px;
  font-size: 12px; color: var(--ink-faint); flex-wrap: wrap; }
.sortbar button { padding: 3px 12px; font-size: 12px; }
.sortbar button.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.ratebtn { padding: 3px 8px; border-color: transparent; box-shadow: none; background: none;
  clip-path: none; }
.ratebtn:hover { transform: none; box-shadow: none; background: rgba(59, 78, 216, .08); }
.raterow td { padding: 0 12px 16px; border-bottom: 1px solid var(--line); }
.ratebox { border-left: 3px solid var(--accent); padding: 12px 0 4px 16px;
  animation: rise .18s ease both; }
.ritem { display: flex; gap: 9px; padding: 8px 0; border-bottom: 1px dashed var(--line); }
.ritem .cav img, .ritem .cav .dot { width: 28px; height: 28px; border-radius: 50%; flex: none; }
.ritem .cav .dot { display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; font-weight: 700; }
.rhead { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rhead b { font-size: 13px; }
.rtext { font-size: 13.5px; color: var(--ink-soft); margin-top: 3px; line-height: 1.7;
  white-space: pre-wrap; }
.rform { margin-top: 14px; }
.rscore { display: flex; gap: 5px; flex-wrap: wrap; }
.rnum { width: 32px; height: 32px; padding: 0; text-align: center;
  font: 700 13px/1 ui-monospace, monospace; }
.rnum.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.rreason-in { width: 100%; resize: vertical; font: inherit; font-size: 13.5px; line-height: 1.7;
  padding: 8px 10px; margin-top: 9px; background: var(--paper); color: var(--ink);
  border: 2px solid var(--line-hard); border-radius: 0; display: block; }
.rreason-in:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.rformbar { margin-top: 9px; display: flex; gap: 10px; align-items: center; }

/* ---------- 新手引导教程 ---------- */
.tut-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(32, 30, 26, .45);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  animation: tutfade .2s ease both; }
@keyframes tutfade { from { opacity: 0; } to { opacity: 1; } }
.tut-card { width: min(620px, 100%); max-height: calc(100vh - 60px); display: flex; flex-direction: column;
  background: var(--paper); border: 2px solid var(--line-hard); box-shadow: 8px 8px 0 rgba(32, 30, 26, .25);
  clip-path: var(--chamfer); padding: 22px 26px 18px; }
.tut-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; flex: none; }
.tut-head b { font-size: 18px; letter-spacing: .05em; }
.tut-stepno { font: 700 12px/1 ui-monospace, monospace; color: var(--ink-faint); letter-spacing: .1em; }
.tut-body { overflow-y: auto; min-height: 0; font-size: 14.5px; }
.tut-body p { margin: 8px 0; line-height: 1.85; }
.tut-foot { display: flex; align-items: center; gap: 10px; margin-top: 14px; flex: none;
  border-top: 1px solid var(--line); padding-top: 12px; }
.tut-skip { border-color: transparent; box-shadow: none; clip-path: none; color: var(--ink-faint); }
.tut-skip:hover { transform: none; box-shadow: none; color: var(--ink); }
.tut-dots { flex: 1; display: flex; gap: 6px; justify-content: center; }
.tut-dots i { width: 8px; height: 8px; background: var(--line); }
.tut-dots i.on { background: var(--accent); }
.tut-levels { margin-top: 10px; display: flex; flex-direction: column; gap: 12px; }
.tut-level { border-left: 3px solid var(--line-hard); padding: 2px 0 2px 12px; }
.tut-level-head { margin-bottom: 4px; }
.tut-example { font-size: 13.5px; color: var(--ink); background: rgba(32, 30, 26, .04);
  padding: 7px 10px; margin: 4px 0; line-height: 1.75; }
.tut-why { font-size: 13px; color: var(--ink-soft); line-height: 1.75; }
@media (max-width: 760px) {
  .tut-card { padding: 16px 16px 12px; max-height: calc(100vh - 32px); }
  .tut-head b { font-size: 16px; }
  .tut-body { font-size: 13.5px; }
}

/* ---------- 小灰聊天（04 标签页） ---------- */
.agentops { float: right; display: flex; gap: 8px; }
.agentoffline {
  border: 2px dashed var(--coral); padding: 10px 14px; margin-bottom: 12px;
  display: flex; flex-direction: column; gap: 2px; background: #fdf3f2;
}
.agentoffline small { color: var(--ink-faint); }
.chatlog {
  min-height: 280px; max-height: 52vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px; padding: 14px;
  border: 2px solid var(--line-hard); background:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px), var(--bg);
  background-size: 28px 28px;
}
.chatmsg {
  max-width: 78%; padding: 8px 14px; border: 2px solid var(--line-hard);
  box-shadow: var(--shadow-sm); white-space: pre-wrap; word-break: break-word;
  font-size: 14px; line-height: 1.7;
}
.chatmsg.user {
  align-self: flex-end; background: var(--accent); border-color: var(--accent); color: #fff;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
}
.chatmsg.ai {
  align-self: flex-start; background: var(--paper);
  clip-path: polygon(8px 0, 100% 0, 100% 100%, 0 100%, 0 8px);
}
.chatmsg.sys {
  align-self: center; border: none; box-shadow: none; background: none;
  color: var(--ink-faint); font-size: 12px; padding: 0;
}
.chattool {
  align-self: flex-start; max-width: 85%; font-size: 12px; line-height: 1.5;
  color: var(--ink-soft); border: 1.5px dashed var(--ink-faint);
  padding: 4px 10px; background: var(--paper); word-break: break-all;
}
.chattool.err { color: var(--coral); border-color: var(--coral); }
.chatbar { display: flex; gap: 10px; margin-top: 12px; align-items: flex-end; }
.chatbar textarea {
  flex: 1; font: inherit; font-size: 14px; resize: vertical;
  min-height: 44px; max-height: 180px; padding: 8px 12px;
  border: 2px solid var(--line-hard); background: var(--paper);
}
.chatbar textarea:focus { outline: none; border-color: var(--accent); }
.chatbar textarea:disabled { background: var(--line); cursor: not-allowed; }
#ruleedit {
  font: 13px/1.7 ui-monospace, "SF Mono", Consolas, monospace;
  padding: 10px 12px; border: 2px solid var(--line-hard); background: var(--paper);
  resize: vertical;
}
#ruleedit:focus { outline: none; border-color: var(--accent); }

/* ---------- 全站广播弹窗 ---------- */
.bcast-mask {
  position: fixed; inset: 0; z-index: 300; background: rgba(32, 30, 26, .4);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.bcast {
  background: var(--paper); border: 2px solid var(--line-hard);
  box-shadow: var(--shadow); clip-path: var(--chamfer);
  max-width: 460px; width: 100%; padding: 18px 22px;
  animation: bcastin .18s ease-out;
}
@keyframes bcastin {
  from { transform: translateY(10px) scale(.97); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.bcast-head {
  display: flex; align-items: center; gap: 9px;
  border-bottom: 2px solid var(--line-hard); padding-bottom: 9px; margin-bottom: 10px;
}
.bcast-head b { font-size: 14px; letter-spacing: .05em; }
.bcast-head small { color: var(--ink-faint); margin-left: auto; }
.bcast-mark {
  width: 14px; height: 14px; background: var(--coral); flex: none;
  clip-path: polygon(0 0, 100% 0, 100% 65%, 65% 100%, 0 100%);
}
.bcast p { margin: 0 0 14px; white-space: pre-wrap; word-break: break-word; }

@media (max-width: 720px) {
  .chatmsg { max-width: 92%; }
  .chatlog { max-height: 46vh; }
}

/* ---------- 聊天气泡：头像 + 弹入动画 ---------- */
.chatmsg { display: flex; gap: 9px; align-items: flex-start; }
.chatmsg .cbody { min-width: 0; }
.chatmsg.user, .chatmsg.ai { animation: msgin .22s cubic-bezier(.2, .9, .3, 1.12); }
@keyframes msgin {
  from { transform: translateY(14px); opacity: 0; }
  60%  { transform: translateY(-2px); opacity: 1; }
  to   { transform: none; opacity: 1; }
}
.chatmsg.sys { display: block; }
.cavatar { width: 28px; height: 28px; border-radius: 50%; flex: none; border: 1.5px solid var(--line-hard); }
.chat-avatar { width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--line-hard); }
.cdot { display: flex; align-items: center; justify-content: center; color: #fff; font-size: 13px; font-weight: 700; }
.cmark {
  display: inline-block; border-radius: 0; background: var(--accent); position: relative;
  clip-path: polygon(0 0, 100% 0, 100% 65%, 65% 100%, 0 100%);
}
.cmark::after {
  content: ""; position: absolute; right: 3px; bottom: 3px; width: 8px; height: 8px; background: var(--coral);
}
.chattool { animation: msgin .18s ease-out; }
#avatarurl {
  font: inherit; font-size: 13px; padding: 7px 10px;
  border: 2px solid var(--line-hard); background: var(--paper);
}
#avatarurl:focus { outline: none; border-color: var(--accent); }

/* ---------- 小灰留言栏（左侧导航下方） ---------- */
.bulletin {
  margin-top: 14px; padding: 10px 12px;
  background: var(--paper); border: 2px solid var(--line-hard); box-shadow: var(--shadow-sm);
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.b-title { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; letter-spacing: .08em; margin-bottom: 6px; }
.b-dot { width: 9px; height: 9px; background: var(--coral); clip-path: polygon(0 0, 100% 0, 100% 65%, 65% 100%, 0 100%); }
.b-item { padding: 6px 0; border-top: 1px dashed var(--line); }
.b-item:first-child { border-top: none; }
.b-text { font-size: 12.5px; line-height: 1.55; display: block; word-break: break-word; }
.b-item small { color: var(--ink-faint); font-size: 11px; }

/* ============================================================
   v3 追加：emoji 反应 + 表情选择器 + 评论编辑
   ============================================================ */

/* 反应行：chips + 添加钮 */
.crx { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; align-items: center; }
.rxchip { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; line-height: 1;
  padding: 3px 8px; background: var(--bg); border: 1.5px solid var(--line); color: var(--ink-soft);
  cursor: pointer; transition: border-color .12s ease, transform .12s ease; }
.rxchip i { font-style: normal; font-size: 11px; font-weight: 700; }
.rxchip:hover { border-color: var(--ink); transform: translateY(-1px); }
.rxchip.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--bg)); }
.rxchip.on i { color: var(--accent); }
.rxadd { font-size: 12px; line-height: 1; padding: 3px 7px; background: none; border: 1.5px dashed var(--line);
  color: var(--ink-faint); cursor: pointer; opacity: .55; transition: opacity .12s ease, border-color .12s ease; }
.cmt:hover .rxadd, .ritem:hover .rxadd, .b-item:hover .rxadd, .rxadd:hover { opacity: 1; border-color: var(--ink); }
[data-rx] { -webkit-touch-callout: none; }

/* 表情弹层（插入网格 / 反应选择条共用） */
#emojipop { position: fixed; z-index: 90; background: var(--paper); border: 2px solid var(--line-hard);
  box-shadow: var(--shadow); clip-path: var(--chamfer); padding: 8px; animation: rise .12s ease both; }
.emogrid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; width: 288px;
  max-height: 240px; overflow-y: auto; }
.emogrid button, .emoquick button { font-size: 19px; line-height: 1; padding: 6px 0; background: none;
  border: none; cursor: pointer; text-align: center; transition: background .1s ease, transform .1s ease; }
.emogrid button:hover, .emoquick button:hover { background: var(--bg); transform: scale(1.25); }
.emoquick { display: flex; gap: 2px; }
.emoquick button { font-size: 20px; padding: 7px 8px; }
.emoquick .emomore { font-size: 14px; color: var(--ink-faint); border: 1.5px dashed var(--line); padding: 7px 10px; }
.emoquick .emomore:hover { color: var(--ink); border-color: var(--ink); transform: none; }

/* 评论自己的操作钮（编辑/删除），hover 才显现 */
.cops { margin-left: auto; display: inline-flex; gap: 2px; opacity: 0; transition: opacity .12s ease; }
.cmt:hover .cops { opacity: 1; }
.cops button { font-size: 11px; padding: 1px 6px; background: none; border: 1px solid var(--line);
  color: var(--ink-faint); cursor: pointer; }
.cops button:hover { border-color: var(--ink); color: var(--ink); }
.cedited { color: var(--ink-faint); font-size: 10px; border: 1px solid var(--line); padding: 0 4px; }
.ceditbox { margin-top: 4px; }
.ceditbox textarea { width: 100%; font: inherit; font-size: 13px; resize: vertical;
  padding: 7px 10px; border: 2px solid var(--accent); background: var(--bg); box-sizing: border-box; }
.ceditbar { display: flex; gap: 6px; margin-top: 5px; }
.ceditbar button { font-size: 12px; padding: 3px 12px; }

/* 输入框旁的表情钮 */
.emobtn { flex: none; font-size: 16px; padding: 0 10px; background: none; border: 2px solid var(--line);
  cursor: pointer; transition: border-color .12s ease, transform .12s ease; }
.emobtn:hover { border-color: var(--accent); transform: translateY(-1px); }
.rformbar .emobtn { border-width: 1.5px; padding: 0 8px; font-size: 14px; }

/* 留言栏的反应行更紧凑 */
.b-item .crx { margin-top: 3px; }
.b-item .rxchip { font-size: 12px; padding: 2px 6px; }

@media (max-width: 760px) {
  .cops { opacity: .8; }   /* 手机没有 hover，操作钮常显淡色 */
  .emogrid { width: min(288px, 78vw); }
  #emojipop { max-width: 92vw; }
}

/* 回到当前句：顶栏钮 + 当前句滚出屏幕时的浮动提示 */
#backcur { position: fixed; right: 18px; bottom: 18px; z-index: 35; font-size: 13px; font-weight: 700;
  padding: 8px 16px; background: var(--ink); color: #fff; border: 2px solid var(--ink);
  box-shadow: var(--shadow); cursor: pointer; clip-path: var(--chamfer); animation: rise .15s ease both; }
#backcur.up { bottom: auto; top: 120px; }
#backcur:hover { background: var(--accent); border-color: var(--accent); }
@media (max-width: 760px) { #backcur { right: 64px; bottom: 14px; font-size: 12px; padding: 7px 12px; }
  #backcur.up { top: auto; bottom: 64px; } }

/* 全局 button 基样式带 display，会把 hidden 属性顶掉，补回来 */
#backcur[hidden], .raterow[hidden] { display: none; }

/* 原文模式：整篇融成一张圆角书页，段落之间没有缝隙，蓝框在句间游走 */
#content.paramode { background: var(--paper); border: 1.5px solid var(--line);
  border-radius: 16px; padding: 6px 4px; box-shadow: 0 2px 14px rgba(32, 30, 26, .06); }
.sent.para { display: block; padding: 7px 20px 5px; margin: 0; cursor: text;
  border-left: none; background: transparent !important;
  font-size: 15.5px; line-height: 2; text-align: justify; }
.sent.para:hover { transform: none; }
.sent.para .s { position: relative; padding: 1.5px 3px; margin: 0 -3px; border-radius: 5px;
  cursor: pointer; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: box-shadow .12s ease; }
.sent.para .s:hover { box-shadow: 0 0 0 1.5px var(--ink-faint); }
.sent.para .s.sel { box-shadow: 0 0 0 2px var(--accent); background: rgba(47, 107, 255, .10) !important; }
.sent.para .pmeta { display: flex; gap: 8px; justify-content: flex-end; align-items: center;
  margin-top: 1px; min-height: 14px; }
@media (max-width: 760px) {
  #content.paramode { border-radius: 12px; padding: 4px 2px; }
  .sent.para { font-size: 15px; line-height: 1.9; padding: 6px 14px 4px; }
}