/* ===================================================================
   account.css — 账户设置页 Spike 主题样式（新布局）
   =================================================================== */

/* ===================================================================
   一、顶部英雄卡片
   =================================================================== */
.account-hero {
  background: var(--color-card-bg);
  border-radius: var(--spike-radius);
  box-shadow: var(--shadow-card);
  padding: 9px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.hero-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.hero-avatar {
  width: 56px;
  height: 56px;
  border-radius: var(--spike-circle);
  background: var(--color-primary);
  color: var(--spike-primary-text);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  flex-shrink: 0;
  text-transform: uppercase;
}

.hero-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  line-height: 1.4;
}

.hero-level {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid currentColor;
  border-radius: var(--spike-radius);
  line-height: 1;
}

.hero-meta {
  margin-top: 6px;
  display: flex;
  align-items: center;
}

.country-img {
  height: 18px;
  width: 28px;
  object-fit: cover;
  border-radius: var(--spike-radius);
}

/* ===== 认证状态区（右侧）===== */
.hero-cert {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: var(--spike-radius);
  /*background: var(--color-bg-light);*/
  transition: background 0.2s;
  flex-shrink: 0;
}

.hero-cert:hover {
  background: var(--color-primary-light);
}

.cert-icon-img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.cert-text {
  font-size: 13px;
  color: var(--color-text-secondary);
}

.bule-text {
  color: var(--color-primary) !important;
}
.bule-text .el-icon-arrow-right {
  margin-left: 4px;
}

/* ===================================================================
   二、Tab 导航（覆盖 el-tabs 为 Spike 风格）
   =================================================================== */
.account-tabs-wrapper .el-tabs__header {
  margin: 0 0 20px !important;
  /*border-bottom: 1px solid var(--color-border) !important;*/
}

.account-tabs-wrapper .el-tabs__nav-wrap::after {
  display: none !important;
}

.account-tabs-wrapper .el-tabs__nav {
  border: none !important;
  height: auto !important;
}

.account-tabs-wrapper .el-tabs__item {
  height: 44px !important;
  line-height: 44px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #111c2d !important;
  padding: 0 20px !important;
  border: none !important;
  border-radius: var(--spike-checkbox-radius) !important;
  transition: color 0.2s !important;
}

.account-tabs-wrapper .el-tabs__item:hover {
  color: var(--color-primary) !important;
}

.account-tabs-wrapper .el-tabs__item.is-active {
  color: var(--color-primary) !important;
  font-weight: 600 !important;
}

.account-tabs-wrapper .el-tabs__active-bar {
  background-color: var(--color-primary) !important;
  height: 2px !important;
  border-radius: var(--spike-checkbox-radius) !important;
}

.account-tabs-wrapper .el-tabs__content {
  overflow: visible !important;
}

/* ===================================================================
   三、表单卡片
   =================================================================== */
.form-card {
  background: var(--color-card-bg);
  border-radius: var(--spike-radius);
  box-shadow: var(--shadow-card);
  padding: 24px 28px;
  margin-bottom: 16px;
}

.form-card-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-primary);
  /*border-left: 3px solid var(--color-primary);*/
  /*padding-left: 10px;*/
  margin-bottom: 20px;
  line-height: 1.4;
}

/* ===== 3 列表单网格 ===== */
.form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 24px;
}

.field-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field-label {
  font-size: 14px;
  font-weight: 500;
  color: #2a3547;
}

/* ===================================================================
   四、表单控件覆盖（scoped to .form-card）
   =================================================================== */

/* 输入框 */
.form-card .el-input__inner {
  height: 44px !important;
  line-height: 44px !important;
  padding: 0 16px !important;
  border-radius: var(--spike-radius) !important;
  border-color: rgb(229, 234, 239) !important;
  background: #fff !important;
  font-size: 14px;
  color: #2a3547;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.form-card .el-input__inner:hover {
  border-color: rgb(200, 208, 220) !important;
}

.form-card .el-input__inner:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--spike-primary-rgb), 0.12) !important;
  background: #fff !important;
}

