/* ==========================================================================
   用户中心统一主题（与首页 home.css 保持一致）
   浅灰画布 + 白色卡片 + #00678A 主色
   本文件在所有页面样式之后加载，用于覆盖旧版页面样式。
   ========================================================================== */

:root {
  --uc-primary: #00678A;
  --uc-primary-hover: #005772;
  --uc-text: #101f3c;
  --uc-text-2: #44536b;
  --uc-muted: #6b7a90;
  --uc-border: #e9eef7;
  --uc-line: #f0f3f9;
  --uc-line-2: #f2f5fa;
  --uc-canvas: #f5f7fb;
  --uc-hover: #F7FAFB;
  --uc-success: #04805D;
  --uc-danger: #e5484d;
  --uc-warning: #b7791f;
  --uc-radius: 16px;
  --uc-radius-sm: 10px;
  --uc-shadow: 0 1px 2px rgba(16, 31, 60, 0.035);
}

/* ==========================================================================
   1. 页面骨架
   ========================================================================== */

.el-container:nth-child(2) {
  background: var(--uc-canvas);
}

.el-container:nth-child(2) > .el-main {
  min-height: calc(100vh - 40px);
  padding-bottom: 32px;
  background: var(--uc-canvas);
  box-sizing: border-box;
}

/* 顶栏 .el-header 是 position:fixed，每个页面必须自己让出它的高度。
   --uc-header-h 由 header.php 里的内联脚本按顶栏真实高度写入（见那段注释），
   比写死 40px / 1rem 可靠：不同断点、不同页面下顶栏高度并不一致，
   写死就会这边空太多、那边又盖住内容。
   兜底值 40px 只在脚本没跑起来时生效。 */
.el-main {
  padding-top: calc(var(--uc-header-h, 40px) + 18px) !important;
}

@media screen and (max-width: 750px) {
  .el-main {
    padding-top: calc(var(--uc-header-h, 40px) + 16px) !important;
  }
}

/* 金额、流量、时间等数字等宽，表格纵向对齐更稳 */
.el-container:nth-child(2) > .el-main,
.el-dialog,
.el-message-box {
  font-variant-numeric: tabular-nums;
}

/* 页面标题：旧版把标题放在卡片里，这里统一改为卡片外的页头 */
.main-card {
  font-size: 13px;
  line-height: 1.6;
  color: var(--uc-text-2);
  word-break: break-word;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.main-card .main-card-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 0;
  color: var(--uc-text);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.2px;
}

.main-card .main-card-title .title-text {
  font-size: 26px;
  font-weight: 600;
  color: var(--uc-text);
  line-height: 1.3;
}

.main-card .main-card-title .back,
.main-card .main-card-title .back-btn {
  flex: none;
  width: 20px;
  height: 20px;
  margin-right: 2px;
}

/* 通用白色卡片 */
#account .content-box,
.main-card > .el-tabs,
.main-card-table,
#finance .finance-money-main,
#finance .content_box {
  background: #fff;
  border: 1px solid var(--uc-border);
  border-radius: var(--uc-radius);
  box-shadow: var(--uc-shadow);
}

/* ==========================================================================
   2. Tabs
   ========================================================================== */

.el-tabs__header {
  margin-bottom: 16px;
}

.el-tabs__item {
  height: 44px;
  line-height: 44px;
  padding: 0 18px;
  color: var(--uc-muted);
  font-size: 13.5px;
  transition: color 0.2s ease;
}

.el-tabs__item:hover {
  color: var(--uc-primary);
}

.el-tabs__item.is-active {
  color: var(--uc-primary);
  font-weight: 600;
}

.el-tabs__active-bar {
  height: 2px;
  border-radius: 2px;
  background-color: var(--uc-primary);
}

.el-tabs__nav-wrap::after {
  height: 1px;
  background-color: var(--uc-line);
}

.el-tabs__nav-next,
.el-tabs__nav-prev {
  line-height: 44px;
  color: var(--uc-muted);
}

/* ==========================================================================
   3. 按钮
   ========================================================================== */

.el-main .el-button:not(.el-button--text):not(.is-circle),
.el-dialog .el-button:not(.el-button--text):not(.is-circle),
.el-message-box .el-button:not(.el-button--text) {
  height: 38px;
  padding: 0 16px;
  border-radius: var(--uc-radius-sm);
  font-size: 13px;
  font-weight: 500;
}

.el-main .el-button--mini:not(.el-button--text):not(.is-circle),
.el-dialog .el-button--mini:not(.el-button--text):not(.is-circle) {
  height: 32px;
  padding: 0 12px;
  border-radius: 9px;
  font-size: 12.5px;
}

.el-main .el-button--small:not(.el-button--text):not(.is-circle),
.el-dialog .el-button--small:not(.el-button--text):not(.is-circle) {
  height: 34px;
  padding: 0 14px;
  border-radius: 9px;
  font-size: 12.5px;
}

.el-main .el-button--primary:not(.is-plain):not(.is-disabled),
.el-dialog .el-button--primary:not(.is-plain):not(.is-disabled),
.el-message-box .el-button--primary:not(.is-plain):not(.is-disabled) {
  background-color: var(--uc-primary);
  border-color: var(--uc-primary);
}

.el-main .el-button--primary:not(.el-button--mini):not(.el-button--small):not(.is-plain):not(.is-disabled),
.el-dialog .el-button--primary:not(.el-button--mini):not(.el-button--small):not(.is-plain):not(.is-disabled) {
  box-shadow: 0 10px 22px -12px rgba(0, 103, 138, 0.4);
}

.el-main .el-button--primary:not(.is-plain):not(.is-disabled):hover,
.el-main .el-button--primary:not(.is-plain):not(.is-disabled):focus,
.el-dialog .el-button--primary:not(.is-plain):not(.is-disabled):hover,
.el-dialog .el-button--primary:not(.is-plain):not(.is-disabled):focus,
.el-message-box .el-button--primary:not(.is-plain):not(.is-disabled):hover,
.el-message-box .el-button--primary:not(.is-plain):not(.is-disabled):focus {
  background-color: var(--uc-primary-hover);
  border-color: var(--uc-primary-hover);
}

.el-main .el-button--primary.is-plain,
.el-dialog .el-button--primary.is-plain {
  color: var(--uc-primary);
  background: #f2f9fa;
  border-color: #cfe2e8;
}

.el-main .el-button--primary.is-plain:hover,
.el-main .el-button--primary.is-plain:focus,
.el-dialog .el-button--primary.is-plain:hover,
.el-dialog .el-button--primary.is-plain:focus {
  color: var(--uc-primary-hover);
  background: #eaf5f7;
  border-color: #b7d5de;
}

.el-main .el-button--danger:not(.is-plain),
.el-main .el-button--danger:not(.is-plain):hover,
.el-main .el-button--danger:not(.is-plain):focus {
  border-color: transparent;
}

.el-main .el-button--text,
.el-dialog .el-button--text {
  color: var(--uc-primary);
  font-size: 13px;
  padding: 0 4px;
}

.el-main .el-button--text:hover,
.el-dialog .el-button--text:hover {
  color: var(--uc-primary-hover);
}

.el-button.is-disabled,
.el-button.is-disabled:hover,
.el-button.is-disabled:focus {
  box-shadow: none;
}

/* 页面内自定义文字按钮 */
.dialog-footer {
  margin-top: 20px;
}

.dialog-footer .btn-ok,
.dialog-footer .btn-no {
  height: 38px;
  min-width: 104px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--uc-radius-sm);
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.dialog-footer .btn-ok {
  background: var(--uc-primary);
  color: #fff;
  box-shadow: 0 10px 22px -12px rgba(0, 103, 138, 0.4);
}

.dialog-footer .btn-ok:hover {
  background: var(--uc-primary-hover);
}

.dialog-footer .btn-no {
  margin-left: 10px;
  background: #f0f3f7;
  color: var(--uc-text-2);
}

.dialog-footer .btn-no:hover {
  background: #e6ebf2;
}

/* ==========================================================================
   4. 输入控件
   ========================================================================== */

