/* ============================================================
   掰扯 · 样式
   三栏布局：左（今日数据 / 玩法） 中（内容） 右（热议榜 / 图例）
   ============================================================ */

*{box-sizing:border-box}
html,body{margin:0;padding:0}
[hidden]{display:none!important}

:root{
  --r:13px;
  --font:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}

[data-theme="paper"]{
  --bg:#F5F2EB; --bg2:#EDE8DD; --panel:#FDFBF6; --panel2:#F1ECE1;
  --line:rgba(40,35,28,.12); --line2:rgba(40,35,28,.24);
  --tx:#2A251F; --tx2:#4C463C; --tx3:#8B8272; --tx-strong:#14110D;
  --pro:#23795A; --mid:#2C63A6; --con:#B8433F; --gold:#B4801F;
  --pro-soft:rgba(35,121,90,.1); --mid-soft:rgba(44,99,166,.1); --con-soft:rgba(184,67,63,.1);
  --fill:rgba(40,35,28,.045);
  --shadow:0 12px 34px -24px rgba(30,24,16,.6);
  --headbg:rgba(245,242,235,.88);
}
[data-theme="sage"]{
  --bg:#EFF2EA; --bg2:#E7EBDD; --panel:#F9FBF4; --panel2:#E9EDDF;
  --line:rgba(34,42,28,.14); --line2:rgba(34,42,28,.25);
  --tx:#242A1E; --tx2:#48513E; --tx3:#808873; --tx-strong:#12160D;
  --pro:#2C6E3A; --mid:#2C63A6; --con:#B0403A; --gold:#8F6B1C;
  --pro-soft:rgba(44,110,58,.11); --mid-soft:rgba(44,99,166,.1); --con-soft:rgba(176,64,58,.1);
  --fill:rgba(34,42,28,.05);
  --shadow:0 12px 34px -24px rgba(24,32,18,.55);
  --headbg:rgba(239,242,234,.88);
}
[data-theme="sand"]{
  --bg:#F7F1E7; --bg2:#F0E7D8; --panel:#FEFAF3; --panel2:#F3EADC;
  --line:rgba(48,38,26,.13); --line2:rgba(48,38,26,.24);
  --tx:#302720; --tx2:#554A3C; --tx3:#8D8070; --tx-strong:#1B1510;
  --pro:#23795A; --mid:#2C63A6; --con:#A83E2E; --gold:#A9762A;
  --pro-soft:rgba(35,121,90,.1); --mid-soft:rgba(44,99,166,.1); --con-soft:rgba(168,62,46,.1);
  --fill:rgba(48,38,26,.045);
  --shadow:0 12px 34px -24px rgba(40,26,12,.55);
  --headbg:rgba(247,241,231,.88);
}

body{
  background:var(--bg); color:var(--tx);
  font-family:var(--font);
  font-size:15px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  padding-bottom:60px;
  font-variant-numeric:tabular-nums;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;border:0;background:none;color:inherit;cursor:pointer;padding:0}
input,textarea{font-family:inherit;font-size:15px;color:inherit}
input:focus,textarea:focus{outline:none}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
::selection{background:rgba(180,128,31,.22)}

/* ============ 顶栏 ============ */
.topbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:12px;
  padding:0 24px;height:58px;
  background:var(--headbg);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.back{
  display:flex;align-items:center;gap:3px;
  height:29px;padding:0 10px 0 7px;border-radius:8px;
  font-size:12.5px;color:var(--tx2);background:var(--fill);
  transition:.15s;flex-shrink:0;
}
.back:hover{background:var(--panel2);color:var(--tx)}
.back[hidden]{display:none}
.logo{display:flex;align-items:center;gap:7px;flex-shrink:0}
.logo b{font-size:16px;font-weight:700;letter-spacing:.14em;color:var(--tx-strong)}

.search{
  display:flex;align-items:center;gap:7px;
  height:32px;padding:0 12px;border-radius:18px;
  background:var(--fill);border:1px solid transparent;
  color:var(--tx3);transition:.16s;width:220px;
}
.search:focus-within{background:var(--panel);border-color:var(--line2);color:var(--tx2);width:260px}
.search input{border:0;background:none;width:100%;min-width:0;font-size:13.5px;color:var(--tx)}
.search input::placeholder{color:var(--tx3)}

.spacer{flex:1}
.themes{display:flex;align-items:center;gap:6px;padding-left:12px;border-left:1px solid var(--line)}
.tdot{width:18px;height:18px;border-radius:50%;border:1px solid var(--line2);transition:.16s}
.tdot i{display:block;width:100%;height:100%;border-radius:50%}
.tdot.on{box-shadow:0 0 0 2px var(--bg),0 0 0 3.5px var(--tx2)}

.user{display:flex;align-items:center;gap:8px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:34px;padding:0 15px;border-radius:9px;
  font-size:13.5px;font-weight:600;transition:.16s;white-space:nowrap;
}
.btn.sm{height:30px;padding:0 12px;font-size:12.5px}
.btn.primary{background:var(--tx-strong);color:var(--bg)}
.btn.primary:hover{opacity:.85}
.btn.primary:disabled{opacity:.4;cursor:default}
.btn.ghost{border:1px solid var(--line2);color:var(--tx2)}
.btn.ghost:hover{background:var(--fill)}
.btn.block{width:100%}
.link{color:var(--mid);font-size:13px;font-weight:600}
.link:hover{text-decoration:underline}

.uav{
  width:31px;height:31px;border-radius:50%;background:var(--tx-strong);color:var(--bg);
  display:flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:700;flex-shrink:0;border:1px solid transparent;
}
.uav:hover{opacity:.85}
.umenu{
  position:absolute;top:52px;right:20px;z-index:60;
  background:var(--panel);border:1px solid var(--line2);border-radius:11px;
  box-shadow:0 20px 50px -22px rgba(0,0,0,.45);padding:5px;min-width:168px;
}
.umenu button{display:block;width:100%;text-align:left;padding:8px 11px;border-radius:7px;font-size:13.5px;color:var(--tx2)}
.umenu button:hover{background:var(--fill);color:var(--tx)}
.umenu .who{padding:8px 11px 9px;border-bottom:1px solid var(--line);margin-bottom:4px}
.umenu .who b{display:block;font-size:13px;color:var(--tx)}
.umenu .who span{font-size:11px;color:var(--tx3);font-family:var(--mono)}

