/* ==========================================================================
   03 动态 · 四格分镜（v2 同人志）
   每条动态是一块粗框小面板；宽窄错落、微微歪；照片统一走 .frame 双色调。
   ========================================================================== */

.nb{white-space:nowrap}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- 页头 ---------- */
.room-kicker,.room-head .sub{position:relative;z-index:1}
.room-head h1 .hl{padding:0 .04em}

/* ---------- 筛选工具条 ---------- */
.toolbar{
  margin-top:26px;padding:34px 14px 12px;position:relative;z-index:3;
  display:flex;align-items:center;justify-content:space-between;gap:18px;
}
.tabs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.tabs .tag{
  font-size:10px;letter-spacing:.08em;cursor:pointer;
  transition:background .15s var(--ease),box-shadow .12s var(--ease),transform .12s var(--ease);
}
.tabs .tag:hover{background:var(--pink-soft)}
.tabs .tag.is-on{background:var(--pink);box-shadow:2px 2px 0 var(--shade)}
.tabs .tag:active{transform:translate(1px,1px)}
.tb-right{display:flex;align-items:center;gap:16px;flex:none}
.lens{
  display:inline-flex;align-items:center;gap:8px;min-height:32px;cursor:pointer;
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;
}
.lens input{
  -webkit-appearance:none;appearance:none;width:16px;height:16px;margin:0;cursor:pointer;
  border:2px solid var(--ink);background:var(--paper);display:grid;place-items:center;
  box-shadow:2px 2px 0 var(--shade);transition:background .12s var(--ease);
}
.lens input::after{content:"";width:8px;height:8px;background:var(--ink);transform:scale(0);transition:transform .12s var(--ease)}
.lens input:checked{background:var(--pink)}
.lens input:checked::after{transform:scale(1)}
.lens input:focus-visible{outline:3px solid var(--pink-deep);outline-offset:3px}
.viewcount{
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--ink-62);
  border-left:2px solid var(--line-2);padding-left:16px;white-space:nowrap;
}
.viewcount b{font-family:var(--disp);font-weight:900;font-size:17px;letter-spacing:0;color:var(--pink-deep);margin:0 2px}
.viewcount .vc-total{color:var(--ink-62);margin-left:2px;letter-spacing:.08em}

/* ---------- 分镜标尺 ---------- */
.cutline{display:flex;align-items:center;gap:12px;margin-top:20px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--ink-62)}
.cutline .sq{width:10px;height:10px;background:var(--pink);border:2px solid var(--ink);flex:none}
.cutline .ln{flex:1;height:2px;background:var(--ink)}

/* ---------- 分镜网格 ---------- */
.stream{
  display:grid;grid-template-columns:repeat(12,1fr);gap:22px;align-items:start;
  margin-top:20px;position:relative;z-index:1;
}
.stream.is-void{display:none}
.moment{
  position:relative;min-width:0;
  border:var(--border) solid var(--ink);background:var(--paper);
  box-shadow:var(--hard);padding:13px 15px 11px;
  rotate:var(--rot,0deg);
  transition:transform .15s var(--ease),box-shadow .15s var(--ease),opacity .18s var(--ease);
}
.moment:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--shade);z-index:4}
.moment.is-out{opacity:0;transform:translateY(10px);pointer-events:none}
.moment.is-in{animation:mIn .36s var(--ease)}
.moment[hidden]{display:none}
@keyframes mIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.moment.has-tab{padding-top:33px}

/* 面板顶栏 / 正文 / 脚注 */
.mh{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--ink-62);
  border-bottom:2px solid var(--line-2);padding-bottom:8px;margin-bottom:10px;
}
.mh .tm::before{content:"";display:inline-block;width:7px;height:7px;background:var(--pink);border:2px solid var(--ink);margin-right:7px;vertical-align:0}
.mh .no{color:var(--ink-62);white-space:nowrap}
.moment p{font-size:15px;line-height:1.75;font-weight:500;color:var(--ink);letter-spacing:.01em}
.inlink{font-weight:700;border-bottom:2px solid var(--pink-deep);transition:background .15s var(--ease),color .15s var(--ease),border-color .15s var(--ease)}
.inlink:hover{background:var(--pink);color:var(--ink);border-bottom-color:var(--ink)}
.mline{
  margin-top:10px;padding-top:7px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--ink-62);
}
.mf{
  display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;
  padding-top:10px;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:var(--ink-62);
}
.mf .tag{color:var(--ink);font-size:10px;padding:2px 7px 1px;letter-spacing:.1em;cursor:pointer;transition:background .15s var(--ease),box-shadow .15s var(--ease)}
.mf .tag:hover{background:var(--pink);box-shadow:2px 2px 0 var(--shade)}
.mf .tag.is-on{background:var(--pink);box-shadow:2px 2px 0 var(--shade)}