.el-main .el-input__inner,
.el-dialog .el-input__inner,
.el-message-box .el-input__inner {
  height: 40px;
  line-height: 40px;
  padding: 0 12px;
  border: 1px solid #dbe4ee;
  border-radius: var(--uc-radius-sm);
  background: #fff;
  color: var(--uc-text);
  font-size: 13px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.el-main .el-input__inner:hover,
.el-dialog .el-input__inner:hover {
  border-color: #c9d7e3;
}

.el-main .el-input__inner:focus,
.el-dialog .el-input__inner:focus,
.el-message-box .el-input__inner:focus {
  border-color: var(--uc-primary);
  box-shadow: 0 0 0 3px rgba(0, 103, 138, 0.1);
}

.el-main .el-input.is-disabled .el-input__inner,
.el-dialog .el-input.is-disabled .el-input__inner {
  background: #f7f9fc;
  color: #8a97a9;
}

.el-main .el-textarea__inner,
.el-dialog .el-textarea__inner {
  padding: 10px 12px;
  border: 1px solid #dbe4ee;
  border-radius: var(--uc-radius-sm);
  color: var(--uc-text);
  font-size: 13px;
  line-height: 1.6;
  min-height: 84px;
}

.el-main .el-textarea__inner:focus,
.el-dialog .el-textarea__inner:focus {
  border-color: var(--uc-primary);
  box-shadow: 0 0 0 3px rgba(0, 103, 138, 0.1);
}

.el-main .el-input-group__prepend,
.el-main .el-input-group__append,
.el-dialog .el-input-group__prepend,
.el-dialog .el-input-group__append {
  border-color: #dbe4ee;
  background: #f7fafb;
  color: var(--uc-text-2);
}

/* 输入组只圆外侧两角，拼接处保持直角 */
.el-main .el-input-group__prepend,
.el-dialog .el-input-group__prepend {
  border-radius: var(--uc-radius-sm) 0 0 var(--uc-radius-sm);
}

.el-main .el-input-group__append,
.el-dialog .el-input-group__append {
  border-radius: 0 var(--uc-radius-sm) var(--uc-radius-sm) 0;
}

.el-main .el-input-group--prepend .el-input__inner,
.el-dialog .el-input-group--prepend .el-input__inner {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.el-main .el-input-group--append .el-input__inner,
.el-dialog .el-input-group--append .el-input__inner {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.el-main .el-select .el-input.is-focus .el-input__inner,
.el-dialog .el-select .el-input.is-focus .el-input__inner {
  border-color: var(--uc-primary);
}

.el-main .el-range-editor.el-input__inner,
.el-dialog .el-range-editor.el-input__inner {
  padding: 0 12px;
}

.el-main .el-range-input,
.el-dialog .el-range-input {
  font-size: 13px;
  color: var(--uc-text);
}

.el-form-item__label {
  padding-bottom: 6px;
  color: #53627a;
  font-size: 12.5px;
  line-height: 1.5;
}

.el-form-item {
  margin-bottom: 18px;
}

.el-switch.is-checked .el-switch__core {
  border-color: var(--uc-primary);
  background-color: var(--uc-primary);
}

.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  border-color: var(--uc-primary);
  background-color: var(--uc-primary);
}

.el-checkbox__input.is-checked + .el-checkbox__label {
  color: var(--uc-primary);
}

.el-radio__input.is-checked .el-radio__inner {
  border-color: var(--uc-primary);
  background-color: var(--uc-primary);
}

.el-radio__input.is-checked + .el-radio__label {
  color: var(--uc-primary);
}

.el-radio-button__orig-radio:checked + .el-radio-button__inner {
  background-color: var(--uc-primary);
  border-color: var(--uc-primary);
  box-shadow: -1px 0 0 0 var(--uc-primary);
}

/* ==========================================================================
   5. 表格
   ========================================================================== */

:is(.el-main, .el-dialog) .el-table {
  background: transparent;
  color: var(--uc-text-2);
  font-size: 13px;
}

:is(.el-main, .el-dialog) .el-table::before,
:is(.el-main, .el-dialog) .el-table::after,
:is(.el-main, .el-dialog) .el-table--border::after,
:is(.el-main, .el-dialog) .el-table--group::after,
:is(.el-main, .el-dialog) .el-table__fixed::before,
:is(.el-main, .el-dialog) .el-table__fixed-right::before {
  display: none;
}

:is(.el-main, .el-dialog) .el-table th.el-table__cell {
  height: 44px;
  padding: 12px !important;
  border-right: 0 !important;
  border-bottom: 1px solid #edf1f7 !important;
  background: #fff;
  color: #7b889c;
  font-size: 12px;
  font-weight: 500;
}

:is(.el-main, .el-dialog) .el-table td.el-table__cell {
  padding: 13px 12px !important;
  border-right: 0 !important;
  border-bottom: 1px solid var(--uc-line-2) !important;
  background: transparent;
  color: var(--uc-text-2);
  font-size: 13px;
}

:is(.el-main, .el-dialog) .el-table .cell {
  padding: 0;
  line-height: 1.5;
  word-break: break-word;
}

/* 覆盖旧页面里对单元格内层 .cell 的高优先级字号/颜色 */
:is(.el-main, .el-dialog) .el-table .el-table__header-wrapper .cell,
:is(.el-main, .el-dialog) .el-table .el-table__body-wrapper .cell,
:is(.el-main, .el-dialog) .el-table .el-table__footer-wrapper .cell {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

:is(.el-main, .el-dialog) .el-table tbody .el-table__row {
  height: 48px;
}

:is(.el-main, .el-dialog) .el-table__body tr:hover > td.el-table__cell,
:is(.el-main, .el-dialog) .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
  background: var(--uc-hover) !important;
}

:is(.el-main, .el-dialog) .el-table__body tr.current-row > td.el-table__cell {
  background: #eef7f9 !important;
}

:is(.el-main, .el-dialog) .el-table__expanded-cell {
  padding: 14px 20px !important;
  background: #fbfcfe !important;
}

:is(.el-main, .el-dialog) .el-table--border,
:is(.el-main, .el-dialog) .el-table--border .el-table__cell {
  border-right: 0;
}

:is(.el-main, .el-dialog) .el-table__empty-text {
  color: var(--uc-muted);
  font-size: 13px;
}

:is(.el-main, .el-dialog) .el-table__fixed .el-table__cell,
:is(.el-main, .el-dialog) .el-table__fixed-right .el-table__cell {
  background: #fff;
}

:is(.el-main, .el-dialog) .el-table__fixed-right {
  box-shadow: -8px 0 16px -12px rgba(16, 31, 60, 0.18);
}

:is(.el-main, .el-dialog) .el-table__fixed .el-table__body tr:hover > td.el-table__cell,
:is(.el-main, .el-dialog) .el-table__fixed-right .el-table__body tr:hover > td.el-table__cell {
  background: var(--uc-hover) !important;
}

:is(.el-main, .el-dialog) .el-table .el-table__expand-icon {
  color: var(--uc-muted);
}

:is(.el-main, .el-dialog) .el-table .el-icon-more {
  color: var(--uc-primary);
  font-size: 16px;
  cursor: pointer;
}

/* ==========================================================================
   6. 标签 / 状态
   ========================================================================== */

.el-tag {
  height: 24px;
  line-height: 22px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: #eef2f7;
  color: var(--uc-text-2);
  font-size: 12px;
  font-weight: 500;
}

.el-tag--success,
.el-tag--success.el-tag--light {
  background: #e8f6f0;
  color: var(--uc-success);
}

.el-tag--warning,
.el-tag--warning.el-tag--light {
  background: #fdf3e2;
  color: var(--uc-warning);
}

.el-tag--danger,
.el-tag--danger.el-tag--light {
  background: #fdecec;
  color: var(--uc-danger);
}

.el-tag--info,
.el-tag--info.el-tag--light {
  background: #eef2f7;
  color: var(--uc-muted);
}

/* ==========================================================================
   7. 分页
   ========================================================================== */

.el-pagination {
  color: var(--uc-text-2);
  font-size: 12.5px;
  font-weight: 400;
}

.el-pagination .el-pager li {
  min-width: 32px;
  height: 32px;
  line-height: 30px;
  margin: 0 3px;
  padding: 0 6px;
  border: 1px solid var(--uc-border);
  border-radius: 9px;
  background: #fff;
  color: var(--uc-text-2);
  font-size: 12.5px;
}

.el-pagination .el-pager li:hover {
  color: var(--uc-primary);
  border-color: #cfe2e8;
}

.el-pagination .el-pager li.active {
  border-color: #cfe2e8;
  background: #e9f4f7;
  color: var(--uc-primary);
  font-weight: 600;
}

.el-pagination button {
  height: 32px;
  line-height: 32px;
  border-radius: 9px;
  background: #fff;
  color: var(--uc-muted);
}

.el-pagination button:disabled {
  background: #fff;
  color: #c3ccda;
}

.el-pagination__total,
.el-pagination__jump {
  color: var(--uc-muted);
  font-size: 12.5px;
}

.el-pagination .el-select .el-input .el-input__inner {
  height: 32px !important;
  border-radius: 8px;
}

.custom-pagination,
.myPage {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.custom-pagination .manual-btn,
.myPage .manual-btn {
  display: flex;
  gap: 8px;
}

/* ==========================================================================
   8. 弹窗
   ========================================================================== */

.el-dialog {
  max-width: calc(100vw - 32px);
  border-radius: var(--uc-radius);
  overflow: hidden;
  box-shadow: 0 24px 60px -20px rgba(16, 31, 60, 0.28);
}

.el-dialog__header {
  padding: 18px 24px;
  border-bottom: 1px solid #edf1f7;
}

.el-dialog__header:has(> .el-dialog__title:empty) {
  height: 0;
  padding: 0;
  border-bottom: 0;
}

.el-dialog__title {
  color: var(--uc-text);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
}

.el-dialog__headerbtn {
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 8px;
}

.el-dialog__headerbtn:hover {
  background: #f2f7f9;
}

.el-dialog__headerbtn .el-dialog__close {
  color: var(--uc-muted);
}

.el-dialog__body {
  padding: 22px 24px;
  color: var(--uc-text-2);
  font-size: 13px;
}

.el-dialog__footer {
  padding: 16px 24px;
  border-top: 1px solid #edf1f7;
}

.template .el-dialog .el-dialog__header {
  padding: 18px 24px;
}

.template .el-dialog .el-dialog__footer {
  padding: 16px 24px;
}

.template .el-dialog .el-dialog__header:has(> .el-dialog__title:empty) {
  height: 0;
  padding: 0;
  border-bottom: 0;
}

.dialog-title {
  margin: 0 0 18px;
  color: var(--uc-text);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
}

.dialog-dec {
  color: var(--uc-text-2);
  font-size: 13px;
  line-height: 1.7;
}

/* 旧版自定义按钮 */
.template .delete-dialog .del-dialog-footer .btn-ok,
.template .delete-dialog .del-dialog-footer .btn-no,
.main-card .delete-dialog .del-dialog-footer .btn-ok,
.main-card .delete-dialog .del-dialog-footer .btn-no {
  height: 38px;
  border-radius: var(--uc-radius-sm);
  font-size: 13px;
  font-weight: 500;
}

.main-card .delete-dialog .el-dialog__body {
  padding: 22px 24px;
}

.main-card .delete-dialog .del-dialog-title {
  color: var(--uc-danger);
  font-size: 17px;
  font-weight: 600;
}

.main-card .delete-dialog .del-dialog-main {
  margin: 16px 0 22px;
  color: var(--uc-text);
  font-size: 14px;
  font-weight: 500;
}

/* 确认框 */
.el-message-box {
  max-width: calc(100vw - 32px);
  padding-bottom: 0;
  border: 0;
  border-radius: var(--uc-radius);
  overflow: hidden;
  box-shadow: 0 24px 60px -20px rgba(16, 31, 60, 0.28);
}

.el-message-box__header {
  padding: 20px 24px 4px;
}

.el-message-box__title {
  color: var(--uc-text);
  font-size: 17px;
  font-weight: 600;
}

.el-message-box__content {
  padding: 10px 24px 20px;
  color: var(--uc-text-2);
  font-size: 13px;
}

.el-message-box__headerbtn {
  top: 16px;
  right: 16px;
}

.el-message-box__btns {
  padding: 14px 24px 18px;
  border-top: 1px solid #edf1f7;
}

/* ==========================================================================
   9. 浮层 / 下拉
   ========================================================================== */

.el-popover.el-popper {
  min-width: 0 !important;
  padding: 8px;
  border: 1px solid var(--uc-border);
  border-radius: 12px;
  box-shadow: 0 16px 40px -16px rgba(16, 31, 60, 0.2);
  color: var(--uc-text-2);
  font-size: 13px;
}

.el-select-dropdown,
.el-dropdown-menu,
.el-picker-panel {
  border: 1px solid var(--uc-border);
  border-radius: 12px;
  box-shadow: 0 16px 40px -16px rgba(16, 31, 60, 0.18);
}

.el-select-dropdown {
  padding: 6px;
}

.el-select-dropdown__item {
  height: 36px;
  line-height: 36px;
  padding: 0 12px;
  border-radius: 8px;
  color: var(--uc-text-2);
  font-size: 13px;
}

.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background: #f4f8fa;
}

.el-select-dropdown__item.selected {
  color: var(--uc-primary);
  font-weight: 600;
}

.el-dropdown-menu {
  padding: 6px;
}

.el-dropdown-menu__item {
  line-height: 34px;
  padding: 0 12px;
  border-radius: 8px;
  color: var(--uc-text-2);
  font-size: 13px;
}

.el-dropdown-menu__item:not(.is-disabled):hover {
  background: #f4f8fb;
  color: var(--uc-primary);
}

.el-tooltip__popper.is-dark {
  padding: 7px 10px;
  border-radius: 8px;
  background: rgba(16, 31, 60, 0.92);
  font-size: 12px;
  line-height: 1.5;
}

/* 表格操作菜单 */
.el-popover .operation,
.operation-box {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 2px;
  width: auto;
  min-width: 96px;
}

.el-popover .operation .operation-item,
.operation-box .operation-item {
  margin: 0;
  padding: 7px 10px;
  border-radius: 8px;
  color: var(--uc-text-2);
  font-size: 13px;
  line-height: 1.4;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}

.el-popover .operation .operation-item:hover,
.operation-box .operation-item:hover {
  background: #f4f7fb;
  color: var(--uc-primary);
}

.el-main .more-operation {
  padding: 4px;
  width: auto;
}

.el-main .more-operation .dot {
  width: 3px;
  height: 3px;
  margin-right: 3px;
  border: 0;
  border-radius: 50%;
  background: #98a5b8;
}

.el-main .more-operation:hover .dot {
  background: var(--uc-primary);
}

/* ==========================================================================
   10. 提示 / 空状态 / 加载
   ========================================================================== */

.el-alert {
  padding: 10px 14px;
  border-radius: var(--uc-radius-sm);
}

.el-alert__title {
  font-size: 13px;
  line-height: 1.5;
}

.el-alert--error.is-light {
  background: #fdecec;
  color: var(--uc-danger);
}

.el-alert--warning.is-light {
  background: #fdf3e2;
  color: var(--uc-warning);
}

.el-alert--success.is-light {
  background: #e8f6f0;
  color: var(--uc-success);
}

.el-alert--info.is-light {
  background: #eef6f8;
  color: var(--uc-primary);
}

.el-message {
  padding: 12px 16px;
  border-radius: var(--uc-radius-sm);
  box-shadow: 0 12px 30px -12px rgba(16, 31, 60, 0.2);
}

.el-empty {
  padding: 36px 0;
}

.el-empty__image {
  width: 120px;
}

.el-empty__description p {
  color: var(--uc-muted);
  font-size: 13px;
}

.el-loading-mask {
  background-color: rgba(255, 255, 255, 0.78);
}

.el-loading-spinner .path {
  stroke: var(--uc-primary);
}

/* ==========================================================================
   11. 通用文字 / 链接
   ========================================================================== */

.el-main .a-text {
  color: var(--uc-primary);
  cursor: pointer;
}

.el-main .a-text:hover {
  color: var(--uc-primary-hover);
  text-decoration: underline;
}

.el-main .bule-text {
  color: var(--uc-primary) !important;
}

.el-main .input-search {
  color: var(--uc-muted);
  cursor: pointer;
  padding-right: 2px;
}

.el-main .input-search:hover {
  color: var(--uc-primary);
}

/* ==========================================================================
   12. 账号资料
   ========================================================================== */

#account .content-box {
  margin-top: 0;
  padding: 6px 24px 24px;
}

#account .content-box .el-tabs__header {
  margin-bottom: 2px;
}

#account .box-top {
  height: auto;
  padding: 18px 0 20px;
  border-bottom: 1px solid #edf1f7;
}

#account .right-name {
  flex-wrap: wrap;
  gap: 10px;
}

#account .name-text {
  color: var(--uc-text);
  font-family: inherit;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
}

#account .name-country {
  margin-top: 6px;
}

#account .country-img {
  width: auto;
  height: 18px;
  border-radius: 2px;
}

#account .attestation-text {
  color: var(--uc-text-2);
  font-size: 13px;
}

#account .box-main {
  margin-top: 4px;
}

#account .basic > .el-row,
#account .account > .el-row {
  margin-top: 16px;
}

#account .account {
  margin-top: 34px !important;
}

#account .oauth {
  margin-top: 34px;
}

#account .oauth-box {
  margin-top: 16px;
  row-gap: 18px;
}

#account .account-title,
#account .basic-title {
  padding-left: 10px;
  border-left: 3px solid var(--uc-primary);
  color: var(--uc-text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}

#account .box-item-t {
  height: auto;
  margin-bottom: 8px;
  color: var(--uc-muted);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.5;
}

#account .box-item-b > .el-input,
#account .box-item-b .el-select,
#account .box-item-b .el-textarea {
  width: 100%;
  border: 0;
  border-bottom: 0;
}

#account .box-item-b .el-input__inner {
  height: 40px;
  padding: 0 12px;
  border: 1px solid #dbe4ee;
  border-radius: var(--uc-radius-sm);
}

#account .box-item-b .el-select {
  width: 100%;
}

#account .el-textarea .el-textarea__inner {
  padding: 10px 12px;
  border: 1px solid #dbe4ee;
  border-radius: var(--uc-radius-sm);
}

#account .edit-icon {
  padding: 0 12px;
  color: var(--uc-muted);
}

#account .btn-save {
  width: auto;
  min-width: 120px;
  height: 40px;
  margin-top: 28px;
  border-radius: var(--uc-radius-sm);
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 10px 22px -12px rgba(0, 103, 138, 0.4);
}

#account .code-btn {
  width: auto;
  height: 40px;
  padding: 0 14px;
  border-radius: var(--uc-radius-sm);
  background: #eaf4f6;
  color: var(--uc-primary);
  font-size: 13px;
}

#account .select-input {
  min-width: 100px;
}

#account .com-search {
  padding: 4px 0 16px;
}

#account .msg-search {
  flex-wrap: wrap;
  gap: 12px;
  padding: 4px 0 16px;
}

#account .msgsearch-right {
  flex-wrap: wrap;
  gap: 10px;
}

