.listToolbar {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
  background: #fff;
  font-size: 16px;
  color: #222;
}

.ruleList {
  padding: 0 16px;
}

.ruleCard {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  margin-bottom: 20px;
  padding: 16px;
  border: 1px solid #ececec;
  transition:
    box-shadow 0.2s,
    border-color 0.2s;
  position: relative;
}
.ruleCard:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  border-color: #b3e5fc;
}

.ruleHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.ruleName {
  font-size: 17px;
  font-weight: 600;
  color: #222;
}

.ruleStatus {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ruleSwitch {
  margin-left: 4px;
}

.ruleMenu {
  margin-left: 8px;
  cursor: pointer;
  color: #888;
  font-size: 18px;
}

.ruleMeta {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 15px;
  color: #444;
  font-weight: 500;
}
.ruleMetaItem {
  flex: 1;
  text-align: center;
  transition: background-color 0.2s ease;
}
.ruleMetaItem:not(:last-child) {
  border-right: 1px solid #f0f0f0;
}
.ruleMetaItem:hover {
  background-color: #f8f9fa;
  border-radius: 6px;
}

.ruleDivider {
  border-top: 1px solid #f0f0f0;
  margin: 12px 0 10px 0;
}

.ruleStats {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  color: #222;
  font-weight: 600;
  margin-bottom: 8px;
}
.ruleStatsItem {
  flex: 1;
  text-align: center;
}
.ruleStatsItem:not(:last-child) {
  border-right: 1px solid #f0f0f0;
}

.ruleFooter {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #888;
  margin-top: 6px;
  align-items: center;
}

.ruleFooterIcon {
  margin-right: 4px;
  vertical-align: middle;
  font-size: 15px;
  position: relative;
  top: -2px;
}

.empty {
  text-align: center;
  color: #bbb;
  padding: 40px 0;
}

.pagination {
  display: flex;
  justify-content: center;
  padding: 16px 0;
  background: #fff;
}

// 账号列表弹窗样式
.accountModal {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.accountModalHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
  background: #fff;
}

.accountModalTitle {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #222;
}

.accountModalClose {
  border: none;
  background: none;
  color: #888;
  font-size: 16px;
}

.accountList {
  flex: 1;
  overflow-y: auto;
  padding: 0 20px;
}

.accountItem {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f5f5f5;
}

.accountItem:last-child {
  border-bottom: none;
}

.accountAvatar {
  margin-right: 12px;
  flex-shrink: 0;
}

.accountInfo {
  flex: 1;
  min-width: 0;
}

.accountName {
  font-size: 16px;
  font-weight: 500;
  color: #222;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.accountWechatId {
  font-size: 14px;
  color: #888;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.accountStatus {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.statusDot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.statusText {
  font-size: 13px;
  color: #666;
}

.accountEmpty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: #888;
}

.accountEmptyText {
  font-size: 16px;
}

.accountLoading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  gap: 16px;
  padding: 20px;
}

.accountLoadingText {
  font-size: 15px;
  color: #666;
  font-weight: 500;
}

.accountModalFooter {
  padding: 16px 20px;
  border-top: 1px solid #f0f0f0;
  background: #fff;
}

.accountStats {
  text-align: center;
  font-size: 14px;
  color: #666;
}

// 设备列表弹窗样式
.deviceModal {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.deviceModalHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
  background: #fff;
}

.deviceModalTitle {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #222;
}

.deviceModalClose {
  border: none;
  background: none;
  color: #888;
  font-size: 16px;
}

.deviceList {
  flex: 1;
  overflow-y: auto;
  padding: 0 20px;
}

.deviceItem {
  background: #fff;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  border: 1px solid #ececec;
  transition: all 0.2s ease;
}

.deviceItem:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.deviceHeaderRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.deviceImeiText {
  font-size: 13px;
  color: #888;
  font-weight: 500;
}

.deviceMainContent {
  display: flex;
  align-items: center;
}

