/* ==========================================
 * 2026年3D嘉年华大赛 · 投票端
 * 移动端优先，PC 打开为居中窄栏
 * ========================================== */
[hidden]{display:none !important}
:root{
  --bg:#0d0b26;
  --bg2:#16123d;
  --card:rgba(255,255,255,.06);
  --card2:rgba(255,255,255,.1);
  --line:rgba(255,255,255,.12);
  --txt:#f0eeff;
  --txt2:#a9a5d6;
  --muted:#7a76ab;
  --cy:#3ce8ff;
  --mg:#ff4fd8;
  --gd:#ffc95c;
  --ok:#3ddc97;
  --g1:#2a1b6b; --g2:#5b1b6b;
  --cy-rgb:60,232,255; --mg-rgb:255,79,216;
  --cy2:#7ee8ff; --mg2:#a24bff; --cy-soft:#cfe9ff;
  --panel:#12102e; --panel-rgb:18,16,46; --panel-d:#1c1740;
  --img-bg:#1e1a4a;
  --gate-card:linear-gradient(180deg,rgba(40,30,90,.9),rgba(20,16,52,.95));
  --work-grad:linear-gradient(135deg,#3a1b7a,#b5269a);
  --bar-bg:linear-gradient(180deg,#1c1740 0%,#12102e 100%);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}

body{
  background:
    radial-gradient(1000px 600px at 20% -10%, var(--g1) 0%, transparent 60%),
    radial-gradient(800px 500px at 100% 10%, var(--g2) 0%, transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg2) 100%);
  background-attachment:fixed;
  color:var(--txt);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  font-size:14px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}

.app{max-width:480px;margin:0 auto;position:relative;padding-bottom:96px}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}

/* ================= 遮罩：引导 / 授权 ================= */
.gate{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;padding:28px;
  background:rgba(var(--panel-rgb),.94);
  backdrop-filter:blur(10px);
}
.gate[hidden]{display:none}

/* ================= 登录遮罩（手机号验证码） ================= */
.login-card{
  width:100%;max-width:340px;
  background:var(--gate-card);
  border:1px solid var(--line);border-radius:18px;
  padding:26px 22px 22px;text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.login-logo{font-size:46px;margin-bottom:8px}
.login-title{font-size:19px;font-weight:700;color:var(--txt)}
.login-sub{font-size:13px;color:var(--txt2);margin:8px 0 20px;line-height:1.6}
.login-field{margin-bottom:12px;text-align:left}
.login-field input{
  width:100%;padding:13px 14px;border-radius:10px;
  background:rgba(255,255,255,.08);border:1px solid var(--line);
  color:var(--txt);font-size:15px;outline:none;
}
.login-field input:focus{border-color:var(--cy)}
.code-field{display:flex;gap:10px}
.code-field input{flex:1}
.code-btn{
  flex:0 0 auto;padding:0 14px;border-radius:10px;white-space:nowrap;
  background:rgba(var(--cy-rgb),.14);border:1px solid rgba(var(--cy-rgb),.4);
  color:var(--cy);font-size:13px;font-weight:600;
}
.code-btn:disabled{opacity:.55;cursor:not-allowed}
.login-agree{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--txt2);margin:4px 0 16px;justify-content:flex-start}
.login-agree input{accent-color:var(--cy)}
.login-btn{
  width:100%;padding:13px;border-radius:11px;font-size:16px;font-weight:700;color:#0d0b26;
  background:linear-gradient(135deg,var(--cy),var(--cy2));
  box-shadow:0 8px 22px rgba(var(--cy-rgb),.35);
}
.login-btn:disabled{opacity:.6;cursor:not-allowed}
.gate-skip{
  margin-top:12px;background:none;border:none;color:rgba(255,255,255,.5);
  font-size:13px;cursor:pointer;
}
.gate-skip:hover{color:rgba(255,255,255,.8)}
.login-tip{margin-top:12px;font-size:12.5px;min-height:16px;line-height:1.5}
.login-tip.err{color:#ff8a8a}
.login-tip.ok{color:var(--ok)}

/* 浏览模式提示条 */
.browse-bar{
  display:flex;align-items:center;gap:8px;
  margin:10px 12px 0;padding:9px 13px;border-radius:11px;
  background:rgba(var(--cy-rgb),.10);border:1px solid rgba(var(--cy-rgb),.28);
  font-size:13px;color:var(--cy-soft);
}
.browse-ico{font-size:15px}
.browse-txt{flex:1;line-height:1.4}
.browse-txt a{color:var(--cy);font-weight:700;cursor:pointer;text-decoration:underline}
/* 未登录时点头像区可触发登录 */
.quota-left{cursor:default}
.quota-left.tappable{cursor:pointer}

.gate-card{text-align:center;max-width:320px}
.gate-icon{font-size:62px;margin-bottom:14px}
.gate-title{font-size:20px;margin:0 0 10px;color:var(--txt)}
.gate-desc{color:var(--txt2);font-size:14px;margin:0 0 22px;line-height:1.7}
.gate-qr{
  width:150px;height:150px;margin:0 auto 18px;
  background:linear-gradient(135deg,rgba(var(--cy-rgb),.15),rgba(var(--mg-rgb),.15));
  border:1px solid var(--line);border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-size:52px;
}
.gate-btn{
  display:block;width:100%;padding:13px;border-radius:10px;font-size:15px;font-weight:600;
  background:linear-gradient(135deg,var(--mg),var(--mg2));color:#fff;
}
.gate-btn.ghost{
  background:transparent;border:1px solid var(--line);color:var(--txt2);
  margin-top:12px;font-weight:500;
}

/* 微信授权卡 */
.gate-auth{align-items:flex-end;padding:0}
.auth-card{
  width:100%;max-width:480px;
  background:var(--bar-bg);
  border-radius:18px 18px 0 0;
  animation:up .28s ease-out;
  overflow:hidden;
}
@keyframes up{from{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}}

.auth-head{
  padding:18px 20px 14px;text-align:center;border-bottom:1px solid var(--line);
}
.auth-logo{font-size:40px;line-height:1}
.auth-app{font-size:13px;color:var(--txt2);margin-top:6px}

.auth-body{padding:24px 22px 14px;text-align:center}
.auth-avatar{
  width:64px;height:64px;border-radius:50%;margin:0 auto 12px;
  background:linear-gradient(135deg,var(--cy),var(--mg));
  display:flex;align-items:center;justify-content:center;
  font-size:26px;font-weight:700;color:#fff;
}
.auth-nick{font-size:18px;font-weight:600;margin-bottom:12px}
.auth-tip{font-size:13px;color:var(--muted);line-height:1.7;margin:0 0 16px}
.auth-scope{
  text-align:left;background:var(--card);border-radius:10px;padding:12px 14px;
  font-size:12.5px;color:var(--txt2);
}
.auth-scope input{margin-right:6px;accent-color:var(--cy)}

.auth-foot{display:flex;border-top:1px solid var(--line)}
.auth-btn{flex:1;padding:15px;font-size:16px;font-weight:600}
.auth-btn.cancel{color:var(--muted);border-right:1px solid var(--line)}
.auth-btn.allow{color:var(--ok)}

/* ================= 顶栏 ================= */
.topbar{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;
  background:rgba(var(--panel-rgb),.82);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.topbar-title{
  font-size:16px;font-weight:700;letter-spacing:.3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.topbar-btn{
  font-size:12px;color:var(--cy);border:1px solid rgba(var(--cy-rgb),.35);
  padding:5px 12px;border-radius:999px;white-space:nowrap;
}

/* ================= 票数条 ================= */
.quota-bar{
  margin:12px 14px 0;padding:12px 14px;
  background:linear-gradient(135deg,rgba(var(--cy-rgb),.1),rgba(var(--mg-rgb),.08));
  border:1px solid var(--line);border-radius:14px;
  display:flex;align-items:center;justify-content:space-between;
}
.quota-left{display:flex;align-items:center;gap:10px;min-width:0}
.quota-avatar{
  width:38px;height:38px;flex:0 0 38px;border-radius:50%;
  background:linear-gradient(135deg,var(--cy),var(--mg));
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:16px;color:#fff;
}
.quota-info{min-width:0}
.quota-nick{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.quota-sub{font-size:12px;color:var(--txt2);margin-top:1px}
.quota-sub b{color:var(--cy);font-size:14px}
.quota-ring{position:relative;width:44px;height:44px;flex:0 0 44px}
.quota-ring span{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;color:var(--cy);
}

/* ================= Banner ================= */
.banner{
  position:relative;height:150px;margin:12px 14px 0;border-radius:14px;overflow:hidden;
}
.banner-bg{
  position:absolute;inset:0;background-size:cover;background-position:center;
  background:var(--work-grad);
}
.banner-mask{
  position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 30%,rgba(var(--panel-rgb),.85) 100%);
}
.banner-text{
  position:absolute;left:16px;right:16px;bottom:14px;
  font-size:17px;font-weight:700;letter-spacing:.5px;
  text-shadow:0 2px 10px rgba(0,0,0,.5);
}

/* ================= 倒计时 ================= */
.cd-card{
  margin:12px 14px 0;padding:14px 16px;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  display:flex;align-items:center;gap:12px;
}
.cd-icon{flex:0 0 48px;opacity:.9}
.cd-label{font-size:12px;color:var(--muted)}
.cd-time{font-size:17px;font-weight:700;color:var(--cy);letter-spacing:.5px;margin-top:2px}

/* ================= 规则 ================= */
.rules{
  margin:12px 14px 0;padding:14px 16px;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
}
.rules-title{font-size:14px;font-weight:700;color:var(--gd);margin-bottom:8px}
.rules-list{margin:0;padding-left:18px;color:var(--txt2);font-size:12.5px}
.rules-list li{margin:4px 0}

/* ================= 搜索 ================= */
.searchbar{display:flex;gap:8px;padding:14px 14px 0}
.search-wrap{
  flex:1;display:flex;align-items:center;gap:8px;
  background:var(--card);border:1px solid var(--line);border-radius:999px;padding:8px 14px;
  color:var(--muted);
}
.search-wrap input{
  flex:1;background:none;border:none;outline:none;color:var(--txt);font-size:14px;
}
.search-wrap input::placeholder{color:var(--muted)}
.reset-btn{
  background:var(--card2);border:1px solid var(--line);color:var(--txt2);
  padding:8px 16px;border-radius:999px;font-size:13px;
}

/* ================= 作品网格 ================= */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px 14px 0}

.work{
  position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:14px;overflow:hidden;transition:transform .15s,border-color .15s,box-shadow .35s;
}
.work:active{transform:scale(.97)}
.work.sel{border-color:var(--cy);box-shadow:0 0 0 3px rgba(var(--cy-rgb),.18)}
/* 拉票落地页跳转过来时的"被点中"高亮（1.6s 自动淡出） */
.work.focus-pulse{
  border-color:var(--cy);
  box-shadow:0 0 0 4px rgba(var(--cy-rgb),.35),0 0 28px rgba(var(--cy-rgb),.5);
  animation:focus-pulse 1.6s ease-out;
}
@keyframes focus-pulse{
  0%   {transform:scale(1.02);box-shadow:0 0 0 0 rgba(var(--cy-rgb),.6),0 0 40px rgba(var(--cy-rgb),.7)}
  60%  {transform:scale(1.00);box-shadow:0 0 0 6px rgba(var(--cy-rgb),.15),0 0 20px rgba(var(--cy-rgb),.4)}
  100% {transform:scale(1);box-shadow:0 0 0 0 rgba(var(--cy-rgb),0),0 0 0 rgba(var(--cy-rgb),0)}
}

.work-photo{
  width:100%;aspect-ratio:4/3;background-size:contain;background-position:center;
  background-repeat:no-repeat;background-color:var(--img-bg);position:relative;
}
.work-rank{
  position:absolute;bottom:8px;left:8px;
  background:rgba(0,0,0,.55);backdrop-filter:blur(4px);
  padding:3px 8px;border-radius:999px;font-size:11px;font-weight:700;color:var(--gd);
  z-index:2;
}
.work-no{
  position:absolute;top:8px;left:8px;z-index:2;
  min-width:24px;height:24px;padding:0 7px;border-radius:999px;
  background:rgba(0,0,0,.55);backdrop-filter:blur(4px);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;line-height:1;
  box-shadow:0 2px 8px rgba(0,0,0,.35);
}
.work-check{
  position:absolute;top:8px;right:8px;
  width:24px;height:24px;border-radius:50%;
  background:rgba(0,0,0,.45);border:1.5px solid rgba(255,255,255,.5);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;color:#fff;font-weight:700;
}
.work.sel .work-check{background:var(--cy);border-color:var(--cy);color:#06202a}
.work-info-btn{
  position:absolute;bottom:8px;right:8px;
  width:26px;height:26px;border-radius:50%;
  background:rgba(0,0,0,.5);backdrop-filter:blur(4px);
  border:1px solid rgba(255,255,255,.28);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;color:#fff;line-height:1;
}
.work-info-btn:active{transform:scale(.9)}

.work-info{padding:10px 11px 12px}
.work-name{
  font-size:13.5px;font-weight:600;margin-bottom:5px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:36px;
}
.work-author{font-size:11.5px;color:var(--txt2)}
.work-group{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.work-desc{
  font-size:12px;line-height:1.45;color:var(--txt2);
  margin-top:6px;display:-webkit-box;-webkit-line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;
  text-overflow:ellipsis;word-break:break-word;
}
.work-votes{
  margin-top:8px;font-size:12px;font-weight:700;color:var(--gd);
  display:flex;align-items:center;justify-content:space-between;
}
.work-bar{flex:1;height:3px;background:rgba(255,255,255,.12);border-radius:2px;margin-left:8px;overflow:hidden}
.work-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gd),var(--mg));border-radius:2px}

.empty{grid-column:1/-1;padding:50px 16px;text-align:center;color:var(--muted);font-size:13px}

/* ================= 底部 tabbar ================= */
.tabbar{
  position:fixed;bottom:0;left:0;right:0;max-width:480px;margin:0 auto;
  display:flex;align-items:center;
  background:rgba(var(--panel-rgb),.94);backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  padding:8px 4px calc(8px + env(safe-area-inset-bottom));
  z-index:70;
}
.tabbar[hidden]{display:none}
.tab{flex:1;display:flex;flex-direction:column;align-items:center;color:var(--muted);padding:4px 0}
.tab.active{color:var(--cy)}
.ti{font-size:19px;line-height:1}
.tl{font-size:10.5px;margin-top:3px}

.tab.vote-btn{flex:1.4;position:relative;justify-content:center}
.vote-circle{
  width:54px;height:54px;border-radius:50%;
  background:linear-gradient(135deg,var(--mg),var(--mg2));
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(var(--mg-rgb),.4);
  margin-top:-16px;
}
.vote-circle b{font-size:19px;color:#fff;line-height:1}
.vote-circle i{font-size:9.5px;color:rgba(255,255,255,.85);font-style:normal;margin-top:1px}

.foot-space{height:20px}

/* ================= 底部主办署名 ================= */
.site-foot{
  margin-top:14px;
  padding:18px 16px 20px;
  text-align:center;
  border-top:1px solid var(--line);
}
.site-foot-host{
  color:#E8E6FF;
  font-size:14px;
  font-weight:600;
  letter-spacing:.5px;
}
.site-foot-by{
  color:var(--muted);
  font-size:12px;
  font-weight:400;
  letter-spacing:1px;
  margin-top:6px;
}

/* ================= 弹层 ================= */
.mask{
  position:fixed;inset:0;z-index:150;background:rgba(var(--panel-rgb),.72);
  display:flex;align-items:center;justify-content:center;padding:24px;
  animation:fade .18s;
}
.mask[hidden]{display:none}
@keyframes fade{from{opacity:0}to{opacity:1}}

.modal{
  width:100%;max-width:380px;max-height:82vh;overflow-y:auto;
  background:linear-gradient(180deg,var(--panel-d),var(--panel));
  border:1px solid var(--line);border-radius:16px;
  padding:26px 20px 20px;position:relative;
  animation:pop .22s;
}
@keyframes pop{from{transform:translateY(16px) scale(.97);opacity:0}to{transform:none;opacity:1}}

.m-close{
  position:absolute;top:10px;right:12px;width:28px;height:28px;border-radius:50%;
  background:var(--card2);color:var(--txt2);font-size:14px;
  display:flex;align-items:center;justify-content:center;
}
.m-title{text-align:center;margin:0 0 16px;font-size:17px;font-weight:700;color:var(--cy)}
.m-body{color:var(--txt2);font-size:13.5px;line-height:1.8;white-space:pre-wrap}

/* ---------- 分享弹层（底部抽屉式多渠道网格） ---------- */
.sheet{
  width:100%;max-width:380px;max-height:84vh;overflow-y:auto;
  background:linear-gradient(180deg,var(--panel-d),var(--panel));
  border:1px solid var(--line);border-radius:18px;
  padding:16px 16px 20px;position:relative;
  animation:pop .22s;
}
.share-sheet{padding:16px 16px 20px}
.share-linkcard{
  display:flex;gap:12px;align-items:center;
  background:var(--card2);border:1px solid var(--line);border-radius:14px;
  padding:12px 14px;margin-bottom:16px;
}
.slc-icon{width:40px;height:40px;border-radius:10px;flex-shrink:0;background:linear-gradient(135deg,#1D9E75,#534AB7)}
.slc-text{min-width:0;flex:1}
.slc-title{font-size:13px;font-weight:600;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.share-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px 4px;margin-bottom:8px}
.sch{background:none;border:none;cursor:pointer;padding:4px 2px;display:flex;flex-direction:column;align-items:center;gap:6px}
.sch-ico{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;color:#fff}
.sch-name{font-size:11px;color:var(--txt2)}
.sch:active .sch-ico{transform:scale(.94)}
.share-tip{font-size:12px;color:var(--txt2);text-align:center;min-height:16px;margin:10px 0 6px}
.share-close{width:100%;height:44px;border-radius:12px;font-size:15px;font-weight:600;border:1px solid var(--line);background:var(--card2);color:var(--txt2);cursor:pointer}
.share-close{background:var(--card2);color:var(--txt2)}
.share-copy:active,.share-close:active,.share-feishu:active{transform:scale(.98)}

.m-alert{text-align:center;padding:34px 20px 20px}
.alert-ico{font-size:56px;margin-bottom:14px}
.alert-txt{font-size:15.5px;line-height:1.7;margin-bottom:20px}
.alert-ok{
  width:100%;padding:12px;border-radius:10px;
  background:linear-gradient(135deg,var(--cy),var(--cy2));color:#06202a;font-weight:700;font-size:15px;
}

/* 详情 */
.m-detail{text-align:center;padding-top:22px}
.detail-photo{
  width:min(260px,72vw);height:260px;border-radius:14px;margin:0 auto 14px;
  background:var(--img-bg);
  border:2px solid var(--line);
  position:relative;overflow:hidden;cursor:zoom-in;
}
.detail-photo img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}
.detail-photo.empty img{display:none}
.detail-empty{
  position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  font-size:64px;font-weight:700;color:rgba(255,255,255,.35);
}
.detail-photo.empty .detail-empty{display:flex}
.detail-name{font-size:19px;margin:0 0 6px;color:var(--txt)}
.detail-author{font-size:14px;color:var(--cy)}
.detail-group{font-size:12px;color:var(--muted);margin-top:3px}
.detail-votes{
  display:inline-block;margin-top:12px;padding:5px 16px;border-radius:999px;
  background:rgba(255,201,92,.14);color:var(--gd);font-size:13px;font-weight:700;
}
.detail-desc{
  text-align:left;margin-top:14px;padding:13px 15px;border-radius:12px;
  background:var(--card);color:var(--txt2);font-size:13px;line-height:1.75;
}
.detail-share{
  width:100%;margin-top:16px;padding:12px;border-radius:12px;font-size:14px;font-weight:600;
  border:1px solid rgba(var(--cy-rgb),.5);color:var(--cy);cursor:pointer;
  background:linear-gradient(135deg,rgba(var(--cy-rgb),.1),rgba(var(--mg-rgb),.06));
}
.detail-share:active{transform:scale(.98)}

/* 榜单 / 我的 */
.rank-list,.mine-list{display:flex;flex-direction:column;gap:8px}
.rank-item,.mine-item{
  display:flex;align-items:center;gap:11px;padding:10px 12px;
  background:var(--card);border-radius:11px;border:1px solid transparent;
}
.rank-item:nth-child(1){border-color:rgba(255,201,92,.4)}
.rank-item:nth-child(2){border-color:rgba(200,200,210,.3)}
.rank-item:nth-child(3){border-color:rgba(210,150,100,.3)}
.rk-no{
  width:26px;height:26px;flex:0 0 26px;border-radius:50%;
  background:var(--card2);color:var(--txt2);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;
}
.rank-item:nth-child(1) .rk-no{background:var(--gd);color:#4a3000}
.rank-item:nth-child(2) .rk-no{background:#c8c8d2;color:#2b2b38}
.rank-item:nth-child(3) .rk-no{background:#d29664;color:#3d2410}
.rk-thumb{
  width:40px;height:40px;flex:0 0 40px;border-radius:8px;
  background-size:cover;background-position:center;background-color:var(--img-bg);
}
.rk-info{flex:1;min-width:0}
.rk-name{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk-meta{font-size:11.5px;color:var(--muted)}
.rk-votes{font-size:14px;font-weight:700;color:var(--gd);white-space:nowrap}
.rk-date{font-size:11px;color:var(--muted);white-space:nowrap}

/* 我的 */
.me-card{
  display:flex;align-items:center;gap:14px;padding:14px;
  background:var(--card);border-radius:12px;margin-bottom:14px;
}
.me-avatar{
  width:52px;height:52px;flex:0 0 52px;border-radius:50%;
  background:linear-gradient(135deg,var(--cy),var(--mg));
  display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;color:#fff;
}
.me-nick{font-size:16px;font-weight:600}
.me-openid{font-size:11px;color:var(--muted);margin-top:3px;word-break:break-all}
.me-stats{display:flex;gap:8px;margin-bottom:16px}
.me-stats>div{
  flex:1;text-align:center;padding:12px 6px;background:var(--card);border-radius:11px;
}
.me-stats b{display:block;font-size:20px;color:var(--cy)}
.me-stats span{font-size:11px;color:var(--muted)}
.me-logout{
  width:100%;padding:12px;border-radius:10px;
  border:1px solid rgba(255,90,90,.35);color:#ff7a7a;font-size:14px;
}
.me-share{
  width:100%;padding:12px;border-radius:10px;margin-bottom:10px;
  border:1px solid rgba(var(--cy-rgb),.5);color:var(--cy);font-size:14px;
  background:linear-gradient(135deg,rgba(var(--cy-rgb),.08),rgba(var(--mg-rgb),.06));
}
.me-share:active{transform:scale(.98)}

/* ================= 全屏图片查看器（微信朋友圈风格） ================= */
.img-viewer{
  position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.94);
  display:flex;align-items:center;justify-content:center;
  touch-action:none;-webkit-user-select:none;user-select:none;
}
.img-viewer-stage{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  overflow:hidden;cursor:grab;
}
.img-viewer-stage:active{cursor:grabbing}
.img-viewer-img{
  width:100%;height:100%;object-fit:contain;
  transform-origin:center center;transition:transform .25s ease;
  will-change:transform;display:block;pointer-events:auto;
}
.img-viewer.dragging .img-viewer-img{transition:none}
.img-viewer-close{
  position:absolute;top:max(16px,env(safe-area-inset-top,16px));right:16px;
  width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;z-index:2;
  background:rgba(255,255,255,.15);color:#fff;font-size:20px;line-height:1;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.img-viewer-close:hover{background:rgba(255,255,255,.28)}
.img-viewer-hint{
  position:absolute;bottom:max(18px,env(safe-area-inset-bottom,18px));left:0;right:0;
  text-align:center;font-size:12px;color:rgba(255,255,255,.55);
  pointer-events:none;letter-spacing:.5px;
  animation: hint-fade 5s ease 1.5s forwards;
}
@keyframes hint-fade{to{opacity:0}}