<template>
  <div class="sg-manage-container">
    <div class="page-header" v-if="!embedded">
      <div class="header-left">
        <el-button @click="goBack" :icon="ArrowLeft">返回</el-button>
        <div class="header-info">
          <h3>安全组管理</h3>
          <span class="sub-info" v-if="serviceName">主控服务：{{ serviceName }}</span>
        </div>
      </div>
      <div class="header-right">
        <el-button type="primary" @click="handleAdd"><el-icon><Plus /></el-icon>创建安全组</el-button>
        <el-button @click="loadList"><el-icon><Refresh /></el-icon>刷新</el-button>
      </div>
    </div>
    <div class="embedded-toolbar" v-if="embedded">
      <el-button type="primary" @click="handleAdd"><el-icon><Plus /></el-icon>创建安全组</el-button>
      <el-button @click="loadList"><el-icon><Refresh /></el-icon>刷新</el-button>
    </div>

    <!-- 筛选栏 -->
    <div class="filter-bar">
      <el-input v-model="keyword" placeholder="搜索安全组" clearable style="width: 220px" @keyup.enter="handleSearch" @clear="handleSearch">
        <template #prefix><el-icon><Search /></el-icon></template>
      </el-input>
      <el-select v-model="filterLock" placeholder="锁定状态" clearable style="width: 130px" @change="handleSearch">
        <el-option label="已锁定" :value="true" />
        <el-option label="未锁定" :value="false" />
      </el-select>
      <el-select v-model="filterDropAll" placeholder="白名单模式" clearable style="width: 130px" @change="handleSearch">
        <el-option label="已开启" :value="true" />
        <el-option label="未开启" :value="false" />
      </el-select>
    </div>

    <!-- 安全组列表 -->
    <el-table :data="sgList" v-loading="loading" stripe>
      <el-table-column prop="id" label="ID" width="70" />
      <el-table-column prop="name" label="名称" min-width="140" show-overflow-tooltip />
      <el-table-column label="锁定" width="80">
        <template #default="{ row }">
          <el-tag :type="row.lock ? 'danger' : 'success'" size="small">{{ row.lock ? '是' : '否' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="白名单" width="80">
        <template #default="{ row }">
          <el-tag :type="row.drop_all ? 'warning' : 'info'" size="small">{{ row.drop_all ? '开启' : '关闭' }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="方向" width="80">
        <template #default="{ row }">
          <el-tag :type="row.direction === 'in' ? 'success' : 'warning'" size="small">{{ row.direction === 'in' ? '入站' : row.direction === 'out' ? '出站' : (row.direction || '-') }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="280" fixed="right">
        <template #default="{ row }">
          <el-button link type="primary" size="small" @click="handleGoDetail(row)">编辑</el-button>
          <el-button link type="success" size="small" @click="handleSync(row)">同步</el-button>
          <el-button link type="warning" size="small" @click="handleApply(row)">应用</el-button>
          <el-dropdown trigger="click" @command="cmd => handleRowMore(row, cmd)" style="margin-left: 4px;margin-top: 4.5px">
            <el-button link type="info" size="small">更多<el-icon class="el-icon--right"><ArrowDown /></el-icon></el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item command="bind">绑定虚拟机</el-dropdown-item>
                <el-dropdown-item command="unbind">解绑虚拟机</el-dropdown-item>
                <el-dropdown-item command="whitelist" divided>{{ row.drop_all ? '关闭白名单' : '开启白名单' }}</el-dropdown-item>
                <el-dropdown-item command="detail">查看详情</el-dropdown-item>
                <el-dropdown-item command="delete" divided style="color: #f56c6c">删除</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-wrapper" v-if="total > 0">
      <el-pagination v-model:current-page="queryParams.page" v-model:page-size="queryParams.page_size"
        :page-sizes="[10, 20, 50]" :total="total" layout="total, sizes, prev, pager, next"
        @size-change="s => { queryParams.page_size = s; queryParams.page = 1; loadList() }"
        @current-change="p => { queryParams.page = p; loadList() }" />
    </div>

    <!-- 创建弹窗 -->
    <el-dialog v-model="createDialogVisible" title="创建安全组" width="520px" destroy-on-close>
      <el-form ref="createFormRef" :model="createForm" :rules="createRules" label-width="110px">
        <el-form-item label="名称" prop="name">
          <el-input v-model="createForm.name" placeholder="安全组名称" />
        </el-form-item>
        <el-form-item label="方向" prop="direction">
          <el-select v-model="createForm.direction" placeholder="选择规则方向" style="width: 100%">
            <el-option label="入站 (in)" value="in" />
            <el-option label="出站 (out)" value="out" />
          </el-select>
        </el-form-item>
        <el-form-item label="宿主机" prop="host_id">
          <el-select v-model="createForm.host_id" placeholder="选择宿主机" filterable clearable style="width: 100%">
            <el-option v-for="h in hostOptions" :key="h.id" :label="`${h.name} (${h.ip || h.id})`" :value="h.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="锁定">
          <el-switch v-model="createForm.lock" active-text="用户不可修改" />
        </el-form-item>
        <el-form-item label="白名单模式">
          <el-switch v-model="createForm.drop_all" active-text="开启白名单" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="createDialogVisible = false">取消</el-button>
        <el-button type="primary" :loading="submitLoading" @click="submitCreate">确定</el-button>
      </template>
    </el-dialog>

    <!-- 同步弹窗 -->
    <el-dialog v-model="syncDialogVisible" title="同步安全组到宿主机" width="420px" destroy-on-close>
      <el-form label-width="100px">
        <el-form-item label="安全组">{{ syncTarget?.name || '-' }}</el-form-item>
        <el-form-item label="目标宿主机">
          <el-select v-model="syncHostId" placeholder="选择宿主机" filterable style="width: 100%">
            <el-option v-for="h in hostOptions" :key="h.id" :label="`${h.name} (${h.ip || h.id})`" :value="h.id" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="syncDialogVisible = false">取消</el-button>
        <el-button type="primary" :loading="submitLoading" @click="submitSync">同步</el-button>
      </template>
    </el-dialog>

    <!-- 绑定/解绑虚拟机弹窗 -->
    <el-dialog v-model="bindDialogVisible" :title="bindType === 'bind' ? '绑定安全组到虚拟机' : '解绑安全组'" width="420px" destroy-on-close>
      <el-form label-width="100px">
        <el-form-item label="安全组">{{ bindTarget?.name || '-' }}</el-form-item>
        <el-form-item label="虚拟机">
          <div style="display: flex; align-items: center; gap: 8px; width: 100%">
            <el-input :model-value="bindVmId ? `${bindVmName || ''} (ID: ${bindVmId})` : ''" readonly placeholder="请选择虚拟机" style="flex: 1" />
            <el-button type="primary" @click="showBindVmSelector = true">选择</el-button>
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="bindDialogVisible = false">取消</el-button>
        <el-button :type="bindType === 'bind' ? 'primary' : 'warning'" :loading="submitLoading" @click="submitBind">
          {{ bindType === 'bind' ? '绑定' : '解绑' }}
        </el-button>
      </template>
    </el-dialog>

    <!-- 虚拟机选择器 -->
    <VmSelectorPopup v-model="showBindVmSelector" :service-id="serviceId" :current-id="bindVmId" @confirm="handleBindVmSelected" />

    <!-- 详情+规则弹窗 -->
    <el-dialog v-model="detailVisible" title="安全组详情 & 规则" width="800px" destroy-on-close>
      <el-descriptions :column="2" border v-if="currentDetail" v-loading="detailLoading" style="margin-bottom: 20px">
        <el-descriptions-item label="ID" width="100px">{{ currentDetail.id }}</el-descriptions-item>
        <el-descriptions-item label="名称" width="100px">{{ currentDetail.name }}</el-descriptions-item>
        <el-descriptions-item label="锁定" width="100px">
          <el-tag :type="currentDetail.lock ? 'danger' : 'success'" size="small">{{ currentDetail.lock ? '是' : '否' }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="白名单" width="100px">
          <el-tag :type="currentDetail.drop_all ? 'warning' : 'info'" size="small">{{ currentDetail.drop_all ? '开启' : '关闭' }}</el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="方向">
          <el-tag :type="currentDetail.direction === 'in' ? 'success' : 'warning'" size="small">{{ currentDetail.direction === 'in' ? '入站' : currentDetail.direction === 'out' ? '出站' : (currentDetail.direction || '-') }}</el-tag>
        </el-descriptions-item>
      </el-descriptions>

      <!-- 规则列表 -->
      <div class="rules-section">
        <div class="rules-header">
          <h4>安全组规则</h4>
          <el-button type="primary" size="small" @click="handleAddRule">新增规则</el-button>
        </div>
        <el-table :data="currentDetail?.rules || []" stripe size="small" style="width: 100%">
          <el-table-column prop="id" label="ID" width="60" />
          <el-table-column prop="protocol" label="协议" width="80">
            <template #default="{ row }">
              <el-tag size="small">{{ (row.protocol || '-').toUpperCase() }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="action" label="动作" width="80">
            <template #default="{ row }">
              <el-tag :type="row.action === 'allow' ? 'success' : 'danger'" size="small">{{ row.action === 'allow' ? '允许' : '拒绝' }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="port_range" label="端口范围" min-width="120" />
          <el-table-column prop="ip_range" label="IP 范围" min-width="140" />
          <el-table-column prop="priority" label="优先级" width="80" />
          <el-table-column label="操作" width="130">
            <template #default="{ row }">
              <el-button link type="primary" size="small" @click="handleEditRule(row)">编辑</el-button>
              <el-button link type="danger" size="small" @click="handleDeleteRule(row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <template #footer><el-button @click="detailVisible = false">关闭</el-button></template>
    </el-dialog>

    <!-- 新增/编辑规则弹窗 -->
    <el-dialog v-model="ruleDialogVisible" :title="ruleDialogType === 'add' ? '新增安全组规则' : '编辑安全组规则'" width="520px" destroy-on-close>
      <el-form ref="ruleFormRef" :model="ruleForm" :rules="ruleRules" label-width="100px">
        <el-form-item label="协议" prop="protocol">
          <el-select v-model="ruleForm.protocol" style="width: 100%">
            <el-option label="TCP" value="tcp" />
            <el-option label="UDP" value="udp" />
          </el-select>
        </el-form-item>
        <el-form-item label="动作" prop="action">
          <el-select v-model="ruleForm.action" style="width: 100%">
            <el-option label="允许 (Allow)" value="allow" />
            <el-option label="拒绝 (Deny)" value="deny" />
          </el-select>
        </el-form-item>
        <el-form-item label="端口范围">
          <el-input v-model="ruleForm.port_range" placeholder="如 80 或 80-90" />
        </el-form-item>
        <el-form-item label="IP 范围">
          <el-input v-model="ruleForm.ip_range" placeholder="如 0.0.0.0/0 或 192.168.1.0/24" />
        </el-form-item>
        <el-form-item label="优先级">
          <el-input-number v-model="ruleForm.priority" :min="0" :max="9999" style="width: 100%" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="ruleDialogVisible = false">取消</el-button>
        <el-button type="primary" :loading="submitLoading" @click="submitRule">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, inject, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Refresh, Search, ArrowLeft, ArrowDown } from '@element-plus/icons-vue'
import {
  getRemoteHostList,
  getSecurityGroupList, getSecurityGroupDetail, createSecurityGroup,
  syncSecurityGroup, bindSecurityGroup, unbindSecurityGroup,
  deleteSecurityGroup, enableSecurityGroupWhitelist, disableSecurityGroupWhitelist,
  applySecurityGroup, createSecurityGroupRule, updateSecurityGroupRule, deleteSecurityGroupRule
} from '@/api/admin/kvmService'
import { extractApiError } from '@/utils/kvmErrorUtil'
import VmSelectorPopup from '@/components/admin/VmSelectorPopup.vue'

const route = useRoute()
const router = useRouter()
const embedded = inject('embedded', false)
const injectedServiceId = inject('serviceId', null)
const injectedServiceName = inject('serviceName', null)
const serviceId = computed(() => injectedServiceId?.value || parseInt(route.query.service_id) || 0)
const serviceName = computed(() => injectedServiceName?.value || route.query.service_name || '')

const loading = ref(false)
const submitLoading = ref(false)
const detailLoading = ref(false)
const sgList = ref([])
const total = ref(0)
const keyword = ref('')
const filterLock = ref('')
const filterDropAll = ref('')
const hostOptions = ref([])
const queryParams = reactive({ page: 1, page_size: 10 })

const getHostLabel = (hid) => {
  const h = hostOptions.value.find(x => x.id === hid)
  return h ? h.name : (hid || '-')
}

const loadHostOptions = async () => {
  try {
    const res = await getRemoteHostList({ service_id: serviceId.value, page: 1, page_size: 10 })
    const body = res?.data
    if (body?.code === 200 && body?.data) {
      const inner = body.data
      hostOptions.value = Array.isArray(inner) ? inner : (inner.hosts || inner.list || inner.data || [])
    }
  } catch (e) { console.error('加载宿主机列表失败:', e) }
}

// 创建弹窗
const createDialogVisible = ref(false)
const createFormRef = ref(null)
const createForm = reactive({ name: '', host_id: null, direction: '', lock: false, drop_all: false })
const createRules = {
  name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
  direction: [{ required: true, message: '请选择方向', trigger: 'change' }],
  host_id: [{ required: true, message: '请选择宿主机', trigger: 'change' }]
}

// 同步弹窗
const syncDialogVisible = ref(false)
const syncTarget = ref(null)
const syncHostId = ref(null)

// 绑定弹窗
const bindDialogVisible = ref(false)
const bindType = ref('bind')
const bindTarget = ref(null)
const bindVmId = ref(0)
const bindVmName = ref('')
const showBindVmSelector = ref(false)
const handleBindVmSelected = (vm) => { bindVmId.value = vm.id; bindVmName.value = vm.name || '' }

// 详情弹窗
const detailVisible = ref(false)
const currentDetail = ref(null)

// 规则弹窗
const ruleDialogVisible = ref(false)
const ruleDialogType = ref('add')
const ruleFormRef = ref(null)
const ruleForm = reactive({ id: undefined, group_id: 0, protocol: 'tcp', action: 'allow', port_range: '', ip_range: '', priority: 0, port_group_id: 0 })
const ruleRules = {
  protocol: [{ required: true, message: '请选择协议', trigger: 'change' }],
  action: [{ required: true, message: '请选择动作', trigger: 'change' }]
}

const loadList = async () => {
  if (!serviceId.value) return
  loading.value = true
  try {
    const params = { service_id: serviceId.value, page: queryParams.page, page_size: queryParams.page_size }
    if (keyword.value) params.keyword = keyword.value
    if (filterLock.value !== '') params.lock = filterLock.value
    if (filterDropAll.value !== '') params.drop_all = filterDropAll.value
    const res = await getSecurityGroupList(params)
    const body = res?.data
    if (body?.code === 200 && body?.data) {
      const inner = body.data
      sgList.value = inner.groups || inner.post_groups || inner.data || (Array.isArray(inner) ? inner : [])
      total.value = inner.total ?? inner.all_count ?? sgList.value.length
    } else { sgList.value = []; total.value = 0 }
  } catch (e) {
    console.error('获取安全组列表失败:', e)
    ElMessage.error('获取安全组列表失败')
  } finally { loading.value = false }
}

const handleSearch = () => { queryParams.page = 1; loadList() }

const handleAdd = () => {
  Object.assign(createForm, { name: '', host_id: null, direction: '', lock: false, drop_all: false })
  createDialogVisible.value = true
}

const submitCreate = () => {
  createFormRef.value?.validate(async (valid) => {
    if (!valid) return
    submitLoading.value = true
    try {
      const res = await createSecurityGroup({ service_id: serviceId.value, ...createForm })
      if (res?.data?.code === 200) {
        ElMessage.success('创建成功')
        createDialogVisible.value = false
        loadList()
      } else ElMessage.error(extractApiError(res?.data, '创建失败'))
    } catch (e) { ElMessage.error(extractApiError(e?.response?.data, '创建失败')) } finally { submitLoading.value = false }
  })
}

const handleSync = (row) => {
  syncTarget.value = row
  syncHostId.value = row.host_id || null
  syncDialogVisible.value = true
}

const submitSync = async () => {
  if (!syncHostId.value) { ElMessage.warning('请选择宿主机'); return }
  submitLoading.value = true
  try {
    const res = await syncSecurityGroup({ service_id: serviceId.value, id: syncTarget.value.id, host_id: syncHostId.value })
    if (res?.data?.code === 200) {
      ElMessage.success('同步成功')
      syncDialogVisible.value = false
      loadList()
    } else ElMessage.error(extractApiError(res?.data, '同步失败'))
  } catch (e) { ElMessage.error(extractApiError(e?.response?.data, '同步失败')) } finally { submitLoading.value = false }
}

const handleBind = (row) => {
  bindType.value = 'bind'
  bindTarget.value = row
  bindVmId.value = 0
  bindDialogVisible.value = true
}

const handleUnbind = (row) => {
  bindType.value = 'unbind'
  bindTarget.value = row
  bindVmId.value = 0
  bindDialogVisible.value = true
}

const submitBind = async () => {
  if (!bindVmId.value) { ElMessage.warning('请输入虚拟机ID'); return }
  submitLoading.value = true
  try {
    const api = bindType.value === 'bind' ? bindSecurityGroup : unbindSecurityGroup
    const res = await api({ service_id: serviceId.value, id: bindTarget.value.id, vm_id: bindVmId.value })
    if (res?.data?.code === 200) {
      ElMessage.success(bindType.value === 'bind' ? '绑定成功' : '解绑成功')
      bindDialogVisible.value = false
    } else ElMessage.error(extractApiError(res?.data, '操作失败'))
  } catch (e) { ElMessage.error(extractApiError(e?.response?.data, '操作失败')) } finally { submitLoading.value = false }
}

const handleToggleWhitelist = (row) => {
  const action = row.drop_all ? '关闭' : '开启'
  ElMessageBox.confirm(`确定要${action}安全组「${row.name}」的白名单模式吗？`, `${action}白名单`, {
    confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
  }).then(async () => {
    try {
      const api = row.drop_all ? disableSecurityGroupWhitelist : enableSecurityGroupWhitelist
      const res = await api({ service_id: serviceId.value, id: row.id })
      if (res?.data?.code === 200) { ElMessage.success(`${action}成功`); loadList() }
      else ElMessage.error(extractApiError(res?.data, `${action}失败`))
    } catch (e) { ElMessage.error(extractApiError(e?.response?.data, `${action}失败`)) }
  }).catch(() => {})
}

const handleApply = (row) => {
  ElMessageBox.confirm(`确定要应用安全组「${row.name}」的规则到所有已绑定虚拟机吗？`, '应用安全组', {
    confirmButtonText: '确定应用', cancelButtonText: '取消', type: 'info'
  }).then(async () => {
    try {
      const res = await applySecurityGroup({ service_id: serviceId.value, id: row.id })
      if (res?.data?.code === 200) ElMessage.success('应用成功')
      else ElMessage.error(extractApiError(res?.data, '应用失败'))
    } catch (e) { ElMessage.error(extractApiError(e?.response?.data, '应用失败')) }
  }).catch(() => {})
}

const handleGoDetail = (row) => {
  router.push({ path: '/virtualization/security-group-detail', query: { service_id: serviceId.value, service_name: serviceName.value, sg_id: row.id } })
}

const handleDelete = (row) => {
  ElMessageBox.confirm(`确定要删除安全组「${row.name}」吗？`, '删除确认', {
    confirmButtonText: '确定删除', cancelButtonText: '取消', type: 'warning'
  }).then(async () => {
    try {
      const res = await deleteSecurityGroup({ service_id: serviceId.value, id: row.id })
      if (res?.data?.code === 200) { ElMessage.success('删除成功'); loadList() }
      else ElMessage.error(extractApiError(res?.data, '删除失败'))
    } catch (e) { ElMessage.error(extractApiError(e?.response?.data, '删除失败')) }
  }).catch(() => {})
}

const handleViewDetail = async (row) => {
  detailVisible.value = true
  detailLoading.value = true
  currentDetail.value = row
  try {
    const res = await getSecurityGroupDetail({ service_id: serviceId.value, id: row.id })
    if (res?.data?.code === 200 && res?.data?.data) {
      const inner = res.data.data
      currentDetail.value = inner.group || inner.data || inner
    }
  } catch { /* fallback */ } finally { detailLoading.value = false }
}

// ---- 规则操作 ----
const handleAddRule = () => {
  ruleDialogType.value = 'add'
  Object.assign(ruleForm, { id: undefined, group_id: currentDetail.value?.id || 0, protocol: 'tcp', action: 'allow', port_range: '', ip_range: '', priority: 0, port_group_id: 0 })
  ruleDialogVisible.value = true
}

const handleEditRule = (rule) => {
  ruleDialogType.value = 'edit'
  Object.assign(ruleForm, {
    id: rule.id, group_id: currentDetail.value?.id || 0, port_group_id: currentDetail.value?.id || 0,
    protocol: rule.protocol || 'tcp', action: rule.action || 'allow',
    port_range: rule.port_range || '', ip_range: rule.ip_range || '', priority: rule.priority || 0
  })
  ruleDialogVisible.value = true
}

const submitRule = () => {
  ruleFormRef.value?.validate(async (valid) => {
    if (!valid) return
    submitLoading.value = true
    try {
      let res
      if (ruleDialogType.value === 'add') {
        res = await createSecurityGroupRule({ service_id: serviceId.value, ...ruleForm })
      } else {
        res = await updateSecurityGroupRule({ service_id: serviceId.value, ...ruleForm })
      }
      if (res?.data?.code === 200) {
        ElMessage.success(ruleDialogType.value === 'add' ? '规则创建成功' : '规则修改成功')
        ruleDialogVisible.value = false
        // 刷新详情
        handleViewDetail(currentDetail.value)
      } else ElMessage.error(extractApiError(res?.data, '操作失败'))
    } catch (e) { ElMessage.error(extractApiError(e?.response?.data, '操作失败')) } finally { submitLoading.value = false }
  })
}

const handleDeleteRule = (rule) => {
  ElMessageBox.confirm('确定要删除该规则吗？', '删除确认', {
    confirmButtonText: '确定删除', cancelButtonText: '取消', type: 'warning'
  }).then(async () => {
    try {
      const res = await deleteSecurityGroupRule({ service_id: serviceId.value, id: rule.id })
      if (res?.data?.code === 200) {
        ElMessage.success('删除成功')
        handleViewDetail(currentDetail.value)
      } else ElMessage.error(extractApiError(res?.data, '删除失败'))
    } catch (e) { ElMessage.error(extractApiError(e?.response?.data, '删除失败')) }
  }).catch(() => {})
}

const handleRowMore = (row, command) => {
  if (command === 'bind') handleBind(row)
  else if (command === 'unbind') handleUnbind(row)
  else if (command === 'whitelist') handleToggleWhitelist(row)
  else if (command === 'detail') handleViewDetail(row)
  else if (command === 'delete') handleDelete(row)
}

const goBack = () => { router.push('/virtualization/kvm-service') }

onMounted(async () => {
  if (serviceId.value) {
    await loadHostOptions()
    loadList()
  }
})
</script>

<style scoped>
.sg-manage-container { padding: 20px; }
.rules-section { margin-top: 8px; }
.rules-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.rules-header h4 { margin: 0; font-size: 15px; color: #303133; }
</style>
