*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
:root{
  --primary:#FF5252;
  --primary-light:#FF8A80;
  --primary-dark:#E53935;
  --bg:#F5F5F8;
  --card-bg:#fff;
  --white:#fff;
  --text:#1A1A2E;
  --text2:#666;
  --text3:#aaa;
  --border:#F0F0F0;
  --shadow:0 2px 12px rgba(0,0,0,.06);
  --shadow-hover:0 6px 24px rgba(0,0,0,.12);
  --radius:14px;
  --nav-h:56px;
}
html,body{height:100%;background:var(--bg);font-family:-apple-system,BlinkMacSystemFont,'PingFang SC','Helvetica Neue',sans-serif;font-size:14px;color:var(--text);overflow:hidden}

#app{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--bg)}
.page{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;background:var(--bg);display:none;flex-direction:column;padding-bottom:var(--nav-h)}
.page.active{display:flex}

.bottom-nav{position:fixed;bottom:0;left:0;right:0;height:var(--nav-h);background:rgba(255,255,255,.95);border-top:1px solid rgba(0,0,0,.04);display:flex;align-items:center;z-index:100;padding-bottom:env(safe-area-inset-bottom);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;padding:6px 0;position:relative;transition:transform .15s}
.nav-item:active{transform:scale(.92)}
.nav-item span{font-size:10px;color:var(--text2);transition:color .2s}
.nav-item.active span{color:var(--primary);font-weight:600}
.nav-icon{font-size:20px;line-height:1;position:relative;transition:transform .2s}
.nav-item.active .nav-icon{transform:scale(1.1)}
.nav-badge{position:absolute;top:-5px;right:-7px;min-width:15px;height:15px;background:var(--primary);color:#fff !important;font-size:9px;font-weight:700;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 4px;line-height:1;box-shadow:0 1px 4px rgba(255,82,82,.4)}
.nav-capture{width:48px;height:48px;background:linear-gradient(135deg,var(--primary),var(--primary-light));border-radius:50%;display:flex;align-items:center;justify-content:center;margin-top:-16px;box-shadow:0 3px 14px rgba(255,82,82,.45);cursor:pointer;transition:transform .15s,box-shadow .15s}
.nav-capture:active{transform:scale(.92);box-shadow:0 1px 6px rgba(255,82,82,.3)}
.nav-capture svg{width:24px;height:24px;fill:#fff}

/* TOP BAR */
.top-bar{position:fixed;top:0;left:0;right:0;z-index:50;background:#fff;padding:8px 0 0;box-shadow:0 1px 8px rgba(0,0,0,.06);border-bottom:2px solid transparent;background-clip:padding-box}
.top-bar::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--primary),var(--primary-light),var(--primary));opacity:.7}
.tab-bar{display:flex;align-items:center;justify-content:center;gap:14px;padding:6px 16px 10px;position:relative}
.tab-btn{background:none;border:none;font-size:15px;color:rgba(0,0,0,.35);cursor:pointer;padding:4px 2px;position:relative;font-weight:500;transition:color .2s}
.tab-btn.active{color:var(--text);font-weight:700;font-size:17px}
.tab-btn.active::after{content:'';position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);width:20px;height:3px;background:linear-gradient(90deg,var(--primary),var(--primary-light));border-radius:2px}
.search-icon-btn{position:absolute;right:16px;top:50%;transform:translateY(-50%);width:34px;height:34px;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:50%;transition:background .2s}
.search-icon-btn:active{background:rgba(0,0,0,.05)}
.search-icon-btn svg{width:18px;height:18px;fill:#888}

.search-overlay{position:fixed;inset:0;z-index:200;background:var(--white);display:none;flex-direction:column}
.search-overlay.show{display:flex}
.search-overlay-header{display:flex;align-items:center;padding:12px 16px;gap:10px}
.search-overlay-input{flex:1;height:38px;background:#F2F2F2;border:none;border-radius:20px;padding:0 16px;font-size:14px;outline:none;color:var(--text)}
.search-overlay-cancel{font-size:14px;color:var(--text);cursor:pointer;white-space:nowrap}
.search-results{padding:12px 16px}
.search-result-item{padding:12px 0;border-bottom:1px solid var(--border);cursor:pointer}
.search-result-item:last-child{border-bottom:none}
.search-result-title{font-size:14px;color:var(--text);line-height:1.5}
.search-result-meta{font-size:12px;color:var(--text2);margin-top:4px}
.search-empty{text-align:center;color:var(--text3);padding:40px 0;font-size:14px}
.search-hot-title{font-size:15px;font-weight:600;margin-bottom:12px;color:var(--text);padding:0 16px}
.search-tags{padding:0 16px 16px}
.search-tag{display:inline-block;padding:6px 14px;background:#F5F5F5;border-radius:16px;font-size:13px;color:var(--text2);margin:0 8px 8px 0;cursor:pointer}

/* CARD GRID — 瀑布流 */
.card-grid{column-count:2;column-gap:10px;padding:10px}
.card{background:var(--card-bg);border-radius:var(--radius);overflow:hidden;cursor:pointer;position:relative;box-shadow:var(--shadow);transition:transform .2s ease,box-shadow .2s ease;break-inside:avoid;margin-bottom:10px;display:inline-block;width:100%}
.card:active{transform:scale(.97);box-shadow:var(--shadow-hover)}
.card-img{width:100%;object-fit:cover;display:block;background:#e8e8e8;overflow:hidden;position:relative}
.card-img-placeholder{width:100%;background:linear-gradient(135deg,#f5f5f5,#e8e8e8);display:flex;align-items:center;justify-content:center;font-size:32px;color:#ccc}
.post-delete-btn{position:absolute;top:8px;left:8px;background:rgba(0,0,0,.6);color:#fff;padding:4px 8px;border-radius:12px;font-size:11px;cursor:pointer;z-index:2}
.card-body{padding:7px 10px 9px}
.card-title{font-size:13px;color:var(--text);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:7px;font-weight:400}
.card-footer{display:flex;align-items:center;justify-content:space-between}
.card-actions{display:flex;align-items:center;gap:4px}
.card-action{display:flex;align-items:center;gap:2px;cursor:pointer;padding:3px 5px;border-radius:8px;font-size:10px;color:var(--text2);transition:background .12s;white-space:nowrap}
.card-action:active{background:rgba(0,0,0,.05)}
.card-action.liked{color:var(--primary);font-weight:600}
.card-action.collected{color:#FFA726;font-weight:600}
.card-action svg{width:12px;height:12px}
.card-user{display:flex;align-items:center;gap:5px;cursor:pointer}
.card-user:active{opacity:.7}
.avatar{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-light));display:flex;align-items:center;justify-content:center;font-size:9px;color:#fff;font-weight:600;overflow:hidden;flex-shrink:0}
.avatar img{width:100%;height:100%;object-fit:cover}
.uname{font-size:10px;color:var(--text2);max-width:55px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.like-btn{display:flex;align-items:center;gap:3px;cursor:pointer;padding:2px 4px;border-radius:8px;transition:background .15s}
.like-btn:active{background:rgba(255,82,82,.08)}
.like-btn svg{width:13px;height:13px;transition:fill .2s}
.like-btn span{font-size:10px;color:var(--text2)}
.like-btn.liked svg{fill:var(--primary)}
.like-btn.liked span{color:var(--primary);font-weight:600}

/* LIST PAGE (我的发布/点赞/收藏/关注) */
.list-page-header{position:sticky;top:0;z-index:50;background:var(--white);padding:12px 16px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--border)}
.list-page-header .back-btn{height:32px;padding:0 10px;border-radius:16px;background:#F5F5F5;display:flex;align-items:center;gap:2px;cursor:pointer;font-size:14px;color:var(--text)}
.list-page-header .title{font-size:15px;font-weight:600;flex:1}
.list-page-content{padding:8px}
.list-empty{text-align:center;padding:60px 20px;color:var(--text3)}
.list-empty .empty-icon{font-size:48px;margin-bottom:12px}
.list-empty .empty-text{font-size:14px}

/* USER LIST (关注/粉丝) */
.user-list-item{display:flex;align-items:center;padding:12px 16px;background:var(--white);margin-bottom:1px}
.user-list-avatar{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;color:#fff;overflow:hidden;flex-shrink:0;margin-right:12px}
.user-list-avatar img{width:100%;height:100%;object-fit:cover}
.user-list-info{flex:1}
.user-list-name{font-size:15px;font-weight:600;color:var(--text)}
.user-list-bio{font-size:12px;color:var(--text2);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}
.user-list-follow-btn{height:32px;padding:0 16px;border-radius:16px;font-size:13px;cursor:pointer;border:1px solid var(--border);background:var(--white);color:var(--text)}
.user-list-follow-btn.following{background:#F5F5F5;color:var(--text2)}

/* MY PAGE */
.my-page{background:var(--bg)}
.profile-header{background:var(--white);padding:28px 16px 18px;display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:10px;border-radius:0 0 var(--radius) var(--radius);box-shadow:0 1px 8px rgba(0,0,0,.04)}
.profile-avatar{width:76px;height:76px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-light));display:flex;align-items:center;justify-content:center;font-size:28px;color:#fff;overflow:hidden;border:3px solid #fff;box-shadow:0 3px 16px rgba(255,82,82,.25)}
.profile-name{font-size:17px;font-weight:700;color:var(--text)}
.profile-bio{font-size:13px;color:var(--text2);text-align:center;max-width:260px}
.profile-stats{display:flex;gap:36px;margin-top:6px}
.stat-item{text-align:center;cursor:pointer;transition:transform .15s}
.stat-item:active{transform:scale(.95)}
.stat-num{font-size:18px;font-weight:800;color:var(--text)}
.stat-label{font-size:12px;color:var(--text2);margin-top:2px}
.profile-actions{display:flex;gap:10px;width:100%;margin-top:10px;padding:0 16px}
.btn-edit,.btn-share-profile{flex:1;height:36px;border-radius:20px;font-size:14px;cursor:pointer;border:1px solid var(--border);background:var(--white);color:var(--text);display:flex;align-items:center;justify-content:center;gap:4px;transition:background .15s}
.btn-edit{border-color:var(--primary);color:var(--primary);font-weight:500}
.btn-edit:active{background:rgba(255,82,82,.06)}

.section-card{background:var(--card-bg);border-radius:var(--radius);margin:0 0 10px;overflow:hidden;box-shadow:var(--shadow)}
.section-title{font-size:15px;font-weight:700;padding:14px 16px 10px;color:var(--text)}
.menu-list{list-style:none}
.menu-item{display:flex;align-items:center;padding:13px 16px;border-bottom:1px solid var(--border);cursor:pointer;gap:12px;transition:background .12s}
.menu-item:last-child{border-bottom:none}
.menu-item:active{background:rgba(0,0,0,.03)}
.menu-icon{width:32px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;background:linear-gradient(135deg,#f8f8f8,#f0f0f0)}
.menu-text{flex:1}
.menu-text strong{display:block;font-size:14px;color:var(--text);font-weight:500}
.menu-text small{font-size:12px;color:var(--text2)}
.menu-arrow{color:var(--text3);font-size:14px}
.menu-badge{background:var(--primary);color:#fff;font-size:11px;border-radius:10px;padding:1px 7px;min-width:20px;text-align:center;font-weight:600}
.boss-badge{display:inline-block;background:linear-gradient(135deg,var(--primary),var(--primary-light));color:#fff;font-size:11px;padding:2px 7px;border-radius:8px;margin-left:6px;font-weight:500}
.vip-badge{display:inline-block;background:linear-gradient(135deg,#FFD700,#FF8F00);color:#fff;font-size:11px;padding:2px 7px;border-radius:8px;margin-left:6px;font-weight:500}

.login-section{background:var(--card-bg);border-radius:var(--radius);margin:0 0 10px;padding:22px 16px;display:flex;flex-direction:column;gap:12px;align-items:center;box-shadow:var(--shadow)}





.btn-logout{width:calc(100% - 32px);margin:0 16px 16px;height:44px;background:none;border:1px solid var(--primary);border-radius:24px;color:var(--primary);font-size:15px;cursor:pointer;font-weight:500;transition:background .15s}
.btn-logout:active{background:rgba(255,82,82,.06)}

/* DETAIL */
.detail-page{background:var(--bg);padding-bottom:calc(56px + env(safe-area-inset-bottom))}
.detail-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);padding:12px 16px;display:flex;align-items:center;gap:12px;border-bottom:1px solid rgba(0,0,0,.04);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.back-btn{height:32px;padding:0 10px;border-radius:16px;background:#F5F5F5;display:flex;align-items:center;gap:2px;cursor:pointer;font-size:14px;color:var(--text);transition:background .15s;white-space:nowrap}
.back-btn:active{background:#e8e8e8}
.detail-header .title{font-size:15px;font-weight:600;flex:1;color:var(--text)}

.swiper-wrap{position:relative;background:var(--bg);height:70vh}
.swiper-inner{display:flex;transition:transform .3s ease;height:100%}
.swipe-img{width:100vw;height:70vh;flex-shrink:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.swipe-img img{width:100%;height:100%;object-fit:cover;display:block}
.swiper-dots{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:6px}
.dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.4);transition:all .25s}
.dot.active{background:#fff;width:18px;border-radius:3px}
.img-count{position:absolute;top:12px;right:12px;background:rgba(0,0,0,.55);color:#fff;font-size:12px;padding:3px 10px;border-radius:12px;backdrop-filter:blur(4px)}

.detail-content{background:var(--card-bg);padding:16px 16px;margin-bottom:10px;border-radius:0 0 var(--radius) var(--radius);box-shadow:0 1px 4px rgba(0,0,0,.03)}
.detail-text{font-size:15px;line-height:1.8;color:var(--text);margin-bottom:14px;font-weight:400}
.detail-meta{display:flex;align-items:center;gap:14px;font-size:12px;color:var(--text2)}
.detail-meta span{display:flex;align-items:center;gap:3px}

.comments-section{background:var(--card-bg);padding:14px 16px 10px;margin-bottom:10px;border-radius:var(--radius);box-shadow:var(--shadow)}
.comments-header{font-size:15px;font-weight:700;margin-bottom:14px;color:var(--text)}
.send-btn{width:52px;height:30px;background:var(--primary);border:none;border-radius:15px;color:#fff;font-size:12px;cursor:pointer;flex-shrink:0}

.comment-item{display:flex;gap:10px;margin-bottom:14px}
.comment-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#42a5f5,#26c6da);display:flex;align-items:center;justify-content:center;font-size:13px;color:#fff;flex-shrink:0;overflow:hidden}
.comment-main{flex:1}
.comment-top{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:3px}
.comment-name{font-size:13px;font-weight:600;color:var(--text)}
.comment-loc{font-size:11px;color:var(--text3)}
.comment-text{font-size:14px;color:var(--text);line-height:1.5;margin-bottom:5px}
.comment-actions{display:flex;align-items:center;gap:14px}
.c-action{font-size:12px;color:var(--text2);cursor:pointer;display:flex;align-items:center;gap:3px}

/* Reply */
.reply-item{display:flex;gap:8px;margin:4px 0 4px -10px;padding:6px 10px;background:#F8F8F8;border-radius:8px}
.reply-avatar{width:24px;height:24px;border-radius:50%;background:#7e57c2;display:flex;align-items:center;justify-content:center;font-size:10px;color:#fff;flex-shrink:0;overflow:hidden}
.reply-main{flex:1}
.reply-name{font-size:12px;font-weight:600;color:var(--text)}
.reply-text{font-size:13px;color:var(--text);margin-top:2px;line-height:1.4}
.reply-meta{font-size:11px;color:var(--text3);margin-top:3px}

/* Comment Emoji & Image */
.comment-input-bar{display:flex;align-items:center;gap:6px;padding:8px 8px 8px;border-top:1px solid var(--border);margin-top:8px;background:var(--white);flex-wrap:nowrap;min-width:0}
.comment-input{flex:1;min-width:0;height:34px;background:#F5F5F5;border:none;border-radius:17px;padding:0 10px;font-size:13px;outline:none;color:var(--text)}
.comment-emoji-btn,.comment-img-btn{font-size:18px;cursor:pointer;opacity:0.6;border:none;background:none;padding:2px;flex-shrink:0;line-height:1}
.comment-emoji-btn:active,.comment-img-btn:active{opacity:1}
.emoji-picker{position:fixed;bottom:0;left:0;right:0;background:var(--white);border-radius:16px 16px 0 0;box-shadow:0 -4px 24px rgba(0,0,0,.18);padding:12px 12px 24px;z-index:2000;transform:translateY(100%);transition:transform .25s ease}
.emoji-picker.show{transform:translateY(0)}
.emoji-tabs{display:flex;gap:4px;margin-bottom:10px;border-bottom:1px solid var(--border);padding-bottom:8px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.emoji-tab{padding:4px 10px;font-size:12px;border-radius:10px;cursor:pointer;color:var(--text2);white-space:nowrap;flex-shrink:0}
.emoji-tab.active{background:var(--primary);color:#fff}
.emoji-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;max-height:180px;overflow-y:auto}
.emoji-item{font-size:24px;padding:4px;text-align:center;cursor:pointer;border-radius:6px}
.emoji-item:active{background:#f0f0f0}
.comment-img-group{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.comment-img-thumb{width:80px;height:80px;object-fit:cover;border-radius:8px;cursor:pointer}
.comment-preview-wrap{display:flex;flex-wrap:wrap;gap:6px;padding:6px 12px}
.comment-preview-item{position:relative}
.comment-preview-item img{width:64px;height:64px;object-fit:cover;border-radius:8px;display:block}
.comment-preview-item .rm{position:absolute;top:-6px;right:-6px;width:20px;height:20px;background:rgba(0,0,0,.6);color:#fff;border-radius:50%;font-size:11px;display:flex;align-items:center;justify-content:center;cursor:pointer;border:none}
.reply-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}
.reply-input-bar{display:flex;align-items:center;gap:6px;margin:6px 0 4px 42px}
.reply-input{flex:1;height:32px;background:#fff;border:1px solid var(--border);border-radius:16px;padding:0 10px;font-size:12px;outline:none;color:var(--text)}
.reply-send{height:32px;padding:0 12px;background:var(--primary);border:none;border-radius:16px;color:#fff;font-size:12px;cursor:pointer}

.detail-author{background:var(--white);padding:16px 16px;margin-bottom:10px;display:flex;align-items:center;gap:12px;border-radius:0 0 var(--radius) var(--radius);box-shadow:0 1px 6px rgba(0,0,0,.04);cursor:pointer}
.author-info{flex:1}
.author-name{font-size:15px;font-weight:700;color:var(--text)}
.author-fans{font-size:12px;color:var(--text2);margin-top:2px}
.follow-btn{height:32px;padding:0 18px;background:linear-gradient(135deg,var(--primary),var(--primary-light));border:none;border-radius:16px;color:#fff;font-size:13px;cursor:pointer;font-weight:600;transition:transform .15s,box-shadow .15s}
.follow-btn:active{transform:scale(.95);box-shadow:0 1px 6px rgba(255,82,82,.3)}
.follow-btn.following{background:#F5F5F5;color:var(--text2)}

.detail-actions-bar{position:fixed;bottom:0;left:0;right:0;background:rgba(255,255,255,.96);padding:10px 12px;display:flex;justify-content:space-around;border-top:1px solid rgba(0,0,0,.04);z-index:100;padding-bottom:calc(10px + env(safe-area-inset-bottom));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.action-item{display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;padding:4px 8px;border-radius:8px;transition:background .15s}
.action-item:active{background:rgba(0,0,0,.04)}
.action-item span{font-size:10px;color:var(--text2)}
.action-item svg{width:20px;height:20px;transition:fill .2s}
.action-item.active-like svg{fill:var(--primary)}
.action-item.active-like span{color:var(--primary);font-weight:600}
.action-item.active-collect svg{fill:#FFA726}
.action-item.active-collect span{color:#FFA726}

.related-title{font-size:14px;font-weight:700;padding:12px 16px 8px;background:var(--white);color:var(--text)}
.related-grid{column-count:2;column-gap:10px;padding:0 10px 10px}

/* PUBLISH */
.publish-header{padding:14px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);background:var(--white)}
.publish-title{font-size:16px;font-weight:700;color:var(--text)}
.pub-submit{height:34px;padding:0 18px;background:linear-gradient(135deg,var(--primary),var(--primary-light));border:none;border-radius:17px;color:#fff;font-size:14px;font-weight:600;cursor:pointer;transition:transform .15s,box-shadow .15s}
.pub-submit:active{transform:scale(.95);box-shadow:0 1px 6px rgba(255,82,82,.3)}
.img-upload-area{padding:14px 16px}
.img-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.img-slot{aspect-ratio:1;border-radius:8px;background:#F5F5F5;border:1.5px dashed #ddd;display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;overflow:hidden}
.img-slot.filled{border:none}
.img-slot.filled img{width:100%;height:100%;object-fit:cover}
.img-slot .del{position:absolute;top:4px;right:4px;width:20px;height:20px;background:rgba(0,0,0,.5);border-radius:50%;color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center;z-index:1}
.add-icon{font-size:26px;color:var(--text3)}
.add-tip{font-size:11px;color:var(--text3);margin-top:2px}
.pub-form{padding:0 16px}
.pub-textarea{width:100%;min-height:120px;border:none;outline:none;font-size:15px;line-height:1.7;color:var(--text);resize:none;padding:0;background:none}
.pub-location{display:flex;align-items:center;gap:6px;padding:10px 0;border-top:1px solid var(--border);color:var(--text2);font-size:14px;cursor:pointer}
.pub-location input{flex:1;border:none;outline:none;font-size:14px;color:var(--text);background:transparent}

/* MESSAGES PAGE */
.msg-item{display:flex;align-items:center;padding:14px 16px;background:var(--white);border-bottom:1px solid var(--border);cursor:pointer}
.city-tab{flex:1;padding:8px 0 10px;font-size:13px;color:#666;cursor:pointer;text-align:center;transition:all .2s;white-space:nowrap;position:relative}
.city-tab.active{color:#FF5252;font-weight:600}
.city-tab.active::after{content:'';position:absolute;bottom:4px;left:50%;transform:translateX(-50%);width:24px;height:2px;background:#FF5252;border-radius:2px}
/* 用户主页 — 抖音风格 */
.uh-header{
  background:linear-gradient(180deg,#1a1a2e 0%,#16213e 100%);
  padding:0 0 16px;position:relative;
}
.uh-header-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;position:relative;z-index:2;
}
.uh-back{
  height:30px;padding:0 10px;
  background:rgba(255,255,255,.15);color:#fff;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:13px;border-radius:15px;
  backdrop-filter:blur(4px);font-weight:500;
}
.uh-avatar-wrap{
  display:flex;justify-content:center;margin-top:-4px;
}
.uh-big-avatar{
  width:96px;height:96px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:40px;color:#fff;
  border:3px solid rgba(255,255,255,.8);
  box-shadow:0 4px 20px rgba(0,0,0,.3);
  overflow:hidden;
}
.uh-big-avatar img{width:100%;height:100%;object-fit:cover}
.uh-name{
  text-align:center;font-size:18px;font-weight:700;
  color:#fff;margin-top:10px;letter-spacing:.5px;
}
.uh-bio{
  text-align:center;font-size:12px;
  color:rgba(255,255,255,.6);margin-top:4px;
}
.uh-actions{
  display:flex;gap:10px;justify-content:center;
  margin-top:14px;padding:0 16px;
}
.uh-follow-btn{
  flex:1;max-width:140px;height:36px;
  background:linear-gradient(135deg,#FF5252,#FF1744);
  color:#fff;border:none;border-radius:18px;
  font-size:14px;font-weight:600;cursor:pointer;
  transition:transform .15s;
}
.uh-follow-btn:active{transform:scale(.95)}
.uh-follow-btn.following{background:#333;color:rgba(255,255,255,.6)}
.uh-share-btn{
  flex:1;max-width:140px;height:36px;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.3);
  color:#fff;border-radius:18px;
  font-size:14px;font-weight:500;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:transform .15s;box-sizing:border-box;
}
.uh-share-btn:active{transform:scale(.95)}
.uh-stats-row{
  display:flex;justify-content:center;gap:0;
  margin-top:18px;padding-top:14px;
  border-top:1px solid rgba(255,255,255,.1);
  max-width:300px;margin-left:auto;margin-right:auto;
}
.uh-stat{flex:1;text-align:center;cursor:pointer}
.uh-stat-val{font-size:17px;font-weight:700;color:#fff}
.uh-stat-lbl{font-size:11px;color:rgba(255,255,255,.5);margin-top:2px}

/* 用户主页 tab */
.user-home-tab{flex:1;padding:10px 0;font-size:14px;color:var(--text2);cursor:pointer;text-align:center;transition:all .2s;position:relative;font-weight:500}
.user-home-tab.active{color:var(--text);font-weight:700}
.user-home-tab.active::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:32px;height:3px;background:var(--text);border-radius:2px}
.user-home-tab .tab-count{font-size:11px;color:var(--text3);font-weight:400}

/* 用户主页作品网格（三列） */
.uh-post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;padding:2px}
.uh-post-card{position:relative;overflow:hidden;cursor:pointer;background:#e8e8e8;width:100%;padding-bottom:100%}
.uh-post-card img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;top:0;left:0;right:0;bottom:0}
.uh-post-card .uh-post-card-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:28px;color:#ccc;background:#f5f5f5;position:absolute;top:0;left:0;right:0;bottom:0}
.uh-post-card .uh-post-like{position:absolute;bottom:4px;right:4px;display:flex;align-items:center;gap:2px;background:rgba(0,0,0,.45);color:#fff;font-size:10px;padding:2px 6px;border-radius:8px;line-height:1;backdrop-filter:blur(2px);z-index:1}
.uh-post-card .uh-post-like svg{width:10px;height:10px;fill:#fff}

/* 用户主页统计弹窗 */
#uh-stat-modal-container{position:fixed;inset:0;z-index:300;background:rgba(0,0,0,.35);display:none;align-items:flex-end;justify-content:center}
.uh-stat-modal{background:var(--white);border-radius:16px 16px 0 0;width:100%;max-height:70vh;display:flex;flex-direction:column;overflow:hidden}
.uh-stat-modal-hd{display:flex;align-items:center;padding:14px 16px;border-bottom:1px solid var(--border);gap:12px}
.uh-stat-modal-close{font-size:18px;color:var(--text3);cursor:pointer;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%}
.uh-stat-modal-close:active{background:var(--bg)}
.uh-stat-modal-list{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch}
.city-tab.active{color:#FF5252;font-weight:600;background:#f0f0f0}
.msg-icon{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;margin-right:12px;flex-shrink:0}
.msg-body{flex:1}
.msg-title{font-size:14px;font-weight:500;color:var(--text)}
.msg-text{font-size:12px;color:var(--text2);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.msg-time{font-size:11px;color:var(--text3);flex-shrink:0;margin-left:8px}
.msg-dot{width:8px;height:8px;border-radius:50%;background:var(--primary);margin-left:8px;flex-shrink:0}

/* MODAL */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;display:none;align-items:flex-end}
.modal-overlay.show{display:flex}
.modal-sheet{background:var(--white);border-radius:16px 16px 0 0;width:100%;padding:20px 16px 30px;animation:slideUp .25s ease;position:relative;max-height:70vh;overflow-y:auto}
@keyframes slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.modal-center{align-items:center!important}
.modal-center .modal-sheet{border-radius:16px;width:calc(100% - 40px);max-width:360px;max-height:80vh}
.modal-title{font-size:16px;font-weight:600;text-align:center;margin-bottom:16px}
.form-field{margin-bottom:14px}
.form-label{font-size:13px;color:var(--text2);margin-bottom:6px}
.form-input{width:100%;height:42px;border:1px solid var(--border);border-radius:10px;padding:0 12px;font-size:14px;outline:none;background:var(--white);color:var(--text)}
.form-input:focus{border-color:var(--primary)}
.modal-btn{width:100%;height:46px;background:var(--primary);border:none;border-radius:24px;color:#fff;font-size:16px;font-weight:600;cursor:pointer;margin-top:8px}
.modal-close{position:absolute;top:14px;right:16px;font-size:20px;color:var(--text2);cursor:pointer}

.avatar-picker-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:300;display:none;align-items:center;justify-content:center}
.avatar-picker-overlay.show{display:flex}
.avatar-picker-box{background:#fff;border-radius:20px;padding:24px 20px 20px;width:calc(100% - 40px);max-width:360px;animation:popIn .25s ease}
@keyframes popIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
.avatar-picker-title{font-size:16px;font-weight:600;text-align:center;margin-bottom:6px}
.avatar-picker-sub{font-size:13px;color:var(--text2);text-align:center;margin-bottom:18px;white-space:pre-line}
.avatar-preview{width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,#FF5252,#FF8A80);display:flex;align-items:center;justify-content:center;font-size:32px;color:#fff;margin:0 auto 16px;overflow:hidden;border:3px solid #fff;box-shadow:0 2px 12px rgba(0,0,0,.15)}
.avatar-preview img{width:100%;height:100%;object-fit:cover}
.avatar-picker-btns{display:flex;flex-direction:column;gap:10px}
.avatar-btn-album{width:100%;height:46px;background:var(--primary);border:none;border-radius:24px;color:#fff;font-size:15px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px}
.avatar-btn-skip{width:100%;height:42px;background:none;border:1px solid var(--border);border-radius:24px;color:var(--text2);font-size:14px;cursor:pointer}

.share-action{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--border);cursor:pointer}
.share-action:last-child{border-bottom:none}
.share-action-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px}
.share-action-text strong{display:block;font-size:14px;color:var(--text)}
.share-action-text small{font-size:12px;color:var(--text2)}

.toast{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:rgba(0,0,0,.7);color:#fff;padding:10px 22px;border-radius:24px;font-size:14px;z-index:999;pointer-events:none;opacity:0;transition:opacity .2s}
.toast.show{opacity:1}

::-webkit-scrollbar{display:none}

/* 加载微光动画 */
@keyframes shimmer{
  0%{background-position:-200% 0}
  100%{background-position:200% 0}
}
.shimmer{background:linear-gradient(90deg,#f0f0f0 25%,#e8e8e8 50%,#f0f0f0 75%);background-size:200% 100%;animation:shimmer 1.5s infinite}
/* 图片加载过渡 */
.card-img img,.swipe-img img,.avatar img,.comment-preview-item img,.related-grid .card-img img,
.img-slot.filled img{transition:opacity .3s}
.card-img img[src],.swipe-img img[src],.avatar img[src]{opacity:1}

/* 发帖按钮悬浮动效 */
@keyframes pulse{
  0%,100%{box-shadow:0 3px 14px rgba(255,82,82,.45)}
  50%{box-shadow:0 3px 20px rgba(255,82,82,.65)}
}
.nav-capture{animation:pulse 2.5s ease-in-out infinite}

/* 浮动按钮：换一批 + 回到顶部 */
.fab-container{position:fixed;right:16px;bottom:80px;z-index:90;display:none;flex-direction:column;gap:12px;align-items:center}
.fab-container.show{display:flex}
.fab-refresh{width:48px;height:48px;border-radius:50%;background:linear-gradient(135deg,#FF9800,#FFB74D);border:none;color:#fff;font-size:13px;font-weight:700;cursor:pointer;box-shadow:0 3px 16px rgba(255,152,0,.35);display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.2;transition:transform .15s,box-shadow .15s}
.fab-refresh:active{transform:scale(.9);box-shadow:0 1px 8px rgba(255,152,0,.25)}
.fab-top{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#7C4DFF,#B388FF);border:none;color:#fff;font-size:18px;cursor:pointer;box-shadow:0 3px 14px rgba(124,77,255,.35);display:flex;align-items:center;justify-content:center;transition:transform .15s,box-shadow .15s}
.fab-top:active{transform:scale(.9);box-shadow:0 1px 8px rgba(124,77,255,.25)}

/* ===== 下拉刷新 ===== */
.ptr-indicator{height:50px;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--text2);font-size:13px;flex-shrink:0;overflow:hidden;transition:height .25s ease,margin-top .25s ease}
.ptr-indicator.refreshing{height:50px}
.ptr-spinner{width:18px;height:18px;border:2px solid #e0e0e0;border-top-color:#FF5252;border-radius:50%;animation:ptrSpin .6s linear infinite;display:none}
.ptr-indicator.refreshing .ptr-spinner{display:block}
.ptr-indicator.refreshing .ptr-arrow{display:none}
.ptr-arrow{font-size:16px;transition:transform .2s ease}
.ptr-arrow.flip{transform:rotate(180deg)}
@keyframes ptrSpin{to{transform:rotate(360deg)}}

/* 底部安全区适配 */
@supports(padding:env(safe-area-inset-bottom)){
  .bottom-nav{padding-bottom:calc(8px + env(safe-area-inset-bottom))}
}


/* ===== Extracted from index.html ===== */

#city-tabs::-webkit-scrollbar{display:none}

/* ===== Extracted from index.html ===== */


.msg-tab{flex:1;text-align:center;padding:10px 0;font-size:14px;color:var(--text2);cursor:pointer;position:relative;transition:all .2s}
.msg-tab.active{color:var(--text);font-weight:600}
.msg-tab.active::after{content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:28px;height:3px;background:var(--primary);border-radius:2px}
.interact-item{display:flex;padding:14px 16px;background:var(--white);border-bottom:1px solid var(--border);position:relative}
.interact-item.unread::before{content:'';position:absolute;left:6px;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;background:var(--primary)}
.interact-avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff;flex-shrink:0;margin-right:12px}
.interact-body{flex:1;min-width:0}
.interact-top{display:flex;align-items:center;gap:6px}
.interact-name{font-size:14px;font-weight:500;color:var(--text)}
.interact-tag{font-size:10px;padding:1px 5px;border-radius:3px;font-weight:500}
.interact-content{font-size:13px;color:var(--text2);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.interact-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:4px}
.interact-time{font-size:11px;color:var(--text3)}
.interact-del{font-size:12px;color:var(--text3);cursor:pointer;padding:4px 8px}
.interact-del:active{color:var(--primary)}
.chat-item{display:flex;align-items:center;padding:14px 16px;background:var(--white);border-bottom:1px solid var(--border);cursor:pointer;position:relative}
.chat-item.unread::after{content:'';position:absolute;top:14px;right:16px;width:8px;height:8px;border-radius:50%;background:var(--primary)}
.chat-avatar{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;color:#fff;flex-shrink:0;margin-right:12px}
.chat-info{flex:1;min-width:0}
.chat-name{font-size:15px;font-weight:500;color:var(--text)}
.chat-last{font-size:13px;color:var(--text2);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chat-time{font-size:11px;color:var(--text3);flex-shrink:0;margin-left:8px;align-self:flex-start;margin-top:2px}
.chat-detail-header{display:flex;align-items:center;padding:12px 16px;background:var(--white);border-bottom:1px solid var(--border)}
.chat-detail-back{font-size:22px;cursor:pointer;margin-right:12px;color:var(--text)}
.chat-detail-name{font-size:16px;font-weight:600}
.chat-detail-body{flex:1;overflow-y:auto;padding:12px 16px}
.chat-bubble-row{display:flex;margin-bottom:10px;align-items:flex-end;gap:8px}
.chat-bubble-row.right{flex-direction:row-reverse}
.chat-bubble-avatar{width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff;flex-shrink:0}
.chat-bubble{max-width:70%;padding:10px 14px;border-radius:16px;font-size:14px;line-height:1.5;word-break:break-word}
.chat-bubble-row.left .chat-bubble{background:var(--white);color:var(--text);border-bottom-left-radius:4px}
.chat-bubble-row.right .chat-bubble{background:var(--primary);color:#fff;border-bottom-right-radius:4px}
.chat-detail-input{display:flex;align-items:center;gap:8px;padding:10px 12px;background:var(--white);border-top:1px solid var(--border)}
.chat-detail-input input{flex:1;height:38px;border:1px solid var(--border);border-radius:19px;padding:0 14px;font-size:14px;outline:none;background:var(--bg)}
.chat-detail-input input:focus{border-color:var(--primary)}
.chat-detail-input button{height:38px;padding:0 16px;background:var(--primary);color:#fff;border:none;border-radius:19px;font-size:14px;font-weight:500;cursor:pointer}
/* 手机端：删除按钮始终显示，加大点击区域 */
@media(pointer:coarse),(max-width:768px){
  .udisk-del-btn{display:flex !important;width:24px !important;height:24px !important;font-size:13px !important}
}


/* ===== Extracted from index.html ===== */

@keyframes splashPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.03)}}

/* ===== Extracted from index.html ===== */


@keyframes notifySlide{from{transform:translateY(-100%)}to{transform:translateY(0)}}