/* ===================================================================
   spike-layout.css — cany_spike 主题全局布局
   =================================================================== */

/* ===== 全局基础 ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

.el-container:nth-child(2) > .el-main {
  margin: 0 !important;
}

html,
body {
  margin: 0;
  padding: 0;
}

/* 整页滚动 + 禁止横向滚动条，页面级滚动只出纵向 */
html {
  overflow-x: hidden;
  overflow-y: auto;
}

body {
  font-family: var(--font-family);
  font-size: 14px;
  color: var(--color-text-primary);
  background-color: var(--color-page-bg);
  min-width: 1024px;
  /* 不要在 body 上设 overflow-x: hidden —— 会让 body 同时成为滚动容器，
     从而使 .spike-topbar 的 position: sticky 失效（随 body 一起被滚出视口）。
     横向溢出兜底已由上面 html { overflow-x: hidden } 承担。 */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== 整体模板容器（改为流式，不再 100vh 锁死）===== */
/* .product：productList.php / crossModule.php 使用的旧包装类，规则与 .template 保持一致 */
.template,
.product {
  min-height: 100vh;
  height: auto;
  overflow: visible;
}

.el-container:nth-child(2) {
  background: transparent;
}

/* ===== 外层 el-container（sidebar + 内容区并排）=====
 * 侧边栏已改为 fixed，主区用 padding-left = sidebar 宽 + 40px（两侧 20 margin）占位
 * 折叠态下 padding-left 随 --sidebar-width 从 270 变 80，hover 浮出不影响 padding
 */
.template > .el-container,
.product > .el-container {
  min-height: 100vh;
  height: auto;
  overflow: visible;
  display: flex !important;
  flex-direction: row !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding-left: calc(var(--sidebar-width) + 20px);
  transition: padding-left 0.25s ease;
}

/* ===== 侧边栏 el-aside（fixed 定位，脱离 flex 流）===== */
.spike-sidebar.el-aside {
  position: fixed;
  top: 20px;
  left: 20px;
  bottom: 20px;
  width: var(--sidebar-width) !important;
  min-width: var(--sidebar-width) !important;
  max-width: var(--sidebar-width) !important;
  height: auto;
  margin: 0 !important;
  border-radius: 20px;
  overflow: hidden;
  background-color: var(--color-sidebar-bg);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  z-index: 100;
  transition:
    width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    min-width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
    max-width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== 侧边栏 Logo 区 ===== */
.sidebar-logo-area {
  display: flex;
  align-items: center;
  padding: 20px 20px 20px 16px;
  height: 86px;
  flex-shrink: 0;
  /*border-bottom: 1px solid var(--color-border);*/
}

.sidebar-logo-area a {
  display: flex;
  align-items: center;
  text-decoration: none;
  gap: 10px;
}

.sidebar-logo-img {
  height: 34px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
}

.sidebar-brand-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text-primary);
  white-space: nowrap;
}

/* ===== 侧边栏菜单滚动区 ===== */
.sidebar-menu-scroll {
  flex: 1;
  overflow-y: scroll;
  overflow-x: hidden;
  padding: 12px 12px 0;
}

.sidebar-menu-scroll::-webkit-scrollbar {
  width: 4px;
}

.sidebar-menu-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-menu-scroll::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 2px;
}

.spike-sidebar.el-aside:hover .sidebar-menu-scroll::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
}

/* ===== 侧边栏菜单分组标题 ===== */
.menu-group-title {
  padding: 20px 12px 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-menu-group-text);
}

.menu-group-title:first-child {
  padding-top: 8px;
}

/* ===== Spike 菜单主体 ===== */
.spike-menu.el-menu {
  border-right: none !important;
  background-color: transparent !important;
}

/* ===== 菜单项 ===== */
.spike-menu .spike-menu-item.el-menu-item {
  height: 50px;
  line-height: 50px;
  border-radius: var(--radius-menu-item);
  margin-bottom: 4px;
  padding: 0 12px !important;
  color: var(--color-menu-text) !important;
  font-size: 14px;
  font-weight: 550;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 24px;
  transition: padding 0.2s ease-out;
}