#account .msgsearch-right .el-select {
  width: 180px;
  margin-right: 0;
}

#account .msgsearch-right .search-btn {
  min-width: 88px;
  height: 40px;
  margin-left: 0;
  border-radius: var(--uc-radius-sm);
  background: var(--uc-primary);
  color: #fff;
  font-size: 13px;
}

#account .msgsearch-left .el-button {
  height: 34px;
  border-radius: 9px;
  border-color: #cfe2e8;
  color: var(--uc-primary);
  font-size: 12.5px;
}

#account .el-dialog .mian-form {
  margin-top: 0;
}

#account .el-dialog__body {
  padding: 22px 24px;
}

/* 密码规则浮层绝对定位在表单项下方，弹窗不能裁切 */
.edit-pass .el-dialog {
  overflow: visible;
}

/* ==========================================================================
   13. 安全中心（含安全组 / 登录日志 / SSH）
   ========================================================================== */

.main-card > .el-tabs {
  padding: 8px 24px 24px;
}

.main-card > .el-tabs > .el-tabs__header {
  margin: 0 0 2px;
  padding-top: 4px;
}

.main-card > .el-tabs > .el-tabs__content {
  padding-top: 10px;
}

.main-card .content-table {
  margin-top: 0 !important;
}

.main-card .content-table .content_searchbar,
.main-card .content-table .tabledata {
  margin-top: 0;
}

.main-card .content-table .content_searchbar {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
  padding: 4px 0;
}

.main-card .content-table .content_searchbar .left-btn {
  width: auto;
  min-width: 96px;
  height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--uc-radius-sm);
  background: var(--uc-primary);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  box-shadow: 0 10px 22px -12px rgba(0, 103, 138, 0.4);
}

.main-card .content-table .content_searchbar .left-btn:hover {
  background: var(--uc-primary-hover);
}

.main-card .content-table .content_searchbar .left-btn + .left-btn {
  margin-left: 8px;
}

.main-card .content-table .tabledata {
  margin-top: 0;
}

.main-card .content-table .tabledata .open-show {
  gap: 8px;
}

.main-card .content-table .tabledata .open-show .open,
.main-card .content-table .tabledata .open-show .un-open {
  width: auto;
  min-width: 56px;
  height: 24px;
  padding: 0 10px;
  border: 0;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
}

.main-card .content-table .tabledata .open-show .open {
  background: #e8f4f6;
  color: var(--uc-primary);
}

.main-card .content-table .tabledata .open-show .un-open {
  background: #f1f4f8;
  color: var(--uc-muted);
}

.main-card .content-table .tabledata .open-show .setting {
  margin-left: 0;
  color: var(--uc-primary);
  font-size: 13px;
}

/* 安全组批量操作按钮 */
.security-group .content-table .content_searchbar .left-btn.add {
  background: #fff !important;
  color: var(--uc-primary) !important;
  border: 1px solid #cfe2e8;
  box-shadow: none;
}

.security-group .content-table .content_searchbar .left-btn.add:hover {
  background: #f4fafb !important;
}

.security-group .content-table .content_searchbar .left-btn.del {
  background: #f1f4f8 !important;
  color: #525666 !important;
  border: 1px solid #e3e8ef;
  box-shadow: none;
}

.security-group .content-table .content_searchbar .left-btn.del:hover {
  background: #e9edf3 !important;
}

.content-table .top-text {
  padding: 2px 0 10px;
  color: var(--uc-muted);
  font-size: 13px;
  line-height: 1.7;
}

.content-table .top-link {
  margin-left: 6px;
  color: var(--uc-primary);
  cursor: pointer;
}

/* 安全中心弹窗 */
.main-card .create-api-dialog .dialog-main {
  margin-top: 0;
}

.main-card .create-api-dialog .dialog-main .label {
  margin-bottom: 8px;
  color: var(--uc-text-2);
  font-size: 12.5px;
}

.main-card .create-api-dialog .dialog-main .content-msg {
  border: 1px solid var(--uc-border);
  border-radius: 12px;
  background: #fbfcfe;
}

.main-card .white-ip-dialog .dialog-main .info-alert {
  border-radius: var(--uc-radius-sm);
}

/* ==========================================================================
   14. 财务中心
   ========================================================================== */

/* 注意：这里必须用 var(--uc-header-h) 而不是 padding 简写。
   ID 选择器的优先级高于 `.el-main` 顶部让位规则，用 `padding: 0.24rem !important`
   会把 padding-top 一起压回 0.24rem，财务/工单页就钻到固定顶栏下面去了。 */
#finance .el-main {
  padding-top: calc(var(--uc-header-h, 40px) + 18px) !important;
  padding-right: 0.24rem !important;
  padding-bottom: 32px !important;
  padding-left: 0.24rem !important;
}

#finance .finance-title {
  margin: 0 0 18px;
  padding: 0;
  border: 0;
  color: var(--uc-text);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.2px;
}

#finance .finance-money-main {
  margin-bottom: 18px;
  padding: 22px 24px;
  border: 1px solid var(--uc-border);
  border-radius: var(--uc-radius);
  background: #fff;
  box-shadow: var(--uc-shadow);
}

#finance .finance-balance {
  align-items: center;
}

#finance .balance-left-title {
  color: var(--uc-muted);
  font-size: 13px;
  font-weight: 400;
}

#finance .balance-left-title .balance-title-num {
  color: var(--uc-text);
}

#finance .balance-left-num {
  margin-top: 10px;
  color: var(--uc-text);
  font-size: 34px;
  font-weight: 600;
  line-height: 1.1;
}

#finance .balance-left-num .prefix {
  margin-right: 2px;
  font-size: 16px;
  font-weight: 500;
}

#finance .balance-right {
  column-gap: 10px;
}

#finance .balance-right .el-button {
  height: 38px;
  border-radius: var(--uc-radius-sm);
  font-size: 13px;
}

#finance .balance-right .balance-tx-btn {
  border-color: #cfe2e8;
  color: var(--uc-primary);
  background: #fff;
}

#finance .balance-right .tx-list {
  color: var(--uc-muted);
  font-size: 13px;
}

#finance .finance-other-money {
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--uc-line);
  flex-wrap: wrap;
  row-gap: 12px;
}

#finance .finance-other-money .other-money-item {
  padding: 0 24px;
  border-left: 1px solid var(--uc-line);
}

#finance .finance-other-money .other-money-item:nth-of-type(1) {
  padding-left: 0;
}

#finance .other-money-item .other-money-item-title {
  margin-right: 6px;
  color: var(--uc-muted);
  font-size: 12.5px;
}

#finance .other-money-item .other-money-item-value {
  color: var(--uc-text);
  font-size: 16px;
  font-weight: 600;
}

#finance .other-money-item .other-money-item-value .prefix {
  font-size: 11px;
}

#finance .other-money-item .freeze-list {
  margin-left: 12px;
  font-size: 12px;
}

#finance .content_box {
  margin-top: 0;
  padding: 6px 24px 24px;
}

#finance .content_box .el-tabs__header {
  margin-bottom: 2px;
}

#finance .el-tabs__content {
  min-height: 320px;
}

#finance .content_searchbar {
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0 16px;
}

#finance .content_searchbar .left_tips {
  gap: 12px;
  flex-wrap: wrap;
}

#finance .content_searchbar .left_tips .el-button {
  height: 34px;
  border-radius: 9px;
  font-size: 12.5px;
}

#finance .tips_item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--uc-muted);
  font-size: 12.5px;
}

#finance .dot {
  width: 7px;
  height: 7px;
  margin-right: 0;
}

#finance .content_searchbar .searchbar .el-input,
#finance .content_searchbar .searchbar .el-select {
  margin-left: 0 !important;
}

#finance .content_searchbar .box .el-input,
#finance .content_searchbar .box .el-select {
  margin-left: 0 !important;
}

#finance .credit-content {
  margin-top: 12px;
}

#finance .credit-content .credit-top {
  gap: 16px;
  margin-bottom: 20px;
}

#finance .credit-content .credit-top .credit-item {
  margin-left: 0;
  padding: 20px;
  border: 1px solid var(--uc-border);
  border-radius: 14px;
  background: #fbfcfe;
}

#finance .credit-content .credit-top .credit-item .item-l {
  color: var(--uc-muted);
  font-size: 13px;
}

#finance .credit-content .credit-top .credit-item .item-r {
  color: var(--uc-muted);
  font-size: 12.5px;
}

#finance .credit-content .credit-top .credit-item .item-bl {
  color: var(--uc-text);
  font-size: 24px;
  font-weight: 600;
}

#finance .credit-content .credit-top .credit-item .label-box {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
}

#finance .credit-content .credit-top .credit-item .flex-bottom .credit-btn,
#finance .credit-content .credit-top .credit-item .flex-bottom .no-btn {
  height: 34px;
  border-radius: 9px;
  font-size: 12.5px;
}

#finance .credit-btn {
  border-color: var(--uc-primary);
  background: var(--uc-primary);
  color: #fff;
}

#finance .no-btn {
  border-color: #dbe4ee;
  background: #fff;
  color: var(--uc-text-2);
}

#finance .contract-status {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
}

#finance .operation-box {
  min-width: 96px;
}

/* 财务中心：代金券 / 代金币 */
#finance .voucher-content ul {
  gap: 20px;
}

#finance .voucher-content .item {
  overflow: visible;
  border: 1px solid var(--uc-border);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--uc-shadow);
}

#finance .voucher-content .price {
  min-width: 150px;
  padding: 22px 12px;
  border-radius: 13px 0 0 13px;
  background: var(--uc-primary);
}

#finance .voucher-content .price .num {
  font-family: inherit;
  font-size: 26px;
  font-weight: 600;
}

#finance .voucher-content .price span {
  font-size: 14px;
}

#finance .voucher-content .price .des {
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 11px;
}

#finance .voucher-content .r-item {
  padding: 18px 14px 12px 20px;
  color: var(--uc-muted);
  font-size: 12px;
  line-height: 1.5;
}

#finance .voucher-content .r-item .tit {
  color: var(--uc-text);
  font-size: 15px;
  font-weight: 600;
}

#finance .voucher-content .r-item .time {
  margin: 8px 0;
}

#finance .voucher-content .r-item .receive {
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 12px;
}

#finance .voucher-content .detail.active {
  border-radius: 0 0 14px 14px;
  background: #f5f7fb;
  color: var(--uc-muted);
}

#finance .voucher-content .more {
  align-items: center;
  gap: 4px;
  color: var(--uc-muted);
  font-size: 12px;
}

#finance .voucher-dialog .el-dialog__body {
  padding: 22px 24px;
}

/* 财务中心：旧版弹窗按钮与标题 */
#finance .kd-dialog .dialog-title,
#finance .cancel-dialog .dialog-title,
#finance .mail-dialog .dialog-title {
  margin-bottom: 14px;
  color: var(--uc-text);
  font-size: 17px;
  font-weight: 600;
}

#finance .kd-dialog .dialog-box,
#finance .mail-dialog .dialog-box {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid var(--uc-border);
  border-radius: 12px;
  background: #fbfcfe;
}

#finance .kd-dialog .kd-item,
#finance .mail-dialog .kd-item {
  margin-bottom: 8px;
  font-size: 13px;
}

#finance .kd-dialog .kd-label {
  color: var(--uc-muted);
}

#finance .kd-dialog .kd-value {
  color: var(--uc-text-2);
}

#finance .kd-dialog .dialog-fotter .el-button,
#finance .cancel-dialog .dialog-fotter .save-btn,
#finance .cancel-dialog .dialog-fotter .cancel-btn,
#finance .mail-dialog .save-btn,
#finance .mail-dialog .cancel-btn,
#finance .delete-order-dialog .delete-btn .save-btn,
#finance .delete-order-dialog .delete-btn .cancel-btn,
#finance .pre-dialog .dialog-fotter .save-btn,
#finance .dialog-footer .btn-ok,
#finance .dialog-footer .btn-no,
#finance .form-footer > .btn-ok,
#finance .form-footer > .btn-no,
#finance .cz-input > .btn-ok {
  width: auto;
  min-width: 104px;
  height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--uc-radius-sm);
  font-size: 13px;
  font-weight: 500;
  box-shadow: none;
}

#finance .kd-dialog .dialog-fotter .el-button,
#finance .pre-dialog .dialog-fotter .save-btn,
#finance .form-footer > .btn-no,
#finance .dialog-footer .btn-no {
  background: #f0f3f7;
  color: var(--uc-text-2);
}

#finance .dialog-fotter,
#finance .delete-btn {
  gap: 10px;
}

#finance .dialog-fotter .cancel-btn,
#finance .delete-btn .cancel-btn {
  margin-left: 0;
}

/* ==========================================================================
   15. 提现记录
   ========================================================================== */

.main-card > header {
  display: flex;
  align-items: center;
  gap: 10px;
  height: auto;
  padding: 0 0 18px;
  border: 0;
}

.main-card > header h2 {
  margin: 0;
  color: var(--uc-text);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.3;
}

.main-card > header .back-icon {
  width: 20px;
  height: 20px;
}

.main-card .withdrawal-content {
  padding: 22px 24px;
  background: #fff;
  border: 1px solid var(--uc-border);
  border-radius: var(--uc-radius);
  box-shadow: var(--uc-shadow);
}

/* ==========================================================================
   16. 订单详情
   ========================================================================== */

.order-detail {
  color: var(--uc-text-2);
  font-size: 13px;
}

.order-detail .page-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 0 0 16px;
  border-bottom: 0;
}

.order-detail .page-top .back-btn {
  width: 20px;
  height: 20px;
}

.order-detail .page-top .top-title {
  margin-left: 4px;
  color: var(--uc-text);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.3;
}