/* ============ 三栏 ============ */
main{max-width:1268px;margin:0 auto;padding:0 24px}
.view{display:none}
.view.on{display:block}

.layout{
  display:grid;
  grid-template-columns:186px minmax(0,1fr) 258px;
  gap:40px;align-items:start;
}
.rail{padding-top:34px;position:sticky;top:58px;display:flex;flex-direction:column;gap:14px}

.railcard{
  background:var(--panel);border:1px solid var(--line);border-radius:13px;
  padding:14px 15px 15px;
}
.railcard.plain{background:none;border:0;padding:6px 2px 0}
.rail-h{
  font:600 10.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--tx3);margin-bottom:11px;
}
.stat-grid{display:flex;gap:8px}
.stat{flex:1;min-width:0}
.stat b{
  display:block;font-size:25px;line-height:1.1;font-weight:700;color:var(--tx-strong);
  font-family:var(--mono);letter-spacing:-.02em;
}
.stat span{font-size:11px;color:var(--tx3)}
.stat-mini{
  display:flex;flex-direction:column;gap:5px;margin-top:12px;padding-top:11px;
  border-top:1px solid var(--line);font-size:11.5px;color:var(--tx2);
}
.stat-mini span{display:flex;align-items:center;gap:6px}
.stat-mini b{font-family:var(--mono);font-size:12px;color:var(--tx)}
.dot-p,.dot-g{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.dot-p{background:var(--gold)}
.dot-g{background:var(--mid)}

.how{margin:0;padding:0;list-style:none;counter-reset:h;font-size:12.5px;line-height:1.6;color:var(--tx2)}
.how li{position:relative;padding:3px 0 3px 18px;margin-bottom:3px}
.how li::before{
  counter-increment:h;content:counter(h);
  position:absolute;left:0;top:4px;width:13px;height:13px;border-radius:50%;
  background:var(--fill);color:var(--tx3);font:9px/13px var(--mono);text-align:center;
}
.how b{color:var(--tx);font-weight:600}
.ghostbtn{
  margin-top:12px;font-size:11.5px;color:var(--tx3);text-decoration:underline;
  text-underline-offset:3px;text-decoration-color:var(--line2);
}
.ghostbtn:hover{color:var(--mid)}

.ranks{display:flex;flex-direction:column;gap:2px}
.rank{display:flex;gap:8px;align-items:flex-start;padding:7px 6px;border-radius:8px;cursor:pointer;transition:.14s}
.rank:hover{background:var(--fill)}
.rank .no{font:700 11px var(--mono);color:var(--tx3);flex-shrink:0;width:14px;line-height:1.6}
.rank:nth-child(1) .no{color:var(--gold)}
.rank:nth-child(2) .no{color:var(--con)}
.rank:nth-child(3) .no{color:var(--pro)}
.rank>div{flex:1;min-width:0}
.rank .tx{font-size:12px;line-height:1.5;color:var(--tx2);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rank .num{font:10px var(--mono);color:var(--tx3);margin-top:3px}

.legend-mini{display:flex;flex-direction:column;gap:8px}
.lm-row{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--tx3)}
.lm-row b{font-weight:600;color:var(--tx2)}

/* ============ hero ============ */
.hero{padding:36px 0 24px}
.hero-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.eyebrow{font:600 11px var(--mono);letter-spacing:.24em;color:var(--gold)}
.hero h1{
  margin:0;font-size:clamp(27px,3.1vw,40px);line-height:1.34;font-weight:800;
  letter-spacing:-.035em;color:var(--tx-strong);
}
.hero h1 em{font-style:normal;position:relative;color:var(--gold);z-index:0}
.hero h1 em::after{
  content:'';position:absolute;left:-3px;right:-3px;bottom:.05em;height:.36em;
  background:rgba(180,128,31,.2);border-radius:3px;z-index:-1;
}
.hero h1 .mark{position:relative;display:inline-block}
.hero h1 .mark::after{
  content:'';position:absolute;left:0;right:0;bottom:.04em;height:.11em;
  background:linear-gradient(90deg,var(--gold),rgba(180,128,31,.3));border-radius:2px;
}
.hero .sub{
  margin:15px 0 0;font-size:14px;color:var(--tx3);letter-spacing:.06em;
  display:flex;align-items:center;gap:9px;
}
.hero .sub::before{content:'';width:22px;height:1px;background:var(--line2);flex-shrink:0}

/* ============ 筛选 ============ */
.filters{
  position:sticky;top:58px;z-index:30;
  display:flex;align-items:center;gap:12px;padding:9px 0;margin-bottom:4px;
  background:var(--bg);border-bottom:1px solid var(--line);
}
.cats{display:flex;gap:2px;overflow-x:auto;flex:1;min-width:0;scrollbar-width:none}
.cats::-webkit-scrollbar{display:none}
.cats button{
  flex-shrink:0;height:28px;padding:0 10px;border-radius:8px;
  font-size:12.5px;color:var(--tx3);transition:.14s;white-space:nowrap;
}
.cats button:hover{color:var(--tx2);background:var(--fill)}
.cats button.on{background:var(--panel);color:var(--tx-strong);font-weight:600;box-shadow:0 0 0 1px var(--line)}
.cats .cnt{font:9.5px var(--mono);opacity:.5;margin-left:4px}
.msearch{display:none}

.sorts{display:flex;gap:1px;padding:2px;border-radius:9px;background:var(--fill);flex-shrink:0}
.sorts button{height:25px;padding:0 10px;border-radius:7px;font-size:12.5px;color:var(--tx3);transition:.14s}
.sorts button.on{background:var(--panel);color:var(--tx-strong);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.08)}