.spike-menu .spike-menu-item.el-menu-item .iconfont {
  display: inline-block;
  font-size: 24px;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
  transition: color 0.2s;
}

.spike-menu .spike-menu-item.el-menu-item:hover {
  background-color: transparent !important;
}

.spike-menu .spike-menu-item.el-menu-item.is-active {
  background-color: var(--color-menu-active-bg) !important;
  color: var(--color-menu-text-active) !important;
  font-weight: 600;
}

.spike-menu .spike-menu-item.el-menu-item.is-active .iconfont {
  color: var(--color-menu-text-active) !important;
}

/* ===== 二级菜单子项 ===== */
.spike-menu .spike-menu-child.el-menu-item {
  height: 38px;
  line-height: 38px;
  padding-left: 47px !important;
  font-size: 13px;
  font-weight: 400;
  position: relative;
}

.spike-menu .spike-menu-child .child-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
  display: inline-block;
  margin-right: 8px;
  flex-shrink: 0;
  transition: opacity 0.2s;
}

.spike-menu .spike-menu-child.is-active .child-dot {
  opacity: 1;
  background: var(--color-menu-text-active);
}

/* ===== submenu 标题 ===== */
.spike-menu .spike-submenu > .el-submenu__title {
  height: 50px;
  line-height: 50px;
  border-radius: var(--radius-menu-item);
  margin-bottom: 4px;
  padding: 0 12px !important;
  color: var(--color-menu-text) !important;
  font-size: 14px;
  font-weight: 550;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 24px;
  transition: padding 0.2s ease-out;
}

.spike-menu .spike-submenu > .el-submenu__title:hover {
  background-color: transparent !important;
}

.spike-menu .spike-submenu > .el-submenu__title .iconfont {
  display: inline-block;
  font-size: 24px;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
  transition: color 0.2s;
}

.spike-menu .spike-submenu .el-submenu__title .el-submenu__icon-arrow {
  position: relative !important;
  top: unset !important;
  right: unset !important;
  margin-top: unset !important;
  margin-left: auto;
  font-size: 16px !important;
  font-weight: 900 !important;
  color: #000000;
  opacity: 0.6;
  z-index: 1;
  transition: opacity 0.2s;
}

.spike-menu .spike-submenu .el-submenu__title:hover .el-submenu__icon-arrow {
  opacity: 1;
}

/* ===== 菜单项 hover 动画：::before 左→右填充 ===== */

.spike-menu .spike-menu-item.el-menu-item::before,
.spike-menu .spike-submenu > .el-submenu__title::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.28s ease;
  pointer-events: none;
  z-index: 0;
}

.spike-menu .spike-menu-item.el-menu-item:hover::before,
.spike-menu .spike-submenu > .el-submenu__title:hover::before {
  transform: scaleX(1);
}

/* active 状态不触发 hover 动画 */
.spike-menu .spike-menu-item.el-menu-item.is-active::before {
  display: none !important;
}

/* 内容层级高于 ::before */
.spike-menu .spike-menu-item.el-menu-item > .iconfont,
.spike-menu .spike-menu-item.el-menu-item > span,
.spike-menu .spike-submenu > .el-submenu__title > .iconfont,
.spike-menu .spike-submenu > .el-submenu__title > span,
.spike-menu .spike-submenu > .el-submenu__title .el-submenu__icon-arrow {
  position: relative;
  z-index: 1;
}

/* 二级子项保留默认淡色 hover */
.spike-menu .spike-menu-child.el-menu-item:hover {
  background-color: var(--color-menu-hover-bg) !important;
}

/* ===== 5色轮转 hover ===== */

