/* ============================================================
   XJSpace - 黑客风主样式
   布局: 顶部 header 固定 / 底部 tabbar 固定 / 中部 view 滚动
   ============================================================ */

:root{
  --bg:#0a0e0d;
  --bg2:#0f1513;
  --panel:#111a17;
  --panel2:#16211d;
  --line:#1e2f28;
  --green:#00ff9c;
  --cyan:#00e5ff;
  --red:#ff2e4d;
  --amber:#ffb340;
  --txt:#d8f5e8;
  --dim:#7fa697;
  --dim2:#4d6b5f;
  --header-h:52px;
  --tab-h:56px;
  --safe-b:env(safe-area-inset-bottom, 0px);
  --safe-t:env(safe-area-inset-top, 0px);
  --mono:"Share Tech Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"DejaVu Sans Mono","Noto Sans Mono CJK SC","WenQuanYi Micro Hei",monospace;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden}
body{
  background:var(--bg);color:var(--txt);
  font-family:var(--mono);font-size:14px;line-height:1.5;
  overscroll-behavior:none;
}

/* ---------- 全局扫描线 ---------- */
#scanlines{
  position:fixed;inset:0;z-index:9999;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(0,255,156,.035) 0 1px,transparent 1px 3px);
  mix-blend-mode:screen;opacity:.5;
}
#scanlines.off{display:none}

/* ---------- 应用骨架 ---------- */
#app{
  position:fixed;inset:0;display:flex;flex-direction:column;
  height:100dvh;padding-top:var(--safe-t);
}

/* ---------- 顶部 ---------- */
#header{
  flex:0 0 var(--header-h);height:var(--header-h);
  display:flex;align-items:center;gap:10px;padding:0 12px;
  background:linear-gradient(180deg,#0d1512,#0a0e0d);
  border-bottom:1px solid var(--line);
  box-shadow:0 0 18px rgba(0,255,156,.08);
  z-index:100;
}
#header .h-title{
  font-size:16px;letter-spacing:3px;color:var(--green);
  text-shadow:0 0 8px rgba(0,255,156,.55);white-space:nowrap;
  /* 站点名是后台可改的。名字一长, nowrap 会让它挤压右侧图标、甚至撑破头部;
     而 #view 的 overflow-x:hidden 会把溢出部分【静默裁掉】, 根本看不出问题在哪。
     min-width:0 允许 flex 收缩(flex 项默认 min-width:auto 不肯收缩),
     再配 ellipsis, 超长名显示成 "XJSPace…" 而不是挤坏布局。 */
  min-width:0;overflow:hidden;text-overflow:ellipsis;
}
#header .h-back{color:var(--green);font-size:18px;padding:2px 8px;cursor:pointer;border:1px solid transparent;position:relative}
#header .h-back:active{background:var(--panel)}
#header .h-spacer{flex:1}
#header .h-icon{
  color:var(--dim);font-size:16px;padding:6px;cursor:pointer;position:relative;
}

/* ── 头部按钮触摸区扩展 ──
   返回键原本 34×26px、图标 28×31px, 远小于建议的 44×44, 容易点不中。
   头部总高只有 52px, 直接加 padding 会把布局撑开、间距变乱,
   所以用伪元素向外扩展可点区域 —— 布局零变化, 手指更容易命中。
   只向【外侧】扩展(h-back 向左 / h-icon 向右), 绝不覆盖相邻元素,
   否则搜索框边缘就会被盖住点不到。 */
#header .h-back::after{content:'';position:absolute;left:-8px;right:0;top:-10px;bottom:-10px}
#header .h-icon::after{content:'';position:absolute;left:0;right:-8px;top:-10px;bottom:-10px}
#header .h-icon:active{color:var(--green)}

/* 搜索栏 */
.searchbar{
  flex:1;display:flex;align-items:center;gap:6px;
  background:var(--panel);border:1px solid var(--line);border-radius:20px;
  padding:4px 4px 4px 12px;
  /* 搜索栏居中占满 header, 与抖音/小红书一致 */
  max-width:100%;margin:0 auto;
}
.searchbar:focus-within{
  border-color:var(--green);
  box-shadow:0 0 10px rgba(0,255,156,.18);
}
.searchbar input{
  flex:1;background:transparent;border:0;outline:0;color:var(--txt);
  font-family:var(--mono);font-size:13px;min-width:0;
}
.searchbar input::placeholder{color:var(--dim2)}
.searchbar .s-ico{
  color:var(--green);font-size:15px;line-height:1;
  cursor:pointer;padding:2px 2px 2px 0;flex:0 0 auto;
}
/* 清空按钮 */
.searchbar .s-clear{
  flex:0 0 auto;display:none;color:var(--dim2);font-size:12px;
  padding:2px 6px;cursor:pointer;
}
.searchbar .s-clear:active{color:var(--red)}
/* 搜索按钮 */
.searchbar .s-btn{
  flex:0 0 auto;padding:5px 14px;font-size:12px;letter-spacing:1px;
  background:var(--green);color:#04120c;border-radius:16px;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.searchbar .s-btn:active{opacity:.75}

/* ---------- 中部滚动区 ---------- */
#view{
  flex:1;overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  background:
    radial-gradient(1200px 400px at 50% -10%,rgba(0,255,156,.05),transparent 70%),
    var(--bg);
}
#view::-webkit-scrollbar{width:3px}
#view::-webkit-scrollbar-thumb{background:var(--line)}

