:root {
  --color-primary: #2563eb;
  --color-bg: #f8faff;
  --color-card: #fff;
  --color-border: #e7ebfd;
  --color-text: #1a2044;
  --color-text-soft: #64749d;
  --radius-md: 16px;
  --shadow: 0 2px 12px rgba(0,21,91,0.06);
}
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:Microsoft YaHei,sans-serif; background:var(--color-bg); color:var(--color-text); }
.layout { display:flex; height:100vh; }
.sidebar { width:260px; background:var(--color-card); border-right:1px solid var(--color-border); display:flex; flex-direction:column; padding:24px 0; }
.logo { padding:0 24px 24px; font-weight:600; color:var(--color-primary); }
.menu-item { display:block; padding:12px 24px; cursor:pointer; border-left:3px solid transparent; }
.menu-item.active { background:var(--color-bg); color:var(--color-primary); border-left-color:var(--color-primary); }
.logout-btn { margin-top:auto; padding:12px 24px; color:#ef4444; cursor:pointer; }
.main { flex:1; display:flex; flex-direction:column; }
.header { height:70px; background:var(--color-card); border-bottom:1px solid var(--color-border); display:flex; align-items:center; justify-content:space-between; padding:0 24px; }
#model-select { padding:8px; border:1px solid var(--color-border); border-radius:8px; }
.login-btn { padding:8px 14px; background:var(--color-primary); color:#fff; border:none; border-radius:8px; cursor:pointer; }
.chat-container { flex:1; padding:24px; overflow-y:auto; display:flex; flex-direction:column; gap:16px; }
.welcome { color:var(--color-text-soft); text-align:center; margin-top:40px; }
.msg { max-width:80%; padding:12px 16px; border-radius:var(--radius-md); box-shadow:var(--shadow); }
.msg.user { background:var(--color-primary); color:#fff; align-self:flex-end; }
.msg.bot { background:var(--color-card); border:1px solid var(--color-border); align-self:flex-start; }
.input-wrapper { height:90px; background:var(--color-card); border-top:1px solid var(--color-border); display:flex; align-items:center; padding:0 24px; gap:12px; }
#input-msg { flex:1; height:52px; border:1px solid var(--color-border); border-radius:26px; padding:0 20px; outline:none; }
#send { width:100px; height:52px; background:var(--color-primary); color:#fff; border:none; border-radius:26px; cursor:pointer; }
.right-panel { width:280px; background:var(--color-card); border-left:1px solid var(--color-border); padding:24px 16px; }
.panel-header { font-weight:600; margin-bottom:16px; color:var(--color-primary); }
.panel-body { display:flex; flex-direction:column; gap:12px; }
.panel-item { padding:10px; background:var(--color-bg); border-radius:8px; cursor:pointer; }
.modal { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.2); display:none; align-items:center; justify-content:center; }
.modal.show { display:flex; }
.modal-content { position:relative; background:var(--color-card); width:400px; border-radius:var(--radius-md); padding:24px; }
.modal-close { position:absolute; right:16px; top:12px; font-size:20px; cursor:pointer; color:#999; }
.modal-tab { display:flex; gap:12px; margin-bottom:20px; }
.tab-btn { padding:8px 16px; border:none; background:none; cursor:pointer; }
.tab-btn.active { color:var(--color-primary); border-bottom:2px solid var(--color-primary); }
.modal-panel { display:none; flex-direction:column; gap:12px; }
.modal-panel.show { display:flex; }
.modal-panel input { padding:10px; border:1px solid var(--color-border); border-radius:8px; }
.modal-panel button { padding:10px; background:var(--color-primary); color:#fff; border:none; border-radius:8px; cursor:pointer; }
/* 修复：验证码行的布局，按钮稳定显示 */
.code-group {
  display: flex;
  gap: 8px;
}
.code-group input {
  flex: 1;
}
.send-code {
  white-space: nowrap;
  padding: 0 12px;
  background: #e7ebfd;
  color: var(--color-primary);
  border: 1px solid var(--color-border);
}
.send-code:hover {
  background: var(--color-bg);
}