* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { width:100%; height:100%; overflow:hidden; background:#000; font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif; }
.page { display:none; width:100%; height:100%; }
.page.active { display:block; }
.page-container { width:100%; height:100%; position:relative; }
.loading-page { display:flex; justify-content:center; align-items:center; height:100%; }
.loader { width:40px; height:40px; border:3px solid rgba(255,255,255,0.1); border-top-color:#fe2c55; border-radius:50%; animation:spin 0.8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.page[data-page-key] { position:absolute; top:0; left:0; right:0; bottom:0; overflow:hidden; }

:root {
  --primary: #fe2c55;
  --primary-light: #ff6b8a;
  --bg-dark: #0f0f0f;
  --bg-card: #1a1a1a;
  --bg-surface: #252525;
  --text-primary: #ffffff;
  --text-secondary: #8a8a8a;
  --text-muted: #555555;
}

/* ========== 底部导航栏 ========== */
.nav {
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  height:68px;
  background:rgba(15,15,15,0.98);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  display:flex;
  align-items:flex-start;
  justify-content:space-around;
  color:#666;
  z-index:30;
  border-top:1px solid rgba(255,255,255,0.05);
  padding-top:8px;
  padding-bottom:env(safe-area-inset-bottom);
}
.nav .item {
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:color .25s ease, transform .15s ease;
  position:relative;
  padding:4px 0;
  color:#666;
}
.nav .item:active { transform:scale(0.92); }
.nav .item svg {
  width:28px;
  height:28px;
  display:block;
  transition:opacity .25s ease;
}
.nav .item .icon {
  opacity:1;
}
.nav .item .icon-filled {
  display:none;
  opacity:0;
}
.nav .item .label {
  font-size:11px;
  margin-top:3px;
  font-weight:500;
  letter-spacing:0.3px;
  color:inherit;
}
.nav .item.active {
  color:var(--primary);
}
.nav .item.active .icon {
  display:none;
  opacity:0;
}
.nav .item.active .icon-filled {
  display:block;
  opacity:1;
}
.nav .item.active .label {
  color:var(--primary);
}

/* ========== 视频播放页 ========== */
#videoPage { position:relative; width:100%; height:100%; overflow:hidden; }
.video-list { height:100%; transition:transform .3s cubic-bezier(0.2,0,0,1); will-change:transform; }
.video-item { width:100%; height:100vh; position:absolute; left:0; background:#000; }
.video-player { width:100%; height:100%; object-fit:cover; background:#000; }
.video-overlay { position:absolute; top:0; left:0; right:0; bottom:0; background:transparent; z-index:5; }
.loading { position:absolute; top:50%; left:50%; width:40px; height:40px; border-radius:50%; border:3px solid rgba(255,255,255,.3); border-top-color:#fff; animation:spin 0.8s infinite; display:none; z-index:9; margin-left:-20px; margin-top:-20px; }
.loading.show { display:block; }
.heart { position:absolute; top:50%; left:50%; font-size:80px; color:#fe2c55; opacity:0; transform:translate(-50%,-50%) scale(0.5); pointer-events:none; transition:all .25s; z-index:20; }
.heart.show { opacity:1; transform:translate(-50%,-50%) scale(1.2); }

.progress-wrap { position:absolute; left:0; right:0; bottom:68px; height:3px; background:rgba(255,255,255,.15); margin:0 20px; z-index:10; border-radius:10px; overflow:hidden; }
.buffer-bar { position:absolute; left:0; top:0; height:100%; background:rgba(255,255,255,.4); width:0; border-radius:10px; }
.play-bar { position:absolute; left:0; top:0; height:100%; background:var(--primary); width:0; border-radius:10px; z-index:2; }

.info-box { position:absolute; left:16px; bottom:160px; color:#fff; z-index:10; max-width:65%; text-shadow:0 2px 8px rgba(0,0,0,.5); }
.at-text { font-size:17px; margin-bottom:8px; font-weight:600; }
.at-text a { color:#fff; text-decoration:none; }
.tags { display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.tags span { background:rgba(0,0,0,.4); backdrop-filter:blur(8px); padding:5px 12px; border-radius:99px; font-size:12px; color:#fff; border:1px solid rgba(255,255,255,0.15); font-weight:500; }

/* ========== 右侧工具栏 ========== */
.toolbar {
  position:absolute;
  right:12px;
  bottom:180px;
  z-index:10;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
}
.tool-wrap {
  display:flex;
  flex-direction:column;
  align-items:center;
}
.tool-btn {
  background:none;
  border:none;
  padding:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  cursor:pointer;
  color:#fff;
  transition:transform .15s ease;
}
.tool-btn:active { transform:scale(0.88); }
.tool-circle {
  width:48px;
  height:48px;
  border-radius:50%;
  background:rgba(0,0,0,0.35);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.1);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  transition:all .2s ease;
}
.tool-circle svg {
  width:26px;
  height:26px;
  color:#fff;
  transition:all .2s ease;
}
.tool-svg-filled {
  display:none;
  width:26px;
  height:26px;
}
.tool-label {
  font-size:12px;
  font-weight:600;
  color:#fff;
  margin-top:6px;
  text-shadow:0 1px 4px rgba(0,0,0,.6);
}

/* 点赞激活态 */
.like-tool.active .tool-circle {
  background:rgba(254,44,85,0.2);
  border-color:rgba(254,44,85,0.5);
}
.like-tool.active .tool-svg { display:none; }
.like-tool.active .tool-svg-filled { display:block; }
.like-tool.active .tool-circle svg { color:#fe2c55; }
.like-tool.active .tool-label { color:#fe2c55; }

/* 收藏激活态 */
.collect-tool.active .tool-circle {
  background:rgba(255,204,0,0.2);
  border-color:rgba(255,204,0,0.5);
}
.collect-tool.active .tool-svg { display:none; }
.collect-tool.active .tool-svg-filled { display:block; }
.collect-tool.active .tool-circle svg { color:#ffcc00; }
.collect-tool.active .tool-label { color:#ffcc00; }

/* 设置按钮 */
.settings-btn .tool-circle {
  background:rgba(0,0,0,0.4);
}

/* 音乐按钮 */
.music-btn .music-disc {
  width:48px;
  height:48px;
  border-radius:50%;
  background:rgba(0,0,0,0.35);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.1);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.music-btn .music-disc .disc-svg {
  width:28px;
  height:28px;
  color:#fff;
  animation:discSpin 4s linear infinite;
}
.music-btn .music-disc .mute-svg {
  display:none;
  width:24px;
  height:24px;
  color:#fff;
}
.music-btn.muted .music-disc .disc-svg {
  display:none;
  animation-play-state:paused;
}
.music-btn.muted .music-disc .mute-svg {
  display:block;
}
@keyframes discSpin {
  from { transform:rotate(0deg); }
  to { transform:rotate(360deg); }
}

/* 评论面板 */
.comment-panel {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  background:rgba(20,20,30,0.98);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-radius:24px 24px 0 0;
  z-index:150;
  display:none;
  flex-direction:column;
  max-height:60vh;
  border-top:1px solid rgba(255,255,255,0.1);
}
.comment-panel.show { display:flex; }
.comment-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid rgba(255,255,255,0.1); }
.comment-title { font-size:16px; font-weight:700; color:#fff; }
.comment-close { background:none; border:none; color:#aaa; font-size:24px; cursor:pointer; padding:0; line-height:1; }
.comment-list { flex:1; overflow-y:auto; padding:12px 0; max-height:40vh; }
.comment-item { display:flex; padding:12px 20px; gap:12px; }
.comment-avatar { width:36px; height:36px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.comment-content { flex:1; }
.comment-name { font-size:13px; font-weight:600; color:#ccc; margin-bottom:4px; display:block; }
.comment-text { font-size:14px; color:#fff; margin:0 0 4px; line-height:1.4; }
.comment-time { font-size:11px; color:#777; }
.comment-input-area { display:flex; align-items:center; padding:12px 20px; gap:10px; border-top:1px solid rgba(255,255,255,0.1); }
.comment-input { flex:1; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.15); border-radius:24px; padding:10px 16px; color:#fff; font-size:14px; outline:none; }
.comment-input::placeholder { color:#888; }
.comment-send-btn { background:var(--primary); border:none; border-radius:24px; padding:10px 18px; color:#fff; font-size:14px; font-weight:600; cursor:pointer; transition:background .2s; }
.comment-send-btn:hover { background:#e02244; }

/* 播放设置面板 */
.play-settings-panel {
  position:absolute;
  right:72px;
  bottom:180px;
  background:rgba(30,30,40,0.95);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-radius:20px;
  padding:18px;
  width:180px;
  color:#fff;
  box-shadow:0 10px 30px rgba(0,0,0,0.5);
  border:1px solid rgba(255,255,255,0.08);
  z-index:200;
  display:none;
}
.play-settings-panel.show { display:block; }
.panel-section { margin-bottom:16px; }
.panel-section:last-child { margin-bottom:0; }
.panel-label { font-size:13px; font-weight:600; color:#aaa; margin-bottom:10px; }
.speed-options { display:flex; gap:6px; justify-content:space-between; }
.speed-option { flex:1; text-align:center; padding:7px 0; background:rgba(255,255,255,0.08); border-radius:14px; font-size:13px; font-weight:600; color:#ddd; cursor:pointer; transition:all .2s; }
.speed-option.active { background:var(--primary); color:white; }
.auto-next-section { display:flex; align-items:center; justify-content:space-between; }
.switch { position:relative; display:inline-block; width:44px; height:22px; }
.switch input { opacity:0; width:0; height:0; }
.slider { position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background-color:#444; transition:.3s; border-radius:22px; }
.slider:before { position:absolute; content:""; height:16px; width:16px; left:3px; bottom:3px; background-color:white; transition:.3s; border-radius:50%; }
input:checked + .slider { background-color:var(--primary); }
input:checked + .slider:before { transform:translateX(22px); }
.next-video-btn { width:100%; padding:10px; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.15); border-radius:14px; color:#fff; font-size:14px; font-weight:600; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:6px; transition:all .2s; }
.next-video-btn:hover { background:rgba(255,255,255,0.15); }

/* ========== 首页样式 ========== */
.home-page {
  height:100%;
  overflow-y:auto;
  background:linear-gradient(180deg, #1a1a2e 0%, #0a0a0a 100%);
  color:#fff;
  padding-bottom:80px;
  -webkit-overflow-scrolling:touch;
}
.home-header { padding:60px 20px 20px; text-align:center; }
.home-title {
  font-size:28px;
  font-weight:700;
  background:linear-gradient(135deg, #fe2c55, #ff9eb5);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}
.home-content { padding:20px; }

/* ========== 通用列表页样式 ========== */
.list-page {
  height:100%;
  overflow-y:auto;
  background:#0a0a0a;
  color:#fff;
  padding-bottom:80px;
  -webkit-overflow-scrolling:touch;
}
.page-header { padding:50px 20px 20px; text-align:center; border-bottom:1px solid #1a1a1a; }
.page-title { font-size:24px; font-weight:700; color:#fff; }
.page-content { padding:40px 20px; }

/* ========== 即将推出提示 ========== */
.coming-soon { text-align:center; padding:40px 20px; }
.coming-soon-icon {
  font-size:64px;
  margin-bottom:20px;
  animation:bounce 2s infinite;
}
@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform:translateY(0); }
  40% { transform:translateY(-15px); }
  60% { transform:translateY(-8px); }
}
.coming-soon-text { font-size:18px; font-weight:600; color:#fff; margin-bottom:10px; }
.coming-soon-desc { font-size:14px; color:#888; }

/* ========== 个人主页样式（抖音风格） ========== */
.profile-page {
  height:100%;
  overflow-y:auto;
  background:#0f0f0f;
  color:#fff;
  padding-bottom:80px;
  -webkit-overflow-scrolling:touch;
}

/* 封面区域 */
.profile-cover {
  position:relative;
  width:100%;
  height:200px;
  background:linear-gradient(135deg, #2a2a3e, #1a1a2a);
  overflow:hidden;
  cursor:pointer;
}
.profile-cover img {
  width:100%;
  height:100%;
  object-fit:cover;
}
.cover-gradient {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:80px;
  background:linear-gradient(180deg, transparent, rgba(15,15,15,0.9));
  pointer-events:none;
}
.cover-edit-btn {
  position:absolute;
  top:16px;
  right:16px;
  width:32px;
  height:32px;
  background:rgba(0,0,0,0.5);
  backdrop-filter:blur(8px);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  cursor:pointer;
  transition:background .2s;
  border:1px solid rgba(255,255,255,0.15);
}
.cover-edit-btn:hover { background:rgba(0,0,0,0.7); }

/* 主要信息区 */
.profile-main {
  padding:0 16px;
  margin-top:-50px;
  position:relative;
  z-index:2;
}

/* 头像 */
.profile-avatar-wrap { display:flex; justify-content:center; }
.profile-avatar {
  width:96px;
  height:96px;
  border-radius:50%;
  overflow:visible;
  position:relative;
  background:#1a1a1a;
  border:4px solid #0f0f0f;
  box-shadow:0 4px 16px rgba(0,0,0,0.5);
  cursor:pointer;
}
.profile-avatar img {
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
}
.avatar-badge {
  position:absolute;
  bottom:-4px;
  right:-4px;
  width:26px;
  height:26px;
  background:var(--primary);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  border:3px solid #0f0f0f;
}

/* 用户信息 */
.profile-info { text-align:center; padding:16px 0 20px; }
.profile-nickname {
  font-size:24px;
  font-weight:700;
  margin:0 0 8px;
  color:#fff;
}
.profile-bio {
  font-size:14px;
  color:#aaa;
  margin:0 0 6px;
  line-height:1.5;
}
.profile-id {
  font-size:12px;
  color:#666;
  margin:0;
}

/* 统计卡片 */
.profile-stats-card {
  display:flex;
  align-items:center;
  background:linear-gradient(135deg, #1e1e2e, #15151e);
  border-radius:16px;
  padding:16px 8px;
  margin:0 0 16px;
  border:1px solid rgba(255,255,255,0.05);
}
.profile-stats-card .stat-item {
  text-align:center;
  flex:1;
  padding:0 8px;
}
.profile-stats-card .stat-value {
  display:block;
  font-size:20px;
  font-weight:700;
  color:#fff;
}
.profile-stats-card .stat-label {
  font-size:12px;
  color:#888;
  margin-top:4px;
}
.stat-divider {
  width:1px;
  height:30px;
  background:rgba(255,255,255,0.08);
}

/* 操作按钮 */
.profile-actions {
  display:flex;
  gap:10px;
  margin-bottom:20px;
}
.action-btn {
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:10px 16px;
  background:#252525;
  border:none;
  border-radius:20px;
  font-size:14px;
  font-weight:600;
  color:#fff;
  cursor:pointer;
  transition:all .2s;
}
.action-btn:hover { background:#333; }
.action-btn.primary {
  background:var(--primary);
  color:#fff;
}
.action-btn.primary:hover { background:#e02244; }
.action-btn svg { flex-shrink:0; }

/* Tabs */
.profile-tabs {
  background:#0f0f0f;
  border-top:1px solid rgba(255,255,255,0.05);
  border-bottom:1px solid rgba(255,255,255,0.05);
  position:sticky;
  top:0;
  z-index:5;
}
.tab-scroll {
  display:flex;
  overflow-x:auto;
  scrollbar-width:none;
}
.tab-scroll::-webkit-scrollbar { display:none; }
.profile-tabs .tab-item {
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:14px 12px;
  font-size:14px;
  font-weight:500;
  color:#666;
  cursor:pointer;
  position:relative;
  transition:color .2s;
  white-space:nowrap;
}
.profile-tabs .tab-item svg { color:inherit; flex-shrink:0; }
.profile-tabs .tab-item::after {
  content:'';
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:24px;
  height:3px;
  background:transparent;
  border-radius:2px;
  transition:background .2s;
}
.profile-tabs .tab-item.active {
  color:#fff;
  font-weight:700;
}
.profile-tabs .tab-item.active::after {
  background:var(--primary);
}

/* 内容区 */
.profile-content { padding:12px 12px; }
.profile-content .tab-pane { display:none; }
.profile-content .tab-pane.active { display:block; }

.history-sub-tabs {
  display:flex;
  margin-bottom:12px;
  gap:8px;
}
.sub-tab {
  flex:1;
  text-align:center;
  padding:8px;
  background:#1a1a1a;
  color:#888;
  border-radius:20px;
  font-size:13px;
  cursor:pointer;
  transition:all .2s;
  font-weight:500;
}
.sub-tab.active {
  background:var(--primary);
  color:#fff;
}
.sub-tab-content { display:none; }
.sub-tab-content.active { display:block; }

.list-container { padding:0 4px; }
.list-container .video-card {
  background:#1a1a1a;
  border-color:#2a2a2a;
}

.waterfall-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:6px;
}
.waterfall-grid .empty-state {
  grid-column:span 3;
  text-align:center;
  color:#666;
  padding:40px 0;
  font-size:14px;
}
.waterfall-grid .video-card {
  display:block;
  background:transparent;
  padding:0;
  border:none;
  border-radius:8px;
  overflow:hidden;
  margin-bottom:0;
  position:relative;
}
.waterfall-grid .video-card:active { opacity:0.8; }
.waterfall-grid .card-thumb {
  width:100%;
  height:auto;
  aspect-ratio:9/16;
  border-radius:8px;
  margin-right:0;
  border:1px solid #222;
}
.waterfall-grid .card-info { padding:6px 2px; }
.waterfall-grid .card-title { font-size:12px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#eee; }

/* 列表卡片 */
.video-card {
  display:flex;
  align-items:center;
  background:#1a1a1a;
  border-radius:12px;
  padding:10px;
  margin-bottom:10px;
  border:1px solid #252525;
  cursor:pointer;
  transition:background .2s;
  user-select:none;
  position:relative;
}
.video-card:active { background:#252525; }
.card-thumb {
  width:80px;
  height:110px;
  background:#252525;
  border-radius:8px;
  margin-right:12px;
  object-fit:cover;
  flex-shrink:0;
  border:1px solid #333;
}
.card-info { flex:1; overflow:hidden; }
.card-title {
  font-size:15px;
  font-weight:500;
  margin-bottom:6px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:#fff;
}
.card-tag {
  display:inline-block;
  background:#252525;
  padding:3px 10px;
  border-radius:20px;
  font-size:11px;
  color:#aaa;
}
.card-status {
  position:absolute;
  top:6px;
  right:6px;
  display:flex;
  gap:4px;
  z-index:5;
}
.card-status .status-icon {
  background:rgba(0,0,0,0.6);
  backdrop-filter:blur(4px);
  width:22px;
  height:22px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
}
.card-status .status-icon.liked { color:#fe2c55; }
.card-status .status-icon.collected { color:#ffcc00; }
.empty, .empty-state { text-align:center; color:#666; margin-top:60px; font-size:14px; }

.thumb-placeholder {
  background:#252525;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#555;
  font-size:28px;
}

/* ========== 上下文菜单 ========== */
.context-menu {
  position:fixed;
  background:#1e1e1e;
  border-radius:12px;
  padding:4px 0;
  z-index:100;
  min-width:150px;
  box-shadow:0 8px 20px rgba(0,0,0,.6);
  display:none;
  border:1px solid #333;
}
.context-menu.show { display:block; }
.context-item { padding:12px 20px; color:#fff; font-size:14px; cursor:pointer; }
.context-item:active { background:#2a2a2a; }

/* ========== 其他组件 ========== */
.auto-play-tip {
  position:absolute;
  bottom:220px;
  left:50%;
  transform:translateX(-50%);
  background:rgba(0,0,0,0.75);
  backdrop-filter:blur(8px);
  color:#fff;
  padding:8px 20px;
  border-radius:40px;
  font-size:14px;
  z-index:25;
  white-space:nowrap;
  border:1px solid rgba(255,255,255,0.15);
  opacity:0;
  transition:opacity .3s;
  pointer-events:none;
}
.auto-play-tip.show { opacity:1; }
.error-toast {
  position:fixed;
  bottom:80px;
  left:20px;
  right:20px;
  background:rgba(0,0,0,0.85);
  color:#fff;
  padding:12px;
  border-radius:24px;
  text-align:center;
  z-index:100;
  font-size:14px;
  backdrop-filter:blur(8px);
  display:none;
}

/* 公告 */
.announcement-modal {
  position:fixed;
  top:0; left:0; right:0; bottom:0;
  background:rgba(0,0,0,0.7);
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  backdrop-filter:blur(4px);
}
.announcement-content {
  background:#1e1e1e;
  border-radius:20px;
  max-width:320px;
  width:90%;
  padding:20px;
  border:1px solid #333;
  box-shadow:0 10px 30px rgba(0,0,0,0.5);
  color:#fff;
}
.announcement-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:15px; }
.announcement-header h3 { margin:0; font-size:18px; color:var(--primary); }
.announcement-close { background:none; border:none; color:#aaa; font-size:24px; cursor:pointer; padding:0; line-height:1; }
.announcement-body { margin-bottom:20px; font-size:15px; line-height:1.5; color:#ddd; max-height:200px; overflow-y:auto; }
.announcement-footer { display:flex; gap:10px; }
.announcement-footer .btn { flex:1; padding:10px; border:none; border-radius:24px; font-size:14px; cursor:pointer; font-weight:500; }
.announcement-footer .btn-primary { background:var(--primary) !important; border-color:var(--primary) !important; color:#fff !important; }
.announcement-footer .btn-secondary { background:#333; color:#ccc; }

/* ========== 模态框样式 ========== */
.modal-content { background:#1a1a2e !important; color:#fff !important; border-radius:20px !important; }
.modal-header { border-bottom:1px solid #333 !important; }
.modal-footer { border-top:1px solid #333 !important; }
.close { color:#fff !important; opacity:0.8; }
.form-control { background:#2a2a4a !important; border:1px solid #444 !important; color:#fff !important; border-radius:12px !important; }
.form-control:focus { border-color:#ff3355 !important; box-shadow:0 0 0 2px rgba(255,51,85,0.3) !important; }
.form-control[disabled], .form-control[readonly] { background:#1a1a2e !important; color:#888 !important; cursor:not-allowed; }
.help-block { color:#aaa !important; font-size:12px; }
.btn-danger { background:#555 !important; border:none !important; }
.btn-danger:hover { background:#777 !important; }
.comment-image-preview { max-width:80px; max-height:80px; border-radius:8px; margin:5px 0; }
.comment-input-area { display:flex; align-items:center; padding:12px 20px; gap:8px; border-top:1px solid rgba(255,255,255,0.1); }
.comment-input { flex:1; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.15); border-radius:24px; padding:10px 16px; color:#fff; font-size:14px; outline:none; }
.comment-input::placeholder { color:#888; }
.image-upload-label { cursor:pointer; font-size:24px; padding:5px; color:#aaa; transition:color 0.2s; }
.image-upload-label:hover { color:#ff3355; }
.comment-send-btn { background:#ff3355; border:none; border-radius:24px; padding:10px 18px; color:#fff; font-size:14px; font-weight:600; cursor:pointer; transition:background 0.2s; }
.comment-send-btn:hover { background:#e02244; }
.comment-send-btn:disabled { background:#666; cursor:not-allowed; }

/* ========== 响应式 ========== */
@media (max-width: 480px) {
  .nav { height:62px; }
  .nav .item .icon, .nav .item .icon-filled { width:24px; height:24px; }
  .nav .item .label { font-size:10px; }
  .toolbar { right:8px; bottom:170px; gap:14px; }
  .tool-circle { width:44px; height:44px; }
  .tool-circle svg { width:24px; height:24px; }
  .music-btn .music-disc { width:44px; height:44px; }
  .profile-cover { height:160px; }
  .profile-avatar { width:80px; height:80px; }
  .home-title { font-size:24px; }
  .coming-soon-icon { font-size:48px; }
}