#mainLoading + .template .el-main {
  background: #f3f7ff;
}

.security-console.main-card {
  margin: 32px 34px 64px;
  padding: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
  font-family: "siyuan", "PingFang SC", "Microsoft YaHei", sans-serif;
}

.security-console .main-card-title {
  display: none;
}

.security-console .security-hero {
  position: relative;
  min-height: 188px;
  padding: 30px 34px;
  overflow: hidden;
  border: 1px solid #dbe7ff;
  border-radius: 6px;
  background:
    linear-gradient(100deg, rgba(255, 255, 255, .98), rgba(247, 251, 255, .94) 50%, rgba(221, 238, 255, .88)),
    #fff;
  box-shadow: 0 18px 48px rgba(22, 42, 84, .10);
}

.security-console .security-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(235, 245, 255, .96), rgba(222, 239, 255, .68) 58%, rgba(244, 249, 255, .82)),
    radial-gradient(circle at 80% 12%, rgba(36, 104, 242, .18), transparent 34%);
  pointer-events: none;
}

.security-console .security-hero-copy {
  position: relative;
  z-index: 1;
}

.security-console .security-hero h1 {
  margin: 0;
  color: #0d1d42;
  font-size: 34px;
  font-weight: 900;
  line-height: 1.16;
}

.security-console .security-hero p {
  margin: 10px 0 0;
  color: #617596;
  font-size: 15px;
  font-weight: 600;
}

.security-console .security-hero-actions {
  margin-top: 26px;
  display: flex;
  gap: 10px;
  align-items: center;
}