.order-detail .page-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.order-detail .order-info {
  align-items: flex-start;
  padding: 22px 24px;
  border: 1px solid var(--uc-border);
  border-radius: var(--uc-radius);
  background: #fff;
  box-shadow: var(--uc-shadow);
}

.order-detail .info-left .order-user {
  color: var(--uc-text);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}

.order-detail .order-info .order-num {
  margin-top: 8px;
  color: var(--uc-muted);
  font-size: 12.5px;
}

.order-detail .order-info .order-num .num-text {
  color: var(--uc-text-2);
  font-size: 13px;
}

.order-detail .info-right {
  align-items: flex-end;
  gap: 8px;
}

.order-detail .order-info .order-status {
  font-size: 12px;
}

.order-detail .order-info .pay-status {
  padding: 4px 12px;
  border-radius: 999px;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
}

.order-detail .go-pay .pay-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  margin-top: 8px;
  padding: 0 14px;
  border-radius: 9px;
  background: var(--uc-primary);
  color: #fff;
  font-size: 12.5px;
  font-weight: 500;
}

.order-detail .go-pay .pay-text:hover {
  background: var(--uc-primary-hover);
  text-decoration: none;
}

.order-detail .go-pay .pay-info {
  margin-top: 6px;
  color: var(--uc-muted);
  font-size: 12.5px;
  font-weight: 400;
}

.order-detail .self-field {
  padding: 16px 24px;
  border: 1px solid var(--uc-border);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--uc-shadow);
}

.order-detail .self-field .self-num {
  color: var(--uc-text-2);
  font-size: 12.5px;
  line-height: 1.7;
}

.order-detail .self-field .self-num .self-text {
  color: var(--uc-muted);
}

.order-detail .order-table {
  margin-top: 0;
  overflow: hidden;
  border: 1px solid var(--uc-border);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--uc-shadow);
}

.order-detail .order-table .table-title {
  height: auto;
  padding: 15px 24px;
  border-bottom: 1px solid #edf1f7;
  background: #fff;
  color: var(--uc-text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}

.order-detail .order-table .table-item {
  min-height: 46px;
  margin: 0 24px;
  color: var(--uc-text-2);
  font-size: 13px;
}

.order-detail .order-table .title-item {
  border-bottom: 1px solid #edf1f7;
  color: #7b889c;
  font-size: 12px;
}

.order-detail .order-table .order-item {
  border-bottom: 1px solid var(--uc-line-2);
}

.order-detail .order-table .money-text {
  color: var(--uc-text);
  font-weight: 500;
}

.order-detail .order-table .total-money {
  color: var(--uc-muted);
  font-size: 12.5px;
}

.order-detail .order-transaction {
  margin-top: 0;
  padding: 0 24px 6px;
  overflow-x: auto;
  border: 1px solid var(--uc-border);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--uc-shadow);
}

.order-detail .order-transaction .table-top {
  padding: 14px 0;
  border-bottom: 1px solid #edf1f7;
  color: #7b889c;
  font-size: 12px;
}

.order-detail .order-transaction .table-bottom {
  padding: 14px 0;
  border-bottom: 1px solid var(--uc-line-2);
  color: var(--uc-text-2);
  font-size: 13px;
}

.order-detail .order-transaction .no-list {
  height: auto;
  padding: 32px 0;
  border-bottom: 0;
  color: var(--uc-muted);
  font-size: 13px;
}

.order-detail .down-pag {
  justify-content: flex-end;
  margin-top: 20px;
}

.order-detail .down-pag .el-button {
  height: 38px;
  border-radius: var(--uc-radius-sm);
  border-color: #cfe2e8;
  background: #fff;
  color: var(--uc-primary);
  font-size: 13px;
}

.order-detail .down-pag .el-button:hover {
  border-color: #b7d5de;
  background: #f4fafb;
  color: var(--uc-primary-hover);
}

/* ==========================================================================
   17. 产品列表 / 跨模块列表
   ========================================================================== */

.main-card-table {
  margin-top: 0;
  padding: 6px 24px 24px;
}

.main-card-table .product-tab-list {
  padding-top: 4px;
}

.main-card-table .product-tab-list .el-tabs__header {
  margin-bottom: 2px;
}

.main-card-search {
  padding: 4px 0 16px;
  gap: 12px;
  flex-wrap: wrap;
}

.main-card-search .right-search {
  flex-wrap: wrap;
  gap: 12px;
}

.main-card-search .right-search .el-select,
.main-card-search .right-search .el-input {
  width: 180px;
}

.main-card-search .right-search .el-input__inner {
  height: 40px;
}

.main-card-search .search-btn {
  min-width: 88px;
  height: 40px;
  padding: 0 18px;
  border-radius: var(--uc-radius-sm);
  background: var(--uc-primary);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 10px 22px -12px rgba(0, 103, 138, 0.4);
}

.main-card-search .search-btn:hover {
  background: var(--uc-primary-hover);
}

.main-card-table .list-table-border,
.main-card-table .list-table-border .el-table__cell {
  border-right: 0;
}

.main-card-table .status {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 0;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
}

.main-card-table .column-id {
  color: var(--uc-primary);
}

.main-card-table .column-id:hover {
  text-decoration: underline;
  border-bottom: 0;
}

.main-card-table .cloud-name .packge-name {
  color: var(--uc-text);
  font-weight: 500;
}

.main-card-table .cloud-name .name {
  color: var(--uc-muted);
  font-size: 12px;
}

.main-card-table .page {
  margin-top: 16px;
}

/* ==========================================================================
   18. 产品配置 / 产品详情 / 独立模块
   ========================================================================== */

.product .config-box,
.product_detail .config-box {
  margin: 0;
}

.product .config-box > .content,
.product_detail .config-box > .content {
  min-height: 320px;
  padding: 22px 24px;
  border: 1px solid var(--uc-border);
  border-radius: var(--uc-radius);
  background: #fff;
  box-shadow: var(--uc-shadow);
}

.product_detail .contract-box {
  padding: 22px 24px;
  border: 1px solid var(--uc-border);
  border-radius: var(--uc-radius);
  background: #fff;
  box-shadow: var(--uc-shadow);
}

.product_detail .contract-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.product_detail .contract-top .back-img {
  width: 20px;
  height: 20px;
}

.product_detail .top-product-name {
  color: var(--uc-text);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.3;
}

.product_detail .go-contract {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-top: 40px;
}

.product_detail .contract-img {
  width: 172px;
  height: auto;
}

.product_detail .contract-text {
  color: var(--uc-text-2);
  font-size: 14px;
}

.product_detail .contract-btn {
  height: 38px;
  padding: 0 18px;
  border-radius: var(--uc-radius-sm);
  background: var(--uc-primary);
  border-color: var(--uc-primary);
  color: #fff;
  font-size: 13px;
}

/* 独立模块 iframe */
.main-card iframe {
  display: block;
  width: 100%;
  height: calc(100vh - 180px);
  min-height: 600px;
  border: 0;
  border-radius: var(--uc-radius);
  background: #fff;
}

/* ==========================================================================
   19. 状态页：404 / 网络错误 / 无权限
   ========================================================================== */

#notFound .main-card,
#networkErro .main-card {
  box-sizing: border-box;
  width: 100%;
  max-width: 720px;
  margin: 24px auto;
  padding: 40px 32px;
  border: 1px solid var(--uc-border);
  border-radius: var(--uc-radius);
  background: #fff;
  box-shadow: var(--uc-shadow);
}

#notFound .content-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-height: 300px;
}

#notFound .content-box .img-box {
  width: 240px;
  max-width: 100%;
  height: auto;
}

#notFound .content-box .img-box img {
  display: block;
  width: 100%;
  height: auto;
}

#notFound .tips-box {
  margin-top: 0;
  color: var(--uc-text-2);
  font-size: 15px;
  line-height: 1.7;
  text-align: center;
}

#notFound .tran-again {
  margin-top: 10px;
  color: var(--uc-primary);
  font-size: 14px;
  font-weight: 500;
}

#networkErro .content-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 420px;
}

#networkErro .img-box {
  width: 260px;
  height: 420px;
}

#networkErro .tips-text {
  color: var(--uc-text-2);
  font-size: 13px;
}

#networkErro .tran-again {
  color: var(--uc-primary);
  font-size: 13px;
}

#noPermissions .el-main {
  padding-left: 0.24rem;
}

#noPermissions .box {
  box-sizing: border-box;
  width: 100%;
  max-width: 640px;
  margin: 24px auto;
  padding: 44px 32px;
  border: 1px solid var(--uc-border);
  border-radius: var(--uc-radius);
  background: #fff;
  box-shadow: var(--uc-shadow);
}

#noPermissions .box img {
  width: 180px;
  margin: 0 0 20px;
}

#noPermissions .box p {
  margin: 6px 0;
  color: var(--uc-text-2);
  font-size: 14px;
}

#noPermissions .box p .el-button {
  font-size: 14px;
}

/* ==========================================================================
   20. 新闻详情 / 协议（独立页面）
   ========================================================================== */

#content.news,
#content.agreement {
  box-sizing: border-box;
  min-height: 100vh;
  padding: 40px 24px 56px;
  background: var(--uc-canvas);
  font-size: 13px;
}

.news_detail .new-box {
  box-sizing: border-box;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 32px 40px;
  border: 1px solid var(--uc-border);
  border-radius: var(--uc-radius);
  background: #fff;
  box-shadow: var(--uc-shadow);
  font-size: 14px;
}

.news_detail .new-box .tit {
  margin-bottom: 10px;
  color: var(--uc-text);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.4;
}

.news_detail .new-box .time {
  margin-bottom: 26px;
  color: var(--uc-muted);
  font-size: 12.5px;
}

.news_detail .new-box .content {
  color: var(--uc-text-2);
  font-size: 14px;
  line-height: 1.9;
}

.news_detail .new-box .news_annex {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--uc-line);
  color: var(--uc-muted);
  font-size: 13px;
  line-height: 1.8;
}

.news_detail .new-box .news_annex a {
  color: var(--uc-primary);
}

.news_detail .new-box .news_annex a:hover {
  color: var(--uc-primary-hover);
}

#content.agreement .contnet-right-out {
  margin: 0 auto;
  max-width: 960px;
  padding: 0;
  font-size: 13px;
}

#content.agreement .content-right {
  padding: 32px 40px;
  border: 1px solid var(--uc-border);
  border-radius: var(--uc-radius);
  background: #fff;
  box-shadow: var(--uc-shadow);
}

#content.agreement .right-title {
  color: var(--uc-text);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.4;
}

#content.agreement .right-keywords-time {
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 10px;
}

#content.agreement .right-keywords-time .right-time,
#content.agreement .right-keywords-time .right-keywords {
  margin-top: 0;
  color: var(--uc-muted);
  font-size: 12.5px;
}

#content.agreement .right-keywords-time .right-keywords {
  margin-left: 0;
}

#content.agreement .right-content {
  margin-top: 28px;
  color: var(--uc-text-2);
  font-size: 14px;
  line-height: 1.9;
}

#content.agreement .right-content img {
  max-width: 100%;
  height: auto;
}

#content.agreement .right-attachment {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--uc-line);
  gap: 12px;
  flex-wrap: wrap;
  color: var(--uc-muted);
  font-size: 13px;
}

#content.agreement .right-attachment .right-attachment-item {
  margin-right: 0;
  color: var(--uc-primary);
}

/* ==========================================================================
   21. 跳转中转页
   ========================================================================== */

.transfer {
  height: 100% !important;
  padding: 24px;
  background: var(--uc-canvas) !important;
  box-sizing: border-box;
}

.transfer .con {
  width: 520px;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid var(--uc-border);
  border-radius: var(--uc-radius);
  background: #fff;
  box-shadow: 0 24px 60px -30px rgba(16, 31, 60, 0.25);
}

.transfer .logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 26px 32px;
  background: var(--uc-primary);
}

.transfer .logo img {
  width: auto;
  max-width: 100%;
  height: 32px;
}

.transfer .info {
  padding: 28px 32px 32px;
  background: #fff;
  color: var(--uc-text-2);
  font-size: 13px;
  line-height: 1.7;
}

.transfer .tit {
  margin-bottom: 10px;
  color: var(--uc-text);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
}

.transfer .des {
  margin: 0 0 16px;
}

.transfer .link {
  padding: 10px 12px;
  border: 1px solid #eef3f8;
  border-radius: var(--uc-radius-sm);
  background: #f7fafb;
  color: var(--uc-muted);
  font-size: 12.5px;
  word-break: break-all;
}

.transfer .jump {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--uc-line);
  text-align: right;
}

.transfer .jump .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  margin-top: 0;
  padding: 0 18px;
  border-radius: var(--uc-radius-sm);
  background: var(--uc-primary);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 10px 22px -12px rgba(0, 103, 138, 0.4);
}

.transfer .jump .btn:hover {
  background: var(--uc-primary-hover);
}

/* ==========================================================================
   22. 响应式
   ========================================================================== */

@media (max-width: 1359px) {
  .main-card > .el-tabs,
  .main-card-table,
  #finance .content_box {
    padding-left: 20px;
    padding-right: 20px;
  }

  #account .content-box {
    padding-left: 20px;
    padding-right: 20px;
  }
}