/* 变体：粉底 / 墨底 */
.moment--pink{background:var(--pink)}
.moment--pink .mh{color:var(--ink-80);border-color:color-mix(in srgb, var(--ink) 26%, transparent)}
.moment--pink .mh .no{color:color-mix(in srgb, var(--on-pink) 72%, transparent)}
.moment--pink .mline{color:color-mix(in srgb, var(--ink) 75%, transparent);border-color:color-mix(in srgb, var(--ink) 26%, transparent)}
.moment--pink .mf{color:color-mix(in srgb, var(--ink) 78%, transparent);border-color:color-mix(in srgb, var(--ink) 26%, transparent)}
.moment--pink :focus-visible{outline-color:var(--ink)}
.moment--ink{background:var(--ink);box-shadow:5px 5px 0 var(--pink)}
.moment--ink:hover{box-shadow:8px 8px 0 var(--pink)}
.moment--ink .mh{color:color-mix(in srgb, var(--paper) 62%, transparent);border-color:color-mix(in srgb, var(--paper) 24%, transparent)}
.moment--ink .mh .tm::before{border-color:var(--paper)}
.moment--ink .mh .no{color:color-mix(in srgb, var(--paper) 72%, transparent)}
.moment--ink p{color:var(--paper)}
.moment--ink .mline{color:color-mix(in srgb, var(--paper) 60%, transparent);border-color:color-mix(in srgb, var(--paper) 20%, transparent)}
.moment--ink .mf{color:color-mix(in srgb, var(--paper) 60%, transparent);border-color:color-mix(in srgb, var(--paper) 20%, transparent)}
.moment--ink .mf .tag{background:var(--ink);color:var(--paper);border-color:var(--paper)}
.moment--ink .mf .tag:hover,.moment--ink .mf .tag.is-on{background:var(--pink);color:var(--ink);border-color:var(--ink);box-shadow:2px 2px 0 var(--paper)}
.moment--ink :focus-visible{outline-color:var(--pink)}

/* 面板角落的粉色贴标（与 .panel-box 同语法，独立面板也用） */
.moment .panel-tab{
  position:absolute;left:-3px;top:-3px;z-index:5;
  background:var(--pink);border:3px solid var(--ink);border-right:0;border-bottom:0;
  padding:3px 9px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  color:var(--on-pink);white-space:nowrap;
}
.moment.moment--ink .panel-tab{color:var(--on-pink)}
.moment.moment--pink .panel-tab{background:var(--ink);border-color:var(--ink);color:var(--pink)}
/* 暗色下 .moment--ink 反白成浅底、.moment--pink 仍是粉底：贴标都回到粉底墨字 */
[data-theme="dark"] .moment.moment--ink .panel-tab,
[data-theme="dark"] .moment.moment--pink .panel-tab{background:var(--pink);border-color:var(--on-pink);color:var(--on-pink)}

/* 置顶贴纸：落在面板右上角，任何面板位置都能贴 */
.moment .pin{position:absolute;z-index:6;right:-12px;top:-14px;left:auto;transform:rotate(4deg)}

/* 图框：每条动态最多一张图，统一 4:3，图注叠在底边 */
.moment .frame{margin:12px 0 4px;box-shadow:var(--hard-sm);rotate:var(--frot,0deg)}
.moment .frame .cap{font-size:10px;padding:6px 8px;border-top-width:2px;letter-spacing:.08em}
.moment .frame.f-photo{aspect-ratio:4/3;--frot:-.8deg;margin-top:12px}

