/* ============================================================
   Modern · Fresh · Professional 主题
   浅灰底 / 白卡片 / 柔和阴影 / 圆角 / 专业蓝 / 语义化柔和标签
   ============================================================ */
:root {
  --tp-bg: #f4f6fa;
  --tp-surface: #ffffff;
  --tp-fg: #0f172a;
  --tp-fg-muted: #64748b;
  --tp-line: #e2e8f0;
  --tp-line-soft: #eef2f6;
  --tp-primary: #2563eb;
  --tp-primary-dark: #1d4ed8;
  --tp-primary-tint: #eff6ff;
  --tp-sidebar: #e9f1fc;          /* 侧边栏浅蓝 */
  --tp-sidebar-border: #d5e3f7;
  --tp-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --tp-mono: "SFMono-Regular", "Roboto Mono", Menlo, Consolas, monospace;
  --tp-shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 1px 2px rgba(15, 23, 42, .04);
  --tp-shadow-lg: 0 20px 45px rgba(15, 23, 42, .14);

  /* Element Plus 主题变量覆写 */
  --el-color-primary: #2563eb;
  --el-color-primary-light-3: #5b8def;
  --el-color-primary-light-5: #93b4f5;
  --el-color-primary-light-7: #c7d8fb;
  --el-color-primary-light-8: #dbe6fd;
  --el-color-primary-light-9: #eff4ff;
  --el-color-primary-dark-2: #1d4ed8;
  --el-color-success: #10b981;
  --el-color-success-light-9: #ecfdf5;
  --el-color-warning: #f59e0b;
  --el-color-warning-light-9: #fffbeb;
  --el-color-danger: #ef4444;
  --el-color-danger-light-9: #fef2f2;
  --el-color-error: #ef4444;
  --el-color-info: #64748b;
  --el-color-info-light-9: #f1f5f9;
  --el-border-radius-base: 10px;
  --el-border-radius-small: 8px;
  --el-border-radius-round: 999px;
  --el-text-color-primary: #0f172a;
  --el-text-color-regular: #334155;
  --el-text-color-secondary: #64748b;
  --el-text-color-placeholder: #94a3b8;
  --el-border-color: #e2e8f0;
  --el-border-color-light: #eef2f6;
  --el-border-color-lighter: #f1f5f9;
  --el-bg-color: #ffffff;
  --el-bg-color-overlay: #ffffff;
  --el-fill-color-blank: #ffffff;
  --el-fill-color-light: #f8fafc;
  --el-fill-color-lighter: #f1f5f9;
  --el-box-shadow: var(--tp-shadow);
  --el-box-shadow-light: 0 1px 2px rgba(15, 23, 42, .05);
  --el-box-shadow-lighter: none;
  --el-box-shadow-dark: var(--tp-shadow-lg);
  --el-font-family: var(--tp-font);
  --el-font-size-base: 14px;
}

html, body, #app { height: 100%; margin: 0; }
body { background: var(--tp-bg); color: var(--tp-fg); font-family: var(--tp-font); -webkit-font-smoothing: antialiased; }
.mono, .mono * { font-family: var(--tp-mono); }