@media (max-width: 750px) {
  /* 移动端顶栏让位统一交给顶部那条 var(--uc-header-h) 规则，
     不再用「估算的 1rem + margin」叠加，避免两处同时生效把内容推得过低 */
  .el-container:nth-child(2) > .el-main {
    margin-top: 0;
    padding-bottom: 20px;
  }

  .main-card {
    font-size: 13px;
  }

  .main-card .main-card-title,
  .main-card .main-card-title .title-text {
    margin-bottom: 14px;
    font-size: 22px;
  }

  .main-card > .el-tabs {
    padding: 4px 16px 16px;
    border-radius: 14px;
  }

  .main-card > .el-tabs > .el-tabs__header {
    padding-top: 2px;
  }

  .main-card > .el-tabs > .el-tabs__content {
    padding-top: 6px;
  }

  .el-tabs__item {
    height: 42px;
    line-height: 42px;
    padding: 0 12px;
    font-size: 13px;
  }

  /* 弹窗 */
  .el-dialog {
    max-width: calc(100vw - 24px);
    border-radius: 14px;
  }

  .template .el-dialog .el-dialog__header {
    padding: 16px 18px;
  }

  .el-dialog__body {
    padding: 18px 16px;
  }

  .template .el-dialog .el-dialog__footer {
    padding: 14px 16px;
  }

  .dialog-title {
    margin-bottom: 14px;
    font-size: 16px;
  }

  .el-dialog__footer .el-button,
  .dialog-footer .btn-ok,
  .dialog-footer .btn-no {
    min-width: 96px;
  }

  .el-message-box {
    width: calc(100vw - 32px);
  }

  /* 表格在窄屏内可横向滚动，保持完整数据 */
  :is(.el-main, .el-dialog) .el-table {
    font-size: 12.5px;
  }

  :is(.el-main, .el-dialog) .el-table th.el-table__cell,
  :is(.el-main, .el-dialog) .el-table td.el-table__cell {
    padding: 10px 10px !important;
  }

  :is(.el-main, .el-dialog) .el-table .cell {
    line-height: 1.45;
  }

  :is(.el-main, .el-dialog) .el-table tbody .el-table__row {
    height: auto;
    min-height: 46px;
  }

  /* 分页 */
  .el-pagination .el-pager li {
    min-width: 28px;
    height: 28px;
    line-height: 26px;
    margin: 0 2px;
  }

  .el-pagination button {
    height: 28px;
    line-height: 28px;
  }

  .custom-pagination,
  .myPage {
    gap: 6px;
  }

  /* 账号资料 */
  #account .content-box {
    padding: 4px 16px 16px;
    border-radius: 14px;
  }

  #account .box-top {
    padding: 14px 0 16px;
  }

  #account .name-text {
    font-size: 18px;
  }

  #account .box-main {
    margin-top: 0;
  }

  #account .basic > .el-row,
  #account .account > .el-row {
    margin-top: 12px;
  }

  #account .account {
    margin-top: 26px !important;
  }

  #account .oauth {
    margin-top: 26px;
  }

  #account .account-title,
  #account .basic-title {
    font-size: 14px;
    border-left-width: 3px;
  }

  #account .box-item-t {
    font-size: 12px;
  }

  #account .box-item-b > .el-input,
  #account .box-item-b .el-select,
  #account .box-item-b .el-textarea {
    margin-bottom: 0;
  }

  #account .el-col {
    margin-bottom: 14px;
  }

  #account .btn-save {
    width: 100%;
    height: 44px;
    margin-top: 20px;
    border-radius: 12px;
  }

  #account .code-btn {
    height: 40px;
  }

  #account .msgsearch-right {
    width: 100%;
  }

  #account .msgsearch-right .el-select {
    width: calc(50% - 5px);
  }

  #account .msgsearch-right .el-input {
    width: 100% !important;
  }

  #account .msgsearch-right .search-btn {
    width: 100%;
  }

  #account .el-tabs__content > .el-tab-pane:has(.mobel) .content_table {
    display: none;
  }

  /* 移动端列表自带搜索框，隐藏桌面搜索框避免重复 */
  #account .el-tabs__content > .el-tab-pane:has(.mobel) > .searchbar {
    display: none !important;
  }

  #account .el-tabs__content > .el-tab-pane:has(.mobel) .mobel {
    display: block;
  }

  #account .mob-searchbar {
    margin-top: 0;
  }

  #account .mob-search-input,
  #account .mob-search-input > input {
    height: 40px;
    border-radius: var(--uc-radius-sm);
    background: #f7f9fc;
  }

  #account .mob-tabledata {
    margin-top: 12px;
    overflow: hidden;
    border: 1px solid var(--uc-border);
    border-radius: 12px;
    background: #fff;
  }

  #account .mob-tabledata-item {
    padding: 0 14px;
    border-bottom: 1px solid var(--uc-line-2);
  }

  #account .mob-item-row {
    margin-top: 10px;
  }

  #account .mob-item-row1,
  #account .mob-item-row3,
  #account .mob-item-row-notes {
    margin-left: 0;
    color: var(--uc-muted);
    font-size: 12px;
  }

  #account .mob-item-row2-name {
    font-size: 13px;
    color: var(--uc-text);
  }

  /* 安全中心 */
  .main-card .content-table .content_searchbar {
    gap: 8px;
    margin-bottom: 12px;
  }

  .main-card .content-table .content_searchbar .left-btn {
    min-width: 0;
    height: 36px;
    padding: 0 14px;
    font-size: 12.5px;
  }

  .main-card .content-table .content_searchbar .left-btn + .left-btn {
    margin-left: 0;
  }

  /* 安全组：批量按钮位于内层 flex 容器中，需要显式间距 */
  .security-group .content-table .content_searchbar .left-btn + .left-btn {
    margin-left: 8px;
  }

  .security-group .content-table .content_searchbar {
    align-items: stretch;
  }

  .content-table .top-text {
    font-size: 12.5px;
  }

  /* 财务中心：顶部让位同样必须走 var，不能用 padding 简写（见上文说明） */
  #finance .el-main {
    padding-top: calc(var(--uc-header-h, 40px) + 16px) !important;
    padding-right: 0.24rem !important;
    padding-bottom: 20px !important;
    padding-left: 0.24rem !important;
  }

  #finance .finance-title {
    margin-bottom: 14px;
    font-size: 22px;
  }

  #finance .finance-money-main {
    margin-bottom: 14px;
    padding: 18px 16px;
    border-radius: 14px;
  }

  #finance .finance-balance {
    flex-wrap: wrap;
    gap: 14px;
  }

  #finance .balance-left-num {
    font-size: 28px;
  }

  #finance .balance-left-num .prefix {
    font-size: 14px;
  }

  #finance .balance-right {
    width: 100%;
    flex-wrap: wrap;
  }

  #finance .balance-right .el-button {
    flex: 1;
    min-width: 104px;
  }

  #finance .finance-other-money {
    gap: 8px 0;
    margin-top: 16px;
    padding-top: 14px;
  }

  #finance .finance-other-money .other-money-item {
    padding: 0 14px;
  }

  #finance .other-money-item .other-money-item-title {
    font-size: 12px;
  }

  #finance .other-money-item .other-money-item-value {
    font-size: 14px;
  }

  #finance .content_box {
    padding: 4px 16px 16px;
    border-radius: 14px;
  }

  #finance .content_searchbar {
    align-items: stretch;
  }

  #finance .content_searchbar .searchbar,
  #finance .content_searchbar .box {
    width: 100%;
    flex-wrap: wrap;
  }

  #finance .content_searchbar .box .el-date-editor,
  #finance .content_searchbar .box .el-select,
  #finance .content_searchbar .box .el-input {
    width: 100% !important;
    margin: 0 0 8px !important;
  }

  #finance .el-tabs__content {
    min-height: 0;
  }

  #finance .el-tab-pane:has(.mobel) .tabledata {
    display: none;
  }

  /* 移动端列表已带关键词搜索，隐藏桌面筛选区重复的输入框；保留批量按钮与筛选项 */
  #finance .el-tab-pane:has(.mobel) .content_searchbar .searchbar > .el-input:not(.el-date-editor),
  #finance .el-tab-pane:has(.mobel) .content_searchbar .box > .el-input:not(.el-date-editor) {
    display: none !important;
  }

  #finance .el-tab-pane:has(.mobel) .mobel {
    display: block;
  }

  #finance .mobel .mob-searchbar {
    margin-top: 0;
  }

  #finance .mob-search-input,
  #finance .mob-search-input > input {
    height: 40px;
    border-radius: var(--uc-radius-sm);
    background: #f7f9fc;
  }

  #finance .mob-tabledata {
    margin-top: 12px;
    overflow: hidden;
    border: 1px solid var(--uc-border);
    border-radius: 12px;
    background: #fff;
  }

  #finance .mob-tabledata-item {
    padding: 0 14px;
    border-bottom: 1px solid var(--uc-line-2);
  }

  #finance .mob-item-row {
    margin-top: 10px;
  }

  #finance .mob-item-row1,
  #finance .mob-item-row3,
  #finance .mob-item-row-notes {
    margin-left: 0;
    color: var(--uc-muted);
    font-size: 12px;
  }

  #finance .mob-item-row2 {
    color: var(--uc-text);
    font-size: 13px;
  }

  #finance .bottom-text {
    margin: 20px 0;
    font-size: 12px;
  }

  #finance .back-top-img,
  #account .back-top-img {
    width: 42px;
    right: 14px;
    bottom: 20px;
  }

  #finance .credit-content .credit-top {
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
  }

  #finance .credit-content .credit-top .credit-item {
    padding: 16px;
  }

  #finance .voucher-content ul {
    gap: 12px;
  }

  #finance .voucher-content .item {
    width: 100%;
  }

  #finance .voucher-content .price {
    min-width: 108px;
    padding: 18px 10px;
  }

  #finance .voucher-content .price .num {
    font-size: 22px;
  }

  #finance .voucher-content .r-item {
    padding: 14px 12px 10px 14px;
  }

  #finance .voucher-content .r-item .tit {
    font-size: 13px;
  }

  #finance .voucher-dialog ul {
    grid-template-columns: repeat(1, 1fr);
  }

  #finance .voucher-dialog .el-dialog__body {
    padding: 18px 16px;
  }

  #finance .voucher-dialog .el-dialog {
    width: calc(100vw - 24px);
  }

  #finance .kd-dialog .dialog-box,
  #finance .mail-dialog .dialog-box {
    padding: 12px;
  }

  #finance .dialog-footer,
  #finance .dialog-fotter,
  #finance .delete-btn {
    flex-wrap: wrap;
    gap: 10px;
  }

  #finance .dialog-footer .btn-ok,
  #finance .dialog-footer .btn-no,
  #finance .dialog-fotter .el-button,
  #finance .dialog-fotter .save-btn,
  #finance .dialog-fotter .cancel-btn,
  #finance .delete-btn .save-btn,
  #finance .delete-btn .cancel-btn {
    width: 100%;
    margin-left: 0;
  }

  /* 提现记录 */
  .main-card > header {
    padding-bottom: 14px;
  }

  .main-card > header h2 {
    font-size: 22px;
  }

  .main-card .withdrawal-content {
    padding: 16px;
    border-radius: 14px;
  }

  /* 订单详情 */
  .order-detail .page-top {
    margin-bottom: 14px;
    padding-bottom: 14px;
  }

  .order-detail .page-top .top-title {
    font-size: 22px;
  }

  .order-detail .page-content {
    gap: 12px;
  }

  .order-detail .order-info {
    flex-direction: column;
    gap: 16px;
    padding: 18px 16px;
    border-radius: 14px;
  }

  .order-detail .info-left .order-user {
    font-size: 17px;
  }

  .order-detail .info-right {
    align-items: flex-start;
  }

  .order-detail .order-info .order-num {
    margin-top: 6px;
  }

  .order-detail .self-field {
    padding: 14px 16px;
  }

  .order-detail .order-table .table-title {
    padding: 14px 16px;
    font-size: 14px;
  }

  .order-detail .order-table .table-item {
    min-height: 44px;
    margin: 0 16px;
    font-size: 12.5px;
  }

  .order-detail .order-transaction {
    padding: 0 16px 4px;
  }

  .order-detail .order-transaction .table-top,
  .order-detail .order-transaction .table-bottom {
    min-width: 640px;
    font-size: 12.5px;
  }

  .order-detail .down-pag {
    justify-content: center;
    margin-top: 16px;
  }

  /* 产品列表 */
  .main-card-table {
    padding: 4px 16px 16px;
    border-radius: 14px;
  }

  .main-card-search {
    align-items: stretch;
    flex-direction: column;
    padding: 2px 0 14px;
  }

  .main-card-search .right-search {
    width: 100%;
    gap: 8px;
  }

  .main-card-search .right-search .el-select,
  .main-card-search .right-search .el-input {
    width: 100%;
  }

  .main-card-search .search-btn {
    width: 100%;
  }

  .main-card-table .status {
    font-size: 11.5px;
  }

  /* 产品配置 */
  .product .config-box > .content,
  .product_detail .config-box > .content,
  .product_detail .contract-box {
    padding: 18px 16px;
    border-radius: 14px;
  }

  .product_detail .top-product-name {
    font-size: 20px;
  }

  .product_detail .go-contract {
    margin-top: 28px;
    gap: 12px;
  }

  .product_detail .contract-img {
    width: 140px;
  }

  .main-card iframe {
    height: calc(100vh - 150px);
    min-height: 480px;
    border-radius: 14px;
  }

  /* 状态页 */
  #notFound .main-card,
  #networkErro .main-card {
    margin: 12px auto;
    padding: 28px 18px;
    border-radius: 14px;
  }

  #notFound .content-box {
    min-height: 240px;
    gap: 16px;
  }

  #notFound .content-box .img-box {
    width: 200px;
  }

  #notFound .tips-box {
    font-size: 14px;
  }

  #networkErro .content-box {
    min-height: 360px;
  }

  #networkErro .img-box {
    width: 220px;
    height: 356px;
  }

  #noPermissions .el-main {
    padding-left: 0.24rem;
  }

  #noPermissions .box {
    margin: 12px auto;
    padding: 32px 20px;
    border-radius: 14px;
  }

  #noPermissions .box img {
    width: 150px;
    margin-bottom: 16px;
  }

  #noPermissions .box p {
    font-size: 13px;
  }

  /* 独立内容页 */
  #content.news,
  #content.agreement {
    padding: 20px 12px 32px;
  }

  .news_detail .new-box,
  #content.agreement .content-right {
    padding: 22px 16px;
    border-radius: 14px;
  }

  .news_detail .new-box .tit,
  #content.agreement .right-title {
    font-size: 22px;
  }

  .news_detail .new-box .time {
    margin-bottom: 18px;
    font-size: 12px;
  }

  .news_detail .new-box .content,
  #content.agreement .right-content {
    font-size: 13.5px;
    line-height: 1.8;
  }

  #content.agreement .right-content {
    margin-top: 20px;
  }

  #content.agreement .right-keywords-time {
    gap: 6px 14px;
  }

  /* 中转页 */
  .transfer {
    padding: 16px;
  }

  .transfer .con {
    border-radius: 14px;
  }

  .transfer .logo {
    padding: 22px 24px;
  }

  .transfer .info {
    padding: 22px 20px 24px;
  }

  .transfer .tit {
    font-size: 18px;
  }

  .transfer .jump .btn {
    width: 100%;
    height: 44px;
    border-radius: 12px;
  }
}