/* 空状态 */
.empty{
  margin-top:26px;border:var(--border) solid var(--ink);box-shadow:var(--hard);
  background-color:var(--paper-2);background-image:radial-gradient(color-mix(in srgb, var(--ink) 16%, transparent) 1px,transparent 1.2px);
  background-size:6px 6px;padding:24px 26px;display:flex;align-items:center;gap:26px;position:relative;overflow:hidden;
}
.empty[hidden]{display:none}
.empty .zero{
  font-family:var(--disp);font-weight:900;font-size:132px;line-height:.72;letter-spacing:-.06em;
  color:var(--pink);-webkit-text-stroke:2px var(--ink);flex:none;
}
.empty-body{display:flex;flex-direction:column;align-items:flex-start;gap:10px;position:relative;z-index:1}
.empty-body h3{font-size:24px}
.empty-cond{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--ink-62)}
.empty-cond b{color:var(--pink-deep)}
.empty-hint{font-size:13px;color:var(--ink-62)}
.empty .btn{height:44px;margin-top:2px}

/* 底部：更早 + 订阅 */
.outro{
  display:grid;grid-template-columns:1fr 430px;gap:40px;align-items:end;
  margin-top:64px;padding-top:30px;border-top:var(--border) solid var(--ink);position:relative;z-index:1;
}
.outro-left{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.outro-left .narration{max-width:340px}
.outro-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.outro-actions .arrow-link{white-space:nowrap}
.outro-meta{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--ink-62)}
.sub-box{width:100%;padding:34px 20px 16px}
.sub-box h3{font-size:22px;letter-spacing:-.02em}
.sub-box .sub-k{margin-top:7px;color:var(--ink-62)}
.sub-row{display:flex;gap:10px;margin-top:16px}
.sub-row input{flex:1;min-width:0;height:48px;padding:0 12px;font-family:var(--mono);font-size:12px}
.sub-row .btn{flex:none}
.sub-note{margin-top:10px;min-height:18px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--pink-deep)}
.sub-note.is-warn{color:var(--pink-deep);text-decoration:underline;text-underline-offset:3px}

/* 页脚小修 */
.foot .brand{border-color:var(--pink);box-shadow:none;width:max-content}
.foot .foot-state .lamp{border-color:var(--paper);margin-right:0}
.foot .colophon{color:color-mix(in srgb, var(--paper) 60%, transparent)}
.foot .col h4{color:var(--pink)}

/* ---------- 响应式 ---------- */
@media (min-width:761px){
  /* 四格分镜：照片面板跨两行，文字面板在另一侧补齐，宽窄交替 */
  .m1{grid-column:1/6;grid-row:1}
  .m2{grid-column:6/13;grid-row:1/3}
  .m3{grid-column:1/6;grid-row:2}
  .m4{grid-column:1/8;grid-row:3/5}
  .m5{grid-column:8/13;grid-row:3}
  .m6{grid-column:8/13;grid-row:4}
  .m7{grid-column:1/7;grid-row:5}
  .m8{grid-column:7/13;grid-row:5}
  .moment{rotate:var(--rot,0deg)}
  .stream:not(.is-filtered) .moment.m-more{grid-column:span 6}
  .stream.is-filtered{grid-template-columns:repeat(2,1fr);gap:40px}
  .stream.is-filtered .moment{grid-column:auto;grid-row:auto}
  .stream.is-filtered .moment .pin{right:10px}
}
@media (max-width:1100px){
  .outro{grid-template-columns:1fr 380px;gap:28px}
  .moment{padding:12px 13px 10px}
  .mh{font-size:10px}
}
@media (max-width:760px){
  .room{padding-top:0}
  .toolbar{margin-top:20px;padding:30px 12px 12px;flex-direction:column;align-items:stretch;gap:12px}
  .tabs{gap:6px}
  .tabs .tag{font-size:10px;padding:3px 7px 2px}
  .tb-right{justify-content:space-between;border-top:2px solid var(--line-2);padding-top:10px}
  .viewcount{border-left:0;padding-left:0}
  .stream{grid-template-columns:1fr;gap:16px;margin-top:16px}
  .stream .moment{grid-column:auto;grid-row:auto;rotate:0deg}
  .moment{padding:12px 13px 10px}
  .moment.has-tab{padding-top:31px}
  .moment .pin{right:6px;top:-12px;left:auto}
  .empty{padding:20px 18px;gap:16px;align-items:flex-start}
  .empty .zero{font-size:84px}
  .empty-body h3{font-size:20px}
  .outro{grid-template-columns:1fr;gap:28px;margin-top:44px;padding-top:24px}
  .sub-row{flex-wrap:wrap}
  .sub-row .btn{flex:1}
}