@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap');

:root {
  --bg:#080c14;--bg2:#0d1220;--surface:#111827;--surface2:#1a2236;
  --border:#1f2d45;--border2:#2a3f5f;--primary:#3b82f6;--primary-d:#2563eb;
  --primary-g:rgba(59,130,246,0.12);--accent:#f59e0b;--green:#10b981;
  --red:#ef4444;--purple:#8b5cf6;--pink:#ec4899;
  --text:#e2e8f0;--text2:#94a3b8;--text3:#475569;--radius:10px;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{background:var(--bg);color:var(--text);font-family:'Noto Sans SC','Sora',sans-serif;font-weight:300;line-height:1.6;min-height:100vh;overflow-x:hidden;}
body::before{content:'';position:fixed;inset:0;background-image:linear-gradient(rgba(59,130,246,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(59,130,246,0.03) 1px,transparent 1px);background-size:40px 40px;pointer-events:none;z-index:0;}
.nav{position:fixed;top:0;left:0;right:0;z-index:1000;height:56px;background:rgba(8,12,20,0.9);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 1.5rem;gap:1.5rem;}
.nav-logo{font-family:'Sora',sans-serif;font-size:1.25rem;font-weight:700;color:var(--primary);letter-spacing:-0.02em;text-decoration:none;display:flex;align-items:center;gap:8px;white-space:nowrap;}
.nav-logo span{color:var(--accent);}
.nav-links{display:flex;gap:4px;flex:1;}
.nav-link{padding:6px 12px;border-radius:6px;color:var(--text2);font-size:0.85rem;text-decoration:none;transition:all 0.15s;white-space:nowrap;}
.nav-link:hover{color:var(--text);background:var(--surface);}
.nav-link.active{color:var(--primary);background:var(--primary-g);}
.nav-right{display:flex;align-items:center;gap:10px;}
.nav-avatar{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,var(--primary),var(--purple));display:flex;align-items:center;justify-content:center;font-size:0.75rem;font-weight:700;color:white;cursor:pointer;position:relative;}
.nav-badge{position:absolute;top:-3px;right:-3px;width:10px;height:10px;border-radius:50%;background:var(--red);border:2px solid var(--bg);}
.btn{display:inline-flex;align-items:center;gap:6px;padding:7px 16px;border-radius:8px;font-size:0.83rem;font-weight:500;cursor:pointer;border:none;font-family:inherit;transition:all 0.15s;text-decoration:none;white-space:nowrap;}
.btn-primary{background:var(--primary);color:white;}
.btn-primary:hover{background:var(--primary-d);transform:translateY(-1px);}
.btn-ghost{background:transparent;color:var(--text2);border:1px solid var(--border);}
.btn-ghost:hover{color:var(--text);border-color:var(--border2);}
.btn-sm{padding:5px 12px;font-size:0.78rem;}
.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;transition:border-color 0.15s;}
.card:hover{border-color:var(--border2);}
.input{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:10px 14px;color:var(--text);font-family:inherit;font-size:0.9rem;transition:border-color 0.15s;outline:none;}
.input:focus{border-color:var(--primary);}
.input::placeholder{color:var(--text3);}
textarea.input{resize:vertical;min-height:80px;}
.tag{display:inline-flex;align-items:center;padding:2px 10px;border-radius:20px;font-size:0.72rem;font-weight:500;}
.tag-blue{background:rgba(59,130,246,0.15);color:#60a5fa;}
.tag-amber{background:rgba(245,158,11,0.15);color:#fbbf24;}
.tag-green{background:rgba(16,185,129,0.15);color:#34d399;}
.skeleton{background:linear-gradient(90deg,var(--surface) 25%,var(--surface2) 50%,var(--surface) 75%);background-size:200% 100%;animation:shimmer 1.5s infinite;border-radius:4px;}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.anim-fade-up{animation:fadeUp 0.4s ease both;}
#toast-container{position:fixed;bottom:1.5rem;right:1.5rem;z-index:9999;display:flex;flex-direction:column;gap:8px;}
.toast{padding:12px 18px;border-radius:10px;font-size:0.85rem;font-weight:500;animation:toastIn 0.3s ease;max-width:300px;}
.toast-success{background:rgba(16,185,129,0.9);color:white;}
.toast-error{background:rgba(239,68,68,0.9);color:white;}
.toast-info{background:rgba(59,130,246,0.9);color:white;}
@keyframes toastIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
.modal-overlay{position:fixed;inset:0;z-index:2000;background:rgba(0,0,0,0.7);display:flex;align-items:center;justify-content:center;}
.modal{background:var(--surface);border:1px solid var(--border2);border-radius:14px;padding:1.8rem;width:90%;max-width:480px;animation:fadeUp 0.3s ease;}
.modal-title{font-size:1.1rem;font-weight:600;margin-bottom:1.2rem;}
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px;}

/* ========== 手机端响应式适配 ========== */
@media (max-width: 768px) {

  /* 导航栏 */
  .nav {
    padding: 0 1rem;
    gap: 0.6rem;
  }
  .nav-logo {
    font-size: 1rem;
  }
  .nav-links {
    display: none; /* 导航链接收起，靠底部Tab代替 */
  }
  .nav-right {
    gap: 6px;
    flex-shrink: 0;
  }
  /* 搜索框缩小 */
  .nav-right > div:first-child input {
    width: 90px !important;
  }
  .nav-right > div:first-child {
    padding: 0 7px !important;
  }

  /* 首页三栏 → 单栏 */
  .layout {
    grid-template-columns: 1fr !important;
    padding-top: 56px;
  }
  /* 隐藏左侧边栏和右侧热门话题 */
  .sidebar-l,
  .sidebar-r {
    display: none !important;
  }
  /* 主内容区全宽 */
  .main {
    padding: 1rem 0.8rem !important;
    max-width: 100% !important;
  }

  /* 发帖框 */
  .compose {
    padding: 0.8rem !important;
  }

  /* 帖子卡片 */
  .post-card {
    padding: 0.9rem 1rem !important;
    margin-bottom: 0.6rem !important;
  }

  /* 聊天室布局 */
  .chat-layout {
    flex-direction: column;
  }
  .rooms-panel {
    width: 100% !important;
    height: auto;
    border-right: none !important;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    overflow-y: hidden;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 0.5rem;
  }
  .rooms-header {
    display: none;
  }
  #room-list {
    display: flex;
    flex-direction: row;
    gap: 4px;
    padding: 6px 0;
    white-space: nowrap;
  }
  .room-item {
    flex-direction: column;
    padding: 6px 10px !important;
    border-left: none !important;
    border-bottom: 2px solid transparent;
    border-radius: 8px;
    font-size: 0.75rem;
    flex-shrink: 0;
    gap: 2px !important;
  }
  .room-item.active {
    border-bottom-color: var(--primary);
  }
  .room-icon-wrap {
    width: 24px !important;
    height: 24px !important;
  }
  #room-cnt-lobby,
  #room-cnt-anime,
  #room-cnt-music,
  #room-cnt-tech,
  #room-cnt-life {
    display: none;
  }

  /* 聊天消息区 */
  .chat-main {
    height: calc(100vh - 56px - 90px);
  }
  .messages {
    padding: 0.8rem !important;
  }

  /* Toast 移到底部中间 */
  #toast-container {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    align-items: center;
  }
  .toast {
    max-width: 100%;
    width: 100%;
    text-align: center;
  }

  /* 弹窗全屏适配 */
  .modal {
    width: 95% !important;
    padding: 1.4rem !important;
    max-height: 90vh;
    overflow-y: auto;
  }

  /* 个人主页 */
  .profile-top {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 1rem !important;
  }
  .profile-actions {
    margin-left: 0 !important;
  }
  .profile-stats {
    gap: 1rem !important;
    flex-wrap: wrap;
  }

  /* 管理后台 */
  .admin-layout {
    flex-direction: column;
  }
  .admin-sidebar {
    width: 100% !important;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0.6rem;
    border-right: none !important;
    border-bottom: 1px solid var(--border);
  }
  .admin-sidebar-title {
    display: none;
  }
  .admin-nav-item {
    padding: 5px 10px !important;
    font-size: 0.78rem;
    border-radius: 20px;
    margin-bottom: 0 !important;
  }
  .admin-main {
    padding: 1rem !important;
  }
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .table-wrap {
    overflow-x: auto;
  }

  /* 底部导航Tab栏 */
  .mobile-tab-bar {
    display: flex !important;
  }
}

