html {
  scroll-behavior: smooth !important;
  scroll-padding-top: 90px;
}
.gpu-accel {
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translateZ(0);
}
html, body, *, *::before, *::after {
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}
::-webkit-scrollbar,
*::-webkit-scrollbar {
  display: none !important;
  width: 0px !important;
  height: 0px !important;
}
@keyframes scrollbarShimmerGlow {
  0% { background-position: 0% 0%; }
  50% { background-position: 0% 100%; }
  100% { background-position: 0% 0%; }
}
@keyframes scrollThumbDownMotion {
  0% {
    background-position: 0 0, 0% 0%;
  }
  100% {
    background-position: 0 52px, 0% 100%;
  }
}
@keyframes scrollThumbUpMotion {
  0% {
    background-position: 0 0, 0% 0%;
  }
  100% {
    background-position: 0 -52px, 0% -100%;
  }
}
#custom-side-scrollbar {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 14px;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  background: rgba(11, 17, 32, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-left: 1px solid rgba(236, 180, 56, 0.3);
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.5);
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  user-select: none;
}
@media (max-width: 1024px), (pointer: coarse) {
  #custom-side-scrollbar {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
  }
}
#custom-side-scrollbar:hover {
  width: 18px;
  box-shadow: -6px 0 25px rgba(236, 180, 56, 0.4);
}
.side-arrow-cap {
  height: 22px;
  width: 100%;
  background: #0B1120;
  color: #ECB438;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-left: 1px solid rgba(236, 180, 56, 0.4);
  transition: all 0.3s ease;
  z-index: 2;
}
.side-arrow-cap:hover {
  background: #263963;
  color: #FFFFFF;
  box-shadow: 0 0 12px rgba(236, 180, 56, 0.9);
}
.side-scroll-track {
  flex-grow: 1;
  position: relative;
  width: 100%;
  background: transparent;
  cursor: pointer;
}
.side-scroll-thumb {
  position: absolute;
  left: 2px;
  right: 2px;
  min-height: 45px;
  border-radius: 99px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='26' viewBox='0 0 16 26'%3E%3Cpath d='M4 7 L8 12 L12 7' fill='none' stroke='%23ECB438' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' opacity='0.85'/%3E%3Cpath d='M4 16 L8 21 L12 16' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' opacity='0.6'/%3E%3C/svg%3E"),
    linear-gradient(
      180deg,
      #ECB438 0%,
      #263963 25%,
      #385087 50%,
      #263963 75%,
      #ECB438 100%
    );
  background-repeat: repeat-y, repeat;
  background-size: 14px 26px, 100% 300%;
  animation: scrollbarShimmerGlow 6s ease-in-out infinite;
  border: 1.5px solid rgba(236, 180, 56, 0.6);
  box-shadow: inset 0 0 4px rgba(255, 255, 255, 0.3);
  cursor: grab;
  transition: box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.side-scroll-thumb:active {
  cursor: grabbing;
}
.side-scroll-thumb:hover {
  border-color: #FFFFFF;
  box-shadow: 0 0 18px rgba(236, 180, 56, 0.85), inset 0 0 6px rgba(255, 255, 255, 0.6);
}
html.scrolling-down .side-scroll-thumb,
html.scrolling-up .side-scroll-thumb,
html.is-scrolling .side-scroll-thumb {
  border-color: #FFFFFF !important;
  box-shadow: 0 0 28px rgba(236, 180, 56, 1), 0 0 45px rgba(38, 57, 99, 0.95), inset 0 0 8px #FFFFFF !important;
}
html.scrolling-down .side-scroll-thumb {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='26' viewBox='0 0 16 26'%3E%3Cpath d='M4 7 L8 12 L12 7' fill='none' stroke='%23ECB438' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' opacity='0.95'/%3E%3Cpath d='M4 16 L8 21 L12 16' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' opacity='0.8'/%3E%3C/svg%3E"),
    linear-gradient(
      180deg,
      #FFF8E7 0%,
      #ECB438 25%,
      #385087 50%,
      #ECB438 75%,
      #FFF8E7 100%
    );
  animation: scrollThumbDownMotion 0.6s linear infinite;
}
html.scrolling-up .side-scroll-thumb {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='26' viewBox='0 0 16 26'%3E%3Cpath d='M4 19 L8 14 L12 19' fill='none' stroke='%23ECB438' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' opacity='0.95'/%3E%3Cpath d='M4 10 L8 5 L12 10' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' opacity='0.8'/%3E%3C/svg%3E"),
    linear-gradient(
      180deg,
      #FFF8E7 0%,
      #ECB438 25%,
      #385087 50%,
      #ECB438 75%,
      #FFF8E7 100%
    );
  animation: scrollThumbUpMotion 0.6s linear infinite;
}
@media (min-width: 1025px) and (pointer: fine) {
  .card ::-webkit-scrollbar,
  .admin-content ::-webkit-scrollbar,
  .grid-scroll-container::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }
  .card ::-webkit-scrollbar-track,
  .admin-content ::-webkit-scrollbar-track,
  .grid-scroll-container::-webkit-scrollbar-track {
    background: rgba(241, 245, 249, 0.85);
    border-radius: 99px;
  }
  .card ::-webkit-scrollbar-thumb,
  .admin-content ::-webkit-scrollbar-thumb,
  .grid-scroll-container::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #ECB438 0%, #263963 100%);
    background-size: 100% 200%;
    animation: scrollbarShimmerGlow 4s ease infinite;
    border-radius: 99px;
    border: 2px solid transparent;
    background-clip: padding-box;
    box-shadow: 0 0 8px rgba(236, 180, 56, 0.4);
  }
  .card ::-webkit-scrollbar-thumb:hover,
  .admin-content ::-webkit-scrollbar-thumb:hover,
  .grid-scroll-container::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #FFF8E7 0%, #ECB438 100%);
    box-shadow: 0 0 14px rgba(236, 180, 56, 0.95);
  }
}
#scroll-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, #0B1120 0%, #152238 75%, #ECB438 100%);
  z-index: 99999;
  width: 0%;
  transition: width 0.1s linear;
  box-shadow: 0 0 12px rgba(11, 17, 32, 0.95), 0 0 10px rgba(236, 180, 56, 0.7);
  border-radius: 0 4px 4px 0;
  pointer-events: none;
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.spin {
  animation: spin 1s linear infinite;
}
@keyframes floatAnim {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(0.5deg); }
}
.float-slow {
  animation: floatAnim 6s cubic-bezier(0.445, 0.05, 0.55, 0.95) infinite;
}
@keyframes pulseGoldGlow {
  0% { box-shadow: 0 0 0 0 rgba(236, 180, 56, 0.5), 0 8px 25px rgba(236, 180, 56, 0.2); }
  50% { box-shadow: 0 0 0 12px rgba(236, 180, 56, 0), 0 12px 35px rgba(236, 180, 56, 0.35); }
  100% { box-shadow: 0 0 0 0 rgba(236, 180, 56, 0), 0 8px 25px rgba(236, 180, 56, 0.2); }
}
.pulse-gold {
  animation: pulseGoldGlow 2.5s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
@keyframes shimmerShine {
  0% { transform: translateX(-100%) rotate(45deg); }
  100% { transform: translateX(200%) rotate(45deg); }
}
.shimmer-effect {
  position: relative;
  overflow: hidden;
}
.shimmer-effect::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    60deg,
    rgba(255, 255, 255, 0) 20%,
    rgba(255, 255, 255, 0.25) 50%,
    rgba(255, 255, 255, 0) 80%
  );
  transform: rotate(30deg);
  animation: shimmerShine 5s cubic-bezier(0.16, 1, 0.3, 1) infinite;
  pointer-events: none;
}
.reveal,
.reveal-up,
.reveal-left,
.reveal-right,
.reveal-scale {
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-up { transform: translateY(45px); }
.reveal-down { transform: translateY(-45px); }
.reveal-left { transform: translateX(-50px); }
.reveal-right { transform: translateX(50px); }
.reveal-scale { transform: scale(0.92) translateY(20px); }
.reveal-active,
.reveal-up.reveal-active,
.reveal-left.reveal-active,
.reveal-right.reveal-active,
.reveal-scale.reveal-active {
  opacity: 1 !important;
  transform: translate(0, 0) scale(1) !important;
}
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }
.smooth-hover {
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.smooth-hover:hover {
  transform: translateY(-6px) scale(1.015);
  box-shadow: 0 20px 40px -12px rgba(38, 57, 99, 0.12);
}
.card:hover, .stat-card:hover {
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.glass-panel {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(236, 180, 56, 0.3);
  box-shadow: 0 12px 35px rgba(38, 57, 99, 0.09);
  transition: all 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.glass-panel:hover {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(236, 180, 56, 0.6);
  box-shadow: 0 20px 45px rgba(38, 57, 99, 0.15);
}
.btn {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  position: relative;
  overflow: hidden;
}
.btn:hover {
  transform: translateY(-2px);
}
.btn:active {
  transform: translateY(1px) scale(0.98);
}
.ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  transform: scale(0);
  animation: rippleAnim 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  pointer-events: none;
}
@keyframes rippleAnim {
  to {
    transform: scale(4);
    opacity: 0;
  }
}
.click-pop-ring {
  position: fixed;
  width: 24px;
  height: 24px;
  border: 2.5px solid #ECB438;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999999;
  transform: translate(-50%, -50%) scale(0.5);
  animation: cursorClickPop 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  box-shadow: 0 0 15px rgba(236, 180, 56, 0.9), 0 0 25px rgba(38, 57, 99, 0.6);
}
@keyframes cursorClickPop {
  0% {
    transform: translate(-50%, -50%) scale(0.4);
    opacity: 1;
    border-color: #FFF8E7;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.6);
    opacity: 0.8;
    border-color: #ECB438;
  }
  100% {
    transform: translate(-50%, -50%) scale(2.2);
    opacity: 0;
    border-color: #263963;
  }
}