/* ==========================================================================
   QQ机器人管理面板 - 视觉刷新层
   基于 design-system.css 设计规范，覆盖现有 style.css 的变量和关键容器。
   不改变 HTML 结构、不改变 class 名称、不改变 JS 逻辑。
   ========================================================================== */

/* ===== 变量覆盖：用新设计色覆盖旧变量名 ===== */
:root {
  --primary: #185FA5;
  --primary-hover: #144E8A;
  --success: #1A8C5A;
  --success-bg: #E6F4EC;
  --danger: #C83232;
  --danger-bg: #FBEAEA;
  --warning: #B8860B;
  --warning-bg: #FBF3E0;
  --bg: #F7F8FA;
  --card-bg: #FFFFFF;
  --border: #DDE1E6;
  --text: #1A1F2E;
  --text-secondary: #5A6478;
  --radius: 6px;
  --shadow: none;
}

/* ===== 全局 ===== */
body {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
}

/* ===== 登录页（紫色渐变 → 浅灰底） ===== */
.login-page {
  background: var(--bg);
}
.login-card {
  border: 0.5px solid var(--border);
  border-radius: 6px;
  padding: 36px 40px;
  box-shadow: none;
  width: 360px;
}
.login-card h1 {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 4px;
}
.login-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 20px;
}
.login-card input {
  padding: 8px 12px;
  border: 0.5px solid var(--border);
  border-radius: 4px;
  font-size: 13px;
  margin-bottom: 12px;
}
.login-card input:focus {
  border-color: var(--primary);
}

/* ===== 侧边栏（深色 → 白底 + 细边框） ===== */
.sidebar {
  width: 220px;
  background: #FFFFFF;
  color: var(--text);
  border-right: 0.5px solid var(--border);
  padding: 0;
}
.sidebar-title {
  padding: 14px 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  border-bottom: 0.5px solid var(--border);
  margin-bottom: 0;
}
.nav-btn {
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-secondary);
  background: none;
  border: none;
  border-left: 3px solid transparent;
  transition: background 150ms, color 150ms, border-color 150ms;
}
.nav-btn:hover {
  background: var(--bg);
  color: var(--text);
  border-left-color: transparent;
}
.nav-btn.active {
  background: #EAF2FB;
  color: var(--primary);
  font-weight: 500;
  border-left-color: var(--primary);
}
.sidebar-footer {
  padding: 12px 20px;
  margin-top: auto;
  border-top: 0.5px solid var(--border);
  font-size: 12px;
  color: var(--text-secondary);
  background: #FAFBFC;
}

/* 聊天接管按钮 */
#open-chat-btn {
  background: var(--primary) !important;
  color: #FFFFFF !important;
  margin: 4px 8px;
  border-radius: 6px;
  text-align: center;
  border-left: none !important;
  font-weight: 500;
}
#open-chat-btn:hover {
  background: var(--primary-hover) !important;
  color: #FFFFFF !important;
}

/* 侧边栏徽章 */
.badge {
  background: var(--danger-bg);
  color: var(--danger);
  font-size: 11px;
  font-weight: 500;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 6px;
}
.badge-pulse { animation: none; }

/* 状态点 */
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
}
.status-dot.connected,
.status-dot.connected-ws { background: var(--success); }
.status-dot.connected-poll { background: var(--warning); animation: none; }
.status-dot.disconnected { background: var(--danger); }

/* ===== 内容区 ===== */
.content {
  margin-left: 220px;
  padding: 24px 28px;
  flex: 1;
  background: var(--bg);
}
.tab-content h2 {
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 16px;
  color: var(--text);
}