/* ==========================================================================
   22. 全量复审修复
   ========================================================================== */

/* 表头内层 .cell：Element 的 th>.cell 规则优先级更高，需显式清零 */
:is(.el-main, .el-dialog) .el-table th.el-table__cell > .cell {
  padding-left: 0;
  padding-right: 0;
}

/* 输入框：恢复 Element 为后缀图标、下拉箭头预留的内边距 */
.el-main .el-input--suffix .el-input__inner,
.el-dialog .el-input--suffix .el-input__inner,
.el-message-box .el-input--suffix .el-input__inner {
  padding-right: 30px;
}

.el-main .el-select .el-input__inner,
.el-dialog .el-select .el-input__inner {
  padding-right: 35px;
}

.el-main .el-input--prefix .el-input__inner,
.el-dialog .el-input--prefix .el-input__inner {
  padding-left: 30px;
}

/* 分页：common.css 的 rem !important 规则会压小页码与跳页输入框 */
.myPage .el-pagination .el-pager li,
.myPage .el-pagination .el-pagination__jump {
  font-size: 12.5px !important;
}

.myPage .el-pagination .el-input__inner {
  height: 32px !important;
  font-size: 12.5px;
}

/* 仅跳页输入框收紧内边距，每页条数下拉需保留箭头空间 */
.myPage .el-pagination .el-pagination__jump .el-input__inner {
  padding: 0 4px;
}

.myPage .el-pagination .el-input__icon {
  line-height: 32px;
}

/* security_log 等页面外层与组件根节点同名，去掉内层重复上间距 */
.custom-pagination .custom-pagination {
  margin-top: 0;
}

/* label-position=left/right 的表单标签恢复与 40px 输入框垂直居中 */
.el-form--label-left .el-form-item__label,
.el-form--label-right .el-form-item__label {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding-bottom: 0;
}

.el-form--label-right .el-form-item__label {
  justify-content: flex-end;
}

/* 安全中心：组规则弹窗标题与 SSH / 白名单弹窗表单标签 */
.main-card .create-api-dialog .dia-tit {
  margin: 0 0 18px;
  color: var(--uc-text);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.4;
}

.main-card .cj-dialog .dialog-main,
.main-card .edit-dialog .dialog-main,
.main-card .white-ip-dialog .dialog-main {
  margin-top: 0;
}

.main-card .cj-dialog .dialog-main .label,
.main-card .edit-dialog .dialog-main .label,
.main-card .white-ip-dialog .dialog-main .label {
  margin-bottom: 8px;
  color: var(--uc-text-2);
  font-size: 12.5px;
}

.main-card .cj-dialog .dialog-main .label:not(:first-child),
.main-card .edit-dialog .dialog-main .label:not(:first-child),
.main-card .white-ip-dialog .dialog-main .label:not(:first-child) {
  margin-top: 14px;
}

/* 账户：倒计时按钮禁用态 */
#account .code-btn.is-disabled,
#account .code-btn.is-disabled:hover,
#account .code-btn.is-disabled:focus {
  background: #eef2f6;
  border-color: #eef2f6;
  color: #8a97a9;
}

/* 账户：密码规则浮层 */
.edit-pass .password-rule-popover {
  border: 1px solid var(--uc-border);
  border-radius: 12px;
  box-shadow: 0 12px 28px -18px rgba(16, 31, 60, 0.28);
}

.edit-pass .password-rule-title {
  color: var(--uc-text);
  font-size: 13px;
  font-weight: 600;
}

.edit-pass .password-rule-item {
  color: var(--uc-muted);
  font-size: 12.5px;
}

.edit-pass .password-rule-item.is-pass {
  color: var(--uc-success);
}

/* 账户：安全验证弹窗 */
.security-dialog .security-title {
  padding: 18px 20px;
  border-bottom: 1px solid var(--uc-border);
}

.security-dialog .security-title .title-text {
  color: var(--uc-text);
  font-size: 17px;
  font-weight: 600;
}

.security-dialog .security-title .close-btn {
  color: var(--uc-muted);
  font-size: 16px;
}

.security-dialog .security-content {
  padding: 16px 20px;
  color: var(--uc-text-2);
  font-size: 13px;
}

.security-dialog .security-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid var(--uc-line-2);
  background: #fff;
}

.security-dialog .security-footer .cancel-btn {
  border-color: #f0f3f7;
  background: #f0f3f7;
  color: var(--uc-text-2);
}

/* 财务：提现弹窗 */
#finance .withdraw-dialog .dialog-main .el-form-item__label {
  color: #53627a;
  font-size: 12.5px;
  line-height: 1.5;
}

#finance .withdraw-dialog .dialog-main .input-select,
#finance .withdraw-dialog .dialog-main .input-select .el-input__inner {
  height: 40px;
}

/* 财务：变更支付方式弹窗 */
#finance .delete-dialog .delete-content {
  color: var(--uc-text-2);
  font-size: 13px;
}

#finance .delete-dialog .delete-btn {
  display: flex;
  gap: 10px;
}

#finance .delete-dialog .delete-btn .btn {
  height: 38px;
  line-height: 38px;
  padding: 0 16px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
}

#finance .delete-dialog .delete-btn .confirm-btn {
  background: var(--uc-primary);
  color: #fff;
}

#finance .delete-dialog .delete-btn .cancel-btn {
  background: #f0f3f7;
  color: var(--uc-text-2);
}

/* 财务：纸质合同弹窗 */
#finance .mail-dialog .dialog-dec {
  color: var(--uc-text-2);
  font-size: 13px;
  line-height: 1.7;
}

#finance .mail-dialog .fotter-left {
  color: var(--uc-text-2);
  font-size: 13px;
}

#finance .mail-dialog .el-dialog__body {
  font-size: 13px;
}

/* 财务：代金券 / 代金币已使用、已过期状态底板 */
#finance .voucher-content .price.used {
  background: #8692b0;
}

#finance .voucher-content .price.overdue {
  background: #cfd3d6;
}

/* 财务：筛选栏内部控件改为 flex，间距由 gap 统一控制 */
#finance .content_searchbar .searchbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* 跨模块：自动续费弹窗 */
.com-auto-renew .common-renew-dialog .el-dialog__body .dialog-title {
  color: #101f3c;
  font-size: 17px;
  font-weight: 600;
}

.com-auto-renew .common-renew-dialog .el-dialog__body .con {
  margin-top: 16px;
  padding: 14px 16px;
  border: 1px solid #e9eef7;
  border-radius: 12px;
  background: #fbfcfe;
}

.com-auto-renew .common-renew-dialog .el-dialog__body .con .item {
  margin-bottom: 8px;
  font-size: 13px;
}

.com-auto-renew .common-renew-dialog .el-dialog__body .con .label {
  color: #6b7a90 !important;
}

.com-auto-renew .common-renew-dialog .el-dialog__body .con .value {
  color: #44536b;
}

/* 批量操作 / 批量续费弹窗按钮文案 */
.branch-confirm-dialog .dialog-footer .el-button span,
.branch-rennew-dialog .dialog-footer .el-button span {
  font-size: 13px;
}

/* 产品详情：返现弹窗 */
.common-cashback-dialog .dialog-title {
  color: #101f3c;
  font-size: 17px !important;
  font-weight: 600;
}

.common-cashback-dialog .con {
  margin: 14px 0 18px;
  color: #44536b;
  font-size: 13px;
}

.common-cashback-dialog .dialog-footer .tip {
  color: #8a97a9;
  font-size: 12.5px;
}

/* 产品详情：购买流量包弹窗 */
.common-package-dialog .con .p-item {
  padding: 14px 10px;
  border: 1px solid #e9eef7;
  border-radius: 12px;
  background: #fff;
  font-size: 12.5px;
}

.common-package-dialog .con .p-item .flow-size {
  color: #101f3c;
  font-size: 16px;
}

.common-package-dialog .con .p-item .limit-text {
  color: #6b7a90;
  font-size: 12px;
}

.common-package-dialog .con .p-item .price {
  color: #00678A;
  font-size: 13px;
}

.common-package-dialog .con .p-item.active {
  border-color: #00678A;
  background: #f4fafb;
}

/* 产品详情：IP 防御升级弹窗底栏 */
.upgrade-dialog .footer-top {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 12px;
}

.upgrade-dialog .footer-bottom {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.upgrade-dialog .footer-top .money-text {
  color: #6b7a90;
  font-size: 13px;
}

.upgrade-dialog .footer-top .money-num {
  color: #101f3c;
  font-size: 24px;
  font-weight: 600;
}

/* 产品详情：电子合同状态页（覆盖 productdetail.css 的四类选择器） */
.product_detail .config-box .contract-box .contract-top .top-product-name {
  margin-left: 12px;
  color: var(--uc-text);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.3;
}

.product_detail .config-box .contract-box .go-contract {
  margin-top: 40px;
}

.product_detail .config-box .contract-box .go-contract .contract-img {
  width: 172px;
  height: auto;
}

.product_detail .config-box .contract-box .go-contract .contract-text {
  margin: 0;
  color: var(--uc-text-2);
  font-size: 14px;
}

.product_detail .config-box .contract-box .go-contract .contract-btn {
  width: auto;
  min-width: 132px;
  height: 38px;
  padding: 0 20px;
  border-color: var(--uc-primary);
  border-radius: 10px;
  background: var(--uc-primary);
  color: #fff;
  font-size: 13px;
}

/* 订单详情：页面 CSS 的四类选择器会反超主题 */
.order-detail .order-info .info-right .go-pay .pay-text {
  margin-top: 8px;
  color: #fff;
  font-size: 12.5px;
}

.order-detail .order-info .info-right .go-pay .pay-text:hover {
  color: #fff;
  text-decoration: none;
}

.order-detail .order-info .info-right .go-pay .pay-info {
  margin-top: 6px;
  color: var(--uc-muted);
  font-size: 12.5px;
  font-weight: 400;
}

.order-detail .order-table .title-item .des {
  color: #7b889c;
  font-size: 12px;
}

.order-detail .order-table .table-item .des-text {
  color: var(--uc-text-2);
}

/* 协议页：横向滚动收窄到正文，避免标题与元信息一起滚出卡片 */
#content.agreement .content-right {
  overflow-x: visible;
}

#content.agreement .right-content {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* 协议页：富文本元素级排版 */
#content.agreement .right-content p {
  margin: 0 0 14px;
}

#content.agreement .right-content h1,
#content.agreement .right-content h2,
#content.agreement .right-content h3,
#content.agreement .right-content h4,
#content.agreement .right-content h5,
#content.agreement .right-content h6 {
  margin: 24px 0 12px;
  color: var(--uc-text);
  font-weight: 600;
  line-height: 1.5;
}

#content.agreement .right-content h1 {
  font-size: 24px;
}

#content.agreement .right-content h2 {
  font-size: 20px;
}

#content.agreement .right-content h3 {
  font-size: 17px;
}

#content.agreement .right-content h4 {
  font-size: 15px;
}

#content.agreement .right-content h5,
#content.agreement .right-content h6 {
  font-size: 14px;
}

#content.agreement .right-content ul,
#content.agreement .right-content ol {
  margin: 0 0 14px;
  padding-left: 22px;
}

#content.agreement .right-content ul {
  list-style: disc;
}

#content.agreement .right-content ol {
  list-style: decimal;
}

#content.agreement .right-content li {
  margin-bottom: 6px;
}

#content.agreement .right-content a {
  color: var(--uc-primary);
  text-decoration: none;
}

#content.agreement .right-content a:hover {
  text-decoration: underline;
}

#content.agreement .right-content blockquote {
  margin: 0 0 16px;
  padding: 12px 16px;
  border-left: 3px solid #cfe2e8;
  border-radius: 0 10px 10px 0;
  background: #f7fafb;
  color: var(--uc-muted);
}

#content.agreement .right-content pre {
  max-width: 100%;
  margin: 0 0 16px;
  padding: 12px 14px;
  overflow-x: auto;
  border: 1px solid var(--uc-border);
  border-radius: 10px;
  background: #f7fafb;
  color: var(--uc-text-2);
  font-size: 12.5px;
  line-height: 1.7;
}

#content.agreement .right-content code {
  padding: 1px 5px;
  border-radius: 5px;
  background: #f0f4f8;
  color: #2f4058;
  font-size: 12.5px;
}

