/* 跨境网页社交程序 - 全局样式 */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --primary: #4a7dff; --primary-d: #3562d8; --bg: #f3f5f9; --panel: #fff;
  --text: #222; --text2: #888; --border: #e6e8ee; --danger: #e74c3c; --green: #2ebd59;
}
body { font-family: "PingFang SC", "Microsoft YaHei", sans-serif; background: var(--bg); color: var(--text); font-size: 14px; }
a { color: var(--primary); text-decoration: none; }
button { cursor: pointer; border: none; border-radius: 6px; font-size: 14px; }
.btn { background: var(--primary); color: #fff; padding: 10px 20px; }
.btn:hover { background: var(--primary-d); }
.btn-gray { background: #e8eaf0; color: #555; padding: 8px 16px; }
.btn-danger { background: var(--danger); color: #fff; padding: 8px 16px; }
.btn-sm { padding: 4px 10px; font-size: 12px; }
input, textarea, select { border: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; font-size: 14px; outline: none; width: 100%; }
input:focus, textarea:focus { border-color: var(--primary); }

/* 认证页 */
.auth-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.auth-card { background: var(--panel); width: 92vw; max-width: 400px; border-radius: 12px; padding: 36px 32px; box-shadow: 0 6px 30px rgba(0,0,0,.08); }
.auth-card h1 { font-size: 20px; text-align: center; margin-bottom: 6px; }
.auth-card .sub { text-align: center; color: var(--text2); font-size: 13px; margin-bottom: 24px; }
.auth-card .field { margin-bottom: 14px; }
.auth-card .btn { width: 100%; margin-top: 6px; }
.auth-links { display: flex; justify-content: space-between; margin-top: 16px; font-size: 13px; }
.auth-msg { min-height: 20px; font-size: 13px; color: var(--danger); margin: 4px 0; text-align: center; }
.auth-msg.ok { color: var(--green); }

/* 主界面三栏 */
.layout { display: flex; height: 100vh; }
.side { width: 68px; background: #2b2f3a; display: flex; flex-direction: column; align-items: center; padding: 14px 0; }
.side .avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; margin-bottom: 18px; overflow: hidden; }
.side .avatar img { width: 100%; height: 100%; object-fit: cover; }
.side .nav-item { width: 100%; text-align: center; color: #9aa0b0; padding: 12px 0; cursor: pointer; font-size: 13px; position: relative; }
.side .nav-item.active, .side .nav-item:hover { color: #fff; background: #363b49; }
.side .nav-item .badge { position: absolute; top: 6px; right: 12px; background: var(--danger); color: #fff; border-radius: 8px; font-size: 10px; padding: 1px 5px; }
.side .spacer { flex: 1; }
.side .logout { color: #9aa0b0; font-size: 12px; cursor: pointer; padding: 8px; }
.side .logout:hover { color: #fff; }

.list-panel { width: 280px; background: var(--panel); border-right: 1px solid var(--border); display: flex; flex-direction: column; }
.list-head { padding: 14px; border-bottom: 1px solid var(--border); font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
.list-head .act { font-size: 12px; color: var(--primary); cursor: pointer; font-weight: 400; }
.list-body { flex: 1; overflow-y: auto; }
.conv-item { display: flex; align-items: center; padding: 12px 14px; cursor: pointer; border-bottom: 1px solid #f4f5f8; }
.conv-item:hover, .conv-item.active { background: #f5f7fc; }
.conv-item .av { width: 40px; height: 40px; border-radius: 8px; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 16px; margin-right: 10px; position: relative; flex-shrink: 0; overflow: hidden; }
.conv-item .av img { width: 100%; height: 100%; object-fit: cover; }
.conv-item .av .dot { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--green); border: 2px solid #fff; }
.conv-item .av .dot.off { background: #ccc; }
.conv-item .info { flex: 1; min-width: 0; }
.conv-item .name { font-size: 14px; display: flex; justify-content: space-between; }
.conv-item .name .t { color: var(--text2); font-size: 11px; }
.conv-item .prev { color: var(--text2); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conv-item .unread { background: var(--danger); color: #fff; border-radius: 9px; font-size: 11px; padding: 1px 6px; margin-left: 6px; }
.empty-tip { text-align: center; color: var(--text2); padding: 40px 0; font-size: 13px; }

/* 聊天区 */
.chat-panel { flex: 1; display: flex; flex-direction: column; background: var(--bg); }
.chat-head { background: var(--panel); padding: 14px 20px; border-bottom: 1px solid var(--border); font-weight: 600; display: flex; align-items: center; gap: 10px; }
.chat-head .st { font-size: 12px; color: var(--text2); font-weight: 400; }
.chat-head .st.on { color: var(--green); }
.chat-body { flex: 1; overflow-y: auto; padding: 20px; }
.chat-empty { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--text2); }
.msg-row { display: flex; margin-bottom: 16px; }
.msg-row.me { flex-direction: row-reverse; }
.msg-row .av { width: 36px; height: 36px; border-radius: 8px; background: #7aa2ff; color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.msg-row .av img { width: 100%; height: 100%; object-fit: cover; }
.msg-row .box { max-width: 62%; margin: 0 10px; }
.msg-row .who { font-size: 11px; color: var(--text2); margin-bottom: 3px; }
.msg-row .bubble { background: var(--panel); padding: 10px 13px; border-radius: 10px; word-break: break-all; line-height: 1.5; position: relative; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.msg-row.me .bubble { background: #d6e4ff; }
.msg-row .bubble img.chat-img { max-width: 260px; max-height: 260px; border-radius: 6px; display: block; cursor: pointer; }
.msg-row .bubble .file-card { display: flex; align-items: center; gap: 8px; }
.msg-row .bubble .file-card .fi { font-size: 24px; }
.msg-row .meta { font-size: 11px; color: var(--text2); margin-top: 3px; text-align: right; display: flex; gap: 8px; justify-content: flex-end; }
.msg-row .meta .recall { color: var(--primary); cursor: pointer; }
.msg-row .recalled-tip { color: var(--text2); font-style: italic; }
.chat-foot { background: var(--panel); border-top: 1px solid var(--border); padding: 10px 14px; }
.chat-foot .toolbar { display: flex; gap: 12px; margin-bottom: 8px; }
.chat-foot .toolbar span { cursor: pointer; font-size: 18px; color: #666; }
.chat-foot .toolbar span:hover { color: var(--primary); }
.chat-foot .input-row { display: flex; gap: 10px; }
.chat-foot textarea { flex: 1; resize: none; height: 60px; }
.chat-foot .btn { align-self: flex-end; }
.emoji-panel { display: none; background: #fff; border: 1px solid var(--border); border-radius: 8px; padding: 8px; position: absolute; bottom: 110px; left: 20px; width: 320px; grid-template-columns: repeat(8, 1fr); gap: 4px; z-index: 50; box-shadow: 0 4px 16px rgba(0,0,0,.1); }
.emoji-panel.show { display: grid; }
.emoji-panel span { font-size: 20px; cursor: pointer; text-align: center; padding: 4px; border-radius: 4px; }
.emoji-panel span:hover { background: #f0f2f7; }

/* 弹窗 */
.modal-mask { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 100; align-items: center; justify-content: center; }
.modal-mask.show { display: flex; }
.modal { background: #fff; border-radius: 12px; width: 92vw; max-width: 440px; max-height: 80vh; display: flex; flex-direction: column; }
.modal .m-head { padding: 16px 20px; border-bottom: 1px solid var(--border); font-weight: 600; display: flex; justify-content: space-between; }
.modal .m-head .x { cursor: pointer; color: var(--text2); }
.modal .m-body { padding: 20px; overflow-y: auto; }
.modal .m-foot { padding: 12px 20px; border-top: 1px solid var(--border); text-align: right; display: flex; gap: 10px; justify-content: flex-end; }

/* 好友页内部 */
.f-search { display: flex; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--border); }
.f-group-name { padding: 10px 14px 4px; font-size: 12px; color: var(--text2); }
.f-item { display: flex; align-items: center; padding: 8px 14px; cursor: pointer; }
.f-item:hover { background: #f5f7fc; }
.f-item .av { width: 34px; height: 34px; border-radius: 8px; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; margin-right: 10px; position: relative; overflow: visible; }
.f-item .av img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.f-item .dot { position: absolute; right: -2px; bottom: -2px; width: 9px; height: 9px; border-radius: 50%; background: var(--green); border: 2px solid #fff; }
.f-item .dot.off { background: #ccc; }
.f-item .nm { flex: 1; }
.f-item .ops { display: none; gap: 6px; }
.f-item:hover .ops { display: flex; }
.f-item .ops span { font-size: 11px; color: var(--primary); cursor: pointer; }
.f-item .ops span.danger { color: var(--danger); }
.req-item { padding: 10px 14px; border-bottom: 1px solid #f4f5f8; }
.req-item .msg { color: var(--text2); font-size: 12px; margin: 4px 0; }
.req-item .ops { display: flex; gap: 8px; }

/* toast */
#toast { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.75); color: #fff; padding: 10px 20px; border-radius: 8px; z-index: 999; display: none; font-size: 13px; max-width: 80vw; }

/* 后台 */
.admin-wrap { max-width: 1000px; margin: 0 auto; padding: 20px; }
.admin-tabs { display: flex; gap: 4px; margin-bottom: 16px; }
.admin-tabs div { padding: 8px 18px; background: #fff; border-radius: 8px 8px 0 0; cursor: pointer; border: 1px solid var(--border); border-bottom: none; }
.admin-tabs div.active { background: var(--primary); color: #fff; }
.admin-card { background: #fff; border-radius: 10px; padding: 20px; border: 1px solid var(--border); }
table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tbl th, table.tbl td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; }
table.tbl th { background: #f8f9fc; color: #555; }
.pager { margin-top: 12px; display: flex; gap: 8px; align-items: center; justify-content: center; font-size: 13px; }

/* 移动端 */
@media (max-width: 768px) {
  .layout { flex-direction: row; }
  .list-panel { width: 0; overflow: hidden; }
  .layout.show-list .list-panel { width: 100%; position: absolute; z-index: 20; height: 100%; left: 68px; right: 0; }
  .chat-panel { display: none; }
  .layout.chat-open .chat-panel { display: flex; position: absolute; z-index: 30; inset: 0; }
  .chat-head .back { display: inline-block !important; margin-right: 8px; color: var(--primary); cursor: pointer; }
}

/* ========== 阶段2：成长体系 ========== */
/* 头像框（穿戴） */
.av.f-frame_bronze, .side .avatar.f-frame_bronze, .pf-avatar.f-frame_bronze { box-shadow: 0 0 0 2px #cd7f32, 0 0 6px rgba(205,127,50,.5); }
.av.f-frame_silver, .side .avatar.f-frame_silver, .pf-avatar.f-frame_silver { box-shadow: 0 0 0 2px #c9d2dc, 0 0 6px rgba(201,210,220,.7); }
.av.f-frame_gold, .side .avatar.f-frame_gold, .pf-avatar.f-frame_gold { box-shadow: 0 0 0 2px #ffc531, 0 0 8px rgba(255,197,49,.7); }
.av.f-frame_diamond, .side .avatar.f-frame_diamond, .pf-avatar.f-frame_diamond { box-shadow: 0 0 0 2px #8fe3ff, 0 0 10px 2px rgba(106,208,255,.8); }

/* 彩虹字体 */
.rainbow-text {
  background: linear-gradient(90deg,#ff5e5e,#ffb648,#f5dd4b,#52d273,#4a90ff,#a64aff,#ff5e5e);
  background-size: 200% 100%; -webkit-background-clip: text; background-clip: text;
  color: transparent !important; animation: rainbow-move 3s linear infinite;
}
@keyframes rainbow-move { to { background-position: 200% 0; } }
/* 专属气泡 */
.msg-row.me .bubble.b-bubble_star { background: linear-gradient(135deg,#3b3f7a 0%,#6d4a9e 60%,#2c2350 100%); color:#fff; box-shadow:0 2px 8px rgba(90,60,160,.35); }

/* 等级徽章 */
.lv-badge { display: inline-block; font-size: 10px; line-height: 1; padding: 2px 5px; border-radius: 7px; color:#fff; font-weight:600; vertical-align: middle; }
.lv-seg-1 { background: linear-gradient(135deg,#7bc47f,#4e9e57); }
.lv-seg-2 { background: linear-gradient(135deg,#5aa7ff,#2f6fd0); }
.lv-seg-3 { background: linear-gradient(135deg,#b47cff,#7b3fd1); }
.lv-seg-4 { background: linear-gradient(135deg,#ff9a5a,#e25822); }
.lv-seg-5 { background: linear-gradient(135deg,#ff5e5e,#c81d4e); }
.lv-seg-50 { background: linear-gradient(90deg,#ffd34e,#ff7e4e,#ffd34e); background-size:200% 100%; animation: rainbow-move 2.5s linear infinite; }
.side .avatar-wrap { position: relative; cursor: pointer; margin-bottom: 18px; }
.side .avatar-wrap .dot-red { position: absolute; top: -3px; right: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--danger); border: 1.5px solid #2b2f3a; }

/* 个人中心 */
.pf-wrap { max-width: 760px; margin: 0 auto; padding: 16px 14px 40px; }
.pf-back { color: var(--primary); cursor: pointer; font-size: 13px; display: inline-block; margin-bottom: 10px; }
.pf-card { background: #fff; border-radius: 12px; padding: 20px; box-shadow: 0 2px 12px rgba(0,0,0,.05); margin-bottom: 14px; }
.pf-head { display: flex; gap: 16px; align-items: center; }
.pf-avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 26px; flex-shrink: 0; overflow: hidden; }
.pf-avatar img { width: 100%; height: 100%; object-fit: cover; }
.pf-id { color: var(--text2); font-size: 12px; margin-top: 2px; }
.pf-expbar { flex: 1; margin-top: 10px; }
.exp-track { height: 10px; background: #eef1f7; border-radius: 5px; overflow: hidden; margin: 6px 0 4px; }
.exp-fill { height: 100%; background: linear-gradient(90deg,#6aa2ff,#9b6bff); border-radius: 5px; transition: width .4s; }
.exp-num { font-size: 11px; color: var(--text2); }
.pf-stats { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.pf-stat { flex: 1; min-width: 120px; background: #f7f9ff; border-radius: 8px; padding: 10px 12px; }
.pf-stat b { font-size: 17px; display: block; }
.pf-stat span { font-size: 11px; color: var(--text2); }
.pf-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.pf-tabs div { flex: 1; text-align: center; padding: 10px; background: #fff; border-radius: 8px; cursor: pointer; font-size: 13px; color: #666; border: 1px solid var(--border); position: relative; }
.pf-tabs div.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.pf-tabs .rd-dot { position: absolute; top: 4px; right: 8px; min-width: 15px; height: 15px; line-height: 15px; border-radius: 8px; background: var(--danger); color: #fff; font-size: 10px; padding: 0 4px; }
.task-item, .ach-item, .deco-item { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid #f2f3f7; }
.task-item:last-child, .ach-item:last-child, .deco-item:last-child { border-bottom: none; }
.task-item .ti-info, .ach-item .ai-info { flex: 1; min-width: 0; }
.task-item .ti-name, .ach-item .ai-name { font-size: 14px; }
.task-item .ti-prog { height: 6px; background: #eef1f7; border-radius: 3px; margin-top: 6px; overflow: hidden; }
.task-item .ti-prog i { display: block; height: 100%; background: var(--green); border-radius: 3px; }
.task-item .ti-meta, .ach-item .ai-meta { font-size: 11px; color: var(--text2); margin-top: 3px; }
.ach-item .ai-icon { width: 42px; height: 42px; border-radius: 10px; background: #f0f2f8; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.ach-item.done .ai-icon { background: #fff4d6; }
.ach-item.locked { opacity: .55; }
.tag { display: inline-block; font-size: 10px; padding: 1px 6px; border-radius: 6px; background: #eef1f7; color: #777; }
.tag.got { background: #e6f8ec; color: #1e9e48; }
.tag.soon { background: #f0e8ff; color: #7b3fd1; }
.deco-item .di-prev { width: 46px; height: 46px; border-radius: 50%; background: #7aa2ff; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; overflow: hidden; }
.deco-item.locked { opacity: .5; }
.deco-item .di-lock { font-size: 11px; color: var(--text2); }

/* 升级/解锁弹窗 */
.lvup-mask { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 1000; display: none; align-items: center; justify-content: center; }
.lvup-mask.show { display: flex; }
.lvup-box { background: linear-gradient(160deg,#fff8e6,#fff); border-radius: 16px; padding: 30px 36px; text-align: center; animation: pop .3s; max-width: 86vw; }
@keyframes pop { from { transform: scale(.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.lvup-box .lv-num { font-size: 40px; font-weight: 700; background: linear-gradient(90deg,#ff9a3d,#ff5e7e); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 8px 0; }
.lvup-box .rw-list { margin: 12px 0 18px; color: #8a5a18; font-size: 13px; }
@media (max-width: 768px) {
  .pf-stat { min-width: 44%; }
}

/* ===== 阶段3：礼物 ===== */
.gift-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.gift-cell { border: 2px solid var(--border); border-radius: 12px; padding: 10px 6px; text-align: center; cursor: pointer; position: relative; transition: border-color .15s; }
.gift-cell:hover { border-color: #c3d4ff; }
.gift-cell.sel { border-color: var(--primary); background: #f4f8ff; }
.gift-cell.locked { opacity: .45; cursor: not-allowed; }
.gift-cell .gc-icon { font-size: 30px; line-height: 1.3; }
.gift-cell .gc-name { font-size: 12px; margin-top: 2px; }
.gift-cell .gc-price { font-size: 11px; color: #c8a24a; }
.gift-cell .gc-lock { position: absolute; top: 4px; right: 6px; font-size: 10px; color: #999; }
.gift-cell .gc-type { position: absolute; top: 4px; left: 6px; font-size: 9px; padding: 0 4px; border-radius: 4px; background: #f0e8ff; color: #7b3fd1; }

/* 收礼动画（覆盖层） */
.gift-anim { position: fixed; inset: 0; z-index: 1200; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(10,8,30,.45); pointer-events: none; }
.gift-anim .ga-icon { font-size: 96px; animation: giftPop 2.4s ease forwards; filter: drop-shadow(0 6px 18px rgba(255,180,60,.6)); }
.gift-anim .ga-text { margin-top: 14px; color: #fff; font-size: 16px; background: rgba(0,0,0,.5); padding: 8px 18px; border-radius: 20px; animation: giftFade 2.4s ease forwards; }
.gift-anim.special { background: rgba(20,10,40,.72); }
.gift-anim.special .ga-icon { animation: giftSpin 2.8s ease forwards; }
@keyframes giftPop { 0% { transform: scale(.1) translateY(80px); opacity: 0; } 18% { transform: scale(1.3); opacity: 1; } 30% { transform: scale(1); } 78% { opacity: 1; transform: scale(1.05) translateY(-10px); } 100% { transform: scale(1.1) translateY(-40px); opacity: 0; } }
@keyframes giftSpin { 0% { transform: scale(.1) rotate(-360deg); opacity: 0; } 20% { transform: scale(1.35) rotate(0); opacity: 1; } 32% { transform: scale(1); } 80% { opacity: 1; } 100% { transform: scale(1.2) translateY(-50px); opacity: 0; } }
@keyframes giftFade { 0% { opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }

/* 礼物消息气泡 */
.bubble .gift-card { display: flex; align-items: center; gap: 8px; min-width: 130px; }
.bubble .gift-card .gi { font-size: 30px; }
.bubble .gift-card .gn { font-size: 13px; font-weight: 600; }
.bubble .gift-card .gx { font-size: 11px; color: #c8a24a; }
.bubble .gift-card .gb { font-size: 11px; color: var(--text2); margin-top: 1px; }

/* 充值网格 */
.pay-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pay-cell { border: 2px solid var(--border); border-radius: 12px; padding: 16px 8px; text-align: center; cursor: pointer; }
.pay-cell:hover { border-color: var(--primary); background: #f4f8ff; }
.pay-cell b { display: block; font-size: 16px; }
.pay-cell span { font-size: 12px; color: #c8a24a; }

/* 礼物墙网格 */
.wall-grid { display: flex; gap: 10px; flex-wrap: wrap; }
.wall-cell { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; text-align: center; min-width: 70px; }
.wall-cell .wc-icon { font-size: 28px; }
.wall-cell .wc-name { font-size: 11px; }
.wall-cell .wc-num { font-size: 11px; color: var(--primary); }

/* 亲密关系卡片 */
.rel-card { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 16px; margin-bottom: 12px; }
.rel-card .rc-head { display: flex; gap: 12px; align-items: center; }
.intimate-tag { font-size: 11px; color: #d6336c; background: #ffe4ec; padding: 1px 7px; border-radius: 8px; margin-left: 6px; }

/* 亲密等级特权：专属头像框 + 专属聊天气泡（Lv 达标后聊天窗口自动启用） */
.intimate-bubbles .msg-row .avatar { box-shadow: 0 0 0 2px #ffd7e2, 0 0 0 4px #ffb3c9; border-radius: 50%; }
.intimate-bubbles .msg-row .bubble { background: linear-gradient(135deg, #fff0f5, #ffe0eb); border: 1px solid #ffc9d9; }
.intimate-bubbles .msg-row.me .bubble { background: linear-gradient(135deg, #ffd7e6, #ffb8d1); border-color: #ff9dbe; }

/* ========== 阶段8：资料主页 / 照片墙 / 动态 / 信物 ========== */
.sign-text { color:#8a7f6f; font-size:12px; margin-top:4px; }
.edit-btn { font-size:12px; color:var(--primary); cursor:pointer; }
.photo-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.photo-cell { position:relative; aspect-ratio:1; border-radius:8px; overflow:hidden; background:#f0f2f6; cursor:pointer; }
.photo-cell img { width:100%; height:100%; object-fit:cover; display:block; }
.photo-cell .ph-del { position:absolute; top:4px; right:4px; background:rgba(0,0,0,.55); color:#fff; font-size:11px; padding:2px 7px; border-radius:10px; }
.photo-add { display:flex; align-items:center; justify-content:center; flex-direction:column; gap:4px; color:var(--text2); font-size:12px; border:1.5px dashed #cdd4e0; border-radius:8px; aspect-ratio:1; cursor:pointer; }
.mom-card { border-bottom:1px solid #f2f3f7; padding:14px 2px; }
.mom-card:last-child { border-bottom:none; }
.mom-head { display:flex; align-items:center; gap:10px; }
.mom-head .avatar { width:38px; height:38px; border-radius:50%; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-size:16px; overflow:hidden; flex-shrink:0; cursor:pointer; }
.mom-head .avatar img { width:100%; height:100%; object-fit:cover; }
.mom-head .avatar .lv-badge { position:absolute; }
.mom-user { flex:1; min-width:0; }
.mom-user .n { font-size:14px; font-weight:600; cursor:pointer; }
.mom-user .t { font-size:11px; color:var(--text2); margin-top:1px; }
.mom-content { font-size:14px; line-height:1.6; margin:8px 0 0 48px; word-break:break-all; white-space:pre-wrap; }
.mom-imgs { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; margin:8px 0 0 48px; }
.mom-imgs img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:6px; cursor:pointer; display:block; }
.mom-ops { display:flex; gap:18px; margin:10px 0 0 48px; font-size:12px; color:var(--text2); }
.mom-ops span { cursor:pointer; }
.mom-ops span.on, .mom-ops span:hover { color:var(--primary); }
.mom-comments { margin:10px 0 0 48px; background:#f7f8fb; border-radius:8px; padding:8px 10px; font-size:12px; }
.mom-comments .c-item { padding:3px 0; line-height:1.5; }
.mom-comments .c-item b { cursor:pointer; }
.mom-comment-row { display:flex; gap:8px; margin:10px 0 0 48px; }
.mom-comment-row input { flex:1; padding:7px 10px; font-size:13px; }
.avatar-wrap2 { display:inline-flex; flex-direction:column; align-items:center; gap:2px; }
.user-rel-card { background:linear-gradient(135deg,#fff5f8,#ffeef4); border:1px solid #ffd9e5; border-radius:12px; padding:14px 16px; display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.token-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.token-cell { border:2px solid var(--border); border-radius:12px; padding:14px 6px; text-align:center; }
.token-cell .ic { font-size:30px; }
.token-cell .nm { font-size:13px; font-weight:600; margin-top:6px; }
.token-cell .pr { font-size:12px; color:#c8a24a; margin-top:2px; }
.token-cell .own { font-size:11px; color:var(--green); margin-top:2px; }
.avatar-sm { width:26px; height:26px; border-radius:50%; background:var(--primary); color:#fff; display:inline-flex; align-items:center; justify-content:center; font-size:12px; overflow:hidden; vertical-align:middle; }
.avatar-sm img { width:100%; height:100%; object-fit:cover; }


/* 阶段9：全频喇叭广播 */
.bc-bar { position:fixed; top:0; left:0; right:0; z-index:90; display:flex; align-items:center; gap:8px;
  height:34px; background:linear-gradient(90deg,#4a7dff,#7aa2ff); color:#fff; padding:0 14px; font-size:13px;
  box-shadow:0 1px 4px rgba(0,0,0,.15); }
.bc-bar .bc-icon { font-size:15px; flex-shrink:0; }
.bc-bar .bc-text { flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bc-bar .bc-more { cursor:pointer; font-size:12px; background:rgba(255,255,255,.22); border-radius:10px;
  padding:1px 10px; flex-shrink:0; }
.bc-bar .bc-more:hover { background:rgba(255,255,255,.35); }
body.has-bc { padding-top:34px; }
body.has-bc .layout { height:calc(100vh - 34px); }
.couple-bc { opacity:.5; }
.couple-bc.on { opacity:1; color:var(--primary); text-shadow:0 0 6px rgba(74,125,255,.55); }

/* ---------- 盲盒（阶段10） ---------- */
.bb-tabs { display:flex; gap:8px; margin-bottom:12px; }
.bb-tabs span { padding:6px 16px; border:1px solid var(--border); border-radius:18px; font-size:13px; cursor:pointer; color:var(--text2); }
.bb-tabs span.active { background:var(--primary); color:#fff; border-color:var(--primary); }
.bb-grid { display:flex; flex-direction:column; gap:10px; }
.bb-card { border:1px solid var(--border); border-radius:10px; padding:12px; }
.bb-head { display:flex; align-items:center; gap:10px; }
.bb-icon { font-size:28px; }
.bb-name { font-weight:600; font-size:14.5px; }
.bb-open { margin-left:auto; }
.bb-prizes { display:flex; flex-wrap:wrap; gap:6px; margin-top:9px; }
.bb-prize { font-size:11.5px; background:#f5f7fc; border-radius:6px; padding:3px 8px; color:#556; }
.bb-prize i { font-style:normal; color:#a0a8bf; margin-left:2px; }
.bb-prize.soldout { opacity:.45; text-decoration:line-through; }
.bb-result { display:none; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  margin:12px 0 4px; padding:16px; border-radius:12px;
  background:linear-gradient(135deg,#fff7e8 0%,#fdeff5 55%,#eef3ff 100%); border:1px solid #f3e2c0; }
.bb-result.pop { animation:bbrPop .45s cubic-bezier(.18,.89,.32,1.28); }
@keyframes bbrPop { 0% { transform:scale(.5); opacity:0; } 100% { transform:scale(1); opacity:1; } }
.bbr-icon { font-size:34px; line-height:1; }
.bbr-icon.big { font-size:52px; filter:drop-shadow(0 4px 10px rgba(74,125,255,.35)); }
.bbr-name { font-size:17px; font-weight:700; margin-top:6px; color:#8a5a18; }
.bbr-text { font-size:12px; color:#99742f; margin-top:4px; }
.inv-cell { display:inline-flex; align-items:center; gap:4px; font-size:12.5px; padding:4px 10px;
  border:1px solid var(--border); border-radius:8px; cursor:pointer; background:#fafbfe; }
.inv-cell b { color:var(--primary); }
.inv-cell:hover { border-color:var(--primary); }
.inv-cell.sel { background:var(--primary); color:#fff; border-color:var(--primary); }
.inv-cell.sel b { color:#fff; }