.security-console .security-primary-btn,
.security-console .security-line-btn {
  height: 38px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.security-console .security-primary-btn {
  color: #fff;
  border: 1px solid #2468f2;
  background: linear-gradient(90deg, #2468f2, #0f7bff);
  box-shadow: 0 10px 24px rgba(36, 104, 242, .26);
}

.security-console .security-line-btn {
  color: #2468f2;
  background: #fff;
  border: 1px solid #bcd0ff;
}

.security-console .security-hero-art {
  position: absolute;
  right: 54px;
  top: 26px;
  width: 390px;
  height: 150px;
  pointer-events: none;
}

.security-console .security-shield {
  position: absolute;
  right: 98px;
  top: 2px;
  width: 132px;
  height: 150px;
  border: 1px solid rgba(85, 142, 255, .24);
  border-radius: 22px 22px 54px 54px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(218, 235, 255, .9)),
    #fff;
  box-shadow: 0 22px 44px rgba(41, 103, 228, .18);
  clip-path: polygon(50% 0, 100% 18%, 92% 74%, 50% 100%, 8% 74%, 0 18%);
}

.security-console .security-shield::before {
  content: "";
  position: absolute;
  left: 45px;
  top: 42px;
  width: 42px;
  height: 62px;
  border-radius: 24px 24px 12px 12px;
  border: 9px solid #2c68f6;
  border-top-width: 12px;
}

.security-console .security-shield::after {
  content: "";
  position: absolute;
  left: 57px;
  top: 84px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #2c68f6;
  box-shadow: 0 13px 0 -5px #2c68f6;
}

.security-console .security-node {
  position: absolute;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, #fff, #bfd8ff);
  box-shadow: 0 12px 30px rgba(42, 105, 239, .16);
}

.security-console .security-node.node-one {
  right: 302px;
  top: 18px;
}

.security-console .security-node.node-two {
  right: 26px;
  top: 8px;
  width: 30px;
  height: 30px;
}

.security-console .security-node.node-three {
  right: 286px;
  bottom: 18px;
  width: 30px;
  height: 30px;
}

.security-console .security-tag-grid {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.security-console .security-tag-card {
  position: relative;
  min-height: 126px;
  padding: 18px 20px;
  overflow: hidden;
  border: 1px solid #dfe8f6;
  border-radius: 6px;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 12px 32px rgba(22, 42, 84, .07);
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.security-console .security-tag-card:hover {
  transform: translateY(-2px);
  border-color: #c9dcff;
  box-shadow: 0 18px 42px rgba(36, 104, 242, .12);
}

.security-console .security-tag-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: #c9d7ef;
}

.security-console .security-tag-card.active {
  border-color: #b9d2ff;
  box-shadow: 0 18px 42px rgba(36, 104, 242, .13);
}

.security-console .security-tag-card.api::before,
.security-console .security-tag-card.api.active::before {
  background: #2468f2;
}

.security-console .security-tag-card.ssh::before,
.security-console .security-tag-card.ssh.active::before {
  background: #00a870;
}

.security-console .security-tag-card.log::before,
.security-console .security-tag-card.log.active::before {
  background: #ff8a00;
}

.security-console .security-tag-card.group::before,
.security-console .security-tag-card.group.active::before {
  background: #8b36c9;
}

.security-console .tag-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.security-console .tag-title {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #102044;
  font-size: 16px;
  font-weight: 900;
}

.security-console .tag-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  color: #2468f2;
  background: #edf4ff;
  font-size: 13px;
  font-weight: 900;
}

.security-console .security-tag-card.ssh .tag-icon {
  color: #00875f;
  background: #e4f8f0;
}

.security-console .security-tag-card.log .tag-icon {
  color: #b76b00;
  background: #fff3df;
}

.security-console .security-tag-card.group .tag-icon {
  color: #7b2cc0;
  background: #f4eaff;
}

.security-console .tag-badge {
  height: 24px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  border-radius: 12px;
  color: #2468f2;
  background: #eaf2ff;
  border: 1px solid #d5e5ff;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.security-console .security-tag-card.ssh .tag-badge {
  color: #00875f;
  background: #e4f8f0;
  border-color: #c8efe1;
}

.security-console .security-tag-card.log .tag-badge {
  color: #b76b00;
  background: #fff7e8;
  border-color: #ffe0ae;
}

.security-console .security-tag-card.group .tag-badge {
  color: #7b2cc0;
  background: #f5edff;
  border-color: #e4d2ff;
}

.security-console .security-tag-card p {
  margin: 14px 0 0;
  color: #6d7d9b;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
}

.security-console .tag-meta {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #8a98b3;
  font-size: 12px;
  font-weight: 700;
}

.security-console > .el-tabs {
  margin-top: 18px;
  overflow: hidden;
  border: 1px solid #dfe8f6;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(22, 42, 84, .10);
}

.security-console > .el-tabs > .el-tabs__header {
  display: none;
}

.security-console .content-table {
  padding: 0;
  background: #fff;
}

.security-console .security-panel-head {
  min-height: 76px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e7eef9;
  background: linear-gradient(180deg, #fff, #f8fbff);
}

.security-console .security-panel-head h2 {
  margin: 0;
  color: #102044;
  font-size: 18px;
  font-weight: 900;
}

.security-console .security-panel-head p {
  margin: 6px 0 0;
  color: #7b8aa8;
  font-size: 13px;
  font-weight: 700;
}

.security-console .top-text {
  margin: 0;
  padding: 14px 22px;
  border-bottom: 1px solid #e7eef9;
  color: #667795;
  background: #f7fbff;
  font-size: 13px;
  font-weight: 700;
}

.security-console .content_searchbar {
  min-height: 58px;
  margin: 0;
  padding: 12px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e7eef9;
  background: #fff;
}

.security-console .content_searchbar .left-btn,
.security-console.main-card .content-table .content_searchbar .left-btn {
  display: none;
}

.security-console .searchbar.com-search {
  display: flex;
  align-items: center;
  gap: 10px;
}

.security-console .el-input--suffix .el-input__inner,
.security-console .el-select .el-input__inner {
  height: 38px;
  border-color: #d8e2f3;
  border-radius: 4px;
  background: #fff;
  color: #526486;
  font-size: 13px;
  font-weight: 700;
}

.security-console .input-search {
  color: #2468f2;
  font-weight: 900;
}

.security-console .tabledata {
  padding: 0;
}

.security-console .el-table {
  color: #3c465a;
  font-size: 14px;
}

.security-console .el-table::before,
.security-console .el-table__fixed-right::before,
.security-console .el-table__fixed::before {
  display: none;
}

.security-console .el-table th.el-table__cell {
  height: 48px;
  border-bottom: 1px solid #e2e9f4;
  background: #f2f5fa;
}

.security-console .el-table th.el-table__cell > .cell {
  color: #78869c;
  font-size: 13px;
  font-weight: 800;
}

.security-console .el-table td.el-table__cell {
  height: 64px;
  border-bottom: 1px solid #edf2f8;
}

.security-console .el-table td.el-table__cell .cell {
  color: #3c465a;
  font-weight: 700;
}

.security-console .el-table__body tr:hover > td.el-table__cell {
  background: #f7fbff;
}

.security-console .el-table .link,
.security-console .el-table a,
.security-console .setting {
  color: #2468f2;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
}

.security-console .open-show {
  display: flex;
  align-items: center;
  gap: 10px;
}

.security-console .open-show .un-open,
.security-console .open-show .open,
.security-console.main-card .content-table .tabledata .open-show .un-open,
.security-console.main-card .content-table .tabledata .open-show .open {
  width: auto;
  min-width: 62px;
  height: 28px;
  min-height: 28px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 900;
  line-height: 26px;
  white-space: nowrap;
  flex-shrink: 0;
}

.security-console .open-show .un-open,
.security-console.main-card .content-table .tabledata .open-show .un-open {
  color: #8a5b00;
  background: #fff7e8;
  border: 1px solid #ffe0ae;
}

.security-console .open-show .open,
.security-console.main-card .content-table .tabledata .open-show .open {
  color: #00875f;
  background: #e3f7ef;
  border: 1px solid #c8efe1;
}

.security-console .more-operation {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: 4px;
  background: #edf4ff;
  cursor: pointer;
}

.security-console .more-operation .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #2468f2;
}

.security-console .custom-pagination,
.security-console .myPage,
.security-console .pagination,
.security-console .el-pagination {
  padding: 16px 22px 18px;
  border-top: 1px solid #edf2f8;
}

.security-console .custom-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.security-console .custom-pagination .el-pagination {
  padding: 0;
  border-top: 0;
}

.security-console .manual-btn {
  display: flex;
  gap: 8px;
}

.security-console .el-pagination .el-input__inner,
.security-console .el-pager .number {
  border: 1px solid #d7e4fa;
  border-radius: 3px;
  background: #fff;
}

.security-console .el-pager li.active {
  color: #2468f2;
  border-color: #c7dcff;
  background: #eaf3ff;
}

.security-console .el-button--primary,
.security-console .manual-btn .el-button--primary {
  border-color: #2468f2;
  background: #2468f2;
}

.security-console .el-button--primary.is-disabled,
.security-console .el-button--primary.is-disabled:hover {
  border-color: #d7e4fa;
  background: #eef4ff;
  color: #9aa6ba;
}

.security-console .security-tip {
  margin: 18px 22px 22px;
  padding: 14px 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  border: 1px solid #dbe7ff;
  border-radius: 6px;
  background: #f7fbff;
  color: #667795;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.6;
}

.security-console .create-api-dialog .el-dialog,
.security-console .delete-dialog .el-dialog,
.security-console .cj-dialog .el-dialog,
.security-console .edit-dialog .el-dialog,
.security-console .white-ip-dialog .el-dialog {
  border-radius: 6px;
  overflow: hidden;
}

.security-console .dialog-title,
.security-console .del-dialog-title {
  color: #102044;
  font-size: 20px;
  font-weight: 900;
}

.security-console .dialog-footer .btn-ok,
.security-console .del-dialog-footer .btn-ok {
  color: #fff;
  background: #2468f2;
  border-radius: 4px;
}

.security-console .dialog-footer .btn-no,
.security-console .del-dialog-footer .btn-no {
  color: #526486;
  background: #f4f7fc;
  border-radius: 4px;
}

@media screen and (max-width: 1280px) {
  .security-console .security-hero-art {
    opacity: .35;
    right: 20px;
  }

  .security-console .security-tag-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 768px) {
  .security-console.main-card {
    margin: 15px;
  }

  .security-console .security-hero {
    padding: 22px 20px;
  }

  .security-console .security-hero h1 {
    font-size: 28px;
  }

  .security-console .security-hero-art {
    display: none;
  }

  .security-console .security-tag-grid {
    grid-template-columns: 1fr;
  }

  .security-console .security-panel-head,
  .security-console .content_searchbar {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }
}