/* Color 1: Primary 珊瑚红 */
.spike-menu > .menu-alink:nth-child(5n + 1) > .spike-menu-item::before,
.spike-menu > .spike-submenu:nth-child(5n + 1) > .el-submenu__title::before {
  background: rgba(250, 137, 107, 0.12);
}
.spike-menu > .menu-alink:nth-child(5n + 1) > .spike-menu-item:hover .iconfont,
.spike-menu
  > .spike-submenu:nth-child(5n + 1)
  > .el-submenu__title:hover
  .iconfont {
  color: #fa896b !important;
}

/* Color 2: Info 青蓝 */
.spike-menu > .menu-alink:nth-child(5n + 2) > .spike-menu-item::before,
.spike-menu > .spike-submenu:nth-child(5n + 2) > .el-submenu__title::before {
  background: rgba(70, 202, 235, 0.12);
}
.spike-menu > .menu-alink:nth-child(5n + 2) > .spike-menu-item:hover .iconfont,
.spike-menu
  > .spike-submenu:nth-child(5n + 2)
  > .el-submenu__title:hover
  .iconfont {
  color: #46caeb !important;
}

/* Color 3: Success 绿色 */
.spike-menu > .menu-alink:nth-child(5n + 3) > .spike-menu-item::before,
.spike-menu > .spike-submenu:nth-child(5n + 3) > .el-submenu__title::before {
  background: rgba(75, 208, 139, 0.12);
}
.spike-menu > .menu-alink:nth-child(5n + 3) > .spike-menu-item:hover .iconfont,
.spike-menu
  > .spike-submenu:nth-child(5n + 3)
  > .el-submenu__title:hover
  .iconfont {
  color: #4bd08b !important;
}

/* Color 4: Warning 橙色 */
.spike-menu > .menu-alink:nth-child(5n + 4) > .spike-menu-item::before,
.spike-menu > .spike-submenu:nth-child(5n + 4) > .el-submenu__title::before {
  background: rgba(248, 192, 118, 0.15);
}
.spike-menu > .menu-alink:nth-child(5n + 4) > .spike-menu-item:hover .iconfont,
.spike-menu
  > .spike-submenu:nth-child(5n + 4)
  > .el-submenu__title:hover
  .iconfont {
  color: #f8c076 !important;
}

/* Color 5: Indigo 紫色 */
.spike-menu > .menu-alink:nth-child(5n + 5) > .spike-menu-item::before,
.spike-menu > .spike-submenu:nth-child(5n + 5) > .el-submenu__title::before {
  background: rgba(135, 99, 218, 0.12);
}
.spike-menu > .menu-alink:nth-child(5n + 5) > .spike-menu-item:hover .iconfont,
.spike-menu
  > .spike-submenu:nth-child(5n + 5)
  > .el-submenu__title:hover
  .iconfont {
  color: #8763da !important;
}

/* ===== 侧边栏底部用户区 ===== */
.sidebar-user-area {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  margin: 12px 8px 18px 8px;
  background-color: #e5f3fb;
  border-radius: var(--radius-card);
  min-height: 82px;
  flex-shrink: 0;
  cursor: pointer;
  transition: background-color 0.2s;
}

.sidebar-user-area:hover {
  background-color: rgba(70, 202, 235, 0.2);
}

/* ==================================================================
 * 侧边栏折叠态：:root[data-aside-collapsed="1"]
 * - B 态（折叠）：sidebar 宽 80，主区 padding-left=120，仅图标
 * - C 态（浮出）：sidebar:hover 恢复 270，主区 padding 不变（覆盖主区）
 * - 顶部 IIFE 同步 <html data-aside-collapsed>
 * ================================================================== */

/* C 态：hover 立即浮出到完整宽（取消延迟以避免“启动拖延”观感） */
:root[data-aside-collapsed="1"] .spike-sidebar.el-aside:hover {
  width: 270px !important;
  min-width: 270px !important;
  max-width: 270px !important;
  z-index: 1000;
}

/* B 态：隐藏文字 / 子菜单 / 用户信息（仅非 hover） */