#content.agreement .right-content table {
  width: 100%;
  margin: 0 0 16px;
  border-collapse: collapse;
}

#content.agreement .right-content th,
#content.agreement .right-content td {
  padding: 10px 12px !important;
  border: 1px solid var(--uc-border) !important;
  text-align: left;
}

#content.agreement .right-content th {
  background: #f7fafb;
  color: var(--uc-text);
  font-weight: 600;
}

@media (max-width: 750px) {
  /* 固定头部让位统一用 --uc-header-h（真实顶栏高度），不再按 1rem 估算 */
  .el-container:nth-child(2) > .el-main {
    margin-top: 0;
    padding-top: calc(var(--uc-header-h, 40px) + 16px);
    padding-bottom: 20px;
  }

  /* common.css 的旧 rem 外边距会把标签推下 25px 以上 */
  .el-tabs__item {
    margin-top: 0;
    margin-bottom: 0;
  }

  /* 分页允许换行，避免整行撑出白卡 */
  .myPage .el-pagination {
    flex-wrap: wrap;
    row-gap: 6px;
  }

  /* 日期范围面板按视口宽度纵向堆叠两个月 */
  .el-date-range-picker {
    width: calc(100vw - 16px) !important;
  }

  .el-date-range-picker .el-picker-panel__body {
    min-width: 0 !important;
  }

  .el-date-range-picker__content {
    float: none !important;
    width: 100% !important;
    border-right: 0 !important;
  }

  .el-date-range-picker__content.is-left {
    border-bottom: 1px solid var(--uc-border) !important;
  }

  /* 订单筛选栏与余额筛选栏的控件统一铺满 */
  #finance .content_searchbar :is(.box, .searchbar) .el-date-editor,
  #finance .content_searchbar :is(.box, .searchbar) .el-select,
  #finance .content_searchbar :is(.box, .searchbar) .el-input {
    width: 100% !important;
    margin: 0 0 8px !important;
  }

  /* 变更支付方式弹窗的两个按钮都占满一行 */
  #finance .delete-dialog .delete-btn .confirm-btn {
    width: 100%;
    margin-left: 0;
  }

  /* 提现记录分页：隐藏跳页器，缩小页码间距 */
  .main-card .withdrawal-content {
    overflow-x: auto;
  }

  .main-card .withdrawal-content .el-pagination {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 6px;
  }

  .main-card .withdrawal-content .el-pagination__jump {
    display: none;
  }

  .main-card .withdrawal-content .el-pager li {
    margin: 0 1px;
  }

  /* 弹窗与安全验证的移动端尺寸 */
  .main-card .create-api-dialog .dia-tit {
    margin-bottom: 14px;
    font-size: 16px;
  }

  .security-dialog .security-title {
    padding: 14px 16px;
  }

  .security-dialog .security-title .title-text {
    font-size: 16px;
  }

  .security-dialog .security-content {
    padding: 14px 16px;
  }

  .security-dialog .security-footer {
    padding: 12px 16px;
  }

  .com-auto-renew .common-renew-dialog .el-dialog__body .dialog-title {
    font-size: 16px;
  }

  .common-cashback-dialog .dialog-title {
    font-size: 16px !important;
  }

  /* 电子合同状态页 */
  .product_detail .config-box .contract-box .contract-top .top-product-name {
    font-size: 20px;
  }

  .product_detail .config-box .contract-box .go-contract {
    margin-top: 28px;
  }

  .product_detail .config-box .contract-box .go-contract .contract-img {
    width: 140px;
  }
}

/* ==========================================================================
   23. 产品详情 · 指标仪表盘（D 方案）
   配置信息改为指标卡网格，支付信息改为右侧信息卡，
   标签栏与管理动作合并为一张大白卡，动作排成带序号的双列清单。
   详情内容由后端注入 .config-box > .content，这里全部用 CSS 覆盖。
   ========================================================================== */

