/* 动态页 · 精修：只作用于动态页的文字栏（.col）和湖面舞台，排在 liquid-glass.css 之后。
   统一卡片、正在读的那条用左侧一道湖蓝光标出；三颗按钮合成一枚玻璃胶囊；评论成串；统计改成三组大数字；结尾是湖上日出。 */

/* ---------- 抬头 ---------- */
html body .col-head {gap:18px;padding-bottom:36px;}
html body .col-head .who {padding:0;background:none;box-shadow:none;gap:16px;}
html body .col-head .who .avatar {width:56px;height:56px;border:0;box-shadow:0 0 0 3px var(--surface),0 0 0 4.5px color-mix(in srgb,var(--accent) 55%,transparent),0 10px 24px -12px rgba(24,54,82,.5);}
html body .col-head .who b {font-size:18px;letter-spacing:.01em;}
html body .col-head .who small {display:block;margin-top:2px;font-size:14px;}
html body .m-eyebrow {display:flex;align-items:center;gap:12px;margin-top:10px;color:var(--accent);font-size:12px;font-weight:600;letter-spacing:.32em;}
html body .m-eyebrow::after {content:"";flex:0 0 40px;height:1px;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 60%,transparent),transparent);}
html body .col-head h1 {position:relative;padding-bottom:22px;}
html body .col-head h1::after {content:"";position:absolute;left:2px;bottom:0;width:64px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 15%,transparent));transform-origin:0 50%;animation:m-rule 1100ms 300ms cubic-bezier(.16,.84,.24,1) both;}
@keyframes m-rule {from{scale:0 1}to{scale:1 1}}

/* 统计：三组大数字 + 下面一行马甲 */
html body .col-head .me {display:grid;gap:0;padding:0;border-radius:24px;overflow:hidden;background:var(--ui-paper);border:1px solid var(--ui-edge);box-shadow:var(--ui-rim),0 18px 40px -30px rgba(24,54,82,.4);}
html body .col-head .me [data-total] {order:-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));}
html body .m-stat {display:grid;gap:4px;padding:18px 20px 16px;}
html body .m-stat + .m-stat {border-left:1px solid var(--ui-edge);}
html body .m-stat b {color:var(--text);font-family:"IBM Plex Sans",var(--font);font-size:32px;line-height:1;font-weight:300;letter-spacing:-.03em;font-variant-numeric:tabular-nums;}
html body .m-stat small {color:var(--muted);font-size:13px;letter-spacing:.04em;}
html body .col-head .me > span:not([data-total]) {display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:12px 20px;border-top:1px solid var(--ui-edge);background:var(--ui-well);color:var(--muted);font-size:14px;}
html body .col-head .me [data-me] {padding:3px 11px;border-radius:999px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--ui-edge);color:var(--accent);font-size:14px;}

/* ---------- 每一条动态 ---------- */
html body .col .moment {
  margin:0 0 22px;padding:28px 28px 22px;border-radius:28px;border:1px solid var(--ui-edge);background:var(--ui-paper);
  box-shadow:var(--ui-rim),0 22px 48px -36px rgba(24,54,82,.45);
  transition:border-color 400ms ease,box-shadow 400ms ease;
}
html body .col .moment.active {background:var(--ui-paper);border-color:color-mix(in srgb,var(--accent) 34%,var(--surface));box-shadow:var(--ui-rim),0 26px 56px -34px color-mix(in srgb,var(--accent) 70%,rgba(24,54,82,.5));}
/* 正在读的那条：左边一道由上往下淡出的湖蓝光 */
html body .col .moment::before {display:block;left:-1px;top:30px;bottom:30px;width:3px;border-radius:0 3px 3px 0;background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 0%,transparent));opacity:0;scale:1 .4;transform-origin:50% 0;transition:opacity 500ms ease,scale 700ms cubic-bezier(.16,.84,.24,1);}
html body .col .moment.active::before {opacity:1;scale:1 1;}
html body .col .moment header {gap:6px 10px;color:var(--muted);font-size:13px;letter-spacing:.03em;}
html body .col .moment header time {color:color-mix(in srgb,var(--accent) 55%,var(--muted));font-weight:600;}
html body .col .moment header .place {padding:2px 9px 2px 7px;border-radius:999px;background:var(--ui-well);}
html body .col .moment .txt {margin-top:12px;font-size:17.5px;line-height:1.85;letter-spacing:.01em;}

/* 照片：圆角、柔和的投影，悬停轻轻浮起 */
html body .col .thumbs {gap:10px;margin-top:18px;}
html body .col .thumbs button {height:168px;border-radius:18px;box-shadow:0 0 0 1px var(--ui-edge),0 14px 30px -20px rgba(24,54,82,.55);transition:translate 400ms cubic-bezier(.16,.84,.24,1),box-shadow 400ms ease;}
@media (hover:hover) and (pointer:fine) {html body .col .thumbs button:hover {translate:0 -3px;box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 55%,transparent),0 20px 36px -20px rgba(24,54,82,.6);}}