/* ---------- 底部 Tab ---------- */
#tabbar{
  flex:0 0 calc(var(--tab-h) + var(--safe-b));
  height:calc(var(--tab-h) + var(--safe-b));
  padding-bottom:var(--safe-b);
  display:flex;align-items:stretch;
  background:linear-gradient(0deg,#0d1512,#0a0e0d);
  border-top:1px solid var(--line);
  box-shadow:0 0 18px rgba(0,255,156,.06);
  z-index:100;
}
#tabbar .tab{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:2px;color:var(--dim2);font-size:10px;letter-spacing:1px;cursor:pointer;
  position:relative;transition:color .15s;
}
#tabbar .tab .ti{font-size:19px;line-height:1}
#tabbar .tab.active{color:var(--green);text-shadow:0 0 8px rgba(0,255,156,.6)}
#tabbar .tab.active::before{
  content:'';position:absolute;top:0;left:22%;right:22%;height:2px;
  background:var(--green);box-shadow:0 0 10px var(--green);
}
#tabbar .tab .dot{
  position:absolute;top:6px;right:calc(50% - 20px);min-width:15px;height:15px;
  background:var(--red);color:#fff;border-radius:9px;font-size:9px;line-height:15px;
  text-align:center;padding:0 4px;box-shadow:0 0 8px rgba(255,46,77,.7);
}
#tabbar .tab.pulse .ti{animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.45}}

/* ---------- 通用组件 ---------- */
.page{padding:12px 12px 20px}
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:6px;
  padding:12px;margin-bottom:10px;position:relative;overflow:hidden;
}
.card::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--green),transparent);opacity:.7;
}
.card.cy::before{background:linear-gradient(180deg,var(--cyan),transparent)}
.card.rd::before{background:linear-gradient(180deg,var(--red),transparent)}