/* ---------- 布局 ---------- */
.layout { height: 100vh; background: var(--tp-bg); }
.aside { background: linear-gradient(180deg, #0f1b2d 0%, #1a2740 100%); border-right: 1px solid rgba(255,255,255,.06); }
.logo { font-weight: 700; font-size: 18px; letter-spacing: .01em; padding: 18px 20px; color: #ffffff; border-bottom: 1px solid rgba(255,255,255,.08); }
.logo-sub { display: block; font-size: 10px; font-weight: 600; letter-spacing: .1em; color: #8ea3bd; margin-top: 3px; white-space: nowrap; }
.el-menu { border-right: 0; background: transparent; padding: 8px; }
.el-menu-item { display: flex; align-items: center; height: 44px; line-height: 44px; border-radius: 8px; margin: 2px 0; font-weight: 500; color: #a7b6cb; }
/* 侧边栏未读角标：不用 el-badge（其 sup 为绝对定位，在菜单项里会偏下），
   改用普通行内元素，靠 flex 垂直居中 + margin-left:auto 右对齐 */
.menu-badge {
  margin-left: auto;
  min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box;
  border-radius: 9px; background: #f5222d; color: #fff;
  font-size: 11px; font-weight: 600; line-height: 18px; text-align: center;
  box-shadow: 0 0 0 2px rgba(15, 27, 45, .35);
}
.el-menu-item .el-icon { color: inherit; }
.el-menu-item:hover { background: rgba(255,255,255,.07); color: #ffffff; }
.el-menu-item.is-active { background: var(--tp-primary); color: #ffffff; font-weight: 600; box-shadow: 0 6px 16px rgba(37,99,235,.35); }

.topbar { background: var(--tp-surface); border-bottom: 1px solid var(--tp-line-soft); height: 56px; padding: 0 24px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); }
.content { background: var(--tp-bg); padding: 24px; overflow: auto; }

/* ---------- 卡片 ---------- */
.el-card { background: var(--tp-surface); border: 1px solid var(--tp-line-soft); border-radius: 12px; box-shadow: var(--tp-shadow); }
.el-card__header { border-bottom: 1px solid var(--tp-line-soft); padding: 16px 20px; font-weight: 600; color: var(--tp-fg); }
.el-card__body { padding: 20px; }
.mb16 { margin-bottom: 16px; }

/* ---------- 按钮 ---------- */
.el-button { border-radius: 8px; font-weight: 500; }
.el-button--primary { background: var(--tp-primary); border-color: var(--tp-primary); color: #fff; }
.el-button--primary:hover { background: var(--tp-primary-dark); border-color: var(--tp-primary-dark); }
.el-button--default { color: #334155; border-color: var(--tp-line); background: #fff; }
.el-button--default:hover { color: var(--tp-primary); border-color: var(--tp-primary); background: var(--tp-primary-tint); }
.el-button--success { background: #10b981; border-color: #10b981; }
.el-button--warning { background: #f59e0b; border-color: #f59e0b; color: #fff; }
.el-button--danger { background: #ef4444; border-color: #ef4444; }
.el-button--danger.is-plain { background: #fef2f2; color: #dc2626; border-color: #fecaca; }
.el-button.is-text, .el-button--text { color: var(--tp-primary); }

/* ---------- 表格 ---------- */
.el-table { font-size: 13.5px; }
.el-table th.el-table__cell { background: var(--el-fill-color-light); color: #475569; font-weight: 600; font-size: 12px; letter-spacing: .02em; border-bottom: 1px solid var(--tp-line); }
.el-table td.el-table__cell { border-bottom: 1px solid var(--el-border-color-lighter); }
.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell { background: #fafbfd; }
.el-table tr:hover > td.el-table__cell { background: var(--el-fill-color-light) !important; }
.el-table--border .el-table__cell, .el-table--group::after, .el-table::before { border-color: var(--tp-line-soft); }

/* ---------- 表单 / 输入 ---------- */
.el-input__wrapper, .el-select__wrapper { border-radius: 8px; background: #fff; box-shadow: 0 0 0 1px var(--tp-line) inset; border: none; }
.el-input__wrapper:hover, .el-select__wrapper:hover { box-shadow: 0 0 0 1px #cbd5e1 inset; }
.el-input__wrapper.is-focus, .el-select__wrapper.is-focused { box-shadow: 0 0 0 1px var(--tp-primary) inset; }
.el-textarea__inner { border-radius: 8px; box-shadow: 0 0 0 1px var(--tp-line) inset; border: none; background: #fff; }
.el-textarea__inner:focus { box-shadow: 0 0 0 1px var(--tp-primary) inset; }
.el-form-item__label { color: #334155; font-weight: 500; font-size: 13px; }
.el-checkbox__inner, .el-radio__inner { border-radius: 4px; }
.el-radio-button__inner { border-radius: 0; font-weight: 500; }
.el-radio-button__orig-radio:checked + .el-radio-button__inner { background: var(--tp-primary); border-color: var(--tp-primary); color: #fff; box-shadow: none; }
.el-input-number .el-input__wrapper { border-radius: 8px; }

/* ---------- 标签（柔和语义色） ---------- */
.el-tag { border-radius: 6px; font-weight: 600; font-size: 11px; border: 1px solid transparent; letter-spacing: .01em; }
.el-tag--success { background: #ecfdf5; color: #059669; border-color: #d1fae5; }
.el-tag--danger { background: #fef2f2; color: #dc2626; border-color: #fee2e2; }
.el-tag--warning { background: #fffbeb; color: #d97706; border-color: #fef3c7; }
.el-tag--primary { background: #eff6ff; color: #2563eb; border-color: #dbeafe; }
.el-tag--info { background: #f1f5f9; color: #64748b; border-color: #e2e8f0; }
.el-badge__content { background: #ef4444; border-radius: 999px; }

/* ---------- 对话框 / 抽屉 ---------- */
.el-dialog { border-radius: 14px; box-shadow: var(--tp-shadow-lg); border: none; }
.el-dialog__title { font-weight: 600; font-size: 16px; color: var(--tp-fg); }
.el-dialog__header { border-bottom: 1px solid var(--tp-line-soft); margin-right: 0; padding-bottom: 14px; }
.el-dialog__footer { border-top: 1px solid var(--tp-line-soft); padding-top: 14px; }
.el-drawer { border-left: 1px solid var(--tp-line-soft); box-shadow: -8px 0 24px rgba(15, 23, 42, .06); }
.el-divider__text { font-weight: 600; color: #475569; }

/* ---------- 登录页 ---------- */
.login-wrap { min-height: 100vh; display: grid; place-items: center; background: linear-gradient(135deg, #eef2f9 0%, #e6ecfa 55%, #eaf1fb 100%); }
.login-card { width: 400px; background: #fff; border-radius: 16px; box-shadow: var(--tp-shadow-lg); padding: 40px 36px 36px; border: none; }
.login-title { font-size: 26px; font-weight: 700; letter-spacing: -.01em; color: var(--tp-fg); margin-bottom: 6px; }
.login-sub { font-size: 12px; font-weight: 500; letter-spacing: .04em; color: var(--tp-fg-muted); margin-bottom: 26px; padding-bottom: 20px; border-bottom: 1px solid var(--tp-line-soft); }

/* ---------- 通用 ---------- */
.text-muted { color: var(--tp-fg-muted); }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.sw-label { font-size: 12px; font-weight: 600; color: var(--tp-fg-muted); letter-spacing: .01em; }
.sw-token-box { border: 1px dashed #cbd5e1; background: var(--el-fill-color-light); border-radius: 8px; padding: 14px 16px; font-family: var(--tp-mono); font-size: 13px; word-break: break-all; color: var(--tp-fg); }
.resp-box { background: #f8fafc; border: 1px solid var(--tp-line-soft); border-radius: 8px; padding: 12px 14px; font-family: var(--tp-mono); font-size: 12px; white-space: pre-wrap; word-break: break-all; margin-top: 12px; max-height: 360px; overflow: auto; color: #334155; }
.chart-box { border: 1px solid var(--tp-line-soft); border-radius: 8px; }

/* 汉堡按钮（手机端唤出侧边栏） */
.menu-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: none;
  font-size: 18px; line-height: 1; color: #334155;
  background: transparent; border: 1px solid var(--tp-line); border-radius: 8px; cursor: pointer;
}
.menu-btn:hover { color: var(--tp-primary); border-color: var(--tp-primary); background: var(--tp-primary-tint); }
/* 抽屉遮罩 */
.aside-mask { position: fixed; inset: 0; background: rgba(15, 23, 42, .45); z-index: 2001; }

/* ============================================================
   手机端适配（<=768px）
   ============================================================ */
@media (max-width: 768px) {
  /* 侧边栏：脱离文档流改为抽屉，默认移出屏幕 */
  .layout { height: 100vh; height: 100dvh; }
  .aside {
    position: fixed !important; left: 0; top: 0; bottom: 0; z-index: 2002;
    width: 74% !important; max-width: 300px;
    transform: translateX(-100%); transition: transform .25s ease;
    box-shadow: 8px 0 28px rgba(15, 23, 42, .22);
  }
  .layout.aside-open .aside { transform: translateX(0); }

  /* 顶栏与内容留白收紧 */
  .topbar { height: 50px; padding: 0 12px; gap: 8px; }
  .topbar .el-tag { display: none; }               /* 顶栏角色标签让位 */
  .content { padding: 10px; }

  /* 统计卡两列 */
  .stat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px; margin-bottom: 10px; }
  .stat-card { padding: 12px 14px; }
  .stat-card .label { font-size: 12px; }
  .stat-card .value { font-size: 22px; margin-top: 4px; }

  /* 图表矮一些，给内容留空间 */
  .chart-box { height: 260px; }

  /* 卡片内边距收紧 */
  .el-card__header { padding: 12px 14px; }
  .el-card__body { padding: 12px; }

  /* 弹窗：铺满宽度、限制高度、内容可滚动 */
  .el-dialog { width: 94% !important; margin: 5vh auto !important; max-height: 90vh; display: flex; flex-direction: column; }
  .el-dialog__body { padding: 12px; overflow: auto; flex: 1; }
  .el-dialog__header { padding: 12px 14px; }
  .el-dialog__footer { padding: 10px 14px; }
  .el-drawer { width: 92% !important; }

  /* 表格：字号略减，横向可滑动 */
  .el-table { font-size: 12.5px; }
  .el-table .el-table__body-wrapper { -webkit-overflow-scrolling: touch; }
  .el-table th.el-table__cell, .el-table td.el-table__cell { padding: 6px 0; }

  /* 分页居中换行 */
  .el-pagination { justify-content: center; flex-wrap: wrap; }
  .el-pagination__sizes, .el-pagination__jump { display: none; }

  /* 筛选/表单控件：允许收缩，避免撑破 */
  .el-select, .el-input, .el-date-editor { max-width: 100%; }
  .el-form--inline .el-form-item { margin-right: 8px; margin-bottom: 8px; }
  .el-button + .el-button { margin-left: 6px; }

  /* 设备实时行 */
  .dev-live { padding: 9px 10px; }
  .dev-live .vals { gap: 8px; flex-wrap: wrap; }

  /* 登录页 */
  .login-card { width: 90%; max-width: 360px; padding: 28px 20px 24px; }
  .login-title { font-size: 22px; }
}

/* 超窄屏（<=400px）：统计卡仍保持两列更小字号 */
@media (max-width: 400px) {
  .stat-card .value { font-size: 19px; }
  .stat-card .label { font-size: 11px; }
  .el-radio-button__inner { padding: 7px 9px; font-size: 12px; }
}