/* ============================================================
   淘快云用户中心 · 设计系统 tk-theme v1.0
   架构：设计令牌 → 新壳（侧边栏/顶栏）→ Element UI 重塑 → 旧类兼容层
   单位：rem（1rem = 100px 设计稿，随视口 1200-1920 缩放）
   ============================================================ */

/* ---------- 1. 设计令牌 ---------- */
:root,
:root[theme] {
  /* 品牌色 */
  --tk-primary: #2e6bff;
  --tk-primary-600: #1f5af7;
  --tk-primary-050: #edf2ff;
  --tk-primary-100: #dbe6ff;
  --tk-violet: #7a5af8;

  /* 功能色 */
  --tk-success: #12b76a;
  --tk-success-050: #e8f8f0;
  --tk-warning: #f79009;
  --tk-warning-050: #fef4e6;
  --tk-danger: #f04438;
  --tk-danger-050: #feeceb;
  --tk-info: #0ea5e9;

  /* 中性色 */
  --tk-ink: #0c1424;
  --tk-text: #16202f;
  --tk-text-2: #3c4a5e;
  --tk-text-3: #66758c;
  --tk-line: #e7ebf3;
  --tk-line-2: #eef1f7;
  --tk-bg: #f3f5fa;
  --tk-card: #ffffff;

  /* 侧边栏（浅色） */
  --tk-side-bg: #ffffff;
  --tk-side-text: #1f2d3d;
  --tk-side-text-active: #ffffff;
  --tk-side-hover: #f2f6ff;
  --tk-side-active: linear-gradient(135deg, #2e6bff 0%, #4f8bff 100%);
  --tk-side-border: #eceff5;

  /* 圆角与阴影 */
  --tk-radius: 0.14rem;
  --tk-radius-sm: 0.08rem;
  --tk-shadow: 0 0.02rem 0.08rem rgba(16, 24, 40, 0.04), 0 0.01rem 0.02rem rgba(16, 24, 40, 0.03);
  --tk-shadow-lg: 0 0.12rem 0.32rem -0.06rem rgba(16, 24, 40, 0.14);

  /* 字体 */
  --tk-font: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Segoe UI",
    system-ui, -apple-system, sans-serif;

  /* ---- 旧主题变量别名（保持历史样式可用） ---- */
  --color-primary: #2e6bff;
  --color-success: #12b76a;
  --color-warning: #f79009;
  --color-danger: #f04438;
  --color-price-text: #f04438;
  --color-cash-num: #f79009;
  --color-discount-num: #12b76a;
  --color-menu-bg: #ffffff;
  --color-menu-hover-bg: #f2f6ff;
  --color-menu-active-bg: #2e6bff;
  --color-menu-text: #1f2d3d;
  --color-menu-text-active: #ffffff;
}
html,
html[theme] {
  --color-primary: #2e6bff;
  --color-success: #12b76a;
  --color-warning: #f79009;
  --color-danger: #f04438;
  --color-price-text: #f04438;
  --color-cash-num: #f79009;
  --color-discount-num: #12b76a;
  --color-menu-bg: #ffffff;
  --color-menu-hover-bg: #f2f6ff;
  --color-menu-active-bg: #2e6bff;
  --color-menu-text: #1f2d3d;
  --color-menu-text-active: #ffffff;
}

/* ---------- 2. 基础 ---------- */
body {
  font-family: var(--tk-font);
  background: var(--tk-bg);
  color: var(--tk-text);
  -webkit-font-smoothing: antialiased;
}
* {
  outline: none;
}
::-webkit-scrollbar {
  width: 0.08rem;
  height: 0.08rem;
}
::-webkit-scrollbar-thumb {
  background: #c9d1e0;
  border-radius: 0.08rem;
}
::-webkit-scrollbar-thumb:hover {
  background: #a8b3c7;
}
::-webkit-scrollbar-track {
  background: transparent;
}

/* ---------- 3. 布局壳 ---------- */
.template .el-container .el-main {
  padding: 0.24rem 0.28rem !important;
  margin: 0 !important;
  background: var(--tk-bg) !important;
  overflow-x: hidden;
  overflow-y: auto;
}

/* ---------- 4. 侧边栏 ---------- */
.tk-aside {
  background: var(--tk-side-bg);
  border-right: 1px solid var(--tk-side-border);
  display: flex !important;
  flex-direction: column;
  position: relative;
  z-index: 30;
  transition: width 0.25s ease;
  overflow: visible !important;
}
.tk-brand {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  padding: 0.2rem 0.16rem;
  cursor: pointer;
  min-height: 0.64rem;
  box-sizing: border-box;
}
.tk-brand-logo {
  max-height: 0.34rem;
  max-width: 1.6rem;
  object-fit: contain;
}
.tk-brand-badge {
  width: 0.32rem;
  height: 0.32rem;
  border-radius: 0.09rem;
  background: var(--tk-side-active);
  color: #fff;
  font-size: 0.16rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.tk-brand-name {
  color: var(--tk-ink);
  font-size: 0.15rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tk-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.08rem 0.1rem 0.16rem;
}
.tk-nav::-webkit-scrollbar {
  width: 0.04rem;
}
.tk-nav::-webkit-scrollbar-thumb {
  background: #d3dae6;
}
.tk-nav-divider {
  height: 1px;
  background: var(--tk-side-border);
  margin: 0.12rem 0.06rem;
}
.tk-nav-link {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  height: 0.42rem;
  padding: 0 0.12rem;
  margin-bottom: 0.04rem;
  border-radius: 0.1rem;
  color: var(--tk-side-text);
  font-size: 0.14rem;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease;
  user-select: none;
}
.tk-nav-link:hover {
  background: var(--tk-side-hover);
  color: var(--tk-primary);
}
.tk-nav-link.is-active,
.tk-nav-link.is-active:hover {
  background: var(--tk-side-active);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 0.06rem 0.16rem rgba(46, 107, 255, 0.35);
}
.tk-nav-icon {
  font-size: 0.17rem;
  width: 0.2rem;
  text-align: center;
  flex: none;
}
.tk-nav-link:not(:hover) .tk-nav-icon {
  opacity: 0.9;
}
.tk-nav-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tk-nav-arrow {
  width: 0.06rem;
  height: 0.06rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  flex: none;
  opacity: 0.7;
}
.tk-nav-group.is-open .tk-nav-arrow {
  transform: rotate(-45deg);
}
.tk-nav-sub {
  display: none;
  padding: 0.02rem 0 0.04rem 0.2rem;
}
.tk-nav-group.is-open .tk-nav-sub {
  display: block;
}
.tk-nav-sub-link {
  height: 0.36rem;
  font-size: 0.13rem;
  color: #5a6a85;
}
.tk-nav-sub-link::before {
  content: "";
  width: 0.05rem;
  height: 0.05rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
  flex: none;
}
.tk-nav-sub-link.is-active {
  background: var(--tk-primary-050);
  color: var(--tk-primary);
  font-weight: 600;
  box-shadow: none;
}
.tk-side-foot {
  padding: 0.1rem 0.12rem 0.14rem;
  border-top: 1px solid var(--tk-side-border);
}
.tk-collapse {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  height: 0.36rem;
  padding: 0 0.1rem;
  border-radius: 0.08rem;
  color: #8a94a8;
  font-size: 0.12rem;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.tk-collapse:hover {
  background: var(--tk-side-hover);
  color: var(--tk-primary);
}
.tk-collapse-icon {
  width: 0.14rem;
  height: 0.14rem;
  flex: none;
  border-left: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.25s ease;
}
.tk-aside.is-collapsed .tk-collapse-icon {
  transform: rotate(-135deg);
}
.tk-aside.is-collapsed .tk-brand {
  justify-content: center;
  padding: 0.2rem 0.08rem;
}
.tk-aside.is-collapsed .tk-nav-link {
  justify-content: center;
  padding: 0;
}
.tk-aside.is-collapsed .tk-nav-text,
.tk-aside.is-collapsed .tk-nav-arrow {
  display: none;
}
.tk-aside.is-collapsed .tk-nav-sub-link::before {
  display: none;
}
.tk-aside.is-collapsed .tk-collapse {
  justify-content: center;
  padding: 0;
}

/* ---------- 5. 顶栏 ---------- */
.tk-top {
  background: var(--tk-card);
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.28rem;
  border-bottom: 1px solid var(--tk-line);
  position: relative !important;
  width: auto !important;
  height: 0.64rem !important;
  top: auto !important;
  backdrop-filter: none;
  z-index: 20;
  line-height: 1;
}
.tk-top-left {
  display: flex;
  align-items: center;
  gap: 0.16rem;
  min-width: 0;
}
.tk-top-title {
  font-size: 0.16rem;
  font-weight: 600;
  color: var(--tk-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tk-top-search {
  width: 2.8rem;
}
.tk-top-right {
  display: flex;
  align-items: center;
  gap: 0.06rem;
}
.tk-top-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0.36rem;
  height: 0.36rem;
  border-radius: 0.08rem;
  cursor: pointer;
  color: var(--tk-text-2);
  transition: background 0.18s ease, color 0.18s ease;
}
.tk-top-item:hover {
  background: var(--tk-primary-050);
  color: var(--tk-primary);
}
.tk-top-item-inner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.tk-top-icon {
  display: block;
}
.tk-top-badge .el-badge__content {
  border: none;
  background: var(--tk-danger);
  right: 0.14rem;
  top: 0.05rem;
  transform: scale(0.9);
}
.tk-top-divider {
  width: 1px;
  height: 0.2rem;
  background: var(--tk-line);
  margin: 0 0.1rem;
}
.tk-lang {
  display: inline-flex;
  align-items: center;
  height: 0.36rem;
  padding: 0 0.06rem;
  border-radius: 0.08rem;
  cursor: pointer;
  color: var(--tk-text-2);
}
.tk-login-btn {
  font-size: 0.13rem;
  color: var(--tk-primary);
  font-weight: 500;
  padding: 0 0.08rem;
}
.tk-user {
  display: inline-flex;
  align-items: center;
  gap: 0.08rem;
  padding: 0.04rem 0.08rem;
  border-radius: 0.1rem;
  cursor: pointer;
  transition: background 0.18s ease;
}
.tk-user:hover {
  background: var(--tk-primary-050);
}
.tk-user-avatar {
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background: var(--tk-primary);
  background-image: var(--tk-side-active);
  color: #fff;
  font-size: 0.13rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.tk-user-avatar-lg {
  width: 0.4rem;
  height: 0.4rem;
  font-size: 0.16rem;
}
.tk-user-name {
  font-size: 0.13rem;
  color: var(--tk-text);
  font-weight: 500;
  max-width: 1.2rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tk-user-caret {
  width: 0.06rem;
  height: 0.06rem;
  border-right: 1.5px solid var(--tk-text-3);
  border-bottom: 1.5px solid var(--tk-text-3);
  transform: rotate(45deg) translateY(-0.02rem);
}
.tk-user-menu .tk-user-menu-head {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  padding: 0.12rem 0.16rem;
  border-bottom: 1px solid var(--tk-line-2);
  margin-bottom: 0.04rem;
  min-width: 2rem;
}
.tk-user-menu-name {
  font-size: 0.14rem;
  font-weight: 600;
  color: var(--tk-ink);
}
.tk-user-menu-id {
  font-size: 0.12rem;
  color: var(--tk-text-3);
  margin-top: 0.02rem;
}

/* ---------- 6. Element UI 重塑 ---------- */
/* 按钮 */
.el-button {
  border-radius: var(--tk-radius-sm);
  font-weight: 500;
  transition: all 0.18s ease;
}
.el-button--primary {
  background: var(--tk-primary);
  border-color: var(--tk-primary);
}
.el-button--primary:hover,
.el-button--primary:focus {
  background: var(--tk-primary-600);
  border-color: var(--tk-primary-600);
}
.el-button--primary.is-plain {
  color: var(--tk-primary);
  background: var(--tk-primary-050);
  border-color: var(--tk-primary-100);
}
.el-button--primary.is-plain:hover {
  background: var(--tk-primary);
  color: #fff;
}
.el-button--text {
  color: var(--tk-primary);
  font-weight: 500;
}
.el-button.is-circle {
  border-radius: 50%;
}
.el-button--mini,
.el-button--small {
  border-radius: 0.06rem;
}

/* 输入 */
.el-input__inner {
  border-radius: var(--tk-radius-sm);
  border-color: var(--tk-line);
  color: var(--tk-text);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.el-input__inner:hover {
  border-color: #c4cede;
}
.el-input__inner:focus {
  border-color: var(--tk-primary);
  box-shadow: 0 0 0 0.03rem rgba(46, 107, 255, 0.12);
}
.el-textarea__inner {
  border-radius: var(--tk-radius-sm);
  border-color: var(--tk-line);
}
.el-textarea__inner:focus {
  border-color: var(--tk-primary);
  box-shadow: 0 0 0 0.03rem rgba(46, 107, 255, 0.12);
}
.el-select .el-input.is-focus .el-input__inner,
.el-select .el-input__inner:focus {
  border-color: var(--tk-primary);
}
.el-input.is-active .el-input__inner {
  border-color: var(--tk-primary);
}
.el-radio__input.is-checked .el-radio__inner,
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
  border-color: var(--tk-primary);
  background: var(--tk-primary);
}
.el-radio__input.is-checked + .el-radio__label,
.el-checkbox__input.is-checked + .el-checkbox__label {
  color: var(--tk-primary);
}
.el-switch.is-checked .el-switch__core {
  border-color: var(--tk-primary);
  background-color: var(--tk-primary);
}

/* 表格 */
.el-table {
  color: var(--tk-text);
  border-radius: var(--tk-radius-sm);
}
.el-table th.el-table__cell {
  background: #f7f9fc;
  color: var(--tk-text-2);
  font-weight: 600;
  font-size: 0.13rem;
}
.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  border-bottom-color: var(--tk-line-2);
}
.el-table--border,
.el-table--group {
  border-color: var(--tk-line);
}
.el-table--border::after,
.el-table--group::after,
.el-table::before {
  background-color: var(--tk-line);
}
.el-table__row:hover > td.el-table__cell {
  background-color: #f6f9ff;
}
.el-table .el-table__cell {
  padding: 0.1rem 0;
}
.el-table .sort-caret.ascending {
  border-bottom-color: var(--tk-text-3);
}
.el-table .sort-caret.descending {
  border-top-color: var(--tk-text-3);
}
.el-table .ascending .sort-caret.ascending {
  border-bottom-color: var(--tk-primary);
}
.el-table .descending .sort-caret.descending {
  border-top-color: var(--tk-primary);
}

/* 分页 */
.el-pagination {
  font-weight: 400;
  color: var(--tk-text-2);
}
.el-pagination .el-pager li {
  border-radius: 0.06rem;
  min-width: 0.3rem;
  color: var(--tk-text-2);
}
.el-pagination .el-pager li.active {
  color: var(--tk-primary);
  background: var(--tk-primary-050);
}
.el-pagination button,
.el-pagination .el-pager li {
  background: transparent;
}
.el-pagination .btn-next,
.el-pagination .btn-prev {
  background: transparent;
  border-radius: 0.06rem;
  color: var(--tk-text-2);
}
.el-pagination button:disabled {
  color: var(--tk-text-3);
  background: transparent;
}

/* 弹窗 */
.el-dialog {
  border-radius: var(--tk-radius);
  box-shadow: var(--tk-shadow-lg);
  overflow: hidden;
}
.el-dialog__header {
  padding: 0.18rem 0.24rem;
  border-bottom: 1px solid var(--tk-line-2);
}
.el-dialog__title {
  font-size: 0.16rem;
  font-weight: 600;
  color: var(--tk-ink);
}
.el-dialog__headerbtn {
  top: 0.18rem;
  right: 0.2rem;
}
.el-dialog__body {
  padding: 0.2rem 0.24rem;
  color: var(--tk-text);
}
.el-dialog__footer {
  padding: 0.14rem 0.24rem 0.18rem;
  border-top: 1px solid var(--tk-line-2);
}
.el-dialog__wrapper {
  backdrop-filter: blur(2px);
}

/* 下拉/气泡 */
.el-dropdown-menu,
.el-popover.el-popper,
.el-select-dropdown {
  border-radius: 0.1rem;
  border-color: var(--tk-line);
  box-shadow: var(--tk-shadow-lg);
}
.el-dropdown-menu__item:hover,
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background: var(--tk-primary-050);
  color: var(--tk-primary);
}
.el-select-dropdown__item.selected {
  color: var(--tk-primary);
  font-weight: 600;
}
.el-popper[x-placement^="bottom"] .popper__arrow,
.el-popper[x-placement^="top"] .popper__arrow {
  border-color: transparent;
}

/* 标签/徽标/消息 */
.el-tag {
  border-radius: 0.05rem;
}
.el-message {
  border-radius: 0.1rem;
  box-shadow: var(--tk-shadow-lg);
  border-color: var(--tk-line);
}
.el-message--success .el-message__content {
  color: var(--tk-success);
}
.el-message--error .el-message__content {
  color: var(--tk-danger);
}
.el-notification {
  border-radius: 0.12rem;
  box-shadow: var(--tk-shadow-lg);
}
.el-loading-mask {
  background-color: rgba(255, 255, 255, 0.72);
}
.el-loading-spinner .path {
  stroke: var(--tk-primary);
}

/* 抽屉（兼容旧移动抽屉） */
.el-drawer {
  background: var(--tk-side-bg) !important;
}

/* ---------- 7. 旧类兼容层（页面与插件模板共用） ---------- */
.template {
  background: var(--tk-bg);
}
.main-card {
  background: var(--tk-card);
  border-radius: var(--tk-radius);
  box-shadow: var(--tk-shadow);
  border: none;
  padding: 0.24rem 0.28rem;
  box-sizing: border-box;
}
.main-card-title {
  color: var(--tk-ink);
  font-weight: 600;
}
.com-search .el-input__inner,
.com-search .select-input .el-input__inner {
  border-radius: var(--tk-radius-sm);
}
.line {
  background: var(--tk-line-2);
}
.menu-alink {
  text-decoration: none;
}
.myPage {
  display: flex;
  justify-content: flex-end;
  padding: 0.16rem 0 0.04rem;
}
.err-alert {
  border-radius: var(--tk-radius-sm);
}

/* ---------- 8. 细节修正 ---------- */
.el-empty__description p {
  color: var(--tk-text-3);
}
.el-image__error {
  border-radius: var(--tk-radius-sm);
}
a {
  transition: color 0.18s ease;
}
.el-loading-spinner .el-loading-text {
  color: var(--tk-text-3);
}

/* ---------- 9. 汉堡按钮与抽屉遮罩 ---------- */
.tk-hamburger {
  display: none;
}
.tk-hamburger svg {
  display: block;
}
.tk-side-backdrop {
  display: none;
}

/* ---------- 10. 移动端 / 窄屏适配层（≤920px） ---------- */
@media (max-width: 920px) {
  /* 顶栏 */
  .tk-top {
    height: 0.72rem !important;
    padding: 0 0.16rem !important;
  }
  .tk-top-title {
    font-size: 0.2rem;
  }
  .tk-hamburger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.36rem;
    height: 0.36rem;
    margin-right: 0.06rem;
  }
  .tk-user-name {
    display: none;
  }

  /* 侧栏变抽屉 */
  .tk-aside {
    position: fixed !important;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 2100;
    width: 2.32rem !important;
    transform: translateX(-100%);
    transition: transform 0.26s ease;
    box-shadow: 0 0 0.4rem rgba(16, 24, 40, 0.18);
  }
  .tk-aside.tk-side-open {
    transform: translateX(0);
  }
  .tk-side-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 2000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.26s ease;
  }
  .tk-side-backdrop.tk-backdrop-show {
    opacity: 1;
    pointer-events: auto;
  }

  /* 主内容 */
  .template .el-container .el-main {
    padding: 0.16rem !important;
  }

  /* 弹窗限宽，防止横向溢出 */
  .el-dialog {
    max-width: 94vw !important;
  }
  .el-message-box {
    max-width: 92vw;
  }

  /* 旧页面通用兼容：搜索条、操作行允许换行 */
  .com-search {
    flex-wrap: wrap;
    gap: 0.08rem;
  }
  .com-search .el-input,
  .com-search .select-input {
    width: 100% !important;
  }

  /* 表格允许在卡片内横向滚动 */
  .main-card,
  .tk-card {
    overflow-x: auto;
  }
}

@media (max-width: 560px) {
  .template .el-container .el-main {
    padding: 0.12rem !important;
  }
  .el-dialog {
    margin-top: 4vh !important;
  }
}

/* ---------- 11. 手机端壳样式（≤750px，移动端 rem 体系：1rem≈100px@750） ---------- */
@media (max-width: 750px) {
  .tk-top {
    height: 0.96rem !important;
    padding: 0 0.2rem !important;
  }
  .tk-top-title {
    font-size: 0.3rem;
  }
  .tk-top-item {
    min-width: 0.6rem;
    height: 0.6rem;
  }
  .tk-top-item .tk-top-icon {
    width: 0.34rem;
    height: 0.34rem;
  }
  .tk-hamburger {
    display: inline-flex;
    width: 0.6rem;
    height: 0.6rem;
  }
  .tk-hamburger .tk-top-icon {
    width: 0.4rem;
    height: 0.4rem;
  }
  .tk-user-avatar {
    width: 0.52rem;
    height: 0.52rem;
    font-size: 0.24rem;
  }
  .tk-badge .el-badge__content,
  .tk-top-badge .el-badge__content {
    right: 0.2rem;
  }
  .tk-aside {
    width: 78vw !important;
    max-width: 5.6rem;
  }
  .tk-brand {
    padding: 0.3rem 0.24rem;
    min-height: 1rem;
  }
  .tk-brand-badge {
    width: 0.56rem;
    height: 0.56rem;
    font-size: 0.28rem;
    border-radius: 0.14rem;
  }
  .tk-brand-name {
    font-size: 0.3rem;
  }
  .tk-nav {
    padding: 0.12rem 0.16rem 0.24rem;
  }
  .tk-nav-link {
    height: 0.92rem;
    padding: 0 0.24rem;
    border-radius: 0.16rem;
    font-size: 0.28rem;
    gap: 0.16rem;
  }
  .tk-nav-icon {
    font-size: 0.34rem;
    width: 0.4rem;
  }
  .tk-nav-arrow {
    width: 0.1rem;
    height: 0.1rem;
  }
  .tk-nav-sub {
    padding-left: 0.36rem;
  }
  .tk-nav-sub-link {
    height: 0.76rem;
    font-size: 0.26rem;
  }
  .tk-nav-sub-link::before {
    width: 0.08rem;
    height: 0.08rem;
  }
  .tk-nav-divider {
    margin: 0.2rem 0.08rem;
  }
  .tk-collapse {
    height: 0.76rem;
    font-size: 0.24rem;
    gap: 0.16rem;
  }
  .tk-collapse-icon {
    width: 0.24rem;
    height: 0.24rem;
  }
  .tk-side-foot {
    padding: 0.16rem 0.2rem 0.24rem;
  }
}

/* ---------- 12. 细节抛光 ---------- */
/* 顶栏图标统一垂直居中 */
.tk-top-item {
  line-height: 1;
}
.tk-top-right .el-badge.tk-top-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}
.tk-top-badge .el-badge__content.is-fixed {
  transform: translateY(-38%) translateX(100%) scale(0.9);
}
.tk-lang {
  color: var(--tk-text-2);
}

/* Element 选项卡主题化 */
.el-tabs__item {
  font-size: 0.15rem;
  color: var(--tk-text-2);
  transition: color 0.18s ease;
}
.el-tabs__item:hover {
  color: var(--tk-primary);
}
.el-tabs__item.is-active {
  color: var(--tk-primary);
  font-weight: 600;
}
.el-tabs__active-bar {
  background-color: var(--tk-primary);
  border-radius: 0.02rem;
}
.el-tabs__nav-wrap::after {
  height: 1px;
  background-color: var(--tk-line);
}

/* 下拉菜单圆角分隔线 */
.el-dropdown-menu__item--divided {
  border-top-color: var(--tk-line-2);
}
.el-dropdown-menu__item--divided::before {
  display: none;
}

/* 空状态与图片 */
.el-empty__image img {
  opacity: 0.75;
}

/* 消息弹窗圆角 */
.el-message-box {
  border-radius: 0.12rem;
  border: none;
  box-shadow: var(--tk-shadow-lg);
}
.el-message-box__title {
  font-weight: 600;
  color: var(--tk-ink);
}