/* logo 文字隐藏 + 区域居中 */
:root[data-aside-collapsed="1"]
  .spike-sidebar.el-aside:not(:hover)
  .sidebar-brand-name {
  display: none;
}
:root[data-aside-collapsed="1"]
  .spike-sidebar.el-aside:not(:hover)
  .sidebar-logo-area {
  padding: 20px 12px;
  justify-content: center;
}
:root[data-aside-collapsed="1"]
  .spike-sidebar.el-aside:not(:hover)
  .sidebar-logo-area
  a {
  justify-content: center;
  gap: 0;
}

/* 分组标题文字隐 → 居中显示 "..." */
:root[data-aside-collapsed="1"]
  .spike-sidebar.el-aside:not(:hover)
  .menu-group-title {
  font-size: 0;
  padding: 14px 0 8px;
  text-align: center;
}
:root[data-aside-collapsed="1"]
  .spike-sidebar.el-aside:not(:hover)
  .menu-group-title::before {
  content: "...";
  font-size: 14px;
  letter-spacing: 0.15em;
  color: var(--color-menu-group-text);
  font-weight: 700;
}

/* 菜单项文字 + submenu 箭头 隐藏 */
:root[data-aside-collapsed="1"]
  .spike-sidebar.el-aside:not(:hover)
  .spike-menu
  .spike-menu-item.el-menu-item
  > span,
:root[data-aside-collapsed="1"]
  .spike-sidebar.el-aside:not(:hover)
  .spike-menu
  .spike-submenu
  > .el-submenu__title
  > span,
:root[data-aside-collapsed="1"]
  .spike-sidebar.el-aside:not(:hover)
  .spike-menu
  .spike-submenu
  > .el-submenu__title
  .el-submenu__icon-arrow {
  display: none !important;
}

/* 菜单项布局：padding 复位 0 + flex justify-content: center 强制居中
 * 不依赖宽度数学计算，无论容器实际宽多少都准确居中
 * padding 0 ↔ 0 12 由 base transition: padding 0.2s ease-out 负责平滑
 * justify-content 瞬变被 sidebar width 0.25s 过渡同步掩盖 */
:root[data-aside-collapsed="1"]
  .spike-sidebar.el-aside:not(:hover)
  .spike-menu
  .spike-menu-item.el-menu-item,
:root[data-aside-collapsed="1"]
  .spike-sidebar.el-aside:not(:hover)
  .spike-menu
  .spike-submenu
  > .el-submenu__title {
  padding: 0 !important;
  justify-content: center;
}

/* 折叠态下嵌套子菜单整体隐藏＋禁用交互 */
:root[data-aside-collapsed="1"]
  .spike-sidebar.el-aside:not(:hover)
  .spike-submenu
  .el-menu {
  display: none !important;
}

/* 用户区：仅 B 态（折叠且非 hover）隐藏；C 态 hover 浮出与 A 态完整保持一致表现 */
:root[data-aside-collapsed="1"]
  .spike-sidebar.el-aside:not(:hover)
  .sidebar-user-area {
  display: none !important;
}

/* 处理折叠态滑动条隐藏过冲 */
:root[data-aside-collapsed="1"]
  .spike-sidebar.el-aside:not(:hover)
  .sidebar-menu-scroll {
  overflow: hidden;
}

/* 媒体查询：窄屏 <1024 强制展开（未来可扩展 drawer） */
@media (max-width: 1023px) {
  :root[data-aside-collapsed="1"] {
    --sidebar-width: 270px;
  }
}

.user-avatar-box {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
}

.user-info {
  flex: 1;
  min-width: 0;
}

