:root {
    --bg-dark: #1e1f22; --bg-sidebar: #2b2d31; --bg-content: #313338;
    --text-primary: #dbdee1; --text-secondary: #949ba4;
    --accent: #5865f2; --accent-hover: #4752c4; --danger: #ed4245; --success: #57f287;
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: var(--bg-dark); color: var(--text-primary); height:100vh; }
.app { display: flex; height:100vh; }
.sidebar { width:250px; background:var(--bg-sidebar); padding:15px; display:flex; flex-direction:column; }
.user-info { display:flex; align-items:center; gap:10px; padding-bottom:15px; border-bottom:1px solid #404249; margin-bottom:20px; }
.avatar { width:40px; height:40px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; font-weight:bold; color:white; }
.name { font-weight:bold; display:block; }
.role { font-size:12px; color:var(--text-secondary); }
.nav-links { list-style:none; }
.nav-links li { margin-bottom:5px; }
.nav-links a { display:block; padding:8px; border-radius:4px; color:var(--text-primary); text-decoration:none; }
.nav-links a:hover { background:#404249; }
.main-content { flex:1; overflow-y:auto; padding:20px; }
.card { background:var(--bg-content); border-radius:8px; padding:20px; margin-bottom:20px; }
input, select, button { padding:10px; border:none; border-radius:4px; margin-bottom:10px; width:100%; background:#404249; color:white; }
button { background:var(--accent); cursor:pointer; }
button:hover { background:var(--accent-hover); }
.error { color:var(--danger); }
.success { color:var(--success); }
a { color:var(--accent); text-decoration:none; }
/* 语音房间布局 */
.room-container { display:flex; flex-direction:column; height:100%; }
.members-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap:15px; margin-bottom:20px; }
.member-card { background:var(--bg-sidebar); border-radius:12px; padding:15px; display:flex; flex-direction:column; align-items:center; position:relative; }
.member-card .avatar { width:60px; height:60px; border-radius:50%; background:var(--accent); display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:bold; margin-bottom:8px; }
.member-card .username { font-size:14px; margin-bottom:5px; }
.member-card .volume-bar { width:80%; height:6px; background:#404249; border-radius:3px; overflow:hidden; }
.member-card .volume-fill { width:0%; height:100%; background:var(--success); transition: width 0.1s; }
.controls-bar { display:flex; gap:10px; padding:15px; background:var(--bg-sidebar); border-radius:12px; align-items:center; }
.controls-bar button { width:auto; padding:10px 20px; }
.settings-panel { background:var(--bg-sidebar); border-radius:12px; padding:20px; margin-top:10px; display:none; }
.toggle-switch { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.toggle-switch input[type=checkbox] { width:40px; height:20px; background:#ccc; border-radius:10px; appearance:none; position:relative; cursor:pointer; }
.toggle-switch input[type=checkbox]:checked { background:var(--accent); }
.toggle-switch input[type=checkbox]:before { content:''; position:absolute; width:16px; height:16px; background:white; border-radius:50%; top:2px; left:2px; transition:0.2s; }
.toggle-switch input[type=checkbox]:checked:before { left:22px; }
/* 侧边栏房间列表增强 */
.sidebar .room-list a {
  display: block;
  padding: 6px 10px;
  margin-bottom: 4px;
  border-radius: 4px;
  transition: background 0.15s;
  text-decoration: none;
  color: var(--text-primary);
}
.sidebar .room-list a:hover {
  background: #404249;
  cursor: pointer;
}
.sidebar .room-list a .room-name {
  font-weight: 500;
}
.sidebar .room-list a .room-count {
  font-size: 12px;
  color: var(--text-secondary);
}


/* 侧边栏房间列表 - 深色动态伸展 */
.room-list a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  margin-bottom: 4px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--text-primary);
  background: #1a1a1e;                /* 深色背景 */
  position: relative;
  overflow: hidden;
  transition: color 0.2s;
}
.room-list a::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; bottom: 0; right: 50%;
  background: var(--accent);
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 0;
}
.room-list a:hover::before {
  left: 0; right: 0;
  opacity: 0.15;                      /* 半透明覆盖，伸展动画 */
}
.room-list a:hover {
  color: #fff;
}
.room-list .room-name,
.room-list .room-count {
  position: relative;
  z-index: 1;
}
.room-list .room-name {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.room-list .room-count {
  font-size: 12px;
  color: var(--text-secondary);
  margin-left: 8px;
}

/* 导航菜单动态伸展效果（与控制面板、创建房间等） */
.nav-links a {
  display: block;
  padding: 8px 12px;
  margin-bottom: 4px;
  border-radius: 6px;
  text-decoration: none;
  color: var(--text-primary);
  background: #1a1a1e;              /* 深色背景 */
  position: relative;
  overflow: hidden;
  transition: color 0.2s;
}
.nav-links a::before {
  content: '';
  position: absolute;
  top: 0; left: 50%; bottom: 0; right: 50%;
  background: var(--accent);
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 0;
}
.nav-links a:hover::before {
  left: 0; right: 0;
  opacity: 0.15;                    /* 半透明主题色覆盖 */
}
.nav-links a:hover {
  color: #fff;
}