/* ===== 按钮 ===== */
.btn {
  padding: 6px 14px;
  border: 0.5px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 400;
  transition: background 150ms, border-color 150ms;
  line-height: 1.4;
}
.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: #FFFFFF;
}
.btn-primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn-success { background: var(--success); border-color: var(--success); color: #FFFFFF; }
.btn-success:hover { background: #157049; border-color: #157049; }
.btn-danger { background: var(--danger); border-color: var(--danger); color: #FFFFFF; }
.btn-danger:hover { background: #A82828; border-color: #A82828; }
.btn-warning { background: var(--warning); border-color: var(--warning); color: #FFFFFF; }
.btn-warning:hover { background: #946A08; border-color: #946A08; }
.btn-secondary {
  background: #FFFFFF;
  border: 0.5px solid var(--border);
  color: var(--text-secondary);
}
.btn-secondary:hover {
  background: #F0F2F5;
  border-color: var(--text-secondary);
  color: var(--text);
}
.btn-xs { padding: 2px 8px; font-size: 12px; }

/* 表单提交按钮 */
.login-card .btn-primary,
.settings-form .btn-primary,
.form-group .btn-primary,
.modal-actions .btn-primary {
  width: auto;
  min-width: 80px;
}

/* ===== 统计卡片（阴影 → 细边框） ===== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.stat-card {
  background: var(--card-bg);
  padding: 16px;
  border: 0.5px solid var(--border);
  border-radius: 6px;
  box-shadow: none;
  text-align: left;
}
.stat-label {
  display: block;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.stat-value {
  font-size: 24px;
  font-weight: 500;
  color: var(--text);
}

/* ===== 数据表格 ===== */
.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card-bg);
  border: 0.5px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  box-shadow: none;
  font-size: 13px;
}
.data-table th {
  background: var(--bg);
  padding: 8px 12px;
  text-align: left;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  border-bottom: 0.5px solid var(--border);
}
.data-table td {
  padding: 8px 12px;
  border-bottom: 0.5px solid #E8EAED;
  font-size: 13px;
  color: var(--text);
}
.data-table tr:hover { background: var(--bg); }
.data-table tr:last-child td { border-bottom: none; }

/* ===== 审核卡片 ===== */
.review-card {
  background: var(--card-bg);
  border: 0.5px solid var(--border);
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 10px;
  box-shadow: none;
}
.review-card:hover { border-color: var(--primary); }
.review-image {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 4px;
  border: 0.5px solid var(--border);
}

/* ===== 状态标签 ===== */
.status-tag {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.6;
}
.status-pending { background: var(--warning-bg); color: var(--warning); }
.status-approved { background: var(--success-bg); color: var(--success); }
.status-rejected { background: var(--danger-bg); color: var(--danger); }
.status-cancelled { background: #F0F2F5; color: var(--text-secondary); }
.status-frozen { background: #EAF2FB; color: var(--primary); }

/* ===== 表单 ===== */
.form-group label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.form-group input,
.form-group select,
.form-group textarea {
  padding: 6px 10px;
  border: 0.5px solid var(--border);
  border-radius: 4px;
  font-size: 13px;
}
.form-group input:focus,
.form-group select:focus {
  border-color: var(--primary);
}
.form-inline input {
  padding: 6px 10px;
  border: 0.5px solid var(--border);
  border-radius: 4px;
  font-size: 13px;
}

/* ===== 子标签 ===== */
.tabs-sub { gap: 2px; }
.sub-tab {
  padding: 5px 14px;
  border: 0.5px solid var(--border);
  background: #FFFFFF;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 400;
  color: var(--text-secondary);
}
.sub-tab:hover { border-color: var(--primary); color: var(--primary); }
.sub-tab.active {
  background: var(--primary);
  color: #FFFFFF;
  border-color: var(--primary);
}

/* ===== 弹窗 ===== */
/* 修复 2026-08-10：移除 v2 旧的灰色半透明遮罩。
   此前该 .modal 后加载覆盖了 style.css 的版本（display:block 无背景），导致
   手动封禁 / 证据查看 / 群发模板等非成员编辑弹窗打开时屏幕出现灰色方块。 */
.modal {
  background: transparent;
  display: block;
  z-index: 9999;
}
.modal-content {
  background: #FFFFFF;
  border: 0.5px solid var(--border);
  border-radius: 6px;
  padding: 20px 24px;
  width: 440px;
  max-width: 90%;
  box-shadow: none;
}
/* 修复 2026-09-23：与 style.css 同一处修复（本文件后加载、优先级更高，必须同步改）——
   flex 容器默认 stretch 会把图片交叉轴拉伸、破坏纵横比，详见 style.css 的注释。 */
#image-modal { cursor: pointer; align-items: center; justify-content: center; }
#image-modal img {
  max-width: 90%;
  max-height: 90%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
}
.modal-close {
  position: absolute;
  top: 16px;
  right: 24px;
  color: var(--text-secondary);
  font-size: 24px;
  cursor: pointer;
}
.modal-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  justify-content: flex-end;
}
.hint { font-size: 12px; color: var(--text-secondary); }

/* ===== 最近报名 ===== */
.recent-section {
  background: var(--card-bg);
  padding: 16px;
  border: 0.5px solid var(--border);
  border-radius: 6px;
  box-shadow: none;
}
.recent-section h3 {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 10px;
}
.recent-item {
  padding: 8px 0;
  border-bottom: 0.5px solid #E8EAED;
  font-size: 13px;
}
.recent-item:last-child { border-bottom: none; }

/* ===== 封禁向导 ===== */
.step-indicator .step {
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  background: var(--bg);
  color: var(--text-muted, #8A93A4);
}
.step-indicator .step.active {
  background: var(--primary);
  color: #FFFFFF;
}
.step-indicator .step.done {
  background: var(--success-bg);
  color: var(--success);
}
.step-indicator .step-arrow { color: var(--border); }

/* 聊天记录展示 */
.chat-records {
  background: var(--bg);
  border: 0.5px solid var(--border);
  border-radius: 4px;
}
.chat-msg {
  padding: 8px 12px;
  border: 0.5px solid #E8EAED;
  border-radius: 4px;
  background: #FFFFFF;
}
.chat-msg .chat-time { color: var(--text-secondary); font-size: 11px; }
.chat-msg.source-ai { border-left: 3px solid var(--primary); }
.chat-msg.source-reg { border-left: 3px solid var(--warning); }

/* 证据项目 */
.evidence-item {
  padding: 10px 12px;
  border: 0.5px solid var(--border);
  border-radius: 4px;
  margin-bottom: 6px;
}
.evidence-item:hover {
  border-color: var(--primary);
  background: var(--bg);
}
.evidence-item .evidence-type { font-size: 11px; }
.evidence-item .evidence-type.chat { background: #EAF2FB; color: var(--primary); }
.evidence-item .evidence-type.screenshot { background: var(--warning-bg); color: var(--warning); }

/* ===== Toast ===== */
.toast-msg {
  padding: 10px 20px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 400;
  border: 0.5px solid;
  box-shadow: none;
}
.toast-msg.toast-success {
  background: var(--success-bg);
  color: var(--success);
  border-color: #A3D9B8;
}
.toast-msg.toast-error {
  background: var(--danger-bg);
  color: var(--danger);
  border-color: #F0C0C0;
}
.toast-msg.toast-info {
  background: #EAF2FB;
  color: var(--primary);
  border-color: #B8D4F0;
}

/* ===== 活动卡片 ===== */
.activity-card {
  background: var(--card-bg);
  border: 0.5px solid var(--border);
  border-radius: 6px;
  padding: 14px 16px;
}
.activity-card:hover {
  border-color: var(--primary);
  background: #FAFBFC;
  box-shadow: none;
}
.activity-card .act-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
}
.activity-card .act-meta { font-size: 12px; color: var(--text-secondary); }
.activity-card .act-arrow { color: var(--text-secondary); }

/* 抽奖轮次 */
.lottery-round-card {
  background: var(--card-bg);
  border: 0.5px solid var(--border);
  border-radius: 6px;
  padding: 10px 14px;
  margin-bottom: 8px;
}
.lottery-round-card .round-title { font-size: 14px; }
.lottery-round-card .round-prize { color: var(--primary); font-size: 12px; }
.winner-tag {
  background: #EAF2FB;
  color: var(--primary);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}

/* ===== 群发面板 ===== */
.broadcast-banner {
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 13px;
}
.broadcast-banner-info { background: #EAF2FB; color: var(--primary); }
.broadcast-banner-success { background: var(--success-bg); color: var(--success); }
.broadcast-banner-error { background: var(--danger-bg); color: var(--danger); }
.broadcast-panel {
  background: #FFFFFF;
  border: 0.5px solid var(--border);
  border-radius: 6px;
}
.broadcast-stats-bar {
  background: var(--bg);
  border-radius: 4px;
  color: var(--text-secondary);
}

/* ===== 绑定码 ===== */
.bind-token-card {
  background: var(--card-bg);
  border: 0.5px solid var(--border);
  border-radius: 6px;
  box-shadow: none;
}
.bind-qr-box {
  border: 0.5px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
}

/* ===== 徽章/工具类补充 ===== */
.msg-text.success { color: var(--success); }
.msg-text.error { color: var(--danger); }

/* ===== 动画禁用 ===== */
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } }

/* ===== 响应式 ===== */
@media (max-width: 768px) {
  .sidebar { width: 180px; }
  .content { margin-left: 180px; padding: 16px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .review-card { flex-direction: column; }
}

/* ===== 空状态 ===== */
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-secondary);
}
/* ===== 天气播报面板缩放修正 ===== */

/* 逐小时预报：从横向滚动改为2行网格 */
.weather-hourly-scroll {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 4px;
  overflow-x: visible;
  padding-bottom: 0;
}
.weather-hourly-item {
  min-width: 0;
  padding: 6px 4px;
  font-size: 11px;
}
.weather-hourly-item .whi-time { font-size: 10px; margin-bottom: 2px; }
.weather-hourly-item .whi-temp { font-size: 13px; }
.weather-hourly-item .whi-text { font-size: 9px; margin-top: 1px; }

/* 空气质量预报：标签压缩 */
.weather-air-5d-row {
  padding: 4px 6px;
  gap: 6px;
  font-size: 11px;
}
.weather-air-5d-row .wa5-date { min-width: 36px; font-size: 11px; }
.weather-air-5d-row .wa5-aqi { font-size: 13px; }
.weather-air-5d-row .wa5-cat { font-size: 10px; padding: 0 4px; }
.weather-air-5d-row .wa5-primary {
  font-size: 10px;
  max-width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 生活指数：标签缩短 */
.weather-indices-grid { gap: 4px; }
.weather-index-item {
  padding: 6px;
  gap: 6px;
  font-size: 11px;
}
.weather-index-item .wii-icon {
  width: 24px; height: 24px;
  font-size: 12px;
  border-radius: 4px;
}
.weather-index-item .wii-name { font-size: 12px; }
.weather-index-item .wii-cat { font-size: 10px; }

/* 响应式：小屏逐小时回退较少列 */
@media (max-width: 900px) {
  .weather-hourly-scroll {
    grid-template-columns: repeat(8, 1fr);
  }
}
@media (max-width: 600px) {
  .weather-hourly-scroll {
    grid-template-columns: repeat(6, 1fr);
  }
}