.user-name {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-role {
  font-size: 12px;
  line-height: 1.2;
  color: var(--color-text-secondary);
  margin-top: 4px;
}

.user-logout {
  font-size: 18px;
  color: var(--color-primary);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  opacity: 0.7;
  transition: opacity 0.2s;
  flex-shrink: 0;
}

.user-logout:hover {
  opacity: 1;
}

/* ===== 内层 el-container（topbar + main 竖向排列）=====
 * 改为流式高度，滚动交由页面级承担
 */
.template > .el-container > .el-container,
.product > .el-container > .el-container {
  min-height: 100vh;
  height: auto;
  overflow: visible;
  flex-direction: column !important;
  display: flex !important;
  flex: 1 !important;
  min-width: 0 !important;
  width: 0 !important;
}

/* ===== 顶部导航栏 el-header =====
 * 始终固定在视口最上方（sticky）
 * 注意：背景必须是页面底色而非 transparent，否则 sticky 时下方内容会从
 * 顶栏透明缝隙（卡片左右 20px 与顶部 margin）穿透露出
 */
.spike-topbar.el-header {
  height: 98px !important;
  line-height: normal;
  padding: 0 !important;
  margin: 0 !important;
  background-color: var(--color-page-bg) !important;
  box-shadow: none !important;
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  position: sticky;
  top: 0;
  z-index: 99;
}

/* 顶栏浮动卡片 */
.topbar-inner {
  width: calc(100% - 40px);
  height: 75px;
  margin: 20px 20px 0 20px;
  padding: 0 20px;
  border-radius: 18px;
  background-color: #fff;
  box-shadow: 0 2px 6px rgba(37, 83, 185, 0.1);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: box-shadow 0.35s ease;
}

/* ===== 吸顶状态动效 =====
 * .is-stuck 由 topMenu.js scroll 监听器在 scrollY > 10 时切换
 * transform 施加在 .topbar-inner（内卡片）而非 sticky 元素本身，规避 sticky + transform 冲突
 */
.spike-topbar.is-stuck .topbar-inner {
  box-shadow: 0 6px 24px rgba(37, 83, 185, 0.16);
  animation: stickyBounce 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes stickyBounce {
  from {
    transform: translateY(-8px) scale(0.99);
    opacity: 0.92;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

/* 顶栏三区域 */
.topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.topbar-center {
  flex: 1;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}

/* 汉堡图标 */
.topbar-hamburger {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  cursor: pointer;
  color: var(--color-text-secondary);
  font-size: 20px;
  transition:
    background 0.2s,
    color 0.2s;
}

.topbar-hamburger:hover {
  background: var(--color-hover);
  color: var(--color-primary);
}

/* 三横线汉堡图标 */
.topbar-nav-icon {
  font-style: normal;
  display: block;
  width: 18px;
  height: 2px;
  background: var(--color-text-secondary);
  border-radius: 2px;
  position: relative;
  transition: background 0.2s;
}

.topbar-nav-icon::before,
.topbar-nav-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.topbar-nav-icon::before {
  top: -6px;
}
.topbar-nav-icon::after {
  top: 6px;
}

.topbar-hamburger:hover .topbar-nav-icon {
  background: var(--color-primary);
}

/* 搜索框 */
.topbar-search.el-autocomplete {
  width: 230px;
  flex-shrink: 0;
}

.topbar-search .el-input__inner {
  height: 40px !important;
  line-height: 40px !important;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 9999px !important;
  font-size: 13px;
  color: var(--color-text-primary);
  padding-left: 38px;
  padding-right: 20px;
}

.topbar-search .el-input__inner::placeholder {
  color: var(--color-text-secondary);
}

.topbar-search .el-input__prefix {
  left: 12px;
  display: flex;
  align-items: center;
  height: 100%;
  color: #1e2736;
  font-weight: 900;
}

/* 顶栏图标按钮（圆形 hover 焦点环） */
.topbar-icon-item {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  cursor: pointer;
  color: var(--color-text-secondary);
  font-size: 24px;
  position: relative;
  transition:
    background 0.2s,
    color 0.2s;
}

.topbar-icon-item:hover {
  background: var(--color-secondary-light);
  color: var(--color-primary);
}

/* 语言国旗触发器（38×38 点击热区 + 内嵌 24× 24 圆形国旗，hover 与其他图标一致） */
.topbar-lang {
  width: var(--avatar-size-flag, 38px);
  height: var(--avatar-size-flag, 38px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease;
}

.topbar-lang:hover {
  background: var(--color-secondary-light);
}

.topbar-lang .lang-flag {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* 兼容旧版（非触发器场景仍可用方旗） */
.lang-flag--legacy {
  width: 24px;
  height: 18px;
  object-fit: cover;
  border-radius: 2px;
}

/* 用户信息区 */
.topbar-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s;
  white-space: nowrap;
}

.topbar-user:hover {
  background: var(--color-hover);
}

.topbar-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 700;
  flex-shrink: 0;
}

.topbar-user-info {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.topbar-username {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.topbar-userrole {
  font-size: 12px;
  font-weight: 900;
  color: var(--color-text-secondary);
}

.topbar-arrow {
  font-size: 16px;
  font-weight: 900;
  color: var(--color-text-secondary);
}

.un-login {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px;
  cursor: pointer;
  font-size: 13px;
  color: var(--color-text-secondary);
  border-radius: 8px;
  white-space: nowrap;
  transition: background 0.2s, color 0.2s;
}
.un-login i {
  font-size: 24px;
}
.un-login:hover {
  background: var(--color-secondary-light);
  color: var(--color-primary);
}

/* ===== el-main 主内容区 =====
 * 改为 overflow: visible，滚动交给 html/body（整页滚动条）
 */
.el-main {
  flex: 1;
  overflow: visible;
  height: auto;
  padding: 20px !important;
  background-color: var(--color-page-bg) !important;
  transition:
    margin-top 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    padding-top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 吸顶时消除内容区顶部空白：margin-top + padding-top 收紧 */
.spike-topbar.is-stuck ~ .el-main {
  margin-top: 0 !important;
  padding-top: 8px !important;
}

/* ===== 菜单链接修正 ===== */
.menu-alink {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* ===== Loading 动画 ===== */
#mainLoading {
  position: fixed;
  inset: 0;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  z-index: 9999;
}

.ddr {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-primary);
  animation: ddrBounce 1.2s infinite ease-in-out;
}

.ddr1 {
  animation-delay: 0s;
}
.ddr2 {
  animation-delay: 0.15s;
}
.ddr3 {
  animation-delay: 0.3s;
}
.ddr4 {
  animation-delay: 0.45s;
}
.ddr5 {
  animation-delay: 0.6s;
}

@keyframes ddrBounce {
  0%,
  80%,
  100% {
    transform: scale(0.6);
    opacity: 0.4;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* ===== 消息弹窗 ===== */
.spike-msg-popover {
  padding: 0 !important;
  border-radius: var(--popover-radius, 16px) !important;
  box-shadow: var(
    --popover-shadow,
    0 8px 24px rgba(16, 24, 40, 0.12)
  ) !important;
  border: 1px solid var(--color-border) !important;
  overflow: hidden;
}

.msg-popover-box {
  width: 340px;
  max-width: calc(100vw - 24px);
  padding: 20px 16px 16px;
  box-sizing: border-box;
}

.msg-popover-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 4px 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.msg-popover-head-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-primary);
}

.msg-all-link {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-primary);
  cursor: pointer;
}

.msg-new-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 3px 10px;
  min-width: 48px;
  height: 22px;
  border-radius: 9999px;
  background: var(--color-badge-blue-bg);
  color: var(--color-badge-blue-text);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.msg-list {
  max-height: 340px;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 4px 0 8px;
  border-top: 1px solid var(--color-border);
}

.msg-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  margin: 0 -8px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s;
}

.msg-item:hover {
  background: var(--color-hover);
}

.msg-item-avatar {
  width: var(--avatar-size-msg, 48px);
  height: var(--avatar-size-msg, 48px);
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
  user-select: none;
}

.msg-item-avatar.is-read {
  opacity: 0.55;
}

.msg-item-body {
  flex: 1;
  min-width: 0;
}

.msg-item-icon {
  font-size: 16px;
  margin-top: 2px;
  flex-shrink: 0;
}

.msg-item-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
  margin-bottom: 2px;
}

.msg-item-sub {
  font-size: 13px;
  font-weight: 400;
  color: var(--color-text-secondary);
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.msg-popover-foot {
  padding: 12px 4px 4px;
}

.msg-see-all.el-button {
  width: 100%;
  height: 44px;
  padding: 0 !important;
  border-radius: var(--radius-button-pill, 9999px) !important;
  font-size: 14px;
  font-weight: 600;
  /*background: var(--color-secondary) !important;*/
  /*border-color: var(--color-secondary) !important;*/
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(0, 116, 186, 0.25);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.msg-see-all.el-button:hover,
.msg-see-all.el-button:focus {
  /*background: #0065a2 !important;*/
  /*border-color: #0065a2 !important;*/
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(0, 116, 186, 0.32);
}

.msg-empty {
  padding: 16px 0 8px;
}

.msg-item-meta {
  font-size: 11px;
  color: var(--color-text-secondary);
  display: flex;
  gap: 8px;
}

/* ===== 语言下拉面板 ===== */
.spike-lang-dropdown {
  margin-top: 12px !important;
  border-radius: var(--popover-radius, 16px) !important;
  box-shadow: var(
    --popover-shadow,
    0 8px 24px rgba(16, 24, 40, 0.12)
  ) !important;
  border: 1px solid var(--color-border) !important;
  padding: 8px !important;
  min-width: 220px !important;
}

.spike-lang-dropdown .el-dropdown-menu__item {
  padding: 10px 14px !important;
  line-height: normal !important;
  border-radius: 8px !important;
  margin: 2px 0 !important;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.spike-lang-dropdown .el-dropdown-menu__item:not(.is-disabled):hover,
.spike-lang-dropdown .el-dropdown-menu__item:not(.is-disabled):focus {
  background: var(--color-hover) !important;
  color: inherit !important;
}

.spike-lang-dropdown .el-dropdown-menu__item.is-active .lang-item-native,
.spike-lang-dropdown .el-dropdown-menu__item.is-active .lang-item-en {
  color: var(--color-primary) !important;
  font-weight: 600 !important;
}

.spike-lang-dropdown .el-dropdown-menu__item.is-active {
  background: var(--color-primary-light) !important;
}

.lang-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 200px;
}

.lang-item-flagbox {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lang-item-flag {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}

.lang-item-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-primary);
}

.lang-item-native {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
  line-height: 1.4;
  unicode-bidi: plaintext;
}

.lang-item-en {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text-secondary);
  line-height: 1.4;
}

/* ===== 用户 Profile Popover ===== */
.spike-user-popover {
  padding: 0 !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 28px rgba(37, 83, 185, 0.14) !important;
  border: 1px solid var(--color-border) !important;
  overflow: hidden;
  margin-top: 12px !important;
}

.user-popover-box {
  padding: 20px;
}

.user-popover-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 2px;
}

.user-popover-avatar {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  flex-shrink: 0;
}

.user-popover-info {
  flex: 1;
  min-width: 0;
}

.user-popover-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: 2px;
}

.user-popover-role {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-bottom: 6px;
}

.user-popover-email {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--color-text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.spike-user-popover .el-divider--horizontal {
  margin: 12px 0 !important;
}

.user-popover-menu {
  padding: 4px 0;
}

.user-menu-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 8px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.18s;
}

.user-menu-item:hover {
  background: var(--color-hover);
}

.user-menu-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.user-menu-icon--info {
  background: var(--color-info-light);
  color: var(--color-info);
}

.user-menu-text {
  flex: 1;
}

.user-menu-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 2px;
}

.user-menu-sub {
  font-size: 12px;
  color: var(--color-text-secondary);
}

.user-popover-footer {
  margin-top: 12px;
}

.user-logout-btn {
  display: block;
  width: 100%;
  padding: 12px 0;
  background: var(--color-primary);
  color: #fff;
  border: none;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 0.2s;
  letter-spacing: 0;
}

.user-logout-btn:hover {
  opacity: 0.88;
}