/* 蹲友圈 H5 版式 —— 1rem = 1rpx(html font-size 0.13333vw,以 750 设计稿对齐) */
html { font-size: 0.13333vw; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
body {
  margin: 0;
  --bg: #FFF8EF; --card: #FFFFFF; --ink: #4A3B2A; --sub: #A08D77;
  --line: #F0E4D3; --accent: #E8862D; --accent-soft: #FFE8C7;
  --green: #6FBF8E; --green-soft: #DFF2E6; --danger: #E2705B; --danger-soft: #FBE3DD;
  background: linear-gradient(180deg, #FFF8EF 0%, #FFF3E2 45%, #FFEAD4 100%);
  background-attachment: fixed;
  color: var(--ink); font-size: 28rem; line-height: 1.5;
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Helvetica Neue', sans-serif;
  min-height: 100vh;
}
button { font-family: inherit; border: none; cursor: pointer; }
input, textarea { font-family: inherit; }

.screen { display: none; padding: 24rem 32rem 170rem; max-width: 750px; margin: 0 auto; }
.screen.active { display: block; }

.card { background: var(--card); border-radius: 36rem; border: 2rem solid rgba(240,228,211,.9); padding: 32rem; margin-top: 24rem; box-shadow: 0 10rem 30rem rgba(215,168,120,.12); }
.card-title { font-size: 32rem; font-weight: 700; margin-bottom: 20rem; }
.muted { color: var(--sub); font-size: 26rem; line-height: 1.6; }
.tilt-1 { transform: rotate(-1.2deg); }

.btn-main { background: linear-gradient(135deg,#FFB25C 0%,#E8862D 100%); color: #fff; border-radius: 999rem; font-size: 32rem; font-weight: 600; height: 96rem; padding: 0 40rem; box-shadow: 0 12rem 28rem rgba(232,134,45,.35), inset 0 -4rem 0 rgba(178,106,27,.25); }
.btn-ghost { background: transparent; color: var(--sub); border-radius: 999rem; font-size: 28rem; height: 88rem; padding: 0 40rem; }
.btn-mini { background: linear-gradient(135deg,#FFB25C 0%,#E8862D 100%); color: #fff; border-radius: 999rem; font-size: 26rem; font-weight: 600; height: 64rem; padding: 0 36rem; box-shadow: 0 8rem 18rem rgba(232,134,45,.3); }
.btn-mini.ghost { background: var(--bg); color: var(--sub); box-shadow: none; }
.wide { width: 70%; }

/* ---------- 首页 ---------- */
.top-row { display: flex; justify-content: center; padding-top: 8rem; }
.presence-pill { display: flex; align-items: center; background: var(--card); border: 2rem solid rgba(240,228,211,.5); border-radius: 999rem; padding: 12rem 28rem; color: var(--sub); font-size: 24rem; box-shadow: 0 4rem 16rem rgba(74,59,42,.06); }
.dot { width: 14rem; height: 14rem; border-radius: 50%; background: var(--green); margin-right: 12rem; animation: blink 2s ease-in-out infinite; }

.chicken-wrap { position: relative; display: flex; justify-content: center; margin-top: 130rem; }
.chicken-wrap.sitting { margin-top: 40rem; }
.spark { position: absolute; font-size: 30rem; animation: spark-float 3s ease-in-out infinite; z-index: 6; }
.spark.s1 { left: 24%; top: 0; }
.spark.s2 { right: 22%; top: 26rem; animation-delay: 1s; }
.spark.s3 { right: 32%; bottom: 4rem; font-size: 26rem; animation-delay: 2s; }

.timer { font-size: 130rem; font-weight: 700; text-align: center; letter-spacing: 6rem; margin-top: 20rem; font-family: 'DIN Alternate','Helvetica Neue',sans-serif; }
.timer.overtime { color: var(--danger); }

.btn-area { margin-top: 44rem; display: flex; flex-direction: column; align-items: center; }
.btn-area .btn-ghost { margin-top: 16rem; }
.tip { margin-top: 24rem; color: var(--sub); font-size: 24rem; text-align: center; }
.today-hint { margin-top: 16rem; color: var(--green); font-size: 24rem; }
.noise-toggle { margin-top: 20rem; font-size: 24rem; color: var(--sub); background: var(--card); border: 2rem solid var(--line); border-radius: 999rem; padding: 12rem 30rem; }
.noise-toggle.on { color: #b26a1b; background: var(--accent-soft); border-color: var(--accent); font-weight: 600; }

/* 马卡龙气泡:四个方位全部围绕头顶,不出屏(定位相对全宽容器,取正值) */
.bubble-float { position: absolute; z-index: 20; max-width: 330rem; border-radius: 30rem; padding: 20rem 26rem; font-size: 25rem; line-height: 1.55; box-shadow: 0 8rem 20rem rgba(215,168,120,.2); }
.bubble-float::after { content: ''; position: absolute; width: 0; height: 0; }
.pos-0 { left: 30rem; top: -118rem; background: #FFF1D6; border: 3rem solid #F3D9A6; transform: rotate(-2deg); }
.pos-0::after { right: 70rem; bottom: -14rem; border-left: 10rem solid transparent; border-right: 10rem solid transparent; border-top: 15rem solid #FFF1D6; }
.pos-1 { right: 30rem; top: -114rem; background: #FFE5DE; border: 3rem solid #F5C6BC; transform: rotate(2deg); }
.pos-1::after { left: 70rem; bottom: -14rem; border-left: 10rem solid transparent; border-right: 10rem solid transparent; border-top: 15rem solid #FFE5DE; }
.pos-2 { left: 10rem; top: -48rem; max-width: 280rem; background: #E4F3E8; border: 3rem solid #BFE3C9; transform: rotate(-2.5deg); }
.pos-2::after { right: -14rem; top: 40%; border-top: 8rem solid transparent; border-bottom: 8rem solid transparent; border-left: 15rem solid #E4F3E8; }
.pos-3 { right: 10rem; top: -44rem; max-width: 280rem; background: #EFE8FF; border: 3rem solid #D4C6F2; transform: rotate(2.5deg); }
.pos-3::after { left: -14rem; top: 40%; border-top: 8rem solid transparent; border-bottom: 8rem solid transparent; border-right: 15rem solid #EFE8FF; }
.bubble-float.pop { animation: bubble-pop .28s ease; }

/* ---------- CSS 小鸡(坐马桶) ---------- */
.ck { position: relative; width: 280rem; height: 300rem; }
.ck-small-inline { width: 214rem; height: 210rem; }
.ck-small-inline .ck-chick { bottom: 6rem; }
.ck-small-inline .ck-ahoge { top: 8rem; }
.ck-toilet { position: absolute; bottom: 0; left: 0; width: 280rem; height: 196rem; z-index: 1; }
.ck-rug { position: absolute; bottom: -10rem; left: -26rem; width: 332rem; height: 46rem; background: #F6D9C8; border-radius: 50%; opacity: .9; z-index: 0; }
.ck-tank { position: absolute; top: 0; left: 8rem; width: 264rem; height: 104rem; background: #DCE6EE; border: 4rem solid #B7C6D4; border-radius: 20rem 20rem 14rem 14rem; box-shadow: inset 0 -12rem 0 rgba(140,160,180,.18); }
.ck-tank::after { content: ''; position: absolute; top: 10rem; left: 50%; margin-left: -16rem; width: 32rem; height: 14rem; background: #FFB25C; border: 3rem solid #E8862D; border-radius: 999rem; }
.ck-lid { position: absolute; top: 86rem; left: 26rem; width: 228rem; height: 56rem; background: #CBD9E4; border: 4rem solid #B7C6D4; border-radius: 28rem; z-index: 2; }
.ck-seat { position: absolute; top: 104rem; left: 18rem; width: 244rem; height: 58rem; background: #FFF3E2; border: 4rem solid #D9A87C; border-radius: 50%; z-index: 3; }
.ck-bowl { position: absolute; bottom: 10rem; left: 22rem; width: 236rem; height: 88rem; background: #E4EDF4; border: 4rem solid #B7C6D4; border-radius: 16rem 16rem 110rem 110rem / 16rem 16rem 60rem 60rem; box-shadow: inset 0 -12rem 0 rgba(140,160,180,.18); z-index: 4; }
.ck-pedestal { position: absolute; bottom: 0; left: 92rem; width: 96rem; height: 22rem; background: #CBD9E4; border: 4rem solid #B7C6D4; border-top: none; border-radius: 0 0 18rem 18rem; z-index: 4; }
.ck-shadow { position: absolute; bottom: 2rem; left: 50rem; width: 180rem; height: 28rem; background: radial-gradient(ellipse at center, rgba(190,140,70,.28) 0%, rgba(190,140,70,0) 70%); animation: ck-shadow-pulse 2.6s ease-in-out infinite; z-index: 0; }
.ck-ahoge { position: absolute; left: 50%; margin-left: -5rem; top: 24rem; width: 10rem; height: 40rem; background: #F5B32B; border-radius: 999rem; transform-origin: 50% 100%; animation: ck-wiggle 2.8s ease-in-out infinite; z-index: 6; }
.ck-ahoge2 { position: absolute; left: 50%; margin-left: -14rem; top: 30rem; width: 9rem; height: 28rem; background: #FFC94D; border-radius: 999rem; transform: rotate(-24deg); transform-origin: 50% 100%; animation: ck-wiggle 2.8s ease-in-out infinite; animation-delay: -.6s; z-index: 6; }
.ck-chick { position: absolute; bottom: 84rem; left: 50%; margin-left: -107rem; width: 214rem; height: 182rem; z-index: 5; transform-origin: 50% 95%; animation: ck-sway 3.6s ease-in-out infinite, ck-hop-idle 6.5s ease-in-out infinite; }
.ck-body { position: absolute; left: 0; bottom: 0; width: 214rem; height: 180rem; background: radial-gradient(circle at 36% 26%, #FFEC9C 0%, #FFD75F 46%, #FFC02E 78%, #F0AE1D 100%); border-radius: 50% 50% 47% 47%; box-shadow: inset -12rem -16rem 0 rgba(216,152,28,.22); transform-origin: 50% 100%; animation: ck-breathe 2.6s ease-in-out infinite; }
.ck-wing { position: absolute; top: 84rem; width: 46rem; height: 58rem; background: #F8BE33; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; box-shadow: inset 0 -6rem 0 rgba(216,152,28,.3); transform-origin: 50% 14%; animation: ck-flap 4.6s ease-in-out infinite; }
.ck-wing-l { left: -14rem; } .ck-wing-r { right: -14rem; animation-name: ck-flap-r; }
.ck-eyes { position: absolute; inset: 0; animation: ck-glance 6.5s ease-in-out infinite; }
.ck-eye { position: absolute; top: 50rem; width: 30rem; height: 38rem; background: radial-gradient(circle at 50% 60%, #4A3826 0%, #2E2216 70%); border-radius: 50%; animation: ck-blink 3.4s ease-in-out infinite; }
.ck-eye-l { left: 48rem; } .ck-eye-r { left: 132rem; }
.ck-eye::after { content: ''; position: absolute; left: 5rem; top: 5rem; width: 12rem; height: 12rem; background: #fff; border-radius: 50%; }
.ck-eye::before { content: ''; position: absolute; right: 5rem; bottom: 7rem; width: 6rem; height: 6rem; background: rgba(255,255,255,.85); border-radius: 50%; }
.ck-blush { position: absolute; top: 100rem; width: 36rem; height: 20rem; background: radial-gradient(ellipse at center, rgba(255,148,148,.75) 0%, rgba(255,148,148,0) 75%); border-radius: 50%; }
.ck-blush-l { left: 14rem; } .ck-blush-r { left: 160rem; }
.ck-beak { position: absolute; left: 50%; margin-left: -12rem; top: 86rem; width: 24rem; height: 20rem; background: #FFA245; border-radius: 8rem 8rem 14rem 14rem; box-shadow: inset 0 -4rem 0 rgba(200,110,20,.4); transform-origin: 50% 20%; }
.ck-beak.talk { animation: ck-talk .3s ease-in-out infinite; }
.ck-brow { display: none; position: absolute; top: 38rem; width: 32rem; height: 7rem; background: #B26A1B; border-radius: 999rem; z-index: 2; }
.ck-brow-l { left: 46rem; transform: rotate(16deg); }
.ck-brow-r { left: 134rem; transform: rotate(-16deg); }
.ck.ck-angry .ck-brow { display: block; }
.ck.ck-angry .ck-eye { animation: none; background: radial-gradient(circle at 50% 60%, #5A3A22 0%, #3A2513 70%); }
.ck.ck-angry .ck-eye-l { transform: rotate(-12deg) scaleY(.5); }
.ck.ck-angry .ck-eye-r { transform: rotate(12deg) scaleY(.5); }
.ck.ck-angry .ck-eye::after, .ck.ck-angry .ck-eye::before { opacity: .4; }
.ck.ck-angry .ck-blush { background: radial-gradient(ellipse at center, rgba(255,100,100,.85) 0%, rgba(255,100,100,0) 75%); }
.ck.ck-angry .ck-body { animation: ck-angry-shiver .18s linear infinite; }
.ck-angry-mark { display: none; position: absolute; right: 6rem; top: 4rem; font-size: 40rem; z-index: 8; animation: ck-pulse 1.1s ease-in infinite; }
.ck.ck-angry .ck-angry-mark { display: block; }
.ck-sweat { display: none; position: absolute; right: 26rem; top: 48rem; font-size: 36rem; z-index: 7; }
.ck.ck-overtime .ck-sweat { display: block; animation: ck-pulse 1.4s ease-in infinite; }
.ck-note { display: none; position: absolute; top: 20rem; font-size: 34rem; color: #E8862D; font-weight: 700; z-index: 8; opacity: 0; }
.ck-note.n1 { left: 34rem; } .ck-note.n2 { right: 30rem; }
.ck.ck-talking .ck-note { display: block; }
.ck.ck-talking .ck-note.n1 { animation: ck-note-float 1.5s ease-out infinite; }
.ck.ck-talking .ck-note.n2 { animation: ck-note-float 1.5s ease-out infinite; animation-delay: .7s; }
.ck.ck-talking .ck-wing { animation: ck-flap .55s ease-in-out infinite; }
.ck.ck-talking .ck-wing-r { animation-name: ck-flap-r; }
.ck.ck-talking .ck-body { animation: ck-breathe 1.2s ease-in-out infinite; }
.ck.sitting .ck-body { animation-duration: 1.7rem; }

@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }
@keyframes spark-float { 0%,100%{transform:translateY(0);opacity:.9} 50%{transform:translateY(-16rem);opacity:.4} }
@keyframes bubble-pop { from{margin-top:-14rem;opacity:0} to{margin-top:0;opacity:1} }
@keyframes ck-breathe { 0%,100%{transform:scale(1,1)} 50%{transform:scale(1.035,.962)} }
@keyframes ck-blink { 0%,91%,100%{transform:scaleY(1)} 94%{transform:scaleY(.08)} 97%{transform:scaleY(1)} }
@keyframes ck-flap { 0%,72%,100%{transform:rotate(0)} 78%{transform:rotate(18deg)} 84%{transform:rotate(-7deg)} 90%{transform:rotate(10deg)} }
@keyframes ck-flap-r { 0%,72%,100%{transform:rotate(0)} 78%{transform:rotate(-18deg)} 84%{transform:rotate(7deg)} 90%{transform:rotate(-10deg)} }
@keyframes ck-wiggle { 0%,100%{transform:rotate(-14deg)} 50%{transform:rotate(9deg)} }
@keyframes ck-sway { 0%,100%{transform:rotate(-1.6deg)} 50%{transform:rotate(1.6deg)} }
@keyframes ck-hop-idle { 0%,86%,100%{transform:translateY(0)} 90%{transform:translateY(-16rem)} 94%{transform:translateY(0)} 96%{transform:translateY(-6rem)} }
@keyframes ck-glance { 0%,18%,100%{transform:translateX(0)} 26%,40%{transform:translateX(5rem)} 55%,68%{transform:translateX(-5rem)} 78%{transform:translateX(0)} }
@keyframes ck-talk { 0%,100%{transform:scaleY(1)} 50%{transform:scaleY(1.7)} }
@keyframes ck-note-float { 0%{transform:translateY(0) rotate(-8deg);opacity:0} 25%{opacity:1} 100%{transform:translateY(-56rem) rotate(10deg);opacity:0} }
@keyframes ck-shadow-pulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.05,.9);opacity:.75} }
@keyframes ck-pulse { 0%{transform:translateY(0);opacity:1} 100%{transform:translateY(-18rem);opacity:0} }
@keyframes ck-angry-shiver { 0%,100%{transform:translateX(-2rem)} 50%{transform:translateX(2rem)} }
@keyframes wrap-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-12rem)} 50%{transform:translateX(10rem)} 75%{transform:translateX(-6rem)} }
.chicken-wrap.shake { animation: wrap-shake .4s ease; }
.chicken-wrap.hopfx { animation: chick-hop .45s ease; }
@keyframes chick-hop { 0%{transform:translateY(0) scale(1,1)} 35%{transform:translateY(-30rem) scale(.96,1.06)} 70%{transform:translateY(0) scale(1.08,.92)} 100%{transform:translateY(0) scale(1,1)} }

/* 弹幕 */
.danmaku-stage { position: fixed; left: 0; top: 0; right: 0; height: 62vh; pointer-events: none; z-index: 5; overflow: hidden; }
.danmaku { position: absolute; left: 100vw; animation-name: fly; animation-timing-function: linear; animation-fill-mode: both; }
.dm { display: inline-block; padding: 10rem 26rem; border-radius: 999rem; font-size: 26rem; color: var(--ink); border: 2rem solid rgba(240,228,211,.5); box-shadow: 0 6rem 18rem rgba(215,168,120,.16); white-space: nowrap; }
.dm.c0{background:#FFF1D6}.dm.c1{background:#FFE5DE}.dm.c2{background:#E4F3E8}.dm.c3{background:#EFE8FF}
@keyframes fly { from{transform:translateX(0)} to{transform:translateX(-180vw)} }

/* 之约横幅 & 小知识 */
.meet-banner { margin: 36rem auto 0; max-width: 620rem; display: flex; align-items: center; background: var(--card); border: 2rem solid var(--line); border-radius: 999rem; padding: 16rem 30rem; }
.meet-banner .txt { flex: 1; font-size: 25rem; color: var(--sub); }
.meet-banner.due { background: var(--accent-soft); border-color: var(--accent); }
.meet-banner.due .txt { color: #b26a1b; font-weight: 600; }
.fact-card { margin: 56rem auto 0; max-width: 620rem; background: var(--card); border: 2rem solid var(--line); border-radius: 24rem; padding: 22rem 28rem; display: flex; align-items: flex-start; box-shadow: 0 8rem 22rem rgba(215,168,120,.12); }
.fact-ico { font-size: 34rem; margin-right: 14rem; }
.fact-txt { flex: 1; font-size: 24rem; color: var(--sub); line-height: 1.7; }

/* 结算弹层 */
.mask { position: fixed; inset: 0; background: rgba(74,59,42,.42); z-index: 50; display: flex; align-items: flex-end; }
.sheet { width: 100%; background: var(--card); border-radius: 40rem 40rem 0 0; padding: 32rem 40rem calc(44rem + env(safe-area-inset-bottom)); animation: up .25s ease; }
.sheet::before { content: ''; display: block; width: 72rem; height: 8rem; border-radius: 999rem; background: var(--line); margin: 0 auto 24rem; }
.sheet-title { font-size: 40rem; font-weight: 700; text-align: center; }
.sheet-dur { color: var(--sub); text-align: center; margin-top: 10rem; font-size: 26rem; }
.record-line { background: var(--accent-soft); color: #b26a1b; border-radius: 12rem; padding: 10rem 20rem; font-size: 24rem; margin-top: 10rem; text-align: center; }
.sheet-q { margin-top: 32rem; font-size: 28rem; }
.sheet .btn-main { margin-top: 28rem; width: 100%; }
.sheet .btn-ghost { margin-top: 8rem; width: 100%; }
@keyframes up { from{transform:translateY(40%);opacity:.4} to{transform:translateY(0);opacity:1} }

/* 布里斯托 */
.bristol-row { display: flex; justify-content: space-between; margin: 24rem 0 16rem; }
.chip { width: 84rem; height: 92rem; border-radius: 20rem; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; border: 3rem solid transparent; }
.chip .e { font-size: 34rem; }
.chip .t { font-size: 18rem; color: var(--sub); margin-top: 4rem; }
.chip.sel { border-color: var(--accent); background: var(--accent-soft); }
.bristol-desc { background: var(--bg); border-radius: 16rem; padding: 16rem 20rem; font-size: 24rem; color: var(--sub); line-height: 1.6; margin-bottom: 20rem; }

/* 记录页 */
.today-item { display: flex; align-items: center; background: var(--bg); border-radius: 16rem; padding: 18rem 24rem; margin-bottom: 12rem; }
.today-item .e { font-size: 36rem; margin-right: 16rem; }
.today-item .txt { flex: 1; font-size: 26rem; }
.today-item .time { color: var(--sub); font-size: 24rem; }
.report-line { font-size: 28rem; line-height: 1.7; }
.report-sub { margin-top: 12rem; font-size: 24rem; color: var(--sub); line-height: 1.6; }
.best-hour { color: var(--accent); font-weight: 600; }
.tag { display: inline-block; margin-top: 16rem; background: var(--accent-soft); color: #b26a1b; border-radius: 999rem; padding: 8rem 24rem; font-size: 24rem; font-weight: 600; }
.water-cups { display: flex; margin: 4rem 0 8rem; }
.wcup { font-size: 40rem; opacity: .22; filter: grayscale(1); margin-right: 12rem; transition: all .2s; }
.wcup.full { opacity: 1; filter: none; transform: scale(1.1); }
.water-line { color: var(--sub); font-size: 24rem; margin-bottom: 18rem; }
.water-btns { display: flex; }
.water-btns .btn-mini { margin-right: 16rem; }
.cal-head { display: flex; margin-bottom: 4rem; }
.cal-head span { flex: 1; text-align: center; color: var(--sub); font-size: 20rem; }
.cal-row { display: flex; }
.cal-cell { flex: 1; height: 52rem; margin: 4rem; border-radius: 10rem; background: #f5ecdc; }
.cal-cell.l1 { background: #ffd9a0; } .cal-cell.l2 { background: var(--accent); }
.cal-cell.future { opacity: .3; }
.cal-cell.today { box-shadow: inset 0 0 0 3rem var(--accent); }
.cal-legend { display: flex; align-items: center; color: var(--sub); font-size: 20rem; margin-top: 16rem; }
.lg { width: 22rem; height: 22rem; border-radius: 6rem; margin: 0 8rem 0 20rem; }
.lg:first-child { margin-left: 0; }
.lg.s0{background:#f5ecdc}.lg.s1{background:#ffd9a0}.lg.s2{background:var(--accent)}
.his-item { display: flex; align-items: center; padding: 18rem 0; border-bottom: 1rem solid var(--line); }
.his-item:last-child { border-bottom: none; }
.his-item .e { font-size: 36rem; margin-right: 18rem; }
.his-item .mid { flex: 1; }
.his-item .t1 { font-size: 26rem; }
.his-item .t2 { font-size: 22rem; color: var(--sub); margin-top: 4rem; }
.his-item .dur { color: var(--sub); font-size: 22rem; }

/* 蹲坑墙 */
.ta { background: var(--bg); border-radius: 20rem; padding: 20rem 24rem; min-height: 120rem; font-size: 26rem; width: 100%; border: none; resize: none; }
.compose-row { display: flex; align-items: center; margin-top: 18rem; }
.toggle { background: var(--bg); color: var(--sub); border-radius: 999rem; padding: 10rem 24rem; font-size: 24rem; }
.toggle.on { background: var(--green-soft); color: #3d7a57; }
.spacer { flex: 1; }
.wall-count { text-align: center; color: var(--sub); font-size: 24rem; margin: 24rem 0 4rem; }
.cloud-badge { text-align: center; color: var(--sub); font-size: 20rem; margin-bottom: 4rem; }
.cloud-badge.on { color: #3d7a57; }
.post-head { display: flex; align-items: center; }
.avatar { width: 76rem; height: 76rem; border-radius: 50%; background: var(--accent-soft); border: 3rem solid #FFE8C7; display: flex; align-items: center; justify-content: center; font-size: 40rem; margin-right: 18rem; }
.who { flex: 1; }
.name { font-size: 28rem; font-weight: 600; }
.ago { font-size: 22rem; color: var(--sub); margin-top: 4rem; }
.stat-chip { background: var(--green-soft); color: #3d7a57; border-radius: 999rem; padding: 8rem 20rem; font-size: 22rem; transform: rotate(1.2deg); }
.post-text { margin-top: 18rem; font-size: 28rem; line-height: 1.7; }
.cheers { display: flex; flex-wrap: wrap; margin-top: 18rem; }
.cheer { background: var(--accent-soft); color: #b26a1b; border-radius: 999rem; padding: 8rem 22rem; font-size: 22rem; margin: 8rem 12rem 0 0; }
.post-actions { display: flex; margin-top: 20rem; border-top: 1rem solid var(--line); padding-top: 16rem; }
.act { color: var(--sub); font-size: 24rem; margin-right: 48rem; background: none; padding: 6rem 0; }
.act.liked { color: var(--danger); }

/* 我的页 */
.head { display: flex; flex-direction: column; align-items: center; padding: 44rem 32rem; }
.big-chicken-wrap { position: relative; display: flex; justify-content: center; padding-top: 26rem; }
.crown { position: absolute; top: -14rem; left: 50%; margin-left: -34rem; font-size: 44rem; transform: rotate(12deg); animation: crown-bob 2.6s ease-in-out infinite; z-index: 5; }
@keyframes crown-bob { 0%,100%{transform:rotate(12deg) translateY(0)} 50%{transform:rotate(6deg) translateY(-8rem)} }
.name-row { display: flex; align-items: center; margin-top: 12rem; }
.name-row .name { font-size: 36rem; font-weight: 700; }
.edit { font-size: 24rem; margin-left: 12rem; opacity: .6; }
.sub { margin-top: 10rem; color: var(--sub); font-size: 24rem; }
.stat-row { display: flex; }
.stat { flex: 1; text-align: center; }
.stat .v { font-size: 40rem; font-weight: 700; color: var(--accent); }
.stat .l { font-size: 22rem; color: var(--sub); margin-top: 8rem; }
.meet-add { display: flex; align-items: center; margin-top: 22rem; }
.meet-time-input { background: var(--bg); border-radius: 14rem; padding: 14rem 18rem; font-size: 28rem; font-weight: 700; color: var(--accent); border: none; width: 160rem; }
.meet-input { flex: 1; background: var(--bg); border-radius: 14rem; padding: 14rem 22rem; font-size: 26rem; border: none; margin: 0 14rem; min-width: 0; }
.meet-item { display: flex; align-items: center; padding: 20rem 0; border-bottom: 1rem solid var(--line); }
.meet-item:last-child { border-bottom: none; }
.meet-item .mt { font-size: 30rem; font-weight: 700; color: var(--accent); margin-right: 20rem; width: 110rem; }
.meet-item .ml { flex: 1; font-size: 26rem; }
.meet-inv { margin-right: 12rem; }
.mdel { color: var(--sub); font-size: 26rem; padding: 8rem 4rem 8rem 12rem; }
.ach-grid { display: flex; flex-wrap: wrap; }
.ach { width: 25%; padding: 16rem 8rem; display: flex; flex-direction: column; align-items: center; text-align: center; }
.ach .e { font-size: 44rem; }
.ach .n { font-size: 22rem; font-weight: 600; margin-top: 8rem; }
.ach .d { font-size: 18rem; color: var(--sub); margin-top: 6rem; line-height: 1.4; }
.ach.locked { opacity: .35; }
.btn-row { display: flex; margin-top: 24rem; }
.half { flex: 1; margin: 0 8rem; }
.share-canvas { position: fixed; left: -9999px; top: 0; width: 320px; height: 420px; }
.tip-line { font-size: 26rem; line-height: 2; }
.about { text-align: center; color: var(--sub); font-size: 22rem; margin: 32rem 0 8rem; line-height: 1.8; }
.danger-link { color: var(--danger); text-decoration: underline; margin-top: 8rem; }

/* 底部导航 */
.bar { position: fixed; left: 0; right: 0; bottom: 0; display: flex; background: var(--card); border-top: 1rem solid var(--line); padding-bottom: env(safe-area-inset-bottom); z-index: 100; max-width: 750px; margin: 0 auto; }
.item { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 12rem 0 10rem; color: var(--sub); background: none; font-size: 22rem; }
.item.on { color: var(--accent); font-weight: 600; }
.ico { font-size: 40rem; line-height: 1.2; }
.txt { margin-top: 2rem; }

/* toast */
#toasts { position: fixed; left: 0; right: 0; bottom: 180rem; display: flex; flex-direction: column; align-items: center; z-index: 200; pointer-events: none; }
.toast { background: rgba(74,59,42,.88); color: #fff; border-radius: 16rem; padding: 16rem 32rem; font-size: 26rem; margin-top: 12rem; max-width: 80vw; animation: toast-in .25s ease; }
@keyframes toast-in { from{transform:translateY(16rem);opacity:0} to{transform:translateY(0);opacity:1} }

/* 深色模式 */
@media (prefers-color-scheme: dark) {
  body { --bg:#221b12; --card:#2c241a; --ink:#f2e8d9; --sub:#a79a87; --line:#3d3426; --accent:#ffa94d; --accent-soft:#46351e; --green:#7bc99a; --green-soft:#22392c; --danger:#ff8a73; --danger-soft:#4a2a22; background: linear-gradient(180deg,#221b12 0%,#1d1710 100%); }
  .pos-0{background:#3a2f1c;border-color:#57452a}.pos-0::after{border-top-color:#3a2f1c}
  .pos-1{background:#3e2a27;border-color:#5a3c37}.pos-1::after{border-top-color:#3e2a27}
  .pos-2{background:#213628;border-color:#32513c}.pos-2::after{border-left-color:#213628}
  .pos-3{background:#2f2a44;border-color:#463e63}.pos-3::after{border-right-color:#2f2a44}
  .dm.c0{background:#3a2f1c}.dm.c1{background:#3e2a27}.dm.c2{background:#213628}.dm.c3{background:#2f2a44}
  .cal-cell{background:#3a3122}.cal-cell.l1{background:#5c4526}.cal-cell.l2{background:#b97a2e}
  .lg.s0{background:#3a3122}.lg.s1{background:#5c4526}.lg.s2{background:#b97a2e}
  .wcup.full{filter:none}
  .mask{background:rgba(0,0,0,.55)}
}