.btn{
  display:block;width:100%;padding:11px;text-align:center;
  background:transparent;border:1px solid var(--green);color:var(--green);
  border-radius:4px;font-family:var(--mono);font-size:14px;letter-spacing:2px;
  cursor:pointer;transition:.15s;
}
.btn:active{background:var(--green);color:#04120c}
.btn.primary{background:var(--green);color:#04120c;box-shadow:0 0 14px rgba(0,255,156,.28);font-weight:bold}
.btn.primary:active{opacity:.8;box-shadow:none}
.btn.cy{border-color:var(--cyan);color:var(--cyan)}
.btn.cy:active{background:var(--cyan);color:#04120c}
.btn.ghost{border-color:var(--line);color:var(--dim)}
.btn.danger{border-color:var(--red);color:var(--red)}
.btn:disabled{opacity:.4;border-color:var(--dim2);color:var(--dim2);box-shadow:none}

.input{
  width:100%;padding:11px 12px;background:var(--bg2);color:var(--txt);
  border:1px solid var(--line);border-radius:4px;
  font-family:var(--mono);font-size:14px;outline:0;transition:.15s;
}
.input:focus{border-color:var(--green);box-shadow:0 0 0 1px rgba(0,255,156,.25),0 0 12px rgba(0,255,156,.12)}
.input::placeholder{color:var(--dim2)}
.field{margin-bottom:12px}
.field .lb{
  font-size:11px;color:var(--dim);letter-spacing:1px;margin-bottom:5px;display:flex;
  justify-content:space-between;align-items:center;
}
.field .lb .hint{color:var(--dim2);font-size:10px}
.field .err{color:var(--red);font-size:11px;margin-top:4px;display:none}
.field.bad .err{display:block}
.field.bad .input{border-color:var(--red)}
.input-group{display:flex;gap:6px}
.input-group .input{flex:1}
.input-group .mini{
  flex:0 0 96px;padding:11px 6px;background:var(--panel2);border:1px solid var(--line);
  color:var(--green);border-radius:4px;font-family:var(--mono);font-size:12px;cursor:pointer;
}
.input-group .mini:disabled{color:var(--dim2);cursor:not-allowed}

/* 标签 */
.tag{
  display:inline-block;padding:1px 6px;border:1px solid var(--line);border-radius:3px;
  font-size:10px;color:var(--dim);margin-right:4px;
}
.tag.g{border-color:var(--green);color:var(--green)}
.tag.c{border-color:var(--cyan);color:var(--cyan)}
.tag.r{border-color:var(--red);color:var(--red)}
.tag.a{border-color:var(--amber);color:var(--amber)}
/* 管理员身份标识: 金色描边 + 微光, 与普通标签区分开 */
.tag.admin{
  border-color:#ffd24a;color:#ffd24a;
  background:linear-gradient(180deg,rgba(255,210,74,.16),rgba(255,210,74,.04));
  text-shadow:0 0 6px rgba(255,210,74,.5);
  font-weight:bold;letter-spacing:.5px;
}
.tag.admin::before{content:'⚑ ';font-size:9px}

/* 行列表 */
.row{
  display:flex;align-items:center;gap:10px;padding:12px;
  border-bottom:1px solid var(--line);cursor:pointer;
}
.row:active{background:var(--panel)}
.row .r-ico{color:var(--green);font-size:15px;width:20px;text-align:center}
.row .r-txt{flex:1;font-size:13px}
.row .r-val{color:var(--dim);font-size:12px}
.row .r-arrow{color:var(--dim2);font-size:12px}
.row .r-sub{font-size:10px;color:var(--dim2);margin-top:2px}

/* 分割标题 */
.sec-title{
  display:flex;align-items:center;gap:8px;
  font-size:11px;color:var(--dim);letter-spacing:2px;margin:16px 0 8px;
}
.sec-title::after{content:'';flex:1;height:1px;background:var(--line)}

/* 空状态 */
.empty{
  text-align:center;color:var(--dim2);padding:46px 20px;font-size:12px;line-height:2;
}
.empty .e-ico{font-size:34px;color:var(--line);display:block;margin-bottom:8px}

/* 加载 */
.loading{text-align:center;padding:22px;color:var(--green);font-size:12px;letter-spacing:2px}
.loading::after{content:'_';animation:blink .7s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

/* ---------- 认证页 ---------- */
#auth{
  position:fixed;inset:0;z-index:500;background:var(--bg);
  overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:calc(env(safe-area-inset-top,0px) + 26px) 22px calc(env(safe-area-inset-bottom,0px) + 30px);
  display:none;
}
#auth.show{display:block}
.auth-wrap{max-width:400px;margin:0 auto}
.logo{
  text-align:center;margin-bottom:26px;
}
.logo .l-main{
  font-size:32px;letter-spacing:8px;color:var(--green);
  text-shadow:0 0 16px rgba(0,255,156,.65),0 0 40px rgba(0,255,156,.25);
}
.logo .l-sub{font-size:10px;color:var(--dim2);letter-spacing:4px;margin-top:6px}
.logo .l-bar{
  width:60px;height:2px;background:var(--green);margin:12px auto 0;
  box-shadow:0 0 10px var(--green);
}
.auth-tabs{display:flex;gap:8px;margin-bottom:18px}
.auth-tabs .at{
  flex:1;padding:9px;text-align:center;border:1px solid var(--line);
  color:var(--dim);font-size:12px;letter-spacing:2px;cursor:pointer;border-radius:4px;
}
.auth-tabs .at.active{border-color:var(--green);color:var(--green);background:rgba(0,255,156,.07)}
.auth-foot{text-align:center;margin-top:16px;font-size:11px;color:var(--dim2)}
.auth-foot a{color:var(--green);cursor:pointer;text-decoration:none}
.agree{display:flex;gap:8px;font-size:11px;color:var(--dim);margin:12px 0;align-items:flex-start}
.agree input{margin-top:2px;accent-color:#00ff9c}

/* ---------- 动态卡片 ---------- */
.post{
  background:var(--panel);border:1px solid var(--line);border-radius:6px;
  padding:12px;margin-bottom:10px;
}
.post .p-head{display:flex;align-items:center;gap:9px;margin-bottom:9px}
.post .p-av{
  width:36px;height:36px;border-radius:50%;object-fit:cover;
  border:1px solid var(--green);box-shadow:0 0 9px rgba(0,255,156,.3);
  background:var(--bg2);flex:0 0 36px;
}
.post .p-name{font-size:13px;color:var(--txt);cursor:pointer}
.post .p-meta{font-size:10px;color:var(--dim2)}
.post .p-body{font-size:13px;line-height:1.7;white-space:pre-wrap;word-break:break-word}
/* 图片外层改为 .p-img-cell(正方形占位), 便于叠加 "+N" 与点击看图 */
.post .p-imgs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:9px}
.post .p-img-cell{
  position:relative;width:100%;padding-top:100%;overflow:hidden;
  border-radius:3px;border:1px solid var(--line);background:var(--bg2);cursor:pointer;
}
.post .p-img-cell img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.post .p-imgs.one{grid-template-columns:1fr;max-width:66%}
.post .p-imgs.one .p-img-cell{padding-top:70%}
/* 2 图: 两张并排。原来是固定 3 列, 两张只占左边 2/3、右边空一整格 ——
   图被压小还留一块空白 */
.post .p-imgs.two{grid-template-columns:repeat(2,1fr);max-width:78%}
/* 4 图: 2×2。原来第一行 3 张、第二行孤零零 1 张, 右边空两格, 很不整齐 */
.post .p-imgs.four{grid-template-columns:repeat(2,1fr);max-width:78%}
.post .p-foot{
  display:flex;gap:16px;margin-top:10px;padding-top:9px;border-top:1px solid var(--line);
}
.post .p-act{
  display:flex;align-items:center;gap:4px;font-size:12px;color:var(--dim2);cursor:pointer;
}
.post .p-act.on{color:var(--green)}
.post .p-act:active{opacity:.6}

/* 评论 */
.cmts{margin-top:10px;border-top:1px solid var(--line);padding-top:9px}
.cmt{margin-bottom:9px;font-size:12px;line-height:1.6}
.cmt .c-name{color:var(--cyan);cursor:pointer}
.cmt .c-txt{color:var(--txt);word-break:break-word}
.cmt .c-time{color:var(--dim2);font-size:10px;margin-top:2px}
.cmt.reply{margin-left:14px;padding-left:8px;border-left:1px solid var(--line)}
.cmt-box{display:flex;gap:6px;margin-top:10px}
.cmt-box .input{padding:8px 10px;font-size:12px}
.cmt-box button{
  flex:0 0 62px;background:transparent;border:1px solid var(--green);color:var(--green);
  border-radius:4px;font-family:var(--mono);font-size:12px;cursor:pointer;
}

/* ---------- 发布页 ---------- */
#composer{
  position:fixed;inset:0;z-index:600;background:var(--bg);display:none;flex-direction:column;
  padding-top:var(--safe-t);
}
#composer.show{display:flex}
#composer .c-head{
  flex:0 0 var(--header-h);display:flex;align-items:center;padding:0 12px;gap:10px;
  border-bottom:1px solid var(--line);
}
#composer textarea{
  flex:1;background:transparent;border:0;outline:0;color:var(--txt);
  font-family:var(--mono);font-size:14px;line-height:1.7;padding:14px;resize:none;
}
#composer .c-foot{
  flex:0 0 auto;padding:10px 12px calc(env(safe-area-inset-bottom,0px) + 10px);
  border-top:1px solid var(--line);
}
#composer .c-imgs{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-bottom:10px}
#composer .c-imgs .ci{position:relative;aspect-ratio:1}
#composer .c-imgs img{width:100%;height:100%;object-fit:cover;border-radius:3px;border:1px solid var(--line)}
#composer .c-imgs .del{
  position:absolute;top:-4px;right:-4px;width:18px;height:18px;border-radius:50%;
  background:var(--red);color:#fff;font-size:11px;line-height:18px;text-align:center;cursor:pointer;
}
#composer .c-imgs .add{
  display:flex;align-items:center;justify-content:center;aspect-ratio:1;
  border:1px dashed var(--line);border-radius:3px;color:var(--dim2);font-size:20px;cursor:pointer;
}
/* 发布器: 视频预览(与图片互斥, 所以单独一块) */
#composer .c-video:empty{display:none}
#composer .c-video .cv-item{position:relative;border:1px solid var(--line);border-radius:4px;overflow:hidden}
#composer .c-video video{display:block;width:100%;max-height:220px;background:#000}
#composer .c-video .del{
  position:absolute;top:5px;right:5px;width:22px;height:22px;border-radius:50%;
  background:var(--red);color:#fff;font-size:12px;line-height:22px;text-align:center;cursor:pointer;
}
/* 动态卡片: 视频播放器。用 16:9 容器 + object-fit 避免不同比例视频撑破布局 */
.post .p-video{margin-top:9px;border-radius:4px;overflow:hidden;background:#000;border:1px solid var(--line)}
.post .p-video video{display:block;width:100%;max-height:340px;background:#000}
/* 首屏过期缓存提示: 内容先出, 提示在顶部告诉用户还在刷新 */
.stale-tip{
  text-align:center;font-size:10px;color:#4d6b5f;padding:6px 0 2px;
  letter-spacing:1px;
}
.stale-tip::before{content:'';display:inline-block;width:6px;height:6px;
  border-radius:50%;background:var(--green);margin-right:5px;
  animation:staleBlink 1s infinite}
@keyframes staleBlink{0%,100%{opacity:.25}50%{opacity:1}}
.vis-pick{display:flex;gap:6px;margin-bottom:10px}
.vis-pick .vp{
  flex:1;padding:7px;text-align:center;border:1px solid var(--line);border-radius:4px;
  font-size:11px;color:var(--dim);cursor:pointer;
}
.vis-pick .vp.active{border-color:var(--green);color:var(--green);background:rgba(0,255,156,.07)}

/* ---------- 个人主页 ---------- */
.pf-hero{position:relative;height:170px;overflow:hidden;background:var(--bg2)}
.pf-hero img{width:100%;height:100%;object-fit:cover}
.pf-hero .pf-mask{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,14,13,.15) 0%,rgba(10,14,13,.55) 55%,var(--bg) 100%);
}
.pf-hero .no-bg{
  width:100%;height:100%;
  background:
    repeating-linear-gradient(90deg,rgba(0,255,156,.06) 0 1px,transparent 1px 22px),
    repeating-linear-gradient(0deg,rgba(0,255,156,.06) 0 1px,transparent 1px 22px),
    linear-gradient(135deg,#0d1a16,#0a0e0d);
}
.pf-info{padding:0 14px;margin-top:-42px;position:relative;z-index:2}
.pf-av{
  width:74px;height:74px;border-radius:50%;object-fit:cover;background:var(--bg2);
  border:2px solid var(--green);box-shadow:0 0 18px rgba(0,255,156,.45);
}
.pf-nick{font-size:18px;color:var(--txt);margin-top:8px;letter-spacing:1px}
.pf-uid{font-size:11px;color:var(--dim);margin-top:3px;display:flex;align-items:center;gap:6px}
.pf-uid .cp{
  border:1px solid var(--line);padding:0 5px;border-radius:3px;color:var(--dim2);
  font-size:10px;cursor:pointer;
}
.pf-bio{font-size:12px;color:var(--dim);margin-top:8px;line-height:1.6}
.pf-stats{display:flex;gap:0;margin:14px 0;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.pf-stats .st{
  flex:1;text-align:center;padding:10px 4px;border-right:1px solid var(--line);cursor:pointer;
}
.pf-stats .st:last-child{border-right:0}
.pf-stats .st .n{font-size:16px;color:var(--green)}
.pf-stats .st .t{font-size:10px;color:var(--dim2);margin-top:2px}
.pf-acts{display:flex;gap:8px;margin-bottom:6px}
.pf-acts .btn{flex:1;padding:9px;font-size:12px;letter-spacing:1px}
.badges{display:flex;flex-wrap:wrap;gap:6px}
.badges .bd{
  border:1px solid var(--line);border-radius:3px;padding:3px 7px;font-size:10px;color:var(--dim);
}
.pf-tabs{display:flex;border-bottom:1px solid var(--line);margin-top:6px}
.pf-tabs .pt{
  flex:1;padding:10px;text-align:center;font-size:12px;color:var(--dim2);cursor:pointer;
}
.pf-tabs .pt.active{color:var(--green);box-shadow:inset 0 -2px 0 var(--green)}

/* ---------- 消息 ---------- */
.conv{
  display:flex;align-items:center;gap:10px;padding:12px;border-bottom:1px solid var(--line);
  cursor:pointer;
}
.conv:active{background:var(--panel)}
.conv .cv-av{
  width:42px;height:42px;border-radius:50%;object-fit:cover;border:1px solid var(--line);
  background:var(--bg2);flex:0 0 42px;
}
.conv .cv-main{flex:1;min-width:0}
.conv .cv-top{display:flex;justify-content:space-between;align-items:center}
.conv .cv-name{font-size:13px;color:var(--txt)}
.conv .cv-time{font-size:10px;color:var(--dim2)}
.conv .cv-msg{
  font-size:11px;color:var(--dim2);margin-top:3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.conv .cv-badge{
  min-width:18px;height:18px;background:var(--red);color:#fff;border-radius:9px;
  font-size:10px;line-height:18px;text-align:center;padding:0 5px;flex:0 0 auto;
}

/* 聊天 */
#chat{
  position:fixed;inset:0;z-index:600;background:var(--bg);display:none;flex-direction:column;
  padding-top:var(--safe-t);
}
#chat.show{display:flex}
#chat .ch-head{
  flex:0 0 var(--header-h);display:flex;align-items:center;gap:10px;padding:0 12px;
  border-bottom:1px solid var(--line);background:var(--bg2);
}
#chat .ch-body{flex:1;overflow-y:auto;padding:12px}
#chat .ch-foot{
  flex:0 0 auto;padding:8px 10px calc(env(safe-area-inset-bottom,0px) + 8px);
  border-top:1px solid var(--line);display:flex;gap:7px;background:var(--bg2);
}
#chat .ch-foot .input{padding:9px 11px;font-size:13px}
#chat .ch-foot button{
  flex:0 0 58px;background:var(--green);color:#04120c;border:0;border-radius:4px;
  font-family:var(--mono);font-size:13px;cursor:pointer;
}
.msg-row{display:flex;margin-bottom:12px}
.msg-row.mine{justify-content:flex-end}
.msg-row .bubble{
  max-width:74%;padding:8px 11px;border-radius:6px;font-size:13px;line-height:1.6;
  word-break:break-word;white-space:pre-wrap;
}
.msg-row .bubble.them{background:var(--panel);border:1px solid var(--line);color:var(--txt)}
.msg-row .bubble.mine{background:rgba(0,255,156,.11);border:1px solid var(--green);color:var(--txt)}
.msg-row .bubble .mt{font-size:9px;color:var(--dim2);margin-top:3px;text-align:right}
.msg-row .bubble.recalled{color:var(--dim2);font-style:italic;font-size:11px}

