/* ===================================================================
   缘圈 —— 基础样式 / 设计 token
   主题色：粉（--c-accent 主粉 / --c-accent-2 浅粉，用于渐变第二色）
   =================================================================== */

:root{
  --c-accent:#E8368A;
  --c-accent-soft:#FFE7F2;
  --c-accent-2:#FF7DB6;
  --c-accent-2-soft:#FFF0F7;

  --bg:#FFF7FA;
  --bg-elev:#FFFFFF;
  --card:#FFFFFF;
  --card-2:#FFF4F8;
  --text:#1F141A;
  --text-2:#5C4A54;
  --sub:#9A8490;
  --line:#F7E5EE;
  --line-strong:#EFD5E2;

  --ok:#17A34A;
  --warn:#E08A00;
  --danger:#E5484D;
  --info:#2A7FFF;

  --r-sm:8px;
  --r-md:12px;
  --r-lg:16px;
  --r-xl:22px;
  --r-full:999px;

  --sh-1:0 1px 2px rgba(120,20,70,.05), 0 4px 14px rgba(120,20,70,.06);
  --sh-2:0 2px 8px rgba(120,20,70,.08), 0 12px 32px rgba(120,20,70,.11);

  --tab-h:58px;
  --top-h:52px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-t:env(safe-area-inset-top,0px);

  --ff:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
}

html[data-theme="dark"]{
  --c-accent:#FF6FB0;
  --c-accent-soft:#3B1E2D;
  --c-accent-2:#FFA6CB;
  --c-accent-2-soft:#3B2431;

  --bg:#141013;
  --bg-elev:#1C161B;
  --card:#1C161B;
  --card-2:#251A21;
  --text:#F7EFF3;
  --text-2:#C9B7C1;
  --sub:#95818C;
  --line:#2F2229;
  --line-strong:#3E2E38;

  --ok:#3DD68C;
  --warn:#F0B429;
  --danger:#FF6369;
  --info:#6BA6FF;

  --sh-1:0 1px 2px rgba(0,0,0,.4);
  --sh-2:0 8px 28px rgba(0,0,0,.55);
}

*,*::before,*::after{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;}
body{
  margin:0;
  font-family:var(--ff);
  font-size:15px;
  line-height:1.55;
  color:var(--text);
  background:var(--bg);
  overscroll-behavior-y:none;
  -webkit-font-smoothing:antialiased;
}

/* 浮层打开时锁住底层页面（配对逻辑见 core/ui.js 的 lockScroll / unlockScroll）。
   ⚠️ 光加 overflow:hidden 在部分 WebView 上不管用，所以同时把 body 固定住，
      靠 inline 的 top 补偿偏移，关闭时再 scrollTo 回去 —— 不然会跳回页面顶部。 */
html.lock-scroll,body.lock-scroll{overflow:hidden;}
body.lock-scroll{position:fixed;left:0;right:0;width:100%;}
img{max-width:100%;display:block;}
button,input,textarea,select{font:inherit;color:inherit;}
a{color:var(--c-accent);text-decoration:none;}
h1,h2,h3,h4,p{margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}
hr{border:none;border-top:1px solid var(--line);margin:12px 0;}