/* ============ 话题卡 ============ */
.tc{
  display:block;padding:20px 12px;border-bottom:1px solid var(--line);transition:.16s;
  margin:0 -12px;
}
.tc:hover{background:var(--fill);border-radius:12px;border-bottom-color:var(--line)}
.tc-top{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.tcat{
  font:600 10px var(--mono);letter-spacing:.1em;color:var(--gold);
  background:rgba(180,128,31,.1);padding:2px 7px;border-radius:5px;
}
.tc-top .tm{margin-left:auto;font:10.5px var(--mono);color:var(--tx3)}
.tc h3{
  margin:0 0 7px;font-size:19.5px;line-height:1.42;font-weight:700;
  letter-spacing:-.015em;color:var(--tx-strong);transition:.14s;
}
.tc:hover h3{color:var(--mid)}
.tc .ds{
  margin:0 0 14px;font-size:13.5px;line-height:1.65;color:var(--tx2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

.sbar{display:flex;height:6px;border-radius:3px;overflow:hidden;background:var(--fill);margin-bottom:10px}
.sbar i{display:block;height:100%;transition:width .6s cubic-bezier(.22,.8,.3,1)}
.sbar .p{background:var(--pro)}
.sbar .m{background:var(--mid)}
.sbar .c{background:var(--con)}
.sbar.zero{background:repeating-linear-gradient(90deg,var(--line) 0 3px,transparent 3px 7px);opacity:.7}

.sfoot{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.chip{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 9px;border-radius:7px;font-size:11px;
}
.chip i{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.chip b{font:700 13.5px var(--mono);letter-spacing:-.01em}
.chip.p{background:var(--pro-soft);color:var(--pro)}
.chip.p i{background:var(--pro)}
.chip.m{background:var(--mid-soft);color:var(--mid)}
.chip.m i{background:var(--mid)}
.chip.c{background:var(--con-soft);color:var(--con)}
.chip.c i{background:var(--con)}
.sfoot .total{
  margin-left:auto;font-size:11.5px;color:var(--tx2);
  background:var(--fill);padding:3px 10px;border-radius:7px;
}
.sfoot .total b{font-family:var(--mono);font-size:12.5px;color:var(--tx)}

.moreSlot{padding:22px 0 50px;text-align:center}
.more{
  height:36px;padding:0 24px;border-radius:9px;border:1px solid var(--line2);
  font-size:13px;color:var(--tx2);transition:.15s;
}
.more:hover{background:var(--fill)}
.empty{padding:60px 0;text-align:center;color:var(--tx3)}
.empty b{display:block;font-size:15px;color:var(--tx2);margin-bottom:6px;font-weight:600}

/* ============ 话题页 ============ */
#viewTopic{max-width:880px;margin:0 auto}
.crumb{
  display:none;align-items:center;gap:4px;
  position:sticky;top:58px;z-index:32;
  padding:11px 0;background:var(--bg);border-bottom:1px solid var(--line);margin-bottom:4px;
}
.crumb.on{display:flex}
.crumb .up{
  width:27px;height:27px;border-radius:7px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:17px;line-height:1;color:var(--tx2);background:var(--fill);
}
.crumb .up:hover{background:var(--panel2)}
.crumbs{
  display:flex;align-items:center;gap:1px;overflow-x:auto;white-space:nowrap;
  font-size:12.5px;color:var(--tx3);scrollbar-width:none;flex:1;min-width:0;
}
.crumbs::-webkit-scrollbar{display:none}
.cb{padding:3px 6px;border-radius:6px;cursor:pointer;flex-shrink:0;transition:.14s}
.cb:hover{background:var(--fill);color:var(--tx2)}
.cb.home{color:var(--tx2)}
.cb.on{color:var(--gold);background:rgba(180,128,31,.09);font-weight:600}
.sep{opacity:.35;flex-shrink:0;font-size:11px}

.cur{
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:20px 22px;margin-top:14px;box-shadow:var(--shadow);
}
.cur.topic{padding:26px 26px 22px}
/* 从后台「定位到原文」跳进来时，给这一条打个高亮，不然看不出指的是哪句 */
.cur.focus{box-shadow:0 0 0 2px var(--gold), var(--shadow);animation:curFocus 2.6s ease}
@keyframes curFocus{
  0%{box-shadow:0 0 0 2px rgba(180,128,31,.9), 0 0 0 8px rgba(180,128,31,.18)}
  60%{box-shadow:0 0 0 2px rgba(180,128,31,.55), 0 0 0 10px rgba(180,128,31,.06)}
  100%{box-shadow:0 0 0 2px rgba(180,128,31,0), 0 0 0 10px rgba(180,128,31,0), var(--shadow)}
}
.cur .tagline{font:600 10px var(--mono);letter-spacing:.2em;color:var(--gold);text-transform:uppercase}
.cur .q{
  margin:10px 0 0;font-size:25px;line-height:1.45;font-weight:800;
  letter-spacing:-.025em;color:var(--tx-strong);
}
.cur .meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:11px}
.cur .body-tx{margin:0;font-size:15.5px;line-height:1.85;color:var(--tx-strong);white-space:pre-wrap;word-break:break-word}
.cur .body-img{margin-top:12px;border-radius:10px;max-width:100%;display:block;border:1px solid var(--line)}
.curfoot{display:flex;align-items:center;gap:9px;margin-top:14px;font-size:11.5px;color:var(--tx3);flex-wrap:wrap}

.tstat{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}
.tstat-top{display:flex;align-items:baseline;gap:10px;margin-bottom:11px}
.tstat-top .l2{
  font:10.5px var(--mono);color:var(--gold);background:rgba(180,128,31,.1);
  padding:1px 7px;border-radius:8px;align-self:center;
}
.tstat-top .n{font:700 30px var(--mono);line-height:1;color:var(--tx-strong);letter-spacing:-.03em}
.tstat-top .l{font-size:12px;color:var(--tx3)}
.tstat-top .by{margin-left:auto;font-size:11.5px;color:var(--tx3)}
.tstat .sbar{height:9px;border-radius:5px;margin-bottom:12px}
.tstat-leg{display:flex;gap:20px;flex-wrap:wrap}
.tstat-leg .it{display:flex;align-items:baseline;gap:6px;font-size:12px;color:var(--tx3)}
.tstat-leg .it i{width:7px;height:7px;border-radius:2px;align-self:center}
.tstat-leg .it b{font:700 16px var(--mono);letter-spacing:-.02em}
.tstat-leg .it.p b{color:var(--pro)}
.tstat-leg .it.m b{color:var(--mid)}
.tstat-leg .it.c b{color:var(--con)}
.tstat-leg .it s{text-decoration:none;font-size:11px;opacity:.75;font-family:var(--mono)}

.sec{display:flex;align-items:center;gap:10px;margin:26px 0 12px;font-size:12.5px;color:var(--tx3)}
.sec b{font-weight:600;color:var(--tx2)}
.sec .line{flex:1;height:1px;background:var(--line)}
.seg{display:flex;gap:1px;padding:2px;border-radius:8px;background:var(--fill);flex-shrink:0}
.seg button{height:24px;padding:0 9px;border-radius:6px;font-size:11.5px;color:var(--tx3);transition:.14s}
.seg button.on{background:var(--panel);color:var(--tx-strong);font-weight:600;box-shadow:0 1px 2px rgba(0,0,0,.07)}

.grid{display:grid;grid-template-columns:1fr;gap:9px}
.card{
  display:flex;gap:11px;align-items:flex-start;
  padding:15px 15px 13px;background:var(--panel);
  border:1px solid var(--line);border-radius:13px;
  cursor:pointer;transition:border-color .15s,box-shadow .15s,transform .15s;
}
.card:hover{border-color:var(--line2);box-shadow:0 10px 24px -18px rgba(0,0,0,.45);transform:translateY(-1px)}
.card .dot{flex-shrink:0;width:9px;height:9px;border-radius:3px;margin-top:6px}
.cb-body{flex:1;min-width:0}
.chd{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.av{
  width:23px;height:23px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:700;color:#fff;
}
.who{font-size:12.5px;font-weight:600;color:var(--tx)}
.tag{
  font-size:9.5px;font-weight:600;padding:1.5px 6px;border-radius:5px;
  border:1px solid currentColor;opacity:.9;white-space:nowrap;
}
.meta2{margin-left:auto;font:10.5px var(--mono);color:var(--tx3);white-space:nowrap;flex-shrink:0}
.card p{margin:8px 0 0;font-size:13.5px;line-height:1.72;color:var(--tx2);word-break:break-word;white-space:pre-wrap}
.card p.sum-tx{color:var(--tx)}
/* 正文超过 100 字：截断 + 展开，前后台同一条规则 */
.tx-more{
  margin-top:5px;display:inline-flex;align-items:baseline;gap:3px;
  font:600 11.5px var(--font);color:var(--gold);
  background:none;border:0;padding:0;cursor:pointer;letter-spacing:.01em;
}
.tx-more:hover{text-decoration:underline}
.raw-tx.full{color:var(--tx)}
.card .thumb{margin-top:10px;max-width:100%;max-height:200px;border-radius:9px;border:1px solid var(--line);display:block;object-fit:cover}
.badge-private{font-size:9.5px;color:var(--con);border:1px solid currentColor;border-radius:5px;padding:1px 5px}
.arw{
  flex-shrink:0;display:flex;align-items:center;gap:3px;margin-top:6px;
  font-size:11px;color:var(--tx3);padding:3px 8px;border-radius:7px;
  border:1px solid var(--line);background:var(--bg);transition:.15s;
}
.card:hover .arw{color:var(--mid);border-color:var(--line2);background:var(--panel2)}
.arw b{font-family:var(--mono);font-size:10px}

.vote{display:flex;align-items:center;gap:5px;margin-top:10px}
.vb{
  display:inline-flex;align-items:center;gap:5px;flex-shrink:0;
  height:26px;padding:0 9px;border-radius:7px;white-space:nowrap;
  font:12px var(--mono);color:var(--tx2);transition:.14s;
  border:1px solid var(--line);background:var(--bg);
}
.vb:hover{background:var(--panel2);border-color:var(--line2)}
.vb svg{width:14px;height:14px;flex-shrink:0}
.vb.up:hover{color:var(--pro);border-color:var(--pro);background:var(--pro-soft)}
.vb.dn:hover{color:var(--con);border-color:var(--con);background:var(--con-soft)}
.vb.up.on{color:#fff;background:var(--pro);border-color:var(--pro)}
.vb.dn.on{color:#fff;background:var(--con);border-color:var(--con)}
.vb.rep{margin-left:4px;font-family:var(--font);font-weight:600;font-size:12px;color:var(--tx2);gap:4px}
.vb.rep svg{width:13px;height:13px}
.topic-rep{
  margin-left:0;height:32px;padding:0 15px;font-size:12.5px;font-weight:600;
  color:var(--gold);border-color:rgba(180,128,31,.34);background:rgba(180,128,31,.07);
}
.topic-rep:hover{background:rgba(180,128,31,.13);border-color:var(--gold);color:var(--gold)}
.img-off{
  display:inline-flex;align-items:center;height:24px;padding:0 9px;margin-top:8px;
  font-size:11px;color:var(--tx3);background:var(--fill);border-radius:7px;
}
.mystance{
  display:inline-flex;align-items:center;height:32px;padding:0 10px;
  font-size:11.5px;font-weight:600;white-space:nowrap;
}
.vb.rep:hover{color:var(--gold);border-color:var(--gold);background:rgba(180,128,31,.08)}

/* ============ 我的 ============ */
#viewMine{max-width:880px;margin:0 auto}
.mine-hd{padding:34px 0 18px}
.mine-hd h2{margin:0 0 6px;font-size:24px;font-weight:700;color:var(--tx-strong)}
.mine-hd p{margin:0;font-size:13px;color:var(--tx3)}
.minelist{display:flex;flex-direction:column;gap:9px;padding-bottom:50px}
.mi{padding:14px 16px;background:var(--panel);border:1px solid var(--line);border-radius:12px;cursor:pointer;transition:.15s}
.mi:hover{border-color:var(--line2)}
.mi .mh{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--tx3);margin-bottom:6px;flex-wrap:wrap}
.mi .mh .tt{color:var(--mid);font-weight:600;font-size:11.5px}
.mi p{margin:0;font-size:13.5px;line-height:1.65;color:var(--tx2);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mi .pv{font-size:9.5px;color:var(--con);border:1px solid currentColor;border-radius:5px;padding:1px 5px}

/* ============ 弹框 ============ */
.modal{
  position:fixed;inset:0;z-index:80;display:none;
  align-items:center;justify-content:center;padding:20px;
  background:rgba(24,20,14,.44);backdrop-filter:blur(3px);
}
.modal.on{display:flex}
.mbox{
  position:relative;width:100%;max-width:400px;
  background:var(--panel);border:1px solid var(--line2);border-radius:18px;
  padding:26px;box-shadow:0 34px 80px -30px rgba(0,0,0,.55);
  animation:up .22s ease;max-height:calc(100vh - 40px);overflow:auto;
}
.mbox.wide{max-width:600px}
@keyframes up{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
@media (max-height:820px){
  .modal{align-items:flex-start;padding:12px}
  .mbox{max-height:calc(100vh - 24px)}
}

/* 矮窗口：把弹框压紧，保证两段状态 + 杠一下 + 底部按钮一次看得全 */
@media (max-height:700px){
  .mbody{padding:14px 20px 2px}
  .mbox h2{font-size:15px;margin-bottom:0}
  .msec{margin-top:8px}
  .msec-h{margin-bottom:4px;font-size:11px}
  .mctx .ctx{padding:7px 9px;margin-bottom:6px}
  .mctx .ctx .p{-webkit-line-clamp:2;font-size:13px;line-height:1.55}
  .mctx .ctx.topic .p{-webkit-line-clamp:1;font-size:14px}
  .mctx .ctx .pv{display:none}          /* 矮屏先把票数行收起来，回复里还能看到 */
  /* 议题卡压成一行文字：标题在身后页面上已经有了，不必再占一块卡片 */
  .mctx .ctx.topic{
    padding:0 0 2px;border:0;background:none;
    display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;
  }
  .mctx .ctx.topic .h{display:contents}
  .mctx .ctx.topic .h .tagline{display:none}
  .mctx .ctx.topic .p{order:1;flex:1 1 auto;min-width:0;font-size:12px;color:var(--tx2);margin:0;-webkit-line-clamp:1}
  .mctx .ctx.topic .tn{order:2;flex:none;margin-left:0;font-size:9.5px}
  .mctx .ctx .h{font-size:10.5px}
  .mactions.tight{gap:6px}
  .mactions.tight .ma{height:30px;font-size:12px}
  .mspeakrow{margin-top:8px}
  .ma.speak.block{height:32px;font-size:12px}
  .mfoot{padding:8px 20px 10px}
  .mfoot .btn{height:32px;min-width:76px}
}
.mx{
  position:absolute;top:14px;right:14px;width:28px;height:28px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;color:var(--tx3);
}
.mx:hover{background:var(--fill);color:var(--tx)}
.mbox h2{margin:0 0 4px;font-size:19px;font-weight:700;color:var(--tx-strong);letter-spacing:-.01em}
.msub{margin:0 0 18px;font-size:12.5px;color:var(--tx3);line-height:1.6}
.auth-hd{margin-bottom:20px}
.auth-hd p{margin:4px 0 0;font-size:12.5px;color:var(--tx3)}

.field{margin-bottom:14px}
.field label{display:block;font-size:12px;font-weight:600;color:var(--tx2);margin-bottom:6px}
.field .opt{font-weight:400;color:var(--tx3)}
.field input,.field textarea{
  width:100%;padding:10px 12px;border-radius:9px;
  background:var(--bg2);border:1px solid transparent;
  font-size:14px;color:var(--tx);transition:.15s;
}
.field input:focus,.field textarea:focus{background:var(--panel);border-color:var(--line2)}
.field textarea{resize:vertical;line-height:1.6}
.coderow{display:flex;gap:8px}
.coderow input{flex:1;min-width:0}
.coders{flex-shrink:0;height:40px;font-size:12.5px;padding:0 12px}
.coders:disabled{opacity:.5}
.auth-err{min-height:17px;font-size:12px;color:var(--con);margin-bottom:8px}
/* 登录弹框：手机号+密码 / 注册 / 找回 / 改密码 共用一套字段，切换只改显隐 */
.auth-sep{display:flex;align-items:center;gap:10px;margin:14px 0 12px;color:var(--tx3);font-size:11px}
.auth-sep[hidden]{display:none}
.auth-sep::before,.auth-sep::after{content:'';flex:1;height:1px;background:var(--line)}
.wxbtn{display:flex;align-items:center;justify-content:center;gap:7px;height:42px;font-size:13.5px}
.wxbtn svg{color:#09BB07}
.auth-foot{margin-top:14px;display:flex;align-items:center;justify-content:center;gap:7px;
  font-size:12px;color:var(--tx3);flex-wrap:wrap}
.auth-foot .link{background:none;border:0;padding:2px 0;color:var(--tx2);font-size:12px;cursor:pointer}
.auth-foot .link:hover{color:var(--tx-strong);text-decoration:underline}
.auth-foot .link[hidden],.auth-foot .sep[hidden]{display:none}
.auth-foot .sep{opacity:.45}
.auth-note{min-height:16px;font-size:11.5px;color:var(--tx3);margin-top:10px;text-align:center}
.auth-note b{color:var(--gold);font-family:var(--mono)}

.chiprow{display:flex;flex-wrap:wrap;gap:6px}
.chipbtn{
  height:28px;padding:0 12px;border-radius:14px;
  border:1px solid var(--line2);font-size:12.5px;color:var(--tx2);transition:.14s;
}
.chipbtn:hover{background:var(--fill)}
.chipbtn.on{background:var(--tx-strong);color:var(--bg);border-color:var(--tx-strong);font-weight:600}

.ctx{background:var(--bg2);border-radius:11px;padding:12px 14px;margin:14px 0;border-left:2px solid var(--line2)}
.ctx .h{display:flex;align-items:center;gap:6px;margin-bottom:6px;flex-wrap:wrap}
.ctx .lv,.ctx .time{font:10px var(--mono);color:var(--tx3)}
.ctx .time{margin-left:auto}
.ctx .p{font-size:13px;line-height:1.65;color:var(--tx2);
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-wrap}
.ctx.topic .p{font-size:15px;font-weight:600;color:var(--tx-strong);-webkit-line-clamp:3}

.mvote{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:10px 14px;border-radius:10px;background:var(--fill);margin-bottom:12px;
}
.mvote .it{display:flex;align-items:baseline;gap:5px;font-size:11.5px;color:var(--tx3)}
.mvote .it b{font:700 17px var(--mono)}
.mvote .it.p b{color:var(--pro)}
.mvote .it.m b{color:var(--mid)}
.mvote .it.c b{color:var(--con)}
.mvote .hint{margin-left:auto;font-size:11px;color:var(--tx3)}

.mactions{display:flex;gap:7px;flex-wrap:wrap}
.ma{
  flex:1;min-width:88px;height:38px;border-radius:9px;
  border:1px solid var(--line2);font-size:13px;color:var(--tx2);
  display:flex;align-items:center;justify-content:center;gap:6px;transition:.15s;
}
.ma i{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.ma[data-act="pro"] i{background:var(--pro)}
.ma[data-act="mid"] i{background:var(--mid)}
.ma[data-act="con"] i{background:var(--con)}
.ma:hover{background:var(--fill)}
.ma[data-act="pro"]:hover{color:var(--pro);border-color:var(--pro);background:var(--pro-soft)}
.ma[data-act="con"]:hover{color:var(--con);border-color:var(--con);background:var(--con-soft)}
.ma[data-act="mid"]:hover{color:var(--mid);border-color:var(--mid);background:var(--mid-soft)}
.ma.speak{
  background:var(--panel);color:var(--tx);border-color:var(--line2);font-weight:600;
}
.ma.speak:hover{background:var(--fill);border-color:var(--tx3);color:var(--tx-strong)}

/* 弹框里的两个选择区 */
.msec{margin-top:16px}
.msec-h{
  display:flex;align-items:center;gap:7px;
  font-size:12px;color:var(--tx2);margin-bottom:9px;
}
.msec-h::before{content:'';width:3px;height:11px;border-radius:2px;background:var(--line2)}
.msec-h em{font-style:normal;color:var(--tx-strong);font-weight:600}
.mctx .ctx{margin:0 0 9px;padding:10px 12px}
.mctx .ctx .p{-webkit-line-clamp:3}
.mctx .ctx.topic .p{-webkit-line-clamp:2}
.mctx .ctx .tn{margin-left:auto;font:10px var(--mono);color:var(--tx3)}
.ctx .pv{display:flex;gap:12px;margin-top:8px;font:10.5px var(--mono)}
.ctx .pv .u{color:var(--pro)}
.ctx .pv .d{color:var(--con)}
.mactions.tight .ma{height:34px;font-size:12.5px;min-width:0}
#mSt .ma.on[data-st="pro"]{background:var(--pro-soft);border-color:var(--pro);color:var(--pro);font-weight:600}
#mSt .ma.on[data-st="mid"]{background:var(--mid-soft);border-color:var(--mid);color:var(--mid);font-weight:600}
#mSt .ma.on[data-st="con"]{background:var(--con-soft);border-color:var(--con);color:var(--con);font-weight:600}
#mAtt .ma.on[data-att="up"]{background:var(--pro-soft);border-color:var(--pro);color:var(--pro);font-weight:600}
#mAtt .ma.on[data-att="down"]{background:var(--con-soft);border-color:var(--con);color:var(--con);font-weight:600}
.mspeakrow{margin-top:18px}
.ma.speak.block{
  width:100%;flex:none;height:40px;font-size:13px;
  border-style:dashed;color:var(--tx2);
}
.ma.speak.block:hover{border-style:solid;color:var(--tx-strong)}

.mform{margin-top:16px}
.pick{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.pick-l{font-size:12px;color:var(--tx3);flex-shrink:0}
.pick-l em{font-style:normal;color:var(--tx2);font-weight:600}
.stpick{display:flex;gap:5px;flex:1;min-width:0}
.stpick button{
  flex:1;height:33px;border-radius:9px;border:1px solid var(--line2);
  display:flex;align-items:center;justify-content:center;gap:5px;
  font-size:12.5px;color:var(--tx2);transition:.15s;
}
.stpick button i{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.stpick button[data-st="pro"] i{background:var(--pro)}
.stpick button[data-st="mid"] i{background:var(--mid)}
.stpick button[data-st="con"] i{background:var(--con)}
.stpick button:hover{background:var(--fill)}
.stpick button.on{color:#fff;border-color:transparent;font-weight:600}
.stpick button.on[data-st="pro"]{background:var(--pro)}
.stpick button.on[data-st="mid"]{background:var(--mid)}
.stpick button.on[data-st="con"]{background:var(--con)}

.ta-wrap{border:1px solid var(--line2);border-radius:11px;padding:10px 12px;background:var(--bg2)}
.ta-wrap:focus-within{background:var(--panel)}
.ta-wrap textarea{width:100%;border:0;background:none;resize:vertical;line-height:1.72;font-size:14px;min-height:110px}
.ta-foot{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--tx3);margin-top:6px}
.ta-foot #mHint{margin-right:auto}
.ta-foot #mLen{font-family:var(--mono)}
.imgbtn{
  width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;
  color:var(--tx3);border:1px solid var(--line);flex-shrink:0;
}
.imgbtn:hover{color:var(--mid);border-color:var(--line2);background:var(--panel2)}
.imgbtn svg{width:14px;height:14px}

.imgs{margin-top:10px}
.imgitem{position:relative;display:inline-block}
.imgitem img{max-width:180px;max-height:140px;border-radius:9px;border:1px solid var(--line);display:block}
.imgitem button{
  position:absolute;top:-7px;right:-7px;width:22px;height:22px;border-radius:50%;
  background:var(--tx-strong);color:var(--bg);font-size:14px;line-height:1;
  display:flex;align-items:center;justify-content:center;
}

/* 发言弹框：外壳 flex 列，正文区自己滚，底部按钮固定不盖内容 */
.mshell{
  display:flex;flex-direction:column;padding:0;overflow:hidden;
  max-height:calc(100vh - 40px);
}
.mbody{
  flex:1;min-height:0;overflow:auto;
  padding:26px 26px 6px;
}
.mfoot{
  flex:none;display:flex;gap:8px;justify-content:flex-end;
  padding:12px 26px 14px;background:var(--panel);
  border-top:1px solid var(--line);border-radius:0 0 18px 18px;
}
.mfoot .btn{min-width:88px}

.legend-sec{margin-bottom:16px}
.legend-sec h4{margin:0 0 8px;font-size:12px;font-weight:700;color:var(--tx2);letter-spacing:.02em}
.legend-row{display:flex;align-items:flex-start;gap:9px;padding:6px 0;border-bottom:1px dashed var(--line)}
.legend-row:last-child{border-bottom:0}
.legend-row .av{width:21px;height:21px;font-size:10px;margin-top:1px}
.legend-row .lg-body{flex:1;min-width:0}
.legend-row .lg-t{font-size:12.5px;font-weight:600;color:var(--tx);display:flex;align-items:center;gap:6px}
.legend-row .tag{font-size:9.5px}
.legend-row .lg-d{font-size:11.5px;color:var(--tx3);line-height:1.55;margin-top:2px}
.legend-tip{
  margin-top:6px;padding:10px 12px;border-radius:9px;background:var(--fill);
  font-size:11.5px;color:var(--tx3);line-height:1.6;
}
.legend-tip b{color:var(--tx2)}

#toast{
  position:fixed;left:50%;bottom:40px;transform:translate(-50%,12px);
  background:var(--tx-strong);color:var(--bg);padding:9px 17px;border-radius:20px;
  font-size:13px;opacity:0;pointer-events:none;transition:.22s;z-index:90;max-width:80vw;text-align:center;
}
#toast.on{opacity:1;transform:translate(-50%,0)}
#crash{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:99;
  padding:9px 14px;background:#3A0A16;border-top:1px solid #FF5A5F;
  color:#FFB3B8;font:11.5px/1.5 var(--mono);white-space:pre-wrap;word-break:break-word;
}

/* ============ 通知铃铛 ============ */
.bell{
  position:relative;width:31px;height:31px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  color:var(--tx2);background:var(--bg);border:1px solid var(--line);transition:.15s;
}
.bell:hover{color:var(--tx);background:var(--panel2);border-color:var(--line2)}
.bell[hidden]{display:none}
.bdt{
  position:absolute;top:-2px;right:-2px;width:9px;height:9px;border-radius:9px;
  background:var(--con);box-shadow:0 0 0 2px var(--headbg);
}
.bdt[hidden]{display:none}

/* ============ 通知面板 ============ */
.npanel{
  position:fixed;top:64px;right:20px;z-index:70;
  width:346px;max-width:calc(100vw - 24px);
  background:var(--panel);border:1px solid var(--line2);border-radius:12px;
  box-shadow:0 20px 50px -22px rgba(0,0,0,.45);overflow:hidden;
}
.npanel[hidden]{display:none}
.np-hd{
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 13px 9px;border-bottom:1px solid var(--line);
}
.np-hd b{font-size:13px;color:var(--tx-strong)}
.np-all{font-size:11.5px;color:var(--tx3)}
.np-all:hover{color:var(--mid)}
.np-list{max-height:min(60vh,410px);overflow:auto}
.np-item{
  display:flex;gap:9px;padding:11px 13px;cursor:pointer;
  border-bottom:1px solid var(--line);transition:.14s;
}
.np-item:last-child{border-bottom:0}
.np-item:hover{background:var(--fill)}
.np-item.un{background:rgba(44,99,166,.05)}
.np-item.un:hover{background:rgba(44,99,166,.09)}
.np-ic{
  flex-shrink:0;width:24px;height:24px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:600;
}
.np-ic.reply{color:var(--mid);background:var(--mid-soft)}
.np-ic.vote{color:var(--pro);background:var(--pro-soft)}
.np-ic.topic{color:var(--gold);background:rgba(180,128,31,.11)}
.np-ic.sys{color:var(--tx3);background:var(--fill)}
.np-bd{flex:1;min-width:0}
.np-bd b{display:block;font-size:12.5px;font-weight:600;color:var(--tx);line-height:1.5}
.np-bd p{
  margin:2px 0 0;font-size:12px;color:var(--tx3);line-height:1.55;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.np-t{display:block;margin-top:3px;font-size:10.5px;color:var(--tx3);font-family:var(--mono)}
.np-empty{padding:30px 18px;text-align:center;font-size:12.5px;color:var(--tx3);line-height:1.85}
.np-empty span{font-size:11.5px;opacity:.85}

/* 收藏按钮 / 关注按钮 */
.vb.favbtn{margin-left:2px;padding:0 7px;color:var(--tx3)}
.vb.favbtn svg{width:13px;height:13px}
.vb.favbtn:hover{color:var(--gold);border-color:var(--gold);background:rgba(180,128,31,.08)}
.vb.favbtn.on{color:#fff;background:var(--gold);border-color:var(--gold)}
.vb.followbtn{
  margin-left:4px;height:32px;padding:0 11px;
  font-family:var(--font);font-weight:600;font-size:12px;color:var(--tx2);
}
.vb.followbtn:hover{color:var(--mid);border-color:var(--mid);background:var(--mid-soft)}
.vb.followbtn.on{color:var(--mid);border-color:var(--mid);background:var(--mid-soft)}

/* 我的：发言 / 收藏 / 关注 */
.mtabs{display:flex;gap:4px;margin-bottom:14px;border-bottom:1px solid var(--line)}
.mtabs button{position:relative;padding:7px 12px 10px;font-size:13px;color:var(--tx3)}
.mtabs button:hover{color:var(--tx)}
.mtabs button.on{color:var(--tx-strong);font-weight:600}
.mtabs button.on::after{
  content:"";position:absolute;left:12px;right:12px;bottom:-1px;height:2px;
  border-radius:2px;background:var(--tx-strong);
}
.mi .mib{
  width:20px;height:20px;border-radius:6px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;line-height:1;color:var(--tx3);
}
.mi .mib:hover{background:var(--fill);color:var(--con)}

/* ============ 响应式 ============ */
@media(max-width:1180px){
  .layout{grid-template-columns:minmax(0,1fr) 240px;gap:32px}
  .rail-l{display:none}
}
@media(max-width:900px){
  .layout{grid-template-columns:minmax(0,1fr)}
  .rail{display:none}
}
@media(max-width:720px){
  body{font-size:14.5px;padding-bottom:40px}
  .topbar{padding:0 14px;height:54px;gap:8px}
  .npanel{top:58px;left:10px;right:10px;width:auto;max-width:none}
  .logo b{font-size:15px;letter-spacing:.08em}
  .search{display:none}
  .back{height:27px;padding:0 8px 0 5px;font-size:12px}
  .themes{padding-left:8px;gap:5px}
  .tdot{width:16px;height:16px}
  .btn.sm{height:28px;padding:0 10px;font-size:12px}
  main{padding:0 15px}
  .hero{padding:22px 0 16px}
  .hero h1{font-size:27px;line-height:1.36}
  .hero .sub{font-size:12.5px;margin-top:11px}
  .filters{top:54px;flex-wrap:wrap;gap:8px;padding:8px 0}
  .msearch{display:flex;order:0;flex:1 0 100%;width:auto;max-width:none;height:34px;background:var(--panel);border-color:var(--line)}
  .cats{order:2;flex:1 0 100%;margin:0 -15px;padding:0 15px}
  .sorts{order:1}
  .tc{padding:16px 0;margin:0}
  .tc:hover{background:none}
  .tc h3{font-size:17px}
  .tc .ds{font-size:13px}
  .sfoot{gap:5px}
  .chip{padding:2px 7px}
  .chip b{font-size:12.5px}
  .crumb{top:54px;padding:9px 0}
  .cur{padding:16px 17px;border-radius:14px;margin-top:10px}
  .cur.topic{padding:20px 19px}
  .cur .q{font-size:20px}
  .cur .body-tx{font-size:15px}
  .tstat-top .n{font-size:25px}
  .card{padding:12px 13px}
  .card p{font-size:13px}
  .meta2{font-size:10px}
  .arw{padding:2px 6px}
  .arw span{display:none}
  .vb{height:27px;padding:0 8px}
  .mbox{padding:22px 18px;border-radius:16px}
  /* 底部按钮的负边距要跟着手机端内边距走，否则会横向溢出 */
  .mbody{padding:22px 18px 4px}
  .mfoot{padding:11px 18px 13px;border-radius:0 0 16px 16px}
  .mbox.wide{max-width:100%}
  .pick{gap:8px}
  .pick-l{flex:0 0 100%}
  .stpick button{height:36px}
  .ma{min-width:72px;height:40px}
  .ma.speak{flex:1 0 100%}
}
@media(max-width:400px){
  .hero h1{font-size:24.5px}
  .tstat-leg{gap:14px}
  .tstat-leg .it b{font-size:15px}
}

/* ============ 分享（弹层 / 卡片 / 落地条） ============ */
.sharebox{max-width:432px}
.shgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:2px 0 16px}
.shopt{
  display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  padding:13px 14px;border-radius:12px;background:var(--bg2);
  border:1px solid transparent;text-align:left;transition:border-color .16s,transform .16s;
}
.shopt:hover{border-color:var(--line2);transform:translateY(-1px)}
.sh-ic{
  width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:#fff;margin-bottom:5px;font-style:normal;
}
.sh-ic.wx{background:#2E9B4F}
.sh-ic.mo{background:#3E7A46}
.sh-ic.cp{background:#7C6A4E}
.sh-ic.cd{background:#B4801F}
.shopt b{font-size:13.5px;color:var(--tx-strong)}
.shopt s{text-decoration:none;font-size:11.5px;color:var(--tx3)}
.shlink{display:flex;gap:8px;align-items:center;background:var(--bg2);border-radius:10px;padding:4px 4px 4px 12px}
.shlink input{flex:1;border:0;background:none;font-size:12.5px;color:var(--tx2);min-width:0}
.shlink button{height:32px;padding:0 14px;border-radius:8px;background:var(--panel);border:1px solid var(--line2);font-size:12.5px;font-weight:600}
.shnote{margin:10px 0 0;font-size:11.5px;color:var(--tx3);line-height:1.6}

.cardbox{max-width:420px}
.cardprev{
  margin:6px 0 14px;border-radius:12px;overflow:hidden;background:var(--bg2);
  max-height:52vh;display:flex;align-items:center;justify-content:center;
}
.cardprev img{width:100%;height:auto;display:block}

.cta{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;align-items:center;gap:10px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:var(--panel);border-top:1px solid var(--line2);
  box-shadow:0 -10px 30px -22px rgba(0,0,0,.5);
  animation:up .24s ease;
}
.cta-tx{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.35}
.cta-tx b{font-size:13px;color:var(--tx-strong)}
.cta-tx span{font-size:11.5px;color:var(--tx3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cta .btn.sm{height:34px;padding:0 14px;font-size:12.5px;flex:none}
.cta-x{width:26px;height:26px;border-radius:50%;color:var(--tx3);font-size:17px;line-height:1;flex:none}
.cta-x:hover{background:var(--fill)}
body.has-cta{padding-bottom:112px}

.vb.sharebtn{color:var(--tx2)}
.vb.sharebtn:hover{color:var(--gold);border-color:var(--gold)}
@media (max-width:520px){
  .shgrid{gap:8px}
  .shopt{padding:11px 12px}
  .cta{padding:8px 12px calc(8px + env(safe-area-inset-bottom))}
  .cta .btn.sm{height:32px;padding:0 12px}
}