/* 小日子 · 样式表
   从 index.html 拆出,便于维护 */
:root{
  color-scheme: light;
  --ink:#1c1c1e;
  --ink-2:#5f5f66;
  --ink-3:#a5a5ab;
  --line:rgba(28,28,30,.07);
  --line-2:rgba(28,28,30,.12);
  --accent:#ff6b9d;
  --accent-2:#a78bfa;
  --grad:linear-gradient(135deg,#ff9db8 0%,#b28aff 100%);
  --grad-soft:linear-gradient(135deg,rgba(255,157,184,.16),rgba(178,138,255,.16));
  --good:#2fb56b;
  --warn:#ff9f0a;
  --glass:rgba(255,255,255,.72);
  --glass-hi:rgba(255,255,255,.92);
  --blur:saturate(180%) blur(22px);
  --r:22px;
  --sh:0 10px 30px rgba(96,66,128,.09), 0 2px 6px rgba(96,66,128,.05);
  --sh-sm:0 4px 14px rgba(96,66,128,.08);
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100; --s5:#e87ba4;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* 安卓 WebView 优化:禁长按选中文字与弹出菜单(输入框除外),禁过度滚动回弹 */
body{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;overscroll-behavior:none}
input,textarea{-webkit-user-select:text;user-select:text}
/* 注意: 不能用 height:100%,否则 body 不撑开、滚动发生在 body 之外,
   底部 padding 会被忽略 -> 内容被浮动导航栏挡住 */
html{min-height:100%}
body{min-height:100vh;min-height:100dvh}
body{
  margin:0;color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,system-ui,"SF Pro Text","PingFang SC","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
  background:
    radial-gradient(70vw 46vh at 12% -6%, rgba(255,182,205,.45), transparent 62%),
    radial-gradient(64vw 44vh at 92% 2%, rgba(178,138,255,.30), transparent 62%),
    radial-gradient(90vw 56vh at 50% 112%, rgba(150,196,255,.26), transparent 64%),
    linear-gradient(180deg,#ffffff 0%,#fdfaff 42%,#f8f8ff 100%);
  background-attachment:fixed;
  display:flex;flex-direction:column;align-items:center;
  -webkit-text-size-adjust:100%;   /* 禁安卓字体自动放大 */
  text-size-adjust:100%;
  /* 底部留白 = 导航栏(约 62px) + 呼吸(20px) + 安全区 */
  padding:0 0 calc(120px + var(--sab, 0px));overflow-x:hidden;   /* 浮动导航栏(78px) + 底距(10px) + 呼吸(32px) */
}
/* ---- 顶栏 ---- */
header{
  position:sticky;top:0;z-index:30;width:100%;
  background:linear-gradient(180deg,rgba(255,255,255,.99),rgba(255,255,255,.92));
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  backdrop-filter:saturate(180%) blur(22px);
  display:flex;align-items:center;justify-content:space-between;
  padding:clamp(10px, var(--sat, env(safe-area-inset-top, 0px)), 60px) 18px 12px;   /* 顶部只留状态栏高度,不超过 60px */
  border-bottom:1px solid rgba(255,255,255,.75);
  box-shadow:0 1px 0 rgba(96,66,128,.04);
}
header h1{font-size:17px;font-weight:700;margin:0;letter-spacing:.2px;display:flex;align-items:center;gap:7px}
header h1 .logo{
  width:26px;height:26px;border-radius:9px;background:var(--grad);
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 4px 10px rgba(255,107,157,.35);flex-shrink:0;
}
header h1 .logo svg{width:16px;height:16px;color:#fff}
header h1 em{font-style:normal;color:var(--ink-3);font-weight:500;font-size:12.5px;margin-left:2px}
.hbtns{display:flex;gap:4px}
.icon-btn{width:36px;height:36px;border:none;background:rgba(255,255,255,.92);color:var(--ink-2);
  cursor:pointer;border-radius:12px;display:flex;align-items:center;justify-content:center;transition:.18s;
  box-shadow:var(--sh-sm);border:1px solid rgba(255,255,255,.9)}
.icon-btn svg{width:19px;height:19px}
.icon-btn:active{transform:scale(.94)}
.icon-btn.off{color:var(--ink-3)}
.icon-btn.off svg .wave{opacity:.2}

main{width:100%;max-width:560px;flex:1;padding:14px 14px 0}
/* 内容区底部留白: 由 body 承担(flex 布局下 main 的 padding-bottom 会被压缩) */
/* 未确认登录前,主内容完全不可见(防闪烁);登录确认后才显示 */
body:not(.authed):not(.ready) main,
body:not(.authed):not(.ready) .tabbar{visibility:hidden}
/* JS 就绪前,整个 body 不显示(避免白屏闪烁) */
body:not(.ready) main,
body:not(.ready) .tabbar{visibility:hidden}
.view{display:none}
.view.active{display:block;animation:fadeUp .3s cubic-bezier(.22,.8,.36,1)}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---- 底部导航(iOS 26 浮动玻璃胶囊) ---- */
nav.tabbar{
  position:fixed;left:50%;transform:translateX(-50%) translateZ(0);
  bottom:calc(10px + var(--sab, env(safe-area-inset-bottom, 0px)));z-index:40;
  width:min(94vw,540px);
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  backdrop-filter:saturate(180%) blur(22px);
  border:1px solid rgba(255,255,255,.9);
  border-radius:26px;
  box-shadow:0 12px 36px rgba(96,66,128,.16), 0 2px 8px rgba(96,66,128,.08);
  display:flex;padding:6px 6px;gap:2px;
}
.tabbar button{
  flex:1;background:none;border:none;color:var(--ink-3);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:3px;padding:7px 0 5px;
  font-size:10px;font-weight:600;position:relative;transition:.18s;font-family:inherit;border-radius:20px;
}
.tabbar button svg{width:22px;height:22px;transition:.18s}
.tabbar button.active{color:var(--accent)}
.tabbar button.active svg{transform:translateY(-1px) scale(1.08)}
.tabbar button.active::after{
  content:"";position:absolute;top:2px;width:36px;height:26px;border-radius:13px;
  background:rgba(255,107,157,.12);z-index:-1;
}
.tabbar .dot{
  position:absolute;top:1px;right:calc(50% - 23px);min-width:16px;height:16px;border-radius:9px;
  background:var(--grad);color:#fff;font-size:9.5px;font-weight:700;line-height:16px;padding:0 4px;
  box-shadow:0 3px 8px rgba(255,107,157,.45);
}

/* ---- 卡片:默认实心(不支持的浏览器也能读),支持模糊时升级为玻璃 ---- */
.card,.row,.post,.composer,.chart,.hero,.statrow,.elist{
  background:rgba(255,255,255,.97);
  border:1px solid rgba(255,255,255,.88);
  border-radius:var(--r);box-shadow:var(--sh);
}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .card,.row,.post,.composer,.chart,.hero,.statrow,.elist{
    background:rgba(255,255,255,.72);
    -webkit-backdrop-filter:saturate(180%) blur(22px);
    backdrop-filter:saturate(180%) blur(22px);
  }
}
.card{padding:16px;margin-bottom:12px}
.sec{font-size:11px;color:var(--ink-3);font-weight:700;letter-spacing:.8px;
  margin:20px 6px 10px;text-transform:uppercase}
.empty{text-align:center;color:var(--ink-3);font-size:13.5px;padding:46px 20px;line-height:2}
/* 页面最后元素额外留白, 避免贴住浮动导航栏 */
.view .view-tail{margin-bottom:20px}


/* ---- 日常页在线状态条 ---- */
.online-bar{display:flex;align-items:center;gap:9px;background:var(--glass);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid rgba(255,255,255,.88);border-radius:14px;
  padding:10px 14px;margin-bottom:10px;box-shadow:var(--sh-sm);font-size:13px}
.online-bar .oav{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:15px;flex-shrink:0}
.online-bar .oinfo{flex:1;min-width:0}
.online-bar .oname{font-weight:600;color:var(--ink)}
.online-bar .ostate{font-size:11.5px;color:var(--ink-3);margin-top:1px}
.online-bar .oact{color:var(--accent);font-size:12.5px;font-weight:600;cursor:pointer;
  padding:5px 11px;border-radius:999px;background:rgba(255,107,157,.1)}

/* ---- 聊天页 ---- */
#view-chat{display:none;flex-direction:column}
#view-chat.active{display:flex}
.chat-head{background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid rgba(255,255,255,.88);border-radius:14px;padding:11px 14px;margin-bottom:10px;
  box-shadow:var(--sh-sm)}
.chat-peer{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600}
.chat-peer .dot-online{width:8px;height:8px;border-radius:50%;background:#2fb56b;
  box-shadow:0 0 0 3px rgba(47,181,107,.18)}
.chat-peer .dot-off{width:8px;height:8px;border-radius:50%;background:#c7c7cc}

.chat-body{flex:1;min-height:44vh;max-height:58vh;overflow-y:auto;
  display:flex;flex-direction:column;gap:10px;padding:6px 2px 12px}
.chat-body::-webkit-scrollbar{width:0}

.msg{display:flex;gap:8px;align-items:flex-end;max-width:82%}
.msg.me{align-self:flex-end;flex-direction:row-reverse}
.msg .mav{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:14px;flex-shrink:0}
.msg .bubble{background:rgba(255,255,255,.95);border:1px solid rgba(28,28,30,.06);
  border-radius:16px;padding:9px 13px;font-size:14.5px;line-height:1.55;
  word-break:break-word;white-space:pre-wrap;box-shadow:var(--sh-sm)}
.msg.me .bubble{background:var(--grad);color:#fff;border-color:transparent}
.msg .bubble img{max-width:190px;max-height:240px;border-radius:10px;display:block;margin:2px 0}
.msg .mtime{font-size:10px;color:var(--ink-3);margin-top:3px;text-align:right}

.chat-date{text-align:center;font-size:11px;color:var(--ink-3);margin:6px 0}

.chat-bar{position:sticky;bottom:96px;display:flex;gap:8px;align-items:center;
  background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid rgba(255,255,255,.9);border-radius:16px;padding:8px 10px;
  box-shadow:0 -2px 16px rgba(96,66,128,.1);margin-top:8px}
.chat-img{width:36px;height:36px;border:none;background:transparent;color:var(--ink-2);
  cursor:pointer;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.chat-img svg{width:21px;height:21px}
.chat-img:active{background:rgba(28,28,30,.06)}
.chat-input{flex:1;border:none;outline:none;background:rgba(255,255,255,.85);
  border-radius:12px;padding:10px 13px;font-size:14.5px;font-family:inherit;color:var(--ink);
  box-shadow:inset 0 0 0 1px rgba(28,28,30,.07)}
.chat-input:focus{box-shadow:inset 0 0 0 1.5px rgba(255,107,157,.5)}
.chat-send{border:none;background:var(--grad);color:#fff;border-radius:12px;padding:10px 18px;
  font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;flex-shrink:0;
  box-shadow:0 5px 14px rgba(255,107,157,.3)}
.chat-send:active{transform:scale(.96)}
.chat-send:disabled{opacity:.35;box-shadow:none}




/* ---- 长期计划 ---- */
.gl-head{background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid rgba(255,255,255,.88);border-radius:var(--r);
  padding:16px 18px;margin-bottom:12px;box-shadow:var(--sh)}
.gl-title{font-size:17px;font-weight:700}
.gl-sub{font-size:12.5px;color:var(--ink-3);margin-top:3px}

.goal{background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid rgba(255,255,255,.88);border-radius:var(--r);
  padding:15px 16px;margin-bottom:10px;box-shadow:var(--sh)}
.goal.done{opacity:.6}
.goal .gh{display:flex;align-items:flex-start;gap:10px}
.goal .gt{flex:1;font-size:15.5px;font-weight:600;line-height:1.45;word-break:break-word}
.goal.done .gt{text-decoration:line-through;color:var(--ink-3)}
.goal .gbadge{font-size:11px;font-weight:700;padding:2px 8px;border-radius:8px;flex-shrink:0}
.goal .gbadge.d{background:rgba(47,181,107,.15);color:#1d8a50}
.goal .gbadge.t{background:rgba(255,159,10,.15);color:#b45309}
.goal .gmeta{font-size:11.5px;color:var(--ink-3);margin-top:5px}
.goal .gnote{font-size:12.5px;color:var(--ink-2);margin-top:7px;line-height:1.6}
/* 进度条 */
.goal .gbar{height:6px;border-radius:3px;background:rgba(28,28,30,.07);margin-top:10px;overflow:hidden}
.goal .gbar span{display:block;height:100%;border-radius:3px;background:var(--grad);transition:width .3s}
/* 子任务 */
.goal .steps{margin-top:11px;border-top:1px solid var(--line);padding-top:9px}
.goal .step{display:flex;align-items:center;gap:9px;padding:7px 0;font-size:13.5px}
.goal .step .box{width:18px;height:18px;border-radius:6px;border:1.5px solid var(--line-2);
  flex-shrink:0;cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:11px;color:transparent;transition:.15s}
.goal .step.on .box{background:var(--good);border-color:var(--good);color:#fff}
.goal .step .stx{flex:1;word-break:break-word}
.goal .step.on .stx{text-decoration:line-through;color:var(--ink-3)}
.goal .step .sx{background:none;border:none;color:var(--ink-3);font-size:14px;cursor:pointer;padding:2px 6px}
.goal .addstep{display:flex;gap:7px;margin-top:9px}
.goal .addstep input{flex:1;background:rgba(255,255,255,.7);border:1px solid var(--line);
  border-radius:9px;padding:8px 11px;font-size:13px;font-family:inherit;outline:none;color:var(--ink)}
.goal .gact{display:flex;gap:14px;margin-top:11px}
.goal .gact button{background:none;border:none;color:var(--ink-3);font-size:12.5px;
  cursor:pointer;padding:0;font-family:inherit}
.goal .gact button.dg{color:#e04567}

/* ---- 通知 ---- */
.ndot{position:absolute;top:2px;right:2px;min-width:16px;height:16px;border-radius:8px;
  background:#e8618c;color:#fff;font-size:10px;font-weight:700;line-height:16px;
  padding:0 4px;box-shadow:0 2px 6px rgba(232,97,140,.45)}
.ntf{display:flex;gap:10px;padding:11px 0;border-bottom:1px solid var(--line)}
.ntf:last-child{border-bottom:none}
.ntf.unread{background:rgba(255,107,157,.05);margin:0 -8px;padding-left:8px;padding-right:8px;
  border-radius:10px}
.ntf .nico{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;
  justify-content:center;font-size:16px;flex-shrink:0;background:rgba(28,28,30,.05)}
.ntf .nbd{flex:1;min-width:0}
.ntf .ntx{font-size:13.5px;line-height:1.5;word-break:break-word}
.ntf .ntm{font-size:11px;color:var(--ink-3);margin-top:3px}

/* ---- 条目管理页 ---- */
.itm-head{background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid rgba(255,255,255,.88);border-radius:var(--r);
  padding:16px 18px;margin-bottom:12px;box-shadow:var(--sh)}
.itm-title{font-size:17px;font-weight:700}
.itm-sub{font-size:12.5px;color:var(--ink-3);margin-top:3px}
.itm-stat{text-align:center;font-size:12px;color:var(--ink-3);padding:12px 0 20px}
#view-items .elist{background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid rgba(255,255,255,.88);border-radius:var(--r);padding:4px 14px;box-shadow:var(--sh)}
#view-items .elist li{padding:11px 0}
#view-items .elist li .tx{font-size:14px}
.itm-del{color:#e66767 !important;font-size:15px !important;padding:4px 9px !important}

/* ---- 我的(独立页面) ---- */
.mine-page{background:var(--glass);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid rgba(255,255,255,.88);border-radius:var(--r);box-shadow:var(--sh);
  padding:20px 18px;margin-bottom:12px}
.mine-page h2{font-size:19px;font-weight:700;margin:0 0 4px}
.mine-page .sb{font-size:12.5px;color:var(--ink-3);margin-bottom:16px}
.mine-page .acc-sec{background:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.9);
  border-radius:14px;padding:14px;margin-bottom:14px}
.mine-page .field,.mine-page .btn{font-family:inherit}
/* 退出登录区域:额外底部留白,避免被导航栏挡住 */
.mine-page .logout-area{padding-bottom:30px}

/* ---- 转盘 ---- */
.stage{position:relative;width:min(74vw,310px);aspect-ratio:1;margin:6px auto 22px}
.stage canvas{width:100%;height:100%;display:block;border-radius:50%;
  filter:drop-shadow(0 14px 34px rgba(96,66,128,.22))}
.pointer{position:absolute;top:-9px;left:50%;transform:translateX(-50%);font-size:19px;z-index:5;
  user-select:none;filter:drop-shadow(0 3px 6px rgba(255,107,157,.5))}
.spinBtn{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:25%;aspect-ratio:1;border-radius:50%;border:none;cursor:pointer;
  background:var(--grad);color:#fff;font-weight:800;font-size:clamp(12px,3.2vw,14.5px);
  box-shadow:0 8px 22px rgba(255,107,157,.45), inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .12s;z-index:4;font-family:inherit;letter-spacing:.5px;
}
.spinBtn:active{transform:translate(-50%,-50%) scale(.92)}
.spinBtn:disabled{opacity:.35;cursor:default;box-shadow:none}

.statrow{display:flex;overflow:hidden;margin-bottom:4px}
.statrow div{flex:1;padding:15px 8px;text-align:center;border-right:1px solid var(--line)}
.statrow div:last-child{border-right:none}
.statrow .n{font-size:22px;font-weight:800;line-height:1.15;font-variant-numeric:tabular-nums}
.statrow .l{font-size:11px;color:var(--ink-3);margin-top:3px;font-weight:500}
.statrow .n.w{background:linear-gradient(135deg,#ffb04d,#ff8a3d);-webkit-background-clip:text;background-clip:text;color:transparent}
.statrow .n.g{background:linear-gradient(135deg,#4ed88e,#2fb56b);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---- 分类 chips ---- */
.chips{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 12px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex-shrink:0;border:1px solid rgba(255,255,255,.9);background:var(--glass);color:var(--ink-2);
  padding:7px 15px;border-radius:999px;font-size:12.5px;font-weight:600;cursor:pointer;transition:.18s;
  font-family:inherit;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:var(--sh-sm)}
.chip:active{transform:scale(.96)}
.chip.active{background:var(--grad);color:#fff;border-color:transparent;
  box-shadow:0 6px 18px rgba(255,107,157,.34)}

/* ---- 条目行 ---- */
.row{padding:15px 16px;margin-bottom:10px}
.row .hd{display:flex;align-items:flex-start;gap:10px}
.row .em{font-size:17px;line-height:1.42;flex-shrink:0}
.row .bd{flex:1;min-width:0}
.row .t{font-size:14.5px;font-weight:600;line-height:1.45;word-break:break-word}
.row .m{font-size:11.5px;color:var(--ink-3);margin-top:5px}
.row .note{font-size:12.5px;color:var(--ink-2);margin-top:8px;padding:8px 11px;
  background:var(--grad-soft);border-radius:11px;line-height:1.6;word-break:break-word}
.row.sel{box-shadow:0 0 0 2px rgba(255,107,157,.5),var(--sh)}

.ops{display:flex;gap:9px;margin-top:12px}
.ops button{flex:1;border:none;border-radius:13px;padding:10px;font-size:13px;font-weight:600;cursor:pointer;
  background:rgba(28,28,30,.05);color:var(--ink-2);transition:.18s;font-family:inherit}
.ops button:active{transform:scale(.97)}
.ops .go{background:linear-gradient(135deg,#5fe0a0,#2fb56b);color:#fff;
  box-shadow:0 6px 16px rgba(47,181,107,.3)}

/* ---- 朋友圈 ---- */
.post{padding:16px;margin-bottom:11px}
.post .ph{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.post .av{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:16px;flex-shrink:0;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.75)}
.post .av.a{background:linear-gradient(135deg,#ffd9e5,#ffb7ce)}
.post .av.b{background:linear-gradient(135deg,#dce9ff,#bcd6ff)}
.post .av.c{background:linear-gradient(135deg,#eae3ff,#d8cbff)}
.post .who{font-size:13.5px;font-weight:700}
.post .when{font-size:11px;color:var(--ink-3);margin-top:1px}
.post .tx{font-size:14.5px;line-height:1.7;white-space:pre-wrap;word-break:break-word}
.post .imgs{display:grid;gap:5px;margin-top:11px}
.post .imgs.n1{grid-template-columns:1fr;max-width:72%}
.post .imgs.n2{grid-template-columns:1fr 1fr}
.post .imgs.n3{grid-template-columns:repeat(3,1fr)}
.post .imgs img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:13px;cursor:pointer;
  background:rgba(28,28,30,.04)}
.post .imgs.n1 img{aspect-ratio:auto;max-height:330px;object-fit:contain;background:transparent}
.post .acts{display:flex;gap:16px;margin-top:12px;padding-top:11px;border-top:1px solid var(--line)}
.post .acts button{background:none;border:none;color:var(--ink-3);font-size:12.5px;font-weight:600;
  cursor:pointer;padding:0;font-family:inherit;transition:.18s}
.post .acts button:active{color:var(--accent)}
.post.pin{box-shadow:0 0 0 1.5px rgba(255,209,102,.55),var(--sh)}
.pintag{font-size:10px;font-weight:700;color:#b45309;background:rgba(255,209,102,.28);
  border-radius:6px;padding:1.5px 6px;margin-left:6px;vertical-align:1px}
.tagw{color:var(--accent);font-weight:700;cursor:pointer}
/* 长文折叠:超过约 6 行(140 字)时截断,点「展开」看全文;安卓 WebView 用 -webkit- 前缀 */
.post .tx.fold{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;overflow:hidden}
.foldbtn{background:none;border:none;color:var(--accent);font-size:12.5px;font-weight:700;
  cursor:pointer;padding:6px 0 0;font-family:inherit}
.foldbtn:active{opacity:.65}
/* 点赞:空心=未赞,实心红=已赞 */
.post .acts button.like{display:inline-flex;align-items:center}
.post .acts button.like svg{margin-right:4px;flex-shrink:0}
.post .acts button.like.on{color:#ff4d6d}

/* 发动态 */
.composer{padding:15px 16px;margin-bottom:13px;transition:box-shadow .2s}
.composer:focus-within{box-shadow:0 14px 38px rgba(255,107,157,.16), 0 0 0 1.5px rgba(255,107,157,.30)}
.composer textarea{
  width:100%;border:none;outline:none;resize:none;font-size:15px;line-height:1.65;
  font-family:inherit;color:var(--ink);background:transparent;min-height:48px;max-height:200px;
}
.composer textarea::placeholder{color:var(--ink-3)}
.thumbs{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.thumb{position:relative;width:68px;height:68px;border-radius:14px;overflow:hidden;background:rgba(28,28,30,.05)}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb .x{position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:50%;
  background:rgba(20,20,24,.6);color:#fff;border:none;font-size:11px;cursor:pointer;line-height:1;font-family:inherit}
.addimg{width:68px;height:68px;border-radius:14px;border:1.5px dashed rgba(28,28,30,.18);background:transparent;
  color:var(--ink-3);font-size:23px;cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-family:inherit;transition:.18s}
.addimg:active{background:rgba(255,107,157,.08);border-color:rgba(255,107,157,.4)}
.cfoot{display:flex;align-items:center;justify-content:space-between;margin-top:12px;
  padding-top:11px;border-top:1px solid var(--line)}
.whopick{display:flex;gap:6px}
/* 发布框左下角的"是谁在发"。旧版用了这个类但 CSS 里没定义,
   导致它没有内边距/圆角,文字和头像会挤成一团、被右侧图片顶到。 */
.whochip{display:inline-flex;align-items:center;gap:4px;flex-shrink:0;
  border-radius:999px;padding:6px 13px;font-size:12px;font-weight:600;
  color:var(--ink-2);line-height:1.2;white-space:nowrap;max-width:60vw;
  overflow:hidden;text-overflow:ellipsis}
.wpick{border:1px solid rgba(28,28,30,.1);background:rgba(255,255,255,.6);color:var(--ink-2);border-radius:999px;
  padding:6px 13px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;transition:.18s}
.wpick.on{background:var(--grad);color:#fff;border-color:transparent;
  box-shadow:0 5px 14px rgba(255,107,157,.32)}
.send{border:none;background:var(--grad);color:#fff;border-radius:999px;padding:9px 22px;font-size:13.5px;
  font-weight:700;cursor:pointer;font-family:inherit;transition:.18s;
  box-shadow:0 7px 20px rgba(255,107,157,.38)}
.send:active{transform:scale(.96)}
.send:disabled{opacity:.3;box-shadow:none;cursor:default}

/* ---- 成长记 ---- */
.hero{padding:27px 16px;text-align:center;margin-bottom:13px;
  background:linear-gradient(135deg,rgba(255,255,255,.85),rgba(255,240,247,.85))}
.hero .big{font-size:46px;font-weight:800;line-height:1;letter-spacing:-1.5px;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  font-variant-numeric:tabular-nums}
.hero .sb{font-size:12.5px;color:var(--ink-3);margin-top:8px;font-weight:500}
.chart{padding:17px 15px 13px;margin-bottom:12px}
.chart h3{font-size:13px;font-weight:700;margin:0 0 15px}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.gl{stroke:rgba(28,28,30,.07);stroke-width:1}
.ax{fill:var(--ink-3);font-size:9px;font-variant-numeric:tabular-nums}
.cbrow{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-size:12.5px}
.cbrow .nm{width:54px;flex-shrink:0;color:var(--ink-2);font-weight:600}
.cbrow .tk{flex:1;height:15px;background:rgba(28,28,30,.05);border-radius:8px;overflow:hidden}
.cbrow .fl{height:100%;border-radius:8px;transition:width .4s cubic-bezier(.22,.8,.36,1)}
.cbrow .vl{width:24px;text-align:right;color:var(--ink-2);font-weight:600;font-variant-numeric:tabular-nums;flex-shrink:0}
.tl{position:relative;padding-left:22px;margin-top:4px}
.tl::before{content:"";position:absolute;left:4px;top:8px;bottom:8px;width:1.5px;
  background:linear-gradient(180deg,rgba(255,107,157,.5),rgba(178,138,255,.25))}
.tle{position:relative;margin-bottom:17px}
.tle::before{content:"";position:absolute;left:-22px;top:5px;width:9px;height:9px;border-radius:50%;
  background:var(--grad);box-shadow:0 0 0 3px rgba(255,107,157,.15)}
.tle .d{font-size:11px;color:var(--ink-3);margin-bottom:3px;font-weight:600}
.tle .t{font-size:14px;line-height:1.5;font-weight:500}
.tle .nt{font-size:12.5px;color:var(--ink-2);margin-top:6px;line-height:1.65;
  padding:8px 11px;background:var(--grad-soft);border-radius:11px}

/* ---- 提醒 ---- */
.alert{background:linear-gradient(135deg,rgba(255,249,235,.95),rgba(255,240,214,.9));
  border:1px solid rgba(255,196,84,.4);border-radius:var(--r);
  padding:13px 15px;margin-bottom:12px;font-size:12.5px;line-height:1.65;color:#8a5a00;
  box-shadow:0 8px 22px rgba(255,159,10,.12)}
.alert b{color:#d97706}

/* ---- 弹窗 ---- */
.mask{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(28,28,30,.35);backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);display:none;align-items:flex-end;justify-content:center;z-index:60}
.mask.show{display:flex;animation:fade .22s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media(min-width:520px){.mask{align-items:center}}
.sheet{background:rgba(255,255,255,.97);
  -webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px);
  border:1px solid rgba(255,255,255,.95);border-radius:30px 30px 0 0;width:100%;max-width:560px;
  max-height:88vh;overflow:auto;padding:22px 20px max(22px,var(--sab, env(safe-area-inset-bottom, 0px)));
  box-shadow:0 -12px 44px rgba(96,66,128,.22);animation:slideUp .3s cubic-bezier(.22,.8,.36,1)}
@keyframes slideUp{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
@media(min-width:520px){.sheet{border-radius:30px}}
.sheet h2{margin:0 0 5px;font-size:17px;font-weight:700}
.sheet .sb{font-size:12.5px;color:var(--ink-3);margin-bottom:16px}
.close{position:absolute;top:16px;right:18px;background:rgba(28,28,30,.06);border:none;color:var(--ink-2);
  width:30px;height:30px;border-radius:50%;font-size:14px;cursor:pointer;font-family:inherit}
.field{background:rgba(255,255,255,.85);border:1px solid rgba(28,28,30,.09);border-radius:15px;color:var(--ink);
  padding:12px 15px;font-size:14.5px;outline:none;width:100%;font-family:inherit;transition:.18s;
  box-shadow:inset 0 1px 2px rgba(28,28,30,.03)}
.field:focus{border-color:rgba(255,107,157,.5);box-shadow:0 0 0 3.5px rgba(255,107,157,.13)}
textarea.field{resize:vertical;min-height:84px;line-height:1.65}
.btn{border:none;border-radius:15px;padding:12px 18px;font-size:14px;font-weight:600;cursor:pointer;
  background:rgba(28,28,30,.055);color:var(--ink);font-family:inherit;transition:.18s}
.btn:active{transform:scale(.97)}
.btn.pri{background:var(--grad);color:#fff;box-shadow:0 8px 22px rgba(255,107,157,.32)}
.btn.full{width:100%}
.brow{display:flex;gap:10px;margin-top:11px}
.brow .btn{flex:1}
.frow{display:flex;gap:10px;margin-bottom:11px}
.picks{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.pick{border:1px solid rgba(28,28,30,.12);background:rgba(255,255,255,.6);color:var(--ink-2);
  border-radius:999px;padding:7px 15px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit;transition:.18s}
.pick.on{background:var(--grad);color:#fff;border-color:transparent}
.pick-lb{font-size:12px;color:var(--ink-3);align-self:center;margin-right:2px}
.hint{color:var(--ink-3);font-size:12px;line-height:1.7;margin:10px 0}
  /* ---- 账户/资料 ---- */
  .acc-sec{background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.9);border-radius:16px;
    padding:14px;margin-bottom:14px}
  .acc-sec-title{font-size:12.5px;font-weight:700;color:var(--ink-2);margin-bottom:11px;
    display:flex;align-items:center;gap:7px}
  .acc-hint{font-size:10.5px;font-weight:500;color:var(--ink-3);background:rgba(28,28,30,.05);
    border-radius:6px;padding:2px 7px}
  .prof-row{display:flex;gap:12px;margin-bottom:11px;align-items:flex-start}
  .avatar-pick{width:56px;height:56px;border-radius:18px;display:flex;align-items:center;justify-content:center;
    font-size:26px;flex-shrink:0;transition:.2s;background:#fde8f0}
  .avatar-colors{display:flex;gap:6px;flex-wrap:wrap}
  .ac-dot{width:22px;height:22px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:.15s}
  .ac-dot.on{border-color:var(--ink);transform:scale(1.12)}
  .avatar-emojis{display:flex;gap:4px;flex-wrap:wrap}
  .ae-btn{width:30px;height:30px;border-radius:9px;border:1.5px solid transparent;background:rgba(28,28,30,.04);
    font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s;
    font-family:inherit;padding:0}
  .ae-btn.on{border-color:var(--accent);background:rgba(255,107,157,.1)}
  .acc-item{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
  .acc-item:last-child{border-bottom:none}
  .acc-av{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;
    font-size:19px;flex-shrink:0}
  .acc-info{flex:1;min-width:0}
  .acc-name{font-size:14px;font-weight:600}
  .acc-sub{font-size:11.5px;color:var(--ink-3);margin-top:2px}
  .acc-badge{font-size:10px;font-weight:700;color:#b45309;background:rgba(255,209,102,.28);
    border-radius:6px;padding:1.5px 6px}
  .acc-ops{display:flex;gap:5px}
  .acc-ops button{border:none;background:rgba(28,28,30,.05);color:var(--ink-2);border-radius:8px;
    padding:6px 10px;font-size:12px;cursor:pointer;font-family:inherit}
  .acc-ops button.dg{background:rgba(255,107,107,.12);color:#e04545}
  .on-dot{display:inline-block;width:7px;height:7px;border-radius:50%;
    background:#2fb56b;margin-right:6px;vertical-align:1px;
    box-shadow:0 0 0 3px rgba(47,181,107,.18)}
  .on-dot.off{background:#c7c7cc;box-shadow:none}

.elist{list-style:none;padding:8px 14px;margin:0 0 14px}
.elist li{display:flex;align-items:center;gap:9px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.elist li:last-child{border-bottom:none}
.elist li .tx{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.elist li button{background:none;border:none;color:var(--ink-3);font-size:14px;cursor:pointer;padding:3px 7px;font-family:inherit}
.elist li button.dl{color:#ff6b6b}
.stag{font-size:10px;font-weight:700;border-radius:7px;padding:2px 7px;flex-shrink:0}
.stag.d{background:rgba(255,159,10,.16);color:#b45309}
.stag.f{background:rgba(47,181,107,.15);color:#1d8a50}

/* ---- 登录门禁 ---- */
/* 门禁默认隐藏(display:none):由 JS 判断后再显示
   这样"已登录"的用户打开 App 不会闪一下登录页 */
#gate{position:fixed;top:0;right:0;bottom:0;left:0;z-index:95;display:none;
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:
    radial-gradient(70vw 46vh at 12% -6%, rgba(255,182,205,.5), transparent 62%),
    radial-gradient(64vw 44vh at 92% 2%, rgba(178,138,255,.34), transparent 62%),
    linear-gradient(180deg,#ffffff 0%,#fdfaff 42%,#f8f8ff 100%);
  align-items:center;justify-content:center;padding:24px 24px calc(24px + var(--sab,0px))}
#gate.show{display:flex}
#gate.hide{display:none}
/* 兜底:JS 未就绪时,3 秒后自动显示门禁(防止 JS 挂了看不到登录页) */
@keyframes gateFallback{to{display:flex}}
body:not(.ready) #gate{animation:gateFallback 0s 3s forwards}
#gate.ready{animation:fade .3s ease}
.gate-card{width:100%;max-width:360px;text-align:center}
.gate-logo{width:72px;height:72px;margin:0 auto 20px;border-radius:24px;
  background:var(--grad);display:flex;align-items:center;justify-content:center;
  box-shadow:0 14px 36px rgba(255,107,157,.4)}
.gate-logo svg{width:40px;height:40px;color:#fff}
.gate-title{font-size:26px;font-weight:800;margin:0 0 6px;letter-spacing:1px;
  background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.gate-sub{font-size:13.5px;color:var(--ink-3);margin:0 0 30px}
.gate-form{display:flex;flex-direction:column;gap:11px}
.gate-err{color:#e04545;font-size:12.5px;min-height:17px;text-align:left;padding-left:4px}
.gate-tip{font-size:12px;color:var(--ink-3);margin-top:22px}
.gate-form .btn{padding:14px;font-size:15.5px;border-radius:16px}

#viewer{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(12,12,16,.94);z-index:90;display:none;
  align-items:center;justify-content:center;padding:20px}
#viewer.show{display:flex}
#viewer img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px}

/* ---- 动态详情(全屏覆盖层,从右侧滑入) ---- */
#detail{position:fixed;top:0;right:0;bottom:0;left:0;z-index:75;display:none;flex-direction:column;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px)}
#detail.show{display:flex;animation:slideR .3s cubic-bezier(.22,.8,.36,1)}
@keyframes slideR{from{transform:translateX(100%)}to{transform:none}}
#detail .dhead{display:flex;align-items:center;justify-content:space-between;flex-shrink:0;
  padding:clamp(10px, var(--sat, env(safe-area-inset-top, 0px)), 60px) 16px 12px;
  border-bottom:1px solid var(--line);background:rgba(255,255,255,.96)}
#detail .dhead .dtitle{font-size:15.5px;font-weight:700}
#detail .dbody{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px 16px 22px}
#detail .dbody .post{max-width:560px;margin-left:auto;margin-right:auto}
#detail .imgs.n1 img{max-height:70vh}
#detail .dsrc{font-size:11.5px;color:var(--ink-3);margin-top:11px;line-height:1.7;word-break:break-all}
#detail .dsrc .dsep{margin:0 6px;opacity:.5}
#detail .dua{font-size:10.5px;color:var(--ink-3);opacity:.75;margin-top:4px;word-break:break-all;line-height:1.6}
#detail .cbar{display:flex;flex-shrink:0;align-items:center;
  gap:9px;padding:10px 14px calc(10px + var(--sab, env(safe-area-inset-bottom, 0px)));
  border-top:1px solid var(--line);background:rgba(255,255,255,.96)}
#detail .cbar .field{flex:1}
#detail .cbar .btn{flex-shrink:0;padding:11px 18px}
/* 评论区 */
.cmt{display:flex;gap:9px;padding:10px 0;border-bottom:1px solid var(--line)}
.cmt:last-child{border-bottom:none}
.cmt .cav{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:14px;flex-shrink:0;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.75)}
.cmt .chd{display:flex;align-items:baseline;gap:7px}
.cmt .cn{font-size:12.5px;font-weight:700}
.cmt .ct{font-size:11px;color:var(--ink-3)}
.cmt .cdel{background:none;border:none;color:var(--ink-3);font-size:11px;cursor:pointer;
  font-family:inherit;padding:0;margin-left:auto}
.cmt .cx{font-size:13.5px;line-height:1.6;margin-top:3px;word-break:break-word;white-space:pre-wrap}

.batchbar{position:fixed;bottom:calc(96px + var(--sab, env(safe-area-inset-bottom, 0px)));left:50%;transform:translateX(-50%);z-index:45;
  background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px);
  border:1px solid rgba(255,255,255,.95);border-radius:18px;box-shadow:0 14px 36px rgba(96,66,128,.2);
  padding:9px 11px;display:none;gap:8px;align-items:center}
.batchbar.show{display:flex}
.batchbar .cnt{font-size:12px;color:var(--ink-2);padding:0 6px;white-space:nowrap;font-weight:600}
.batchbar button{border:none;background:rgba(28,28,30,.06);color:var(--ink);border-radius:11px;
  padding:8px 12px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap}
.batchbar button.dg{background:rgba(255,107,107,.13);color:#e04545}

/* ========== 老 WebView 兼容兜底(Chrome < 84/88) ========== */
/* env(safe-area-inset-*) 不支持时,给顶部留出状态栏高度,避免被切 */
@supports not (padding: env(safe-area-inset-top)){
  header{padding-top:30px}
  body{padding-top:0}
  nav.tabbar{bottom:14px}
  #toast{bottom:100px}
}
@supports not (gap: 1px){
  .tabbar button{margin:0 1.5px}
  .ops button{margin-right:8px}
  .ops button:last-child{margin-right:0}
  .brow .btn{margin-right:9px}
  .brow .btn:last-child{margin-right:0}
  .frow>*{margin-right:9px}
  .frow>*:last-child{margin-right:0}
  .chip{margin-right:7px}
  .hbtns>*{margin-left:4px}
  .whopick>*{margin-right:5px}
  .post .acts button{margin-right:15px}
  .picks>*{margin-right:7px}
  .thumbs>*{margin-right:7px}
  .batchbar>*{margin-right:7px}
  .batchbar>*:last-child{margin-right:0}
  .statrow div{padding:15px 4px}
  #detail .cbar>*{margin-right:9px}
  #detail .cbar>*:last-child{margin-right:0}
  .cmt>*{margin-right:9px}
  .cmt>*:last-child{margin-right:0}
  .cmt .chd>*{margin-right:7px}
}
@supports not (aspect-ratio: 1 / 1){
  .stage{height:min(74vw,310px)}
  .stage canvas{height:100%}
}
@supports not (height: 100dvh){
  body{min-height:100vh}
}
/* 老安卓对 border-radius+overflow 裁剪有 bug,强制 GPU 图层 */
.post .imgs img,.thumb{transform:translateZ(0)}
.stage canvas{transform:translateZ(0)}

#confetti{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:70}
#toast{position:fixed;bottom:calc(102px + var(--sab, env(safe-area-inset-bottom, 0px)));left:50%;
  transform:translateX(-50%) translateY(10px);
  background:rgba(28,28,30,.88);backdrop-filter:blur(12px);color:#fff;padding:10px 19px;border-radius:999px;
  font-size:13px;font-weight:600;opacity:0;transition:.25s;pointer-events:none;z-index:80;white-space:nowrap;
  box-shadow:0 10px 30px rgba(28,28,30,.25)}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---- 媒体: 语音/视频 ---- */
.thumb-media{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font-size:26px;background:rgba(28,28,30,.06)}
.media-video{width:100%;max-height:60vh;border-radius:14px;background:#000;display:block}
/* 音频必须给【显式像素宽度】。
   原因: .bubble 的宽度由内容决定(shrink-to-fit),
   子元素再用 width:100% 回推父宽度 → 循环依赖 → 浏览器解析成 0,
   表现为气泡里一片空白、点不到播放键。 */
.media-audio{padding:2px 0}
.media-audio audio{width:210px;max-width:100%;height:36px;display:block}
.post .imgs video{width:100%;border-radius:12px}
.bubble audio{width:190px;max-width:100%;height:34px;display:block}
.bubble video{max-width:190px;border-radius:10px;display:block}