.main-card .main-card-title {
  font-size: 0.28rem;
  margin-bottom: 0.4rem;
}
.main-card .content-table {
  margin-top: 0.3rem;
}
.main-card .content-table .content_searchbar {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.main-card .content-table .content_searchbar .left-btn {
  width: 112px;
  height: 46px;
  line-height: 46px;
  background: #007bff;
  color: #FFF;
  opacity: 1;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: 500;
}
.main-card .content-table .tabledata {
  margin-top: 0.14rem;
}
.main-card .content-table .tabledata .open-show {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.main-card .content-table .tabledata .open-show .un-open {
  width: 0.59rem;
  height: 0.26rem;
  background: #EEEEEE;
  border-radius: 3px;
  font-size: 0.13rem;
  color: #757575;
  display: flex;
  align-items: center;
  justify-content: center;
}
.main-card .content-table .tabledata .open-show .open {
  width: 0.59rem;
  height: 0.26rem;
  background: #E1F0FF;
  border-radius: 3px;
  font-size: 0.13rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}
.main-card .content-table .tabledata .open-show .setting {
  font-size: 0.14rem;
  color: var(--color-primary);
  margin-left: 0.08rem;
  cursor: pointer;
}
.main-card .create-api-dialog .dialog-main .content-msg {
  border: 1px solid #E6E7EB;
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  margin-bottom: 0.2rem;
}
.main-card .create-api-dialog .dialog-main .content-msg .msg-item {
  display: flex;
  align-items: center;
  margin-left: 0.3rem;
  margin-top: 0.2rem;
  color: #757575;
}
.main-card .create-api-dialog .dialog-main .content-msg .msg-item:last-child {
  margin-bottom: 0.3rem;
}
.main-card .create-api-dialog .dialog-main .content-msg .msg-item .item-label {
  min-width: 80px;
  flex-shrink: 0;
  margin-right: 0.4rem;
}
.main-card .create-api-dialog .dialog-main .content-msg .msg-item .item-vlaue {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.main-card .create-api-dialog .dialog-main .content-msg .msg-item .copy {
  margin-left: 5px;
  flex-shrink: 0;
  color: var(--color-primary);
  cursor: pointer;
}
.main-card .create-api-dialog .dialog-main .yellow {
  color: var(--color-warning);
}
.main-card .create-api-dialog .alert-text {
  margin-top: 0.2rem;
}
.main-card .delete-dialog .el-dialog__body {
  padding-left: 0.8rem;
  padding-right: 0.8rem;
  padding-bottom: 0.3rem;
}
.main-card .delete-dialog .del-dialog-title {
  font-size: 0.24rem;
  font-weight: bold;
  color: var(--color-danger);
}
.main-card .delete-dialog .del-dialog-title .del-icon {
  margin-right: 0.13rem;
}
.main-card .delete-dialog .del-dialog-main {
  font-size: 0.16rem;
  font-weight: 800;
  color: #1E2736;
  margin-top: 0.3rem;
  margin-bottom: 0.4rem;
}
.main-card .delete-dialog .del-dialog-footer {
  display: flex;
  flex-direction: column;
}
.main-card .delete-dialog .del-dialog-footer .btn-ok,
.main-card .delete-dialog .del-dialog-footer .btn-no {
  height: 0.46rem;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.16rem;
  font-weight: bold;
  cursor: pointer;
}
.main-card .delete-dialog .del-dialog-footer .btn-ok {
  background: #007bff;
  color: #FFF;
}
.main-card .delete-dialog .del-dialog-footer .btn-no {
  background: #E7E7E7;
  color: #1E2736;
  margin-top: 0.16rem;
}
.main-card .white-ip-dialog .dialog-main .info-alert {
  background: #E1F0FF;
  color: var(--color-primary);
  font-size: 0.15rem;
}
.main-card .white-ip-dialog .dialog-main .info-alert .el-alert__closebtn {
  color: var(--color-primary);
}
.main-card .white-ip-dialog .dialog-main .ip-status {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 0.3rem;
}
.main-card .white-ip-dialog .dialog-main .ip-status .ip-status-text {
  width: 0.84rem;
  margin-right: 0.2rem;
}
.main-card .white-ip-dialog .dialog-main .status-remind {
  margin-left: 1.04rem;
  margin-top: 0.2rem;
  margin-bottom: 0.3rem;
  color: #8692B0;
}
.main-card .white-ip-dialog .dialog-main .alert-text {
  margin-top: 0.2rem;
}
.main-card .white-ip-dialog .el-switch__label {
  position: absolute;
  display: none;
  color: #fff;
}
.main-card .white-ip-dialog .el-switch__label * {
  font-size: 12px !important;
}
.main-card .white-ip-dialog .el-switch__core {
  background-color: #a6a6a6;
}
.main-card .white-ip-dialog .el-switch__label--left {
  z-index: 9;
  left: 20px;
}
.main-card .white-ip-dialog .el-switch__label--right {
  z-index: 9;
  left: -3px;
}
.main-card .white-ip-dialog .el-switch__label.is-active {
  display: block;
}
.more-operation {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 0.3rem;
  padding: 5px;
  cursor: pointer;
}
.more-operation .dot {
  width: 0px;
  height: 0px;
  border: 2px solid var(--color-primary);
  border-radius: 50%;
  margin-right: 0.05rem;
}
.el-popover {
  min-width: 0.5rem !important;
}
.el-popover .operation {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.el-popover .operation .operation-item {
  margin-top: 0.05rem;
  margin-bottom: 0.05rem;
  cursor: pointer;
}
.el-dialog__body {
  padding-left: 0.8rem;
  padding-right: 0.8rem;
}
.dialog-main {
  margin-top: 0.4rem;
}
.dialog-main .el-input__inner {
  height: 0.52rem;
}
.dialog-main .label {
  font-size: 0.16rem;
  color: #1E2736;
  margin-bottom: 0.1rem;
}
.dialog-main .label:not(:first-child) {
  margin-top: 0.2rem;
}
.dialog-footer .btn-no {
  margin-left: 0.12rem;
  cursor: pointer;
}
.dialog-footer .btn-ok {
  cursor: pointer;
  background: #007bff;
  color: #FFF;
  height: 0.46rem;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
}
.el-checkbox__label {
  display: inline-grid;
  white-space: initial;
  word-wrap: break-word;
  overflow: hidden;
}
@media screen and (max-width: 750px) {
  /* 主卡片适配 */
  .main-card {
    padding: 0.16rem;
    background: #fff;
  }
  .main-card .main-card-title {
    font-size: 0.2rem;
    margin-bottom: 0.16rem;
    font-weight: 600;
    color: #1E2736;
    padding-left: 0.04rem;
  }
  
  /* 标签页适配 - 全屏平分宽度 */
  .main-card .el-tabs__header {
    background: #fff;
    padding: 0.12rem;
    margin-bottom: 0.12rem;
    border-radius: 8px;
    border: none;
  }
  .main-card .el-tabs__nav-wrap {
    margin-bottom: 0;
  }
  .main-card .el-tabs__nav-wrap::after {
    display: none;
  }
  .main-card .el-tabs__nav {
    display: flex;
    width: 100%;
    border: none;
    border-radius: 6px;
    overflow: hidden;
  }
  .main-card .el-tabs__item {
    font-size: 0.16rem;
    padding: 0.14rem 0.08rem;
    flex: 1;
    text-align: center;
    border-radius: 0;
    border: none !important;
    border-right: 1px solid #fff !important;
    background: #e6f7ff;
    color: #1890ff;
    height: auto;
    line-height: 1.5;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .main-card .el-tabs__item:last-child {
    border-right: none !important;
  }
  .main-card .el-tabs__item.is-active {
    background: #1890ff;
    color: #fff;
  }
  .main-card .el-tabs__active-bar {
    display: none;
  }
  
  /* 内容区域适配 */
  .main-card .content-table {
    margin-top: 0.12rem;
    background: #fff;
    border-radius: 8px;
    padding: 0.16rem;
  }
  .main-card .content-table .content_searchbar {
    flex-direction: row;
    justify-content: flex-end;
    gap: 0.12rem;
    margin-bottom: 0.16rem;
  }
  /* 创建按钮 - 蓝色背景样式 */
  .main-card .content-table .content_searchbar .left-btn {
    width: auto;
    padding: 0 0.24rem;
    height: 0.42rem;
    line-height: 0.42rem;
    font-size: 0.15rem;
    background: #1890ff;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-weight: 500;
  }
  
  /* 隐藏桌面端表格，使用卡片列表 */
  .main-card .content-table .tabledata .el-table {
    display: none;
  }
  
  /* 移动端API卡片列表 */
  .main-card .mob-api-list {
    display: flex;
    flex-direction: column;
    gap: 0.16rem;
  }
  .main-card .mob-api-item {
    background: #f8f9fa;
    border-radius: 8px;
    padding: 0.2rem;
  }
  .main-card .mob-api-item .api-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.12rem;
  }
  .main-card .mob-api-item .api-name {
    font-size: 0.17rem;
    font-weight: 600;
    color: #1E2736;
  }
  .main-card .mob-api-item .api-info {
    display: flex;
    flex-direction: column;
    gap: 0.08rem;
    margin-bottom: 0.12rem;
  }
  .main-card .mob-api-item .api-info-row {
    display: flex;
    font-size: 0.14rem;
  }
  .main-card .mob-api-item .api-info-row .label {
    color: #666;
    min-width: 0.8rem;
  }
  .main-card .mob-api-item .api-info-row .value {
    color: #333;
    flex: 1;
  }
  .main-card .mob-api-item .api-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.12rem;
    border-top: 1px dashed #ddd;
  }
  .main-card .mob-api-item .api-actions .ip-status {
    display: flex;
    align-items: center;
    gap: 0.1rem;
  }
  .main-card .mob-api-item .api-actions .ip-status .status-tag {
    padding: 0.04rem 0.1rem;
    border-radius: 4px;
    font-size: 0.13rem;
  }
  .main-card .mob-api-item .api-actions .ip-status .status-tag.unopen {
    background: #f5f5f5;
    color: #666;
  }
  .main-card .mob-api-item .api-actions .ip-status .status-tag.open {
    background: #e6f7ff;
    color: #1890ff;
  }
  .main-card .mob-api-item .api-actions .ip-status .ip-list {
    font-size: 0.13rem;
    color: #666;
  }
  .main-card .mob-api-item .api-actions .action-btns {
    display: flex;
    gap: 0.12rem;
  }
  .main-card .mob-api-item .api-actions .action-btns .btn {
    font-size: 0.14rem;
    padding: 0.06rem 0.14rem;
    border-radius: 4px;
    cursor: pointer;
  }
  .main-card .mob-api-item .api-actions .action-btns .btn-setting {
    color: #1890ff;
    background: #e6f7ff;
    border: 1px solid #1890ff;
  }
  .main-card .mob-api-item .api-actions .action-btns .btn-delete {
    color: #F56C6C;
    background: #fef0f0;
    border: 1px solid #F56C6C;
  }
  
  /* 对话框适配 */
  .main-card .create-api-dialog .el-dialog,
  .main-card .delete-dialog .el-dialog,
  .main-card .white-ip-dialog .el-dialog {
    width: 90% !important;
    max-width: 6.8rem;
    margin: 0 auto;
  }
  .el-dialog__body {
    padding-left: 0.24rem;
    padding-right: 0.24rem;
  }
  .dialog-main {
    margin-top: 0.3rem;
  }
  .dialog-main .el-input__inner {
    height: 0.48rem;
  }
  .dialog-main .label {
    font-size: 0.15rem;
  }
  
  /* 创建API成功弹窗内容适配 */
  .main-card .create-api-dialog .dialog-main .content-msg {
    padding: 0.1rem;
  }
  .main-card .create-api-dialog .dialog-main .content-msg .msg-item {
    margin-left: 0.15rem;
    margin-top: 0.15rem;
    flex-wrap: wrap;
  }
  .main-card .create-api-dialog .dialog-main .content-msg .msg-item:last-child {
    margin-bottom: 0.2rem;
  }
  .main-card .create-api-dialog .dialog-main .content-msg .msg-item .item-label {
    min-width: 70px;
    font-size: 0.14rem;
    margin-right: 0.2rem;
  }
  .main-card .create-api-dialog .dialog-main .content-msg .msg-item .item-vlaue {
    font-size: 0.13rem;
    max-width: 100%;
  }
  .main-card .create-api-dialog .dialog-main .content-msg .msg-item .copy {
    font-size: 0.13rem;
    margin-left: auto;
  }
  
  /* 删除弹窗适配 */
  .main-card .delete-dialog .el-dialog__body {
    padding-left: 0.24rem;
    padding-right: 0.24rem;
    padding-bottom: 0.24rem;
  }
  .main-card .delete-dialog .del-dialog-title {
    font-size: 0.2rem;
  }
  .main-card .delete-dialog .del-dialog-title .del-icon {
    margin-right: 0.1rem;
  }
  .main-card .delete-dialog .del-dialog-main {
    font-size: 0.14rem;
    margin-top: 0.2rem;
    margin-bottom: 0.3rem;
    word-break: break-all;
  }
  .main-card .delete-dialog .del-dialog-footer .btn-ok,
  .main-card .delete-dialog .del-dialog-footer .btn-no {
    height: 0.44rem;
    font-size: 0.15rem;
  }
  
  /* IP白名单弹窗适配 */
  .main-card .white-ip-dialog .dialog-main .info-alert {
    font-size: 0.13rem;
    padding: 0.1rem;
  }
  .main-card .white-ip-dialog .dialog-main .ip-status {
    margin-top: 0.2rem;
  }
  .main-card .white-ip-dialog .dialog-main .status-remind {
    margin-left: 0;
    margin-top: 0.15rem;
    margin-bottom: 0.2rem;
    font-size: 0.13rem;
  }
  
  /* 对话框底部按钮 */
  .dialog-footer {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    margin-top: 0.24rem;
  }
  .dialog-footer .btn-no {
    margin-left: 0;
  }
  .dialog-footer .btn-ok,
  .dialog-footer .btn-no {
    height: 0.44rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-size: 0.15rem;
    cursor: pointer;
  }
  .dialog-footer .btn-ok {
    background: #1890ff;
    color: #FFF;
    font-weight: 500;
  }
  .dialog-footer .btn-no {
    background: #f5f5f5;
    color: #666;
    border: 1px solid #d9d9d9;
  }
  
  /* 多选框适配 */
  .el-checkbox__label {
    font-size: 0.13rem;
    line-height: 1.5;
  }
  
  /* 更多操作按钮 */
  .more-operation {
    width: 0.36rem;
  }
  .more-operation .dot {
    border-width: 1.5px;
  }
  
  /* 空状态 */
  .mob-api-list:empty::after {
    content: '暂无API';
    display: block;
    text-align: center;
    padding: 0.4rem 0;
    color: #999;
    font-size: 0.14rem;
  }
}