/* —— 页面骨架：去掉旧版外包白卡，改为画布 + 分区白卡 —— */
.product_detail .config-box > .content {
  min-height: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.product_detail .config-box > .content .main-card {
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.product_detail .config-box > .content .card-top {
  padding: 0 !important;
  background: transparent !important;
}

/* —— 顶部概览 —— */
/* 插件在 750px 断点把概览块写死成 650px，这里强制随容器收缩 */
.product_detail .config-box > .content .top-operation {
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 22px 26px !important;
  border: 1px solid var(--uc-border);
  border-radius: var(--uc-radius);
  background: #fff;
  box-shadow: var(--uc-shadow);
}

.product_detail .config-box > .content .operation-row1,
.product_detail .config-box > .content .operation-row2,
.product_detail .config-box > .content .operation-row3 {
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.product_detail .config-box > .content .operation-row1 {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.product_detail .config-box > .content .operation-row1 .back-img {
  width: 22px !important;
  height: 22px !important;
  margin: 0 2px 0 0 !important;
  flex: none;
}

.product_detail .config-box > .content .operation-row1 .top-product-name {
  margin: 0;
  color: var(--uc-text) !important;
  font-size: 26px !important;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.2px;
}

.product_detail .config-box > .content .operation-row1 .host-status {
  width: auto !important;
  min-width: 0 !important;
  height: 24px !important;
  margin: 0 0 0 4px !important;
  padding: 0 10px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 500;
  letter-spacing: 0.2px;
  line-height: 24px;
  cursor: pointer;
}

.product_detail .config-box > .content .operation-row1 .host-status.Active {
  color: #04805D !important;
  background: #E8F5F0 !important;
}

.product_detail .config-box > .content .operation-row1 .host-status.Pending {
  color: #00678A !important;
  background: #E6F0F3 !important;
}

.product_detail .config-box > .content .operation-row1 .host-status.Suspended {
  color: #B7791F !important;
  background: #FBF3E4 !important;
}

.product_detail .config-box > .content .operation-row1 .host-status.Unpaid {
  color: #E5484D !important;
  background: #FDECEC !important;
}

.product_detail .config-box > .content .operation-row1 .host-status.Deleted {
  color: #8A97AD !important;
  background: #F2F4F8 !important;
}

.product_detail .config-box > .content .operation-row1 .top-area {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: #F4F7FA;
  font-size: 12px;
}

.product_detail .config-box > .content .operation-row1 .top-area .country-img {
  width: 18px !important;
  height: 12px !important;
  margin: 0 !important;
  border-radius: 2px;
}

.product_detail .config-box > .content .operation-row1 .top-area .country,
.product_detail .config-box > .content .operation-row1 .top-area .city,
.product_detail .config-box > .content .operation-row1 .top-area .area {
  font-size: 12px !important;
  color: var(--uc-text-2) !important;
}

/* 第二行：ID / IP / 操作 */
.product_detail .config-box > .content .operation-row2 {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 16px;
  margin-top: 14px;
  padding: 0 !important;
}

.product_detail .config-box > .content .operation-row2 .row2-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.product_detail .config-box > .content .operation-row2 .row2-left .name,
.product_detail .config-box > .content .operation-row2 .row2-left .ip {
  margin: 0 !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px !important;
  color: var(--uc-muted) !important;
}

.product_detail .config-box > .content .operation-row2 .row2-left .name {
  padding: 0 12px 0 0 !important;
  border: 0 !important;
  border-right: 1px solid #E6EDF5 !important;
}

.product_detail .config-box > .content .operation-row2 .row2-left .ip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--uc-text-2) !important;
}

.product_detail .config-box > .content .operation-row2 .row2-left .ip .el-icon-document-copy {
  color: var(--uc-muted);
  cursor: pointer;
  transition: color 0.2s ease;
}

.product_detail .config-box > .content .operation-row2 .row2-left .ip .el-icon-document-copy:hover {
  color: var(--uc-primary);
}

.product_detail .config-box > .content .operation-row2 .row2-left .all-ip {
  height: 22px;
  margin: 0 !important;
  padding: 0 8px !important;
  border-radius: 6px;
  background: #E6F0F3 !important;
  color: var(--uc-primary) !important;
  font-size: 12px !important;
  line-height: 22px;
}

.product_detail .config-box > .content .operation-row2 .row2-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* 退订按钮：不同版本的外层类名不一致（不一定有 .operation-row2 .row2-right），
   这里直接按 .refund-btn 命中，并显式做水平+垂直居中，
   否则 flex 默认 flex-start 会让文字贴左上角 */
.product_detail .config-box > .content .refund-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  width: auto !important;
  min-width: 0 !important;
  height: 34px !important;
  margin: 0 !important;
  padding: 0 18px !important;
  border: 1px solid #DCE5EF !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: var(--uc-text-2) !important;
  font-size: 13px !important;
  line-height: 1 !important;
  text-align: center !important;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.product_detail .config-box > .content .refund-btn:hover {
  border-color: var(--uc-primary) !important;
  background: #F7FAFB !important;
  color: var(--uc-primary) !important;
}

.product_detail .config-box > .content .operation-row2 .row2-right .refund-stop-btn {
  margin: 0 !important;
  color: var(--uc-primary) !important;
  font-size: 12px !important;
}

.product_detail .config-box > .content .operation-row2 .row2-right .on-off {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin: 0 !important;
  border-radius: 50%;
  background: #F4F7FA;
}

.product_detail .config-box > .content .operation-row2 .row2-right .on-off img {
  width: 20px !important;
  height: 20px !important;
}

.product_detail .config-box > .content .operation-row2 .row2-right .fault {
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
}

.product_detail .config-box > .content .operation-row2 .row2-right .info-box {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 12px;
  color: var(--uc-muted);
}

.product_detail .config-box > .content .operation-row2 .row2-right .info-box .green-div {
  width: 88px !important;
  height: 6px !important;
  margin-right: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: #EDF1F6 !important;
}

.product_detail .config-box > .content .operation-row2 .row2-right .info-box .percentage-div {
  border-radius: 999px;
  background: var(--uc-primary) !important;
}

/* 第三行：备注 */
.product_detail .config-box > .content .operation-row3 {
  margin-top: 12px;
  padding: 0 !important;
  font-size: 12px;
}

.product_detail .config-box > .content .operation-row3 .no-notes {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border: 1px dashed #D3DEEA;
  border-radius: 8px;
  background: #fff;
  color: var(--uc-muted) !important;
  font-size: 12px !important;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.product_detail .config-box > .content .operation-row3 .no-notes:hover {
  border-color: var(--uc-primary);
  background: #F7FAFB;
  color: var(--uc-primary) !important;
}

.product_detail .config-box > .content .operation-row3 .yes-notes {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  height: 26px;
  padding: 0 10px;
  border-radius: 8px;
  background: #F4F7FA;
  font-size: 12px !important;
}

.product_detail .config-box > .content .operation-row3 .yes-notes .notes-icon {
  color: var(--uc-primary) !important;
}

.product_detail .config-box > .content .operation-row3 .yes-notes .notes-text {
  color: var(--uc-text-2) !important;
}

.product_detail .config-box > .content .refund-msg {
  justify-content: flex-start !important;
  margin-top: 12px !important;
  font-size: 12px;
  color: var(--uc-muted);
}

.product_detail .config-box > .content .refund-msg .reason-text {
  color: var(--uc-primary);
  cursor: pointer;
}

/* —— 配置信息 / 支付信息 —— */
.product_detail .config-box > .content .top-msg {
  display: grid !important;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: 16px;
  justify-content: normal !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin-top: 16px !important;
}

.product_detail .config-box > .content .top-msg .msg-l,
.product_detail .config-box > .content .top-msg .msg-r {
  /* 必须 border-box + width:100%：
     这两个块默认 content-box，宽度 100% 时 padding 会额外叠加，
     实测 460px 的卡片里被撑成 495px，右侧指标卡就溢出被切 */
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden;
  padding: 22px 24px !important;
  border: 1px solid var(--uc-border) !important;
  border-radius: var(--uc-radius) !important;
  background: #fff !important;
  box-shadow: var(--uc-shadow);
}

.product_detail .config-box > .content .main-card,
.product_detail .config-box > .content .card-top {
  box-sizing: border-box !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.product_detail .config-box > .content .top-msg .msg-l .l-t,
.product_detail .config-box > .content .top-msg .msg-r .r-t {
  align-items: center;
  margin-top: 0 !important;
}

.product_detail .config-box > .content .top-msg .l-t-l-text,
.product_detail .config-box > .content .top-msg .r-t-l-text {
  color: var(--uc-text) !important;
  font-size: 15px !important;
  font-weight: 600;
  letter-spacing: 0.2px;
}

.product_detail .config-box > .content .top-msg .l-t-l-text::before,
.product_detail .config-box > .content .top-msg .r-t-l-text::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 14px;
  margin-right: 8px;
  border-radius: 2px;
  background: var(--uc-primary);
  vertical-align: -2px;
}

/* 配置项 → 指标卡
   线上 v10.7.x 的真实结构是 .l-b > .row > .label + .value > p.over-text，
   不是旧模板的 .info-item。旧写法一个元素都匹配不到，所以此前完全没生效。
   另外 .row 在网格列里不会自动撑满：它会按「标签 64px + 值 0px」收缩成 74px，
   值再被 overflow:hidden 裁掉（表现为值空白、但能选中、能复制），
   所以这里必须给 .row 显式 width:100%。 */
.product_detail .config-box > .content .l-b {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin-top: 18px !important;
  padding-bottom: 0 !important;
}

.product_detail .config-box > .content .l-b > .row {
  display: flex !important;
  flex-wrap: wrap !important;
  flex-direction: row !important;
  align-items: center !important;
  align-content: center;
  justify-content: flex-start;
  justify-self: stretch !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 64px;
  margin: 0 !important;
  padding: 10px 14px !important;
  border: 1px solid var(--uc-line) !important;
  border-radius: 12px;
  background: #FAFBFD;
}

/* 标签独占一行：flex-basis 100% 强制换行 */
.product_detail .config-box > .content .l-b > .row > .label {
  flex: 0 0 100% !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 0 4px !important;
  color: #8A97AD !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
  text-align: left;
}

/* 值 + 图标同处第二行；密码行的眼睛/复制图标是 .row 的直接子元素，
   不能给 .row 设 align-items:stretch，否则 <img> 会被拉满整格 */
.product_detail .config-box > .content .l-b > .row > img,
.product_detail .config-box > .content .l-b > .row > .eyes,
.product_detail .config-box > .content .l-b > .row > i {
  flex: 0 0 auto !important;
  box-sizing: content-box !important;
  width: 16px !important;
  min-width: 16px !important;
  max-width: 16px !important;
  height: 16px !important;
  max-height: 16px !important;
  margin: 0 0 0 6px !important;
  padding: 0 !important;
  object-fit: contain;
  vertical-align: -3px;
  cursor: pointer;
}

.product_detail .config-box > .content .l-b > .row > .value {
  display: block !important;
  flex: 1 1 auto !important;
  box-sizing: border-box !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  color: var(--uc-text) !important;
  font-size: 14.5px !important;
  font-weight: 600;
  line-height: 1.45 !important;
  overflow: hidden;
}

.product_detail .config-box > .content .l-b > .row > .value .over-text {
  display: block !important;
  box-sizing: border-box !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  color: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.product_detail .config-box > .content .l-b > .row > .value .eyes {
  width: 14px;
  height: 14px;
  margin-left: 4px;
  vertical-align: -2px;
  cursor: pointer;
}

/* 若某些版本把眼睛图标放在 .value 内部，也一并限死尺寸 */
.product_detail .config-box > .content .l-b > .row > .value img {
  display: inline-block !important;
  width: 14px !important;
  min-width: 0 !important;
  max-width: 14px !important;
  height: 14px !important;
  max-height: 14px !important;
  margin: 0 0 0 6px !important;
  object-fit: contain;
  vertical-align: -2px;
  cursor: pointer;
}

.product_detail .config-box > .content .l-b > .row > .value .el-icon-document-copy {
  margin-left: 4px;
  color: var(--uc-primary) !important;
  font-size: 13px;
  cursor: pointer;
}

/* 支付信息 */
.product_detail .config-box > .content .top-msg .msg-r .r-t .r-t-l {
  width: auto !important;
}

.product_detail .config-box > .content .top-msg .msg-r .r-t .r-t-l .common-cashback {
  margin-left: 10px;
  color: var(--uc-primary);
  font-size: 12px;
  cursor: pointer;
}

.product_detail .config-box > .content .top-msg .msg-r .r-t .r-t-r {
  width: auto !important;
  padding-left: 0 !important;
  gap: 8px;
  color: var(--uc-muted) !important;
  font-size: 12px !important;
}

.product_detail .config-box > .content .top-msg .msg-r .r-t .r-t-r .help {
  width: 14px;
  height: 14px;
  border-color: #D3DEEA !important;
  color: var(--uc-muted) !important;
  font-size: 11px;
}

.product_detail .config-box > .content .top-msg .msg-r .r-t .r-t-r .el-switch.is-checked .el-switch__core {
  border-color: var(--uc-primary) !important;
  background-color: var(--uc-primary) !important;
}

.product_detail .config-box > .content .top-msg .msg-r .r-b {
  margin-top: 18px !important;
}

.product_detail .config-box > .content .top-msg .msg-r .r-b .row {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
  margin: 0 0 12px !important;
}

.product_detail .config-box > .content .top-msg .msg-r .r-b .row:last-child {
  margin-bottom: 0 !important;
}

.product_detail .config-box > .content .top-msg .msg-r .r-b .row .row-l,
.product_detail .config-box > .content .top-msg .msg-r .r-b .row .row-r {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  width: auto !important;
}

.product_detail .config-box > .content .top-msg .msg-r .r-b .label {
  width: auto !important;
  color: #8A97AD !important;
  font-size: 12px !important;
  line-height: 1.4;
  text-align: left;
}

.product_detail .config-box > .content .top-msg .msg-r .r-b .value {
  margin-left: 0 !important;
  color: var(--uc-text) !important;
  font-size: 13.5px !important;
  font-weight: 600;
  line-height: 1.4;
}

.product_detail .config-box > .content .top-msg .msg-r .r-b .value.red {
  color: var(--uc-danger) !important;
}

.product_detail .config-box > .content .top-msg .msg-r .r-b .renew-btn {
  display: inline-flex;
  align-items: center;
  height: 26px;
  margin: 6px 0 0 !important;
  padding: 0 12px !important;
  border-radius: 8px;
  background: var(--uc-primary) !important;
  color: #fff !important;
  font-size: 12px !important;
  cursor: pointer;
  transition: background 0.2s ease;
}

.product_detail .config-box > .content .top-msg .msg-r .r-b .renew-btn:hover {
  background: var(--uc-primary-hover) !important;
}

.product_detail .config-box > .content .top-msg .msg-r .r-b .renew-btn-disable {
  margin: 6px 0 0 !important;
  border-radius: 8px;
  background: #F1F4F8 !important;
  color: #9AA8BA !important;
}

/* —— 标签栏 + 管理动作：合并为同一张大白卡 —— */
.product_detail .config-box > .content .tabs {
  width: auto !important;
  max-width: 100% !important;
  margin-top: 20px !important;
  padding: 0 !important;
  border: 1px solid var(--uc-border);
  border-radius: var(--uc-radius);
  background: #fff;
  box-shadow: var(--uc-shadow);
  overflow: hidden;
}

.product_detail .config-box > .content .tabs .el-tabs__header {
  margin: 0 !important;
  padding: 0 24px;
  border: 0;
  border-bottom: 1px solid var(--uc-border);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}

.product_detail .config-box > .content .tabs .el-tabs__content {
  padding: 6px 24px 14px;
  overflow: visible;
}

.product_detail .config-box > .content .tabs .el-tabs__nav-wrap::after {
  display: none !important;
}

.product_detail .config-box > .content .tabs .el-tabs__item {
  height: 50px !important;
  line-height: 50px !important;
  padding: 0 18px !important;
  font-size: 13.5px !important;
}

.product_detail .config-box > .content .tabs .el-tabs__active-bar {
  height: 2px !important;
  border-radius: 2px 2px 0 0;
}

/* —— 管理动作 → 大卡内的双列动作清单 —— */
/* .el-row 用 display:contents 拆掉，让所有动作排进同一个网格，
   否则每组 3 个会在双列里留下空位（03 单独一行） */
.product_detail .config-box > .content .manage-content {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: 16px !important;
  row-gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  counter-reset: ucmi;
}

.product_detail .config-box > .content .manage-content .el-row {
  display: contents !important;
}

.product_detail .config-box > .content .manage-content .el-row::before,
.product_detail .config-box > .content .manage-content .el-row::after {
  display: none !important;
  content: none !important;
}

.product_detail .config-box > .content .manage-content .el-col {
  float: none !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* cloudDetail.css 给 .manage-item 留了 min-height:125px / margin-bottom:40px /
   padding-top:30px，不全部接管就会出现「每行之间空一大截」的观感 */
.product_detail .config-box > .content .manage-content .manage-item {
  position: relative;
  display: flex !important;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100%;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 15px 18px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: #FAFBFD !important;
  box-shadow: none;
  overflow: visible !important;
  counter-increment: ucmi;
  transition: background 0.18s ease;
}

/* 序号：卡内小徽标 */
.product_detail .config-box > .content .manage-content .manage-item::before {
  content: counter(ucmi, decimal-leading-zero);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #fff;
  box-shadow: inset 0 0 0 1px #E7EFF5;
  color: var(--uc-primary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.5px;
  font-variant-numeric: tabular-nums;
}

.product_detail .config-box > .content .manage-content .manage-item:hover {
  background: #F3F7FA !important;
}

/* 说明文字在中间，动作按钮靠右 */
.product_detail .config-box > .content .manage-content .manage-item .item-bottom {
  order: 2;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 !important;
  padding-right: 10px;
  color: var(--uc-text-2) !important;
  font-size: 12.5px !important;
  line-height: 1.65;
  overflow: visible;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.product_detail .config-box > .content .manage-content .manage-item .item-bottom .bottom-row + .bottom-row {
  margin-top: 1px;
  color: var(--uc-muted);
}

.product_detail .config-box > .content .manage-content .manage-item .item-top {
  order: 3;
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  flex-wrap: nowrap;
  gap: 8px;
  min-width: 0;
  margin-left: 4px;
}

.product_detail .config-box > .content .manage-content .manage-item .item-top .el-select {
  width: 118px !important;
}

.product_detail .config-box > .content .manage-content .manage-item .item-top .el-select .el-input__inner {
  height: 32px;
  border-radius: 9px;
  font-size: 12.5px;
}

.product_detail .config-box > .content .manage-content .manage-item .item-top-btn {
  order: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
  width: auto !important;
  min-width: 82px !important;
  max-width: none !important;
  height: 32px !important;
  margin: 0 0 0 4px !important;
  padding: 0 14px !important;
  border-radius: 9px;
  background: #F2F7F9 !important;
  color: var(--uc-primary) !important;
  font-size: 12.5px !important;
  font-weight: 500;
  line-height: 32px;
  white-space: nowrap;
  overflow: visible !important;
  text-overflow: clip !important;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.product_detail .config-box > .content .manage-content .manage-item .item-top .item-top-btn {
  margin-left: 0 !important;
}

.product_detail .config-box > .content .manage-content .manage-item .item-top-btn:hover {
  background: var(--uc-primary) !important;
  color: #fff !important;
}

.product_detail .config-box > .content .manage-content .manage-item .item-top-btn[style*="not-allowed"],
.product_detail .config-box > .content .manage-content .manage-item .item-top-btn[style*="not-allowed"]:hover {
  background: #F4F6F9 !important;
  color: #A9B5C4 !important;
  cursor: not-allowed !important;
}

/* —— 其它标签页的公共收口 —— */
.product_detail .config-box > .content .el-tab-pane .time-select {
  margin-top: 0 !important;
  width: 160px;
}

.product_detail .config-box > .content .el-tab-pane .echart-main .my-echart {
  border: 1px solid var(--uc-border);
  border-radius: var(--uc-radius);
  background: #fff;
  box-shadow: var(--uc-shadow);
}

.product_detail .config-box > .content .el-tab-pane .main-table,
.product_detail .config-box > .content .el-tab-pane .main_table {
  border-radius: 12px;
  background: #fff;
}

.product_detail .config-box > .content .el-tab-pane .no-disk,
.product_detail .config-box > .content .el-tab-pane .no-bs {
  padding: 44px 24px;
  border: 1px dashed #DCE5EF;
  border-radius: var(--uc-radius);
  background: #fff;
  text-align: center;
}

/* —— 响应式 —— */
@media (max-width: 1440px) {
  .product_detail .config-box > .content .l-b {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 1200px) {
  /* 用 minmax(0, 1fr) 而不是 1fr：1fr 的最小值是 auto，
     配置区内容一宽就会把网格撑出容器（实测列宽 494px > 容器 460px） */
  .product_detail .config-box > .content .top-msg {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (max-width: 1200px) {
  .product_detail .config-box > .content .manage-content {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 750px) {
  .product_detail .config-box > .content .top-operation {
    padding: 18px !important;
  }

  .product_detail .config-box > .content .operation-row1 {
    gap: 8px;
  }

  .product_detail .config-box > .content .operation-row1 .top-product-name {
    font-size: 20px !important;
  }

  .product_detail .config-box > .content .operation-row2 {
    flex-direction: column;
    align-items: flex-start;
  }

  .product_detail .config-box > .content .top-msg {
    gap: 12px;
  }

  .product_detail .config-box > .content .top-msg .msg-l,
  .product_detail .config-box > .content .top-msg .msg-r {
    padding: 18px !important;
  }

  .product_detail .config-box > .content .l-b {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .product_detail .config-box > .content .top-msg .msg-r .r-b .row {
    grid-template-columns: 1fr;
  }

  .product_detail .config-box > .content .tabs .el-tabs__header {
    padding: 0 12px;
  }

  .product_detail .config-box > .content .tabs .el-tabs__content {
    padding: 4px 14px 10px;
  }

  .product_detail .config-box > .content .tabs .el-tabs__item {
    height: 44px !important;
    line-height: 44px !important;
    padding: 0 12px !important;
    font-size: 13px !important;
  }

  .product_detail .config-box > .content .manage-content {
    grid-template-columns: 1fr !important;
  }

  /* 窄屏：序号 + 说明一行，动作可折到下一行并右对齐 */
  .product_detail .config-box > .content .manage-content .manage-item {
    flex-wrap: wrap;
    row-gap: 8px;
    padding: 14px 14px !important;
  }

  .product_detail .config-box > .content .manage-content .manage-item .item-top {
    margin-left: auto;
  }

  .product_detail .config-box > .content .manage-content .manage-item .item-bottom {
    flex: 1 1 120px;
    padding-right: 6px;
  }
}

/* 手机：动作控件折到下一行右对齐，避免挤压说明 */
@media (max-width: 560px) {
  .product_detail .config-box > .content .manage-content .manage-item {
    flex-wrap: wrap !important;
  }

  .product_detail .config-box > .content .manage-content .manage-item .item-top {
    flex: 1 1 100% !important;
    justify-content: flex-end;
    margin-left: 0 !important;
  }
}