/* 赞 / 评论 / 私下回复：合成一枚玻璃胶囊，中间细线分隔 */
html body .col .acts {display:inline-flex;gap:0;margin-top:20px;padding:4px;border-radius:999px;background:var(--ui-well);box-shadow:inset 0 0 0 1px var(--ui-edge),inset 0 1px 0 var(--lg-edge);}
html body .col .acts button {position:relative;min-height:38px;padding:0 16px;border:0;border-radius:999px;background:transparent;box-shadow:none;color:var(--muted);font-size:14px;}
html body .col .acts button + button::before {content:"";position:absolute;left:0;top:11px;bottom:11px;width:1px;background:var(--ui-edge);}
html body .col .acts button:hover {background:var(--surface);color:var(--accent);}
html body .col .acts button:hover::before,html body .col .acts button:hover + button::before {opacity:0;}
html body .col .acts .like.on {background:var(--surface);color:#d0456d;box-shadow:0 2px 8px -4px rgba(208,69,109,.45);}
html body .col .acts [aria-expanded="true"] {background:var(--surface);color:var(--accent);}

/* 评论：一串小头像 + 名字 + 内容，左边一道细线把它们串起来 */
html body .col .talk ul {gap:2px;margin-top:18px;padding-left:16px;border-left:2px solid color-mix(in srgb,var(--accent) 18%,transparent);}
html body .col .talk li {display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;padding:8px 0;border:0;border-radius:0;background:none;font-size:15px;line-height:1.65;}
html body .col .talk li b {display:flex;align-items:center;gap:6px;margin:0 0 2px;font-size:13px;}
html body .col .talk li.by-owner {background:none;}
html body .col .talk li.by-owner b::after {content:"作者";padding:1px 7px;border-radius:999px;background:var(--accent-pale);color:var(--accent);font-size:11px;font-weight:600;}
html body .m-av {display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:hsl(var(--h) 46% 90%);color:hsl(var(--h) 38% 34%);font-size:13px;font-style:normal;font-weight:600;}
html body .by-owner .m-av {background:var(--accent);color:var(--surface);}
:root[data-theme="dark"] .m-av {background:hsl(var(--h) 22% 26%);color:hsl(var(--h) 45% 82%);}
@media (prefers-color-scheme:dark) {:root:not([data-theme="light"]) .m-av {background:hsl(var(--h) 22% 26%);color:hsl(var(--h) 45% 82%);}}
html body .col .talk form {padding-top:12px;}
html body .col .talk .input {height:44px;background:var(--ui-well);border-color:var(--ui-edge);}

/* ---------- 结尾：湖上一轮日出，下面一圈圈涟漪 ---------- */
html body .col-foot {position:relative;margin-top:56px;padding:120px 4px 8px;border:0;border-radius:0;background:none;box-shadow:none;justify-items:start;}
html body .col-foot::before {content:"";position:absolute;left:0;top:0;width:200px;height:96px;pointer-events:none;
  background:
    radial-gradient(circle at 96px 30px,#f3d9a4 0 16px,transparent 17px),
    radial-gradient(ellipse 5px 13px at 96px 71px,rgba(243,217,164,.75),transparent),
    radial-gradient(ellipse 44px 6px at 96px 72px,transparent 0 76%,color-mix(in srgb,var(--accent) 42%,transparent) 81% 91%,transparent 96%),
    radial-gradient(ellipse 72px 10px at 96px 76px,transparent 0 85%,color-mix(in srgb,var(--accent) 24%,transparent) 88% 94%,transparent 97%),
    linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 50%,transparent) 48%,transparent) 0 56px/192px 1px no-repeat;}
html body .col-foot h2 {font-size:clamp(28px,2.8vw,38px);color:var(--ui-title-ink);}
html body .col-foot p {font-size:15px;letter-spacing:.02em;}

/* ---------- 湖面舞台 ---------- */
html body .stage-top {font-size:13px;letter-spacing:.02em;}
html body .hud .when b {font-weight:200;}

@media (max-width:900px) and (orientation:portrait),(max-width:560px) {
  html body .m-eyebrow {margin-top:4px;}
  html body .m-stat {padding:15px 14px 13px;}
  html body .m-stat b {font-size:28px;}
  html body .col .moment {padding:22px 20px 18px;border-radius:24px;margin-bottom:16px;}
  html body .col .moment .txt {font-size:16.5px;}
  /* 照片：多张时方格铺满；只有一张就按原比例整张放（不再上下空一大块） */
  html body .col .thumbs {gap:6px;}
  html body .col .thumbs button {height:auto;border-radius:14px;}
  html body .col .thumbs img {width:100%;height:100%;object-fit:cover;}
  html body .col .thumbs button:only-child {aspect-ratio:auto;}
  html body .col .thumbs button:only-child img {height:auto;max-height:70vh;}
  /* 三颗按钮在手机上平分一整行 */
  html body .col .acts {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;}
  html body .col .acts button {justify-content:center;min-height:40px;padding:0 6px;}
  /* 往下滚、湖面收成顶上一条窄带时，读数压成一行，不再挤着导航 */
  html body .stage .hud {transition:padding 400ms cubic-bezier(.16,.84,.24,1),bottom 400ms cubic-bezier(.16,.84,.24,1);}
  html body .stage.tight .hud {bottom:20px;padding:8px 14px;align-items:center;}
  html body .stage.tight .hud .when {display:flex;align-items:baseline;gap:10px;}
  html body .stage.tight .hud .when b {font-size:22px;}
  html body .stage.tight .hud .when span {font-size:13px;}
  html body .col-foot {padding-top:110px;}
}
@media (max-width:360px) {
  html body .m-stat {padding:14px 10px 12px;}
  html body .col .acts button {font-size:13px;gap:4px;}
}
@media (prefers-reduced-motion:reduce) {html body .col-head h1::after {animation:none;}html body .col .moment::before {transition:none;}}
/* 主人自己看动态页时，仅自己可见的那几条带一把小锁，卡片也略带暖色，一眼分得清 */
html body .col .moment .self-tag {display:inline-flex;align-items:center;gap:4px;padding:2px 9px 2px 7px;border-radius:999px;background:var(--pill-warning-bg,#fbf0dc);color:var(--pill-warning-ink,#8a5a12);font-size:12px;font-weight:600;letter-spacing:.02em;}
html body .col .moment .self-tag svg {width:12px;height:12px;}
html body .col .moment:has(.self-tag) {border-style:dashed;border-color:color-mix(in srgb,#d9a24a 45%,var(--surface));}