.deviceAvatar {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.deviceAvatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

.deviceAvatarText {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.deviceInfo {
  flex: 1;
  min-width: 0;
}

.deviceInfoHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.deviceName {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #222;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  margin-right: 8px;
}

.deviceStatusBadge {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
  flex-shrink: 0;
}

.deviceStatusOnline {
  background: rgba(82, 196, 26, 0.1);
  color: #52c41a;
}

.deviceStatusOffline {
  background: rgba(255, 77, 79, 0.1);
  color: #ff4d4f;
}

.deviceInfoList {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.deviceInfoItem {
  display: flex;
  align-items: center;
  font-size: 13px;
}

.deviceInfoLabel {
  color: #888;
  margin-right: 6px;
  min-width: 50px;
}

.deviceInfoValue {
  color: #444;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deviceFriendCount {
  color: #1890ff;
  font-weight: 500;
}

.deviceEmpty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: #888;
}

.deviceEmptyText {
  font-size: 16px;
}

.deviceLoading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  gap: 16px;
  padding: 20px;
}

.deviceLoadingText {
  font-size: 15px;
  color: #666;
  font-weight: 500;
}

.deviceModalFooter {
  padding: 16px 20px;
  border-top: 1px solid #f0f0f0;
  background: #fff;
}

.deviceStats {
  text-align: center;
  font-size: 14px;
  color: #666;
}

// 流量池列表弹窗样式
.poolModal {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.poolModalHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
  background: #fff;
}

.poolModalTitle {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #222;
}

.poolModalClose {
  border: none;
  background: none;
  color: #888;
  font-size: 16px;
}

.poolList {
  flex: 1;
  overflow-y: auto;
  padding: 0 20px;
}

.poolItem {
  background: #fff;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  border: 1px solid #ececec;
  transition: all 0.2s ease;
}

.poolItem:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.poolMainContent {
  display: flex;
  align-items: flex-start;
}

.poolIcon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #1890ff 0%, #722ed1 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.poolIconText {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.poolInfo {
  flex: 1;
  min-width: 0;
}

.poolInfoHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}

.poolName {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #222;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  margin-right: 8px;
}

.poolUserCount {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
  background: rgba(24, 144, 255, 0.1);
  color: #1890ff;
  flex-shrink: 0;
}

.poolInfoList {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}

.poolInfoItem {
  display: flex;
  align-items: center;
  font-size: 13px;
}

.poolInfoLabel {
  color: #888;
  margin-right: 6px;
  min-width: 60px;
}

.poolInfoValue {
  color: #444;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.poolTags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.poolTag {
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  background: rgba(0, 0, 0, 0.05);
  color: #666;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.poolLoading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  gap: 16px;
  padding: 20px;
}

.poolLoadingText {
  font-size: 15px;
  color: #666;
  font-weight: 500;
}

.poolEmpty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  color: #888;
}

.poolEmptyText {
  font-size: 16px;
}

.poolModalFooter {
  padding: 16px 20px;
  border-top: 1px solid #f0f0f0;
  background: #fff;
}

.poolStats {
  text-align: center;
  font-size: 14px;
  color: #666;
}

// 日期筛选样式
.dateFilter {
  display: flex;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
  background: #fff;
}

.dateFilterItem {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dateFilterLabel {
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

.dateFilterInput {
  width: 100%;
}

// 统计数据弹窗样式
.statisticsContent {
  flex: 1;
  overflow-y: auto;
  padding: 0 20px;
}

.statisticsLoading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 200px;
  gap: 16px;
  padding: 20px;
}

.statisticsLoadingText {
  font-size: 15px;
  color: #666;
  font-weight: 500;
}

.statisticsTable {
  padding: 16px 0;
}

.statisticsRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #f5f5f5;
}

.statisticsRow:last-child {
  border-bottom: none;
}

.statisticsLabel {
  font-size: 15px;
  color: #666;
  font-weight: 500;
}

.statisticsValue {
  font-size: 16px;
  color: #222;
  font-weight: 600;
}

.trendChart {
  padding: 20px;
  border-top: 1px solid #f0f0f0;
  background: #fff;
}

.chartTitle {
  font-size: 16px;
  font-weight: 600;
  color: #222;
  margin-bottom: 16px;
}

.chartPlaceholder {
  height: 200px;
  background: #f8f9fa;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed #d9d9d9;
}

.chartNote {
  font-size: 14px;
  color: #888;
  text-align: center;
}