/* Select 撑满列宽 */
.form-card .el-select,
.form-grid .el-select {
  width: 100%;
}

/* 只读输入（账户信息）*/
.form-card .el-input.is-disabled .el-input__inner {
  background: var(--color-bg-light) !important;
  color: var(--color-text-secondary) !important;
  cursor: default;
}

/* el-form-item 消除内边距 */
.form-card .el-form-item {
  margin-bottom: 0;
}
.form-card .el-form-item__content {
  margin-left: 0 !important;
}

/* ===== Checkbox Spike 样式 ===== */
.form-card .el-checkbox__inner,
.notice-field .el-checkbox__inner {
  width: 18px !important;
  height: 18px !important;
  border-radius: var(--spike-radius) !important;
  border-color: var(--color-border) !important;
  background: var(--color-bg-light) !important;
  transition: all 0.15s;
}

.form-card .el-checkbox__input.is-checked .el-checkbox__inner,
.notice-field .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

.form-card .el-checkbox__inner::after,
.notice-field .el-checkbox__inner::after {
  width: 5px !important;
  height: 9px !important;
  left: 5px !important;
  top: 2px !important;
}

.form-card .el-checkbox__label {
  font-size: 14px;
  color: #2a3547;
  font-weight: 500;
}

/* 修复选中态 label 颜色（覆盖 Element UI 默认主色）*/
.form-card .el-checkbox__input.is-checked + .el-checkbox__label,
.notice-field .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #2a3547 !important;
}

/* ===================================================================
   五、通知设置（checkbox + 通知方式）
   =================================================================== */
.notice-field {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px dashed var(--color-border);
}

.notice-desc {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin: 4px 0 0 26px;
  line-height: 1.5;
}

.notice-method {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ===================================================================
   六、编辑图标
   =================================================================== */
.el-input__suffix {
  display: flex;
  align-items: center;
}

.edit-icon {
  cursor: pointer;
  padding: 8px;
  color: var(--color-text-secondary);
  border-radius: var(--spike-radius);
  transition:
    background 0.2s,
    color 0.2s;
}

.edit-icon:hover {
  background: var(--color-hover);
  color: var(--color-primary);
}

/* ===================================================================
   七、自定义字段网格
   =================================================================== */
.custom-grid {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed var(--color-border);
}

/* ===================================================================
   八、三方登录卡片（field-item 垂直布局，复用 form-grid）
   =================================================================== */
.oauth-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px 24px;
}

.oauth-input {
  width: 100%;
}

.wx-notice {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px dashed var(--color-border);
}

/* ===================================================================
   九、保存按钮
   =================================================================== */
.btn-save {
  /*height: 44px;*/
  /*padding: 0 32px !important;*/
  margin-top: 4px;
  background: var(--color-primary) !important;
  border: none !important;
  border-radius: var(--spike-radius) !important;
  color: var(--spike-primary-text) !important;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-family);
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background 0.2s,
    box-shadow 0.2s;
}

.btn-save:hover {
  background: var(--spike-primary) !important;
  box-shadow: 0 4px 12px rgba(var(--spike-primary-rgb), 0.35) !important;
}

/* ===================================================================
   十、列表卡片（搜索栏 + 表格，与 Spike UI 统一）
   =================================================================== */
