/* ============================================
   Uiverse Tabs v1.002 - 4 角色底部 nav 风格
   ============================================ */

/* 1) 看板 TAB - AbanoubMagdy1 4 圆点旋转 */
.nav-loader-4dots {
  --dim: 28px;
  width: var(--dim);
  height: var(--dim);
  position: relative;
  animation: spin988 2s linear infinite;
}
.nav-loader-4dots .circle {
  --color: #1a1a1a;
  --dim-dot: 10px;
  width: var(--dim-dot);
  height: var(--dim-dot);
  background-color: var(--color);
  border-radius: 50%;
  position: absolute;
}
.nav-loader-4dots .circle:nth-child(1) { top: 0; left: 0; }
.nav-loader-4dots .circle:nth-child(2) { top: 0; right: 0; }
.nav-loader-4dots .circle:nth-child(3) { bottom: 0; left: 0; }
.nav-loader-4dots .circle:nth-child(4) { bottom: 0; right: 0; }
@keyframes spin988 {
  0%   { transform: scale(1) rotate(0); }
  20%, 25% { transform: scale(1.3) rotate(90deg); }
  45%, 50% { transform: scale(1) rotate(180deg); }
  70%, 75% { transform: scale(1.3) rotate(270deg); }
  95%, 100% { transform: scale(1) rotate(360deg); }
}

/* 2) 我的 TAB - Nawsome SVG preloader 风格(简化为纯 CSS 旋转) */
.svg_preloader {
  width: 22px;
  height: 22px;
  position: relative;
}
.svg_preloader svg {
  width: 100%;
  height: 100%;
  animation: preloader-rotate 2.4s linear infinite;
}
.svg_preloader circle {
  fill: none;
  stroke: #1a1a1a;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 60 200;
  animation: preloader-dash 1.6s ease-in-out infinite;
}
@keyframes preloader-rotate { to { transform: rotate(360deg); } }
@keyframes preloader-dash {
  0%   { stroke-dasharray: 1 200; stroke-dashoffset: 0; }
  50%  { stroke-dasharray: 100 200; stroke-dashoffset: -30; }
  100% { stroke-dasharray: 100 200; stroke-dashoffset: -120; }
}

/* 3) 审核 TAB - Shoh2008 脉冲圆环 */
.nav-audit-pulse {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
}
.nav-audit-pulse::before,
.nav-audit-pulse::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  animation: pulsOut 1.8s ease-in-out infinite;
}
.nav-audit-pulse::before {
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 0 2px #1a1a1a;
  animation-name: pulsIn;
}
.nav-audit-pulse::after {
  width: calc(100% - 6px);
  height: calc(100% - 8px);
  box-shadow: 0 0 0 0 #1a1a1a;
}
@keyframes pulsIn {
  0%   { box-shadow: inset 0 0 0 2px #1a1a1a; opacity: 1; }
  50%, 100% { box-shadow: inset 0 0 0 0 #1a1a1a; opacity: 0; }
}
@keyframes pulsOut {
  0%, 50% { box-shadow: 0 0 0 0 #1a1a1a; opacity: 0; }
  100%    { box-shadow: 0 0 0 3px #1a1a1a; opacity: 1; }
}

/* 4) 通用 checkbox - Uiverse vishnupprajapat 风格 */
.checkbox-wrapper-46 input[type="checkbox"] {
  display: none;
  visibility: hidden;
}
.checkbox-wrapper-46 .cbx {
  margin: auto;
  -webkit-user-select: none;
  user-select: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}
.checkbox-wrapper-46 .cbx span {
  display: inline-block;
  vertical-align: middle;
  transform: translate3d(0, 0, 0);
}
.checkbox-wrapper-46 .cbx span:first-child {
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 3px;
  transform: scale(1);
  vertical-align: middle;
  border: 1px solid #9098a9;
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.checkbox-wrapper-46 .cbx span:first-child svg {
  position: absolute;
  top: 3px;
  left: 2px;
  fill: none;
  stroke: #ffffff;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 16px;
  stroke-dashoffset: 16px;
  transition: all 0.3s ease;
  transition-delay: 0.1s;
  transform: translate3d(0, 0, 0);
}
.checkbox-wrapper-46 .cbx span:first-child::before {
  content: "";
  width: 100%;
  height: 100%;
  background: #506eec;
  display: block;
  transform: scale(0);
  opacity: 1;
  border-radius: 50%;
}
.checkbox-wrapper-46 .cbx:hover span:first-child { border-color: #506eec; }
.checkbox-wrapper-46 .inp-cbx:checked + .cbx span:first-child {
  background: #506eec;
  border-color: #506eec;
  animation: wave-46 0.4s ease;
}
.checkbox-wrapper-46 .inp-cbx:checked + .cbx span:first-child svg {
  stroke-dashoffset: 0;
}
.checkbox-wrapper-46 .inp-cbx:checked + .cbx span:first-child::before {
  transform: scale(3.5);
  opacity: 0;
  transition: all 0.6s ease;
}
@keyframes wave-46 { 50% { transform: scale(0.9); } }

/* 5) 新增 TAB - 简化为 ⊕ 圆圈 */
.nav-new-plus {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid #1a1a1a;
  position: relative;
  transition: all 0.3s ease;
}
.nav-new-plus::before,
.nav-new-plus::after {
  content: "";
  position: absolute;
  background: #1a1a1a;
  border-radius: 1px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.3s ease;
}
.nav-new-plus::before { width: 14px; height: 2px; }
.nav-new-plus::after  { width: 2px; height: 14px; }
.nav-item.nav-new:hover .nav-new-plus { border-color: #28a745; }
.nav-item.nav-new:hover .nav-new-plus::before,
.nav-item.nav-new:hover .nav-new-plus::after { background: #28a745; }

/* 6) 看板 TAB - Uiverse jeremyssocial 4 cube 折叠动画 v1.002 */
.cube-loader {
  position: relative;
  width: 22px;
  height: 22px;
  margin: auto;
}
.cube-loader .cube {
  position: absolute;
  width: 50%;
  height: 50%;
  background-color: #1a1a1a;
  border: 1px solid #fff;
  animation: foldCube 2.4s infinite linear;
  box-sizing: border-box;
}
.cube-loader .cube1 {
  top: 0;
  left: 0;
  transform-origin: 100% 100%;
  animation-delay: 0.3s;
}
.cube-loader .cube2 {
  top: 0;
  right: 0;
  transform-origin: 0 100%;
  animation-delay: 0.6s;
}
.cube-loader .cube3 {
  bottom: 0;
  right: 0;
  transform-origin: 0 0;
  animation-delay: 0.9s;
}
.cube-loader .cube4 {
  bottom: 0;
  left: 0;
  transform-origin: 100% 0;
  animation-delay: 1.2s;
}
@keyframes foldCube {
  0%, 10% {
    transform: perspective(140px) rotateX(-180deg);
    opacity: 0;
  }
  25%, 75% {
    transform: perspective(140px) rotateX(0deg);
    opacity: 1;
  }
  90%, 100% {
    transform: perspective(140px) rotateY(180deg);
    opacity: 0;
  }
}

.nav-audit.active .nav-audit-pulse::before { box-shadow: inset 0 0 0 2px #fff; }
.nav-audit.active .nav-audit-pulse::after { box-shadow: 0 0 0 0 #fff; }