/* ---------- 布局骨架 ---------- */
#app{
  max-width:620px;
  margin:0 auto;
  min-height:100%;
  display:flex;
  flex-direction:column;
  background:var(--bg);
  position:relative;
}
.topbar{
  position:sticky;top:0;z-index:40;
  padding:calc(var(--safe-t) + 8px) 16px 10px;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(180%) blur(14px);
  display:flex;align-items:center;gap:10px;
  min-height:var(--top-h);
}
.topbar-title{font-size:19px;font-weight:700;letter-spacing:-.2px;flex:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.topbar-sub{font-size:12px;color:var(--sub);font-weight:500;}
.topbar-actions{display:flex;gap:8px;align-items:center;}

.view{
  flex:1;
  padding:0 14px calc(var(--tab-h) + var(--safe-b) + 22px);
}
.view.no-tab{padding-bottom:calc(var(--safe-b) + 24px);}
/* 页面自带底部操作条（帖子详情等无 tab 的页面）时，给内容让出高度 */
.view.has-bar{padding-bottom:calc(70px + var(--safe-b) + 18px);}
/* 输入条上挂了待发送的配图时会变高，正文要给够底部留白，否则最后一条评论被压住 */
.view.has-bar.has-pic{padding-bottom:calc(136px + var(--safe-b) + 18px);}

/* 固定底部输入/操作条（挂 body，路由切换时自动清理） */
.inputbar{
  position:fixed;left:0;right:0;bottom:0;z-index:45;
  max-width:620px;margin:0 auto;
  display:flex;flex-direction:column;gap:7px;
  padding:9px 12px calc(9px + var(--safe-b));
  background:color-mix(in srgb,var(--bg-elev) 94%,transparent);
  backdrop-filter:saturate(180%) blur(16px);
  border-top:1px solid var(--line);
}
.inputbar-row{display:flex;gap:8px;align-items:center;}
/* 待发送的评论配图 */
.inputbar-preview{display:flex;gap:6px;overflow-x:auto;padding-bottom:2px;}
.inputbar-preview .pv{position:relative;width:52px;height:52px;border-radius:var(--r-sm);
  overflow:hidden;background:var(--card-2);flex:none;}
.inputbar-preview .pv img{width:100%;height:100%;object-fit:cover;}
.inputbar-preview .pv .x{position:absolute;right:2px;top:2px;width:17px;height:17px;border-radius:50%;
  background:rgba(0,0,0,.6);color:#fff;font-size:11px;line-height:1;border:none;padding:0;
  display:flex;align-items:center;justify-content:center;cursor:pointer;}
.inputbar .pic{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--line-strong);
  background:var(--card-2);font-size:16px;line-height:1;cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;}

.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  max-width:620px;margin:0 auto;
  height:calc(var(--tab-h) + var(--safe-b));
  padding-bottom:var(--safe-b);
  display:flex;
  background:color-mix(in srgb, var(--bg-elev) 92%, transparent);
  backdrop-filter:saturate(180%) blur(16px);
  border-top:1px solid var(--line);
}
.tabbar-item{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;font-size:10.5px;color:var(--sub);background:none;border:none;
  padding:0;cursor:pointer;transition:color .15s;
  /* v1.9.0：消息未读的小红点要相对**本项**定位。
     原来没有 relative，红点是相对整个固定导航栏算的，会飘到左上角去。 */
  position:relative;
}
.tabbar-item i{font-style:normal;font-size:20px;line-height:1;
  filter:grayscale(1) opacity(.55);transition:.15s;}
.tabbar-item.on{color:var(--c-accent);font-weight:600;}
.tabbar-item.on i{filter:none;transform:translateY(-1px);}
.tabbar-dot{position:absolute;transform:translate(14px,-12px);
  width:7px;height:7px;border-radius:50%;background:var(--danger);display:none;}
.tabbar-item.has-dot .tabbar-dot{display:block;}

/* ---------- 通用文本 ---------- */
.muted{color:var(--sub);}
.dim{color:var(--text-2);}
.small{font-size:12.5px;}
.tiny{font-size:11.5px;}
.bold{font-weight:600;}
.strong{font-weight:700;}
.center{text-align:center;}
.ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.clamp3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
.row{display:flex;align-items:center;gap:8px;}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.col{display:flex;flex-direction:column;}
.wrap{flex-wrap:wrap;}
.grow{flex:1;min-width:0;}
.gap4{gap:4px}.gap6{gap:6px}.gap10{gap:10px}.gap14{gap:14px}
.mt4{margin-top:4px}.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt24{margin-top:24px}
.mb8{margin-bottom:8px}.mb12{margin-bottom:12px}.mb16{margin-bottom:16px}
.hidden{display:none !important;}

/* ---------- 动画 ---------- */
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
.anim-in{animation:fadeUp .26s ease both;}
.anim-pop{animation:pop .18s ease both;}