.list-card {
  background: var(--color-card-bg);
  border-radius: var(--spike-radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.tab-search-bar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 16px 24px;
  flex-wrap: wrap;
}

.tab-search-bar.msg-search {
  justify-content: space-between;
}

.msgsearch-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.msgsearch-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.msgsearch-right .el-select {
  width: 180px;
}

/* 工具栏内所有控件统一高度 36px */
.tab-search-bar .el-button {
  height: 36px !important;
  line-height: 36px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.tab-search-bar .el-input__inner,
.tab-search-bar .el-select .el-input__inner {
  height: 36px !important;
  line-height: 36px !important;
}

/* ===================================================================
   十一、列表卡片内表格优化
   =================================================================== */

/* 表头：白底 + 大写 */
.list-card .el-table th.el-table__cell {
  background-color: transparent !important;
  color: #000000de !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 12px 16px !important;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--color-border) !important;
}

/* 数据行 */
.list-card .el-table td.el-table__cell {
  padding: 16px !important;
  color: #000000de !important;
  font-size: 14px !important;
}

/* hover 行 */
.list-card .el-table__row:hover > td.el-table__cell {
  background-color: rgba(246, 249, 252, 0.8) !important;
}

/* 单元格不折行（防 IP 换行）*/
.list-card .el-table .cell {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* el-table 撑满容器，防底线偏短 */
.list-card .el-table {
  width: 100% !important;
}

/* 复选框列 padding 清零，确保表头与数据行勾选框对齐 */
.list-card .el-table .el-table-column--selection {
  padding: 0 !important;
  text-align: center !important;
}

/* 去掉 el-table 外框伪元素底线 */
.list-card .el-table::before,
.list-card .el-table--border::after {
  display: none !important;
}

/* 最后一行去掉 border-bottom（防止 overflow:hidden+圆角裁出短线）*/
.list-card .el-table__body tr:last-child td.el-table__cell {
  border-bottom: none !important;
}

/* ===== 表格内 Checkbox Spike 风格 ===== */
.list-card .el-table .el-checkbox__inner {
  width: 18px !important;
  height: 18px !important;
  border-radius: var(--spike-radius) !important;
  border: 1.5px solid #d0d7de !important;
  background-color: #fff !important;
  transition: all 0.15s;
}

.list-card .el-table .el-checkbox__input.is-checked .el-checkbox__inner,
.list-card .el-table .el-checkbox__input.is-indeterminate .el-checkbox__inner {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

.list-card .el-table .el-checkbox__inner::after {
  width: 5px !important;
  height: 9px !important;
  left: 5px !important;
  top: 1px !important;
}

.list-card .el-table .el-checkbox__input.is-checked + .el-checkbox__label {
  color: var(--color-primary) !important;
}

/* 搜索图标：放大 + 加深 */
.list-card .tab-search-bar .input-search {
  font-size: 18px !important;
  color: #4a5568 !important;
  cursor: pointer;
}

/* prefix 插槽内容垂直居中 */
.list-card .tab-search-bar .el-input__prefix {
  display: flex;
  align-items: center;
  padding-left: 4px;
}

/* ===================================================================
   十二、站内信消息状态徽章（已读 / 未读）
   =================================================================== */
.msg-status {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--spike-radius);
  font-size: 12px;
  font-weight: 600;
  margin-right: 6px;
  vertical-align: middle;
}

.is-read {
  background-color: #f0f2f5;
  color: #8a9099;
}

.no-read {
  background-color: var(--color-primary-light);
  color: var(--color-primary);
}

/* 消息标题链接 */
.a-text {
  cursor: pointer;
  color: #2a3547;
  transition: color 0.2s;
  vertical-align: middle;
}

.a-text:hover {
  color: var(--color-primary);
}

/* ===================================================================
   十三、弹窗相关样式（不变，保持兼容）
   =================================================================== */
.mian-form {
  margin-top: 16px;
}

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

.code-btn {
  flex-shrink: 0;
  min-width: 100px;
  height: 44px;
  padding: 0 14px;
  background: var(--color-primary-light);
  border-radius: var(--spike-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.code-btn:hover {
  background: rgba(var(--spike-primary-rgb), 0.2);
}

.select-input {
  width: auto !important;
}

.forget-pass {
  display: flex;
  justify-content: flex-end;
  font-size: 13px;
  margin-top: 4px;
}

.forget-pass > a {
  color: var(--color-primary);
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s;
}

.forget-pass > a:hover {
  opacity: 0.8;
}

.login-top {
  display: flex;
  gap: 24px;
  margin-top: 16px;
}

.login-email,
.login-phone {
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid transparent;
  transition:
    color 0.2s,
    border-color 0.2s;
}

.login-email.active,
.login-phone.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

.form-main {
  margin-top: 16px;
}
.form-item {
  margin-top: 16px;
}
.code-item {
  display: flex;
  gap: 8px;
}
.read-item {
  margin-top: 12px;
  font-size: 13px;
}
.read-item a {
  color: var(--color-primary);
  cursor: pointer;
}

.input-with-select .el-input-group__prepend {
  width: 70px;
  background: var(--color-bg-light) !important;
  border-color: var(--color-input-border) !important;
}

.code-pass-select {
  width: auto;
  background: var(--color-bg-light);
}

/* ===================================================================
   十三、杂项修正
   =================================================================== */
.el-popconfirm .el-popconfirm__main {
  margin: 12px 0;
}
.el-popconfirm .el-popconfirm__action .el-button {
  display: initial !important;
}
.el-message-box__btns {
  display: flex;
  flex-direction: row-reverse;
}
.el-message-box__btns > .el-button {
  display: inline-block;
  margin-left: 10px;
}

/* ===================================================================
   十四、响应式
   =================================================================== */
@media (max-width: 1200px) {
  .form-grid,
  .oauth-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .form-grid,
  .oauth-grid,
  .custom-grid {
    grid-template-columns: 1fr;
  }
  .account-hero {
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 14px;
    gap: 12px;
    margin-bottom: 10px;
  }
  .hero-avatar {
    width: 42px;
    height: 42px;
    font-size: 18px;
  }
  .hero-name {
    font-size: 15px;
  }
  .form-card {
    padding: 14px 12px;
  }
  .form-card-title {
    font-size: 14px;
  }
  .btn-save {
    width: 100%;
  }
  /* 站内信搜索栏 */
  .msg-search .msgsearch-right {
    flex-wrap: wrap;
    gap: 8px;
  }
  .msg-search .msgsearch-right .el-input,
  .msg-search .msgsearch-right .el-select {
    width: 100% !important;
  }
  .msg-search .msgsearch-left {
    flex-wrap: wrap;
    gap: 6px;
  }
  /* 弹窗全宽 */
  .edit-pass .el-dialog,
  .check-phone .el-dialog {
    width: 92vw !important;
  }
  /* 操作日志搜索栏 */
  .tab-search-bar .el-input {
    width: 100% !important;
  }
  /* 账户 tabs wrapper */
  .account-tabs-wrapper {
    overflow: visible;
  }
  .account-tabs-wrapper .el-tabs__header {
    margin: 0 0 8px !important;
  }
  /* ===== 操作日志 mob-tabledata 卡片化 ===== */
  .mob-tabledata {
    padding: 0 0 8px;
  }
  .mob-tabledata-item {
    background: var(--color-card-bg, #fff);
    border: 1px solid var(--color-border, #eee);
    border-radius: var(--spike-radius);
    margin-bottom: 10px;
    overflow: hidden;
    transition: box-shadow 0.2s;
  }
  .mob-tabledata-item:active {
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  }
  .mob-item-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 14px;
    font-size: 13px;
    line-height: 1.5;
    gap: 8px;
  }
  .mob-item-row1 {
    border-bottom: 1px solid var(--color-border, #f0f0f0);
    padding: 10px 14px;
  }
  .mob-item-row1 > span:first-child {
    font-weight: 600;
    color: var(--color-text-primary, #1e2736);
  }
  .mob-item-row2 {
    padding: 10px 14px 6px;
  }
  .mob-item-row2-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .mob-item-row3 {
    border-top: 1px solid var(--color-border, #f0f0f0);
    font-size: 12px;
    color: var(--color-text-secondary, #8692b0);
    padding: 8px 14px;
  }
  .bottom-text {
    text-align: center;
    padding: 12px 0;
    font-size: 13px;
    color: var(--color-text-secondary, #8692b0);
  }
  .back-top-img {
    position: fixed;
    right: 16px;
    bottom: 80px;
    width: 40px;
    height: 40px;
    z-index: 100;
  }
}