/* ---------- 学历提升 ---------- */
.mission{
  background:linear-gradient(135deg,#0f2019,#0a0e0d);
  border:1px solid var(--green);border-radius:6px;padding:13px;margin-bottom:12px;
  box-shadow:0 0 20px rgba(0,255,156,.1);
}
.mission .m-t{font-size:12px;color:var(--green);letter-spacing:2px;margin-bottom:8px}
.mission .m-d{font-size:22px;color:var(--green);text-shadow:0 0 12px rgba(0,255,156,.5)}
.mission .m-s{font-size:11px;color:var(--dim);margin-top:4px}
.bar{
  height:8px;background:var(--bg2);border:1px solid var(--line);border-radius:4px;
  overflow:hidden;margin:8px 0;
}
.bar .bi{
  height:100%;background:linear-gradient(90deg,#00ff9c,#00e5ff);
  box-shadow:0 0 10px rgba(0,255,156,.5);transition:width .4s;
}
.stage{margin-bottom:12px}
.stage .sh{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.stage .sh .sn{font-size:12px;color:var(--txt)}
.stage .sh .sp{font-size:11px;color:var(--green)}
.task{
  display:flex;align-items:center;gap:9px;padding:9px 11px;margin-bottom:5px;
  background:var(--panel);border:1px solid var(--line);border-radius:4px;
}
.task .tk{
  width:16px;height:16px;flex:0 0 16px;border:1px solid var(--green);border-radius:3px;
  display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--green);cursor:pointer;
}
.task.done .tk{background:var(--green);color:#04120c}
.task .tt{flex:1;font-size:12px}
.task.done .tt{color:var(--dim2);text-decoration:line-through}
.task .td{font-size:10px;color:var(--dim2)}
.path-card{
  border:1px solid var(--line);border-radius:6px;padding:12px;margin-bottom:10px;background:var(--panel);
}
.path-card.locked{opacity:.62}
.path-card.selected{border-color:var(--green);box-shadow:0 0 14px rgba(0,255,156,.18)}
.path-card .pc-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.path-card .pc-n{font-size:14px;color:var(--txt)}
.path-card .pc-d{font-size:11px;color:var(--dim);line-height:1.7;margin-top:6px}
.gold{color:var(--amber)}
.calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:10px}
.calendar .cd{
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);border-radius:3px;font-size:9px;color:var(--dim2);
}
.calendar .cd.on{background:rgba(0,255,156,.16);border-color:var(--green);color:var(--green)}
.calendar .cd.today{border-color:var(--cyan);color:var(--cyan)}

/* ---------- 设置 ---------- */
.seg{display:flex;gap:6px;flex-wrap:wrap}
.seg .sg{
  padding:6px 12px;border:1px solid var(--line);border-radius:4px;
  font-size:11px;color:var(--dim);cursor:pointer;
}
.seg .sg.active{border-color:var(--green);color:var(--green);background:rgba(0,255,156,.07)}
.switch{
  width:42px;height:23px;border-radius:12px;background:var(--bg2);
  border:1px solid var(--line);position:relative;cursor:pointer;transition:.2s;flex:0 0 42px;
}
.switch::after{
  content:'';position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;
  background:var(--dim2);transition:.2s;
}
.switch.on{background:rgba(0,255,156,.18);border-color:var(--green)}
.switch.on::after{left:21px;background:var(--green);box-shadow:0 0 8px var(--green)}

/* ---------- 弹层 ---------- */
#modal{
  position:fixed;inset:0;z-index:900;background:rgba(3,6,5,.82);
  display:none;align-items:center;justify-content:center;padding:22px;
}
#modal.show{display:flex}
.modal-box{
  width:100%;max-width:400px;background:var(--panel);border:1px solid var(--green);
  border-radius:6px;padding:18px;box-shadow:0 0 30px rgba(0,255,156,.22);
  max-height:80vh;overflow-y:auto;
}
.modal-box .mb-t{
  font-size:14px;color:var(--green);letter-spacing:2px;margin-bottom:12px;
  border-bottom:1px solid var(--line);padding-bottom:8px;
}
.modal-box .mb-b{display:flex;gap:8px;margin-top:14px}
.toast{
  position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--tab-h) + var(--safe-b) + 26px);
  background:rgba(10,26,20,.97);border:1px solid var(--green);color:var(--green);
  padding:9px 18px;border-radius:4px;font-size:12px;z-index:2000;
  box-shadow:0 0 18px rgba(0,255,156,.28);max-width:86%;text-align:center;
  animation:tin .25s;
}
.toast.err{border-color:var(--red);color:var(--red);box-shadow:0 0 18px rgba(255,46,77,.28)}
@keyframes tin{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}

/* 用户行(搜索/列表公用) */
.ulist .u{
  display:flex;align-items:center;gap:10px;padding:11px 12px;border-bottom:1px solid var(--line);
}
.ulist .u .av{
  width:40px;height:40px;border-radius:50%;object-fit:cover;background:var(--bg2);
  border:1px solid var(--line);flex:0 0 40px;
}
.ulist .u .info{flex:1;min-width:0}
.ulist .u .nm{font-size:13px;color:var(--txt)}
.ulist .u .sb{font-size:10px;color:var(--dim2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ulist .u .act{
  flex:0 0 auto;padding:5px 11px;border:1px solid var(--green);color:var(--green);
  border-radius:3px;font-size:11px;cursor:pointer;
}
.ulist .u .act.off{border-color:var(--line);color:var(--dim2)}
.ulist .u .act.gray{border-color:var(--line);color:var(--dim)}

/* 数字雨背景 */
#matrix{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.16}
#matrix.off{display:none}

/* 顶部提示条 */
.announce{
  background:rgba(0,255,156,.07);border-bottom:1px solid rgba(0,255,156,.25);
  padding:7px 12px;font-size:11px;color:var(--green);display:flex;gap:8px;align-items:center;
}
.announce .an-x{margin-left:auto;cursor:pointer;color:var(--dim)}

/* 终端风提示 */
.term{font-size:11px;color:var(--dim2);line-height:1.8}
.term .g{color:var(--green)}
.term .c{color:var(--cyan)}
.term .r{color:var(--red)}

/* ---------- 弹层内容区(长表单可滚动) ---------- */
.modal-box .mb-c{
  font-size:13px;color:var(--txt);line-height:1.8;
  max-height:56vh;overflow-y:auto;
}
.modal-box .mb-c .field{margin-bottom:12px}
.modal-box .mb-c .field:last-child{margin-bottom:0}

/* ---------- 通用横向标签页(首页信息流 / 学历提升 / 管理后台) ---------- */

/* 注: 曾有 atb 与 plt 两套完全重复的标签页样式名, 前者全项目无引用, 已删除 */
.plt{
  cursor:pointer;user-select:none;white-space:nowrap;
  transition:border-color .18s,color .18s,background .18s;
  -webkit-tap-highlight-color:transparent;
}
.plt:active{opacity:.7}

.plt{
  flex:0 0 auto;padding:7px 13px;font-size:12px;
  border:1px solid var(--line);color:var(--dim);border-radius:4px;
}
.plt.on{
  border-color:var(--green);color:var(--green);
  background:rgba(0,255,156,.08);
}

/* ---------- 管理后台补充 ---------- */
.bar{
  height:6px;background:#0a0e0d;border:1px solid var(--line);
  border-radius:3px;overflow:hidden;margin-top:6px;
}
.bi{height:100%;background:var(--green);box-shadow:0 0 8px var(--green);transition:width .3s}
.card.cy{border-color:rgba(0,229,255,.45)}
.card.rd{border-color:rgba(255,46,77,.5)}
.tag.c{color:var(--cyan);border-color:rgba(0,229,255,.45)}
.tag.a{color:#ffb340;border-color:rgba(255,179,64,.45)}
.row{cursor:default}

/* ============================================================
   首页: 下拉刷新 / 话题条 / 长文折叠 / 九宫格
   ============================================================ */

/* ---------- 下拉刷新 ---------- */
.pull-hint{
  height:0;overflow:hidden;display:flex;align-items:center;justify-content:center;
  gap:8px;font-size:11px;color:var(--dim2);letter-spacing:1px;
  transition:height .18s ease-out;
}
.pull-hint .ph-ico{font-size:14px;color:var(--green);transition:transform .18s}
.pull-hint.show .ph-ico{transform:rotate(180deg)}

/* ---------- 话题横滑条 ---------- */

/* ---------- 长文折叠 ---------- */
.p-body.clamp{
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;
  overflow:hidden;
}
.p-more-btn{
  font-size:11px;color:var(--cyan);margin-top:4px;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

/* ---------- 九宫格超出计数 (+N 遮罩) ---------- */
.post .p-img-cell .p-more{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(10,14,13,.62);color:var(--green);font-size:16px;font-weight:bold;
}

/* ---------- 加载提示 ---------- */
.feed-more{text-align:center;padding:14px}
.fm-tip,.fm-end{color:var(--dim2);font-size:11px}

/* ---------- 全屏看图 ---------- */
.lightbox{
  position:fixed;inset:0;z-index:3000;background:rgba(3,6,5,.96);
  display:flex;flex-direction:column;
}
.lb-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:calc(var(--safe-t) + 10px) 16px 10px;color:var(--dim);font-size:12px;
}
.lb-x,.lb-dl{font-size:18px;cursor:pointer;padding:0 6px;-webkit-tap-highlight-color:transparent}
.lb-n{font-size:12px;color:var(--dim);letter-spacing:1px}
.lb-track{
  flex:1;display:flex;transition:transform .25s ease-out;align-items:center;
}
.lb-track img{
  width:100%;flex:0 0 100%;max-height:100%;object-fit:contain;padding:0 6px;
}
.lb-dots{display:flex;justify-content:center;gap:6px;padding:14px 0 calc(var(--safe-b) + 14px)}
.lb-dot{width:6px;height:6px;border-radius:50%;background:var(--line)}
.lb-dot.on{background:var(--green);box-shadow:0 0 6px var(--green)}

/* ============================================================
   我的（抖音式）
   ============================================================ */
.dy-hero{
  position:relative;height:170px;overflow:hidden;background:var(--bg2);
  cursor:pointer;
  /* 下拉放大只改 height, 不用 transform:
     transform 会创建层叠上下文, 把外层头像压到背景图下面 */
  transition:height .18s ease-out;
}
.dy-hero img,.dy-hero .dy-bg-img{width:100%;height:100%;object-fit:cover;display:block}
.dy-hero .no-bg{
  width:100%;height:100%;
  background:
    repeating-linear-gradient(90deg,rgba(0,255,156,.06) 0 1px,transparent 1px 22px),
    repeating-linear-gradient(0deg,rgba(0,255,156,.06) 0 1px,transparent 1px 22px),
    linear-gradient(135deg,#0d1a16,#0a0e0d);
}
/* 顶部压暗(状态栏区) + 底部压暗(衬托头像描边) */
.dy-hero-mask{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(0,0,0,.32) 0, rgba(0,0,0,0) 40%, rgba(10,14,13,.55) 100%);
}
.dy-hero-tip{
  position:absolute;left:0;right:0;bottom:8px;text-align:center;
  font-size:10px;color:rgba(216,245,232,.45);letter-spacing:1px;
  pointer-events:none;
}
/* 右上角"换背景"(抖音是点背景图直接换, 这里给个明确入口) */
.dy-hero-edit{
  position:absolute;right:10px;top:10px;z-index:2;
  padding:4px 10px;font-size:10px;letter-spacing:.5px;
  color:#d8f5e8;background:rgba(0,0,0,.45);
  border:1px solid rgba(0,255,156,.35);border-radius:12px;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.dy-hero-edit:active{background:rgba(0,255,156,.22)}

/* ---- 头像: 上半部分压在背景图上(抖音/快手的核心特征) ----
   必须在 .dy-hero 外面:
   hero 有 overflow:hidden, 头像放里面下半部分会被裁掉。 */
.dy-av-wrap{
  position:relative;z-index:3;
  padding:0 16px;
  margin-top:-38px;          /* = 头像直径 76 / 2 */
}
.dy-av-box{position:relative;display:inline-block}
.dy-av{
  width:76px;height:76px;border-radius:50%;object-fit:cover;
  background:var(--bg2);display:block;cursor:pointer;
  /* 与页面同色描边 + 绿色微光,
     深色主题下等价于抖音白底头像的白描边 */
  border:3px solid var(--bg);
  box-shadow:0 0 0 1px rgba(0,255,156,.35), 0 4px 14px rgba(0,0,0,.5);
}
/* 性别角标 */
.dy-sex{
  position:absolute;right:-2px;bottom:-2px;width:20px;height:20px;
  border-radius:50%;font-size:11px;line-height:20px;text-align:center;
  border:2px solid var(--bg);
}
.dy-sex.f{background:#ff6ba8;color:#fff}
.dy-sex.m{background:#3aa0ff;color:#fff}

.dy-info{padding:10px 16px 0}
.dy-nick{
  font-size:19px;color:var(--txt);letter-spacing:1px;
  display:flex;align-items:center;gap:6px;flex-wrap:wrap;
}
.dy-uid{
  font-size:11px;color:var(--dim);margin-top:4px;
  display:flex;align-items:center;gap:6px;
}
.dy-uid .cp{
  border:1px solid var(--line);padding:0 5px;border-radius:3px;
  color:var(--dim2);font-size:10px;cursor:pointer;
}

/* 数据条: 无边框, 数字在上, 紧跟其后的文字 */
.dy-stats{display:flex;gap:24px;margin:14px 0 12px}
.dy-stat{cursor:default;-webkit-tap-highlight-color:transparent}
.dy-stat.link{cursor:pointer}
.dy-stat .n{font-size:17px;color:var(--green);font-weight:bold;line-height:1.2}
.dy-stat .t{font-size:11px;color:var(--dim2);margin-top:1px}

/* 两个按钮 */
.dy-acts{display:flex;gap:8px}
.dy-btn{
  flex:1;text-align:center;padding:9px 0;font-size:12px;letter-spacing:1px;
  border:1px solid var(--green);color:var(--green);border-radius:4px;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.dy-btn:active{background:rgba(0,255,156,.12)}
.dy-btn.ghost{border-color:var(--line);color:var(--dim)}

.dy-bio{font-size:12px;color:var(--dim);margin-top:10px;line-height:1.6}
.dy-bio.dim{color:var(--dim2)}
.dy-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.dy-chip{
  border:1px solid var(--line);border-radius:3px;padding:3px 8px;
  font-size:10px;color:var(--dim);
}

/* 内容分组 Tab */
.dy-tabs{
  display:flex;border-bottom:1px solid var(--line);margin-top:14px;
  background:var(--bg);position:sticky;top:0;z-index:5;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.dy-tabs::-webkit-scrollbar{display:none}
.dy-tab{
  /* 5 个分组(作品/私密/关注/收藏/喜欢), 窄屏下平分会被挤成一团,
     改为固定最小宽度 + 横向滚动 */
  flex:1 0 auto;min-width:66px;padding:11px 8px;text-align:center;
  font-size:12px;color:var(--dim2);white-space:nowrap;
  cursor:pointer;position:relative;-webkit-tap-highlight-color:transparent;
}
.dy-tab.on{color:var(--green);font-weight:bold}
.dy-tab.on::after{
  content:'';position:absolute;left:50%;transform:translateX(-50%);
  bottom:-1px;width:26px;height:2px;background:var(--green);
  box-shadow:0 0 8px var(--green);
}
.dy-tab .dt-n{font-size:10px;color:var(--dim2);margin-left:3px}

/* 内容网格 */
.dy-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;padding:8px 12px}
.gc{
  position:relative;border:1px solid var(--line);border-radius:5px;overflow:hidden;
  background:var(--panel);cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.gc .gc-cover{width:100%;height:118px;object-fit:cover;display:block}
.gc .gc-text{
  height:118px;padding:10px;font-size:11px;color:var(--dim);line-height:1.65;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;
  background:linear-gradient(160deg,var(--panel),var(--bg2));
}
.gc-tag{
  position:absolute;top:5px;right:5px;font-size:9px;padding:1px 5px;
  border-radius:3px;background:rgba(10,14,13,.8);
}
.gc-tag.pri{color:var(--red);border:1px solid rgba(255,46,77,.5)}
.gc-tag.fri{color:var(--cyan);border:1px solid rgba(0,229,255,.5)}
.gc-tag.top{color:var(--amber);border:1px solid rgba(255,179,64,.5)}
.gc-foot{
  display:flex;justify-content:space-between;padding:5px 8px;
  font-size:10px;color:var(--dim2);border-top:1px solid var(--line);
}

/* 快捷入口四宫格 */
.dy-quick{
  display:grid;grid-template-columns:repeat(4,1fr);gap:4px;
  margin:12px;padding:10px 0;border:1px solid var(--line);border-radius:6px;
  background:var(--panel);
}
.dy-q{
  text-align:center;cursor:pointer;padding:4px 2px;
  -webkit-tap-highlight-color:transparent;
}
.dy-q:active{opacity:.6}
.dy-q .q-ico{font-size:18px;color:var(--green);line-height:1.3}
.dy-q .q-n{font-size:11px;color:var(--txt);margin-top:2px}
.dy-q .q-s{font-size:9px;color:var(--dim2);margin-top:1px}

/* ============================================================
   消息页: 顶部固定入口
   ============================================================ */
.msg-entry{
  display:flex;align-items:center;gap:10px;padding:11px 14px;
  border-bottom:1px solid var(--line);background:var(--panel);
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.msg-entry:active{background:var(--panel2)}
.me-ico{
  width:34px;height:34px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:17px;color:var(--green);
  background:rgba(0,255,156,.1);border:1px solid rgba(0,255,156,.3);
}
.me-ico.warn{color:var(--amber);background:rgba(255,179,64,.1);border-color:rgba(255,179,64,.35)}
.me-txt{flex:1;font-size:13px;color:var(--txt)}
.me-val{font-size:11px;color:var(--dim2)}
.me-badge{
  min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--red);
  color:#fff;font-size:10px;line-height:18px;text-align:center;font-weight:bold;
  box-shadow:0 0 8px rgba(255,46,77,.5);
}
.me-arrow{color:var(--dim2);font-size:14px}

.msg-tabs{display:flex;gap:6px;padding:10px 12px 0}
.msg-tabs .mt{
  flex:1;text-align:center;padding:8px 0;font-size:12px;cursor:pointer;
  border:1px solid var(--line);color:var(--dim);border-radius:4px;
  -webkit-tap-highlight-color:transparent;transition:all .18s;
}
.msg-tabs .mt.on{
  border-color:var(--green);color:var(--green);background:rgba(0,255,156,.08);
}

/* 动态卡片右上角的 ⋯ 与评论昵称可点 */
.post .p-ell{
  color:var(--dim2);font-size:16px;line-height:1;padding:2px 6px;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.post .p-ell:active{color:var(--green)}
.cmts .c-name{color:var(--cyan);cursor:pointer}
.cmts .c-name:active{text-decoration:underline}
.cmts .cmt.reply{margin-left:14px;border-left:2px solid var(--line);padding-left:8px}

/* ---------- 维护模式遮罩 ---------- */
#mnt{
  position:fixed;inset:0;z-index:9500;background:rgba(3,6,5,.95);
  display:flex;align-items:center;justify-content:center;padding:30px;
}
.mnt-box{
  width:100%;max-width:320px;text-align:center;
  border:1px solid var(--amber);border-radius:6px;padding:24px 18px;
  background:var(--panel);box-shadow:0 0 24px rgba(255,179,64,.2);
}
.mnt-t{
  font-size:15px;color:var(--amber);letter-spacing:2px;
  text-shadow:0 0 10px rgba(255,179,64,.5);
}
.mnt-m{font-size:12px;color:var(--dim);margin-top:10px;line-height:1.8}

/* ---------- 聊天: 图片消息与图片按钮 ---------- */
.ch-img{
  flex:0 0 auto;width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  color:var(--green);font-size:17px;border:1px solid var(--line);border-radius:4px;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.ch-img:active{background:var(--panel)}
.msg-row .bubble-img{
  max-width:150px;max-height:190px;border-radius:4px;display:block;cursor:pointer;
}

/* 免打扰会话的未读角标: 灰点, 不抢注意力 */
.cv-badge.muted{
  background:var(--dim2);color:var(--bg);
  min-width:16px;height:16px;line-height:16px;font-size:9px;
}

/* ============================================================
   功能页: 入口宫格(一排两个)
   ============================================================ */
.fg-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px;
}
.fg-card{
  display:flex;align-items:center;gap:10px;
  padding:14px 12px;min-height:78px;
  background:var(--panel);border:1px solid var(--line);border-radius:6px;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.fg-card:active{background:#12201b;border-color:var(--green)}
.fg-ico{
  flex:0 0 auto;width:38px;height:38px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;color:var(--green);
  background:rgba(0,255,156,.08);border:1px solid rgba(0,255,156,.25);
}
.fg-main{flex:1;min-width:0}
.fg-name{font-size:13px;color:var(--txt);letter-spacing:.5px}
.fg-desc{
  font-size:10px;color:var(--dim2);margin-top:3px;line-height:1.5;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.fg-arrow{flex:0 0 auto;color:var(--dim2);font-size:16px}
.fg-tip{
  text-align:center;font-size:11px;color:var(--dim2);
  padding:6px 0 20px;letter-spacing:1px;
}

/* 必填项星号与未填时的高亮提示 */
.req-star { color:#ff2e4d; margin-left:2px; font-weight:700; }
.input.need { border-color:#2f6b52; }
.input.req-err, .input.need.req-err {
  border-color:#ff2e4d !important;
  box-shadow:0 0 0 2px rgba(255,46,77,.18);
  animation:shake .3s;
}
@keyframes shake {
  0%,100% { transform:translateX(0); }
  25% { transform:translateX(-4px); }
  75% { transform:translateX(4px); }
}