/* 底部Tab导航（仅手机显示） */
.mobile-tab-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: rgba(8,12,20,0.95);
  backdrop-filter: blur(20px);
  border-top: 1px solid var(--border);
  height: 56px;
  align-items: center;
  justify-content: space-around;
  padding: 0 0.5rem;
  padding-bottom: env(safe-area-inset-bottom);
}
.mobile-tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 16px;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none;
  color: var(--text3);
  font-size: 0.65rem;
  transition: all 0.15s;
  flex: 1;
}
.mobile-tab-item.active {
  color: var(--primary);
}
.mobile-tab-item span:first-child {
  font-size: 1.3rem;
  line-height: 1;
}

/* 手机端底部留出Tab栏空间 */
@media (max-width: 768px) {
  body {
    padding-bottom: 56px;
  }
}

/* ========== 全局音乐播放器 ========== */
#global-player {
  position: fixed;
  bottom: 1.2rem;
  right: 1.2rem;
  z-index: 1500;
  width: 300px;
  background: rgba(13,18,32,0.96);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border2);
  border-radius: 14px;
  padding: 12px 14px;
  display: none;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
}
#global-player.visible { display: flex; }
.gp-top { display: flex; align-items: center; gap: 10px; }
.gp-cover { width: 40px; height: 40px; border-radius: 8px; background: var(--surface2); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; overflow: hidden; }
.gp-cover img { width: 100%; height: 100%; object-fit: cover; }
.gp-info { flex: 1; min-width: 0; }
.gp-title { font-size: 0.82rem; font-weight: 600; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-artist { font-size: 0.72rem; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-close { font-size: 1rem; color: var(--text3); cursor: pointer; padding: 2px 4px; border-radius: 4px; line-height: 1; flex-shrink: 0; }
.gp-close:hover { color: var(--text); background: var(--surface2); }
.gp-progress-wrap { display: flex; align-items: center; gap: 6px; }
.gp-time { font-size: 0.65rem; color: var(--text3); flex-shrink: 0; width: 30px; }
.gp-time.right { text-align: right; }
.gp-progress { flex: 1; height: 3px; background: var(--surface2); border-radius: 2px; cursor: pointer; position: relative; overflow: hidden; }
.gp-progress-fill { height: 100%; background: var(--primary); border-radius: 2px; width: 0%; transition: width 0.1s linear; pointer-events: none; }
.gp-controls { display: flex; align-items: center; justify-content: center; gap: 16px; }
.gp-btn { background: none; border: none; color: var(--text2); cursor: pointer; font-size: 1rem; padding: 4px; border-radius: 6px; line-height: 1; transition: color 0.15s; }
.gp-btn:hover { color: var(--text); }
.gp-btn.play { width: 34px; height: 34px; background: var(--primary); color: white; border-radius: 50%; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; }
.gp-btn.play:hover { background: var(--primary-d); }
#gp-playlist { display: none; position: fixed; bottom: calc(1.2rem + 165px); right: 1.2rem; z-index: 1499; width: 300px; max-height: 280px; overflow-y: auto; background: rgba(13,18,32,0.97); border: 1px solid var(--border2); border-radius: 12px; padding: 8px 0; box-shadow: 0 8px 32px rgba(0,0,0,0.5); }
#gp-playlist.visible { display: block; }
.gp-pl-item { display: flex; align-items: center; gap: 10px; padding: 8px 14px; cursor: pointer; transition: background 0.1s; }
.gp-pl-item:hover { background: var(--surface2); }
.gp-pl-item.active { background: var(--primary-g); }
.gp-pl-item.active .gp-pl-title { color: var(--primary); }
.gp-pl-num { font-size: 0.7rem; color: var(--text3); width: 18px; text-align: center; flex-shrink: 0; }
.gp-pl-info { flex: 1; min-width: 0; }
.gp-pl-title { font-size: 0.8rem; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-pl-artist { font-size: 0.7rem; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#gp-fab { position: fixed; bottom: 1.2rem; right: 1.2rem; z-index: 1500; width: 44px; height: 44px; border-radius: 50%; background: var(--primary); color: white; border: none; cursor: pointer; font-size: 1.2rem; display: none; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(59,130,246,0.4); transition: transform 0.15s; }
#gp-fab:hover { transform: scale(1.1); }
#gp-fab.visible { display: flex; }

@media (max-width: 768px) {
  #global-player { width: calc(100vw - 2rem); bottom: calc(56px + 0.8rem); right: 1rem; left: 1rem; }
  #gp-playlist { width: calc(100vw - 2rem); right: 1rem; left: 1rem; bottom: calc(56px + 0.8rem + 165px); }
  #gp-fab { bottom: calc(56px + 0.8rem); right: 1rem; }
}

/* 播放器可拖动提示 */
#global-player { cursor: move; }
#global-player button { cursor: pointer; }
#global-player .gp-progress { cursor: pointer; }

.tag-purple{background:rgba(139,92,246,0.15);color:#a78bfa;}
.tag-orange{background:rgba(249,115,22,0.15);color:#fb923c;}