/* 第 1 关：2016 年手机贴吧的样子，全部作用域在 .tb 下 */
.tb{position:absolute;inset:0;background:#f2f2f2;display:flex;flex-direction:column;font-size:14px;color:#333;line-height:1.4}
.tb-bar{height:44px;background:#3d7ad6;color:#fff;display:flex;align-items:center;padding:0 12px;font-size:17px;font-weight:600;flex:none}
.tb-bar .tb-back{font-size:28px;width:28px;line-height:1;margin-top:-4px}
.tb-bar .tb-title{flex:1;text-align:center}
.tb-bar .tb-more{width:28px;text-align:right;font-size:20px}
.tb-head{display:flex;align-items:center;gap:10px;padding:7px 12px;background:#fff;flex:none}
.tb-avatar-big{width:40px;height:40px;border-radius:6px;background:linear-gradient(135deg,#ff7a59,#ffb347);color:#fff;font-weight:900;font-size:24px;display:flex;align-items:center;justify-content:center;flex:none}
.tb-head b{font-size:16px}
.tb-meta{font-size:12px;color:#999;margin-top:2px}
.tb-sign{margin-left:auto;background:#3d7ad6;color:#fff;border:0;border-radius:14px;padding:6px 14px;font-size:13px;flex:none}
.tb-sign.done{background:#c9c9c9}
.tb-tabs{display:flex;background:#fff;border-bottom:1px solid #e5e5e5;flex:none}
.tb-tabs span{flex:1;text-align:center;padding:7px 0;font-size:14px;color:#666;position:relative}
.tb-tabs span.on{color:#3d7ad6;font-weight:600}
.tb-tabs span.on::after{content:'';position:absolute;left:32%;right:32%;bottom:0;height:2px;background:#3d7ad6}
.tb-list{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;position:relative}
.tb-item{background:#fff;padding:8px 12px 7px;border-bottom:1px solid #eee;cursor:pointer}
.tb-item:active{background:#eef3fb}
.tb-user{display:flex;align-items:center;gap:7px;font-size:12px;color:#666}
.tb-ava{width:22px;height:22px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex:none}
.tb-time{margin-left:auto;color:#aaa}
.tb-t{font-size:15px;font-weight:600;margin:4px 0 2px;line-height:1.3;color:#222;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-c{font-size:12px;color:#888;display:flex;gap:8px}
.tb-c>span:first-child{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-foot{font-size:12px;color:#aaa;flex:none}
.tb-tag{display:inline-block;font-size:10px;line-height:14px;color:#e33;border:1px solid #e33;border-radius:3px;padding:0 4px;margin-right:5px;vertical-align:2px}
.tb-lz{margin:0 0 0 2px;color:#3d7ad6;border-color:#3d7ad6}
.tb-loading{padding:40px 20px;text-align:center;color:#999;font-size:13px}
.tb-pager{flex:none;display:flex;justify-content:center;align-items:center;gap:5px;padding:7px 6px 48px;background:#f2f2f2;font-size:13px}
.tb-pager span{min-width:30px;height:30px;line-height:28px;text-align:center;border-radius:4px;background:#fff;border:1px solid #ddd;padding:0 7px;cursor:pointer;white-space:nowrap}
.tb-pager span.on{background:#3d7ad6;color:#fff;border-color:#3d7ad6}
.tb-pager span.dis{color:#bbb;background:#f7f7f7}
.tb-toast{position:absolute;left:50%;top:130px;transform:translateX(-50%);background:rgba(0,0,0,.78);color:#fff;padding:8px 14px;border-radius:6px;font-size:13px;z-index:9;white-space:nowrap;animation:tbfade 1.2s both;pointer-events:none}
@keyframes tbfade{0%{opacity:0;transform:translate(-50%,8px)}12%{opacity:1;transform:translate(-50%,0)}80%{opacity:1}100%{opacity:0}}

/* 帖子详情 */
.tb-detail{position:absolute;inset:0;background:#fff;z-index:3;display:flex;flex-direction:column;animation:tbslide .18s ease-out both}
@keyframes tbslide{from{transform:translateX(40px);opacity:.4}to{transform:none;opacity:1}}
.tb-post{padding:14px 12px 10px}
.tb-post h3{margin:0 0 10px;font-size:17px;line-height:1.35}
.tb-post .tb-user{margin-bottom:8px}
.tb-post p{margin:0;font-size:15px;line-height:1.6}
.tb-floor{padding:10px 12px;border-top:1px solid #eee;font-size:13px;color:#555}
.tb-join{display:block;margin:16px 12px;background:#3d7ad6;color:#fff;text-align:center;padding:12px;border-radius:6px;font-size:16px;font-weight:600}
.tb-wrong .tb-post{opacity:.55}

/* 2016 年 QQ 的加群弹窗 */
.qq-mask{position:absolute;inset:0;background:rgba(0,0,0,.35);z-index:8;display:flex;align-items:flex-start;padding-top:64px;justify-content:center;animation:tbfadein .2s both}
@keyframes tbfadein{from{opacity:0}to{opacity:1}}
.qq-dlg{width:290px;background:#fff;border-radius:4px;box-shadow:0 10px 30px rgba(0,0,0,.4);overflow:hidden;font-size:13px;animation:qqpop .3s cubic-bezier(.2,1.4,.4,1) both}
@keyframes qqpop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.qq-bar{background:linear-gradient(#3aa0f5,#1f7fdc);color:#fff;padding:8px 10px;font-size:13px;display:flex;align-items:center;gap:6px}
.qq-body{padding:12px 14px 14px}
.qq-row{display:flex;padding:4px 0;color:#222}
.qq-row b{width:70px;color:#777;font-weight:normal;flex:none}
.qq-ok{margin:10px auto 0;display:block;background:#1f7fdc;color:#fff;border:0;padding:6px 28px;border-radius:3px;font-size:13px}
.qq-ok:disabled{background:#9cc5ee}
.qq-stat{margin-top:10px;color:#2a8f3c;font-weight:600;text-align:center;min-height:18px}

.tb-pager span.seen:not(.on){text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}.tb-pager span:last-child:not(.dis){background:#275ba8;color:#fff;border-radius:5px;padding:5px 6px}