/* 两栏布局 + 纯白主题（覆盖 style.css 默认深色渐变） */
/* background 不用 !important，以允许背景设置把渐变写入 body 行内样式 */
html, body.layout2 { background: #ffffff; color: #222; }
body.layout2 { padding: 0; display: flex; align-items: stretch; justify-content: flex-start; min-height: 100vh; }

/* ===== 左侧用户栏 ===== */
.sidebar {
  width: 252px;
  flex: 0 0 252px;
  background: #ffffff;
  /* 设置了背景时半透明白遮罩，让 body 渐变透出但文字仍清晰 */
  transition: background .3s;
  border-right: 1px solid #edf0f4;
  padding: 26px 18px;
  height: 100vh;
  position: sticky;
  top: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
body.layout2.has-bg .sidebar { background: rgba(255, 255, 255, .82); border-right-color: rgba(0,0,0,.06); }
.sidebar .brand {
  font-size: 19px;
  font-weight: 700;
  color: #20242e;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 4px 20px;
}
.sidebar .auth-bar {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  margin-bottom: 6px;
  min-height: auto;
}
.sidebar .login-btn {
  width: 100%;
  background: #764ba2;
  color: #fff;
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 14px;
}
.sidebar .login-btn:hover { background: #5b3791; }
.sidebar .cur-user {
  width: 100%;
  justify-content: flex-start;
  color: #2b2f3a;
  background: #f6f2fc;
  border: 1px solid #e8e0f7;
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 15px;
  font-weight: 600;
}
.sidebar .cur-user:hover { background: #efe8fb; }
.sidebar .logout-btn { margin-left: 0; }
.sidebar .menu-badge { top: 2px; right: 6px; }

/* 登录态下的辅助操作（切换账号 / 退出） */
.side-actions { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.side-actions button {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid #e3e6ea;
  border-radius: 9px;
  background: #fff;
  color: #444;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
}
.side-actions button:hover { background: #f1f3f6; color: #5b3791; }

.side-nav { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; padding-top: 8px; }
.side-nav a {
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  color: #3a3f4b;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
}
.side-nav a:hover { background: #f2f3f7; }
.side-nav a.active { background: #764ba2; color: #fff; font-weight: 600; }
.side-nav .divider { border-top: 1px solid #eef0f4; margin: 10px 4px; }

/* ===== 右侧内容 ===== */
/* 背景透明，让 body 上的背景渐变透出在卡片间隙，背景设置才可见 */
.main { flex: 1; min-width: 0; background: transparent; padding: 32px 40px 64px; }
.main .wrap { margin: 0 auto; }
body.layout2 .card,
body.layout2 .msg {
  background: #ffffff;
  border: 1px solid #eceef2;
  box-shadow: 0 2px 10px rgba(20, 24, 34, .05);
}
body.layout2 .msg.reply { background: #fbfbfd; }

/* ===== 白色主题字体清晰覆盖 ===== */
body.layout2 h1 { color: #1f2430; text-shadow: none; letter-spacing: 1px; }
body.layout2 #loadStatus,
body.layout2 #emptyHint { color: #7a808c; }
body.layout2 .page-btn {
  background: #ffffff;
  color: #555;
  border: 1px solid #dde1e6;
}
body.layout2 .page-btn:hover { background: #f0f2f5; }
body.layout2 .page-btn.active { background: #764ba2; border-color: #764ba2; color: #fff; }
body.layout2 .sort-select {
  background: #ffffff;
  color: #333;
  border: 1px solid #dde1e6;
}
body.layout2 .profile-btn {
  background: #ffffff;
  color: #4a4f5a;
  border: 1px solid #dde1e6;
}
body.layout2 .act-btn { background: #f2f3f6; color: #5a5f69; }
body.layout2 .act-btn:hover { background: #e9e5f6; color: #6f3fa0; }
/* 点赞/踩后高亮（提权重，避免被上面的基础色覆盖导致与背景融合看不清） */
body.layout2 .act-btn.voted { background: #764ba2; color: #fff; box-shadow: 0 1px 4px rgba(118,75,162,.35); }
body.layout2 .act-btn.voted .cnt { color: #fff; }
body.layout2 .act-btn.voted:hover { background: #5b3791; color: #fff; }
body.layout2 .hint,
body.layout2 .post-as { color: #7a808c; }
body.layout2 .expand-reply-btn { color: #6f3fa0; }

/* 深色渐变残留：隐藏顶部导航（已改为侧栏） */
body.layout2 .navbar { display: none; }

/* 下拉菜单（我的留言/通知/背景/退出）白底深字 */
body.layout2 .user-menu,
body.layout2 .menu-item {
  background: #ffffff;
  color: #333;
  border: 1px solid #eef0f4;
}
body.layout2 .menu-item:hover { background: #f4f1fb; color: #5b3791; }

/* ===== 响应式（窄屏时侧栏折叠到顶部） ===== */
@media (max-width: 820px) {
  body.layout2 { flex-direction: column; }
  .sidebar { width: 100%; flex: none; height: auto; position: static; border-right: none; border-bottom: 1px solid #edf0f4; padding: 16px; }
  .sidebar .brand { padding-bottom: 10px; }
  .sidenav-inline { display: flex; flex-wrap: wrap; gap: 6px; }
  .sidenav-inline a { flex: 1 1 auto; text-align: center; padding: 8px 10px; }
  .main { padding: 20px 14px 48px; }
}