:root {
  --tet-red: #e63946;
  --tet-red-dark: #c1121f;
  --tet-gold: #ffd700;
  --tet-gold-light: #ffe066;
  --tet-cream: #fff8e7;
  --tet-bg: #1a1a2e;
  --tet-bg-card: #16213e;
  --tet-accent: #ff6b6b;
  --tet-border: rgba(255, 215, 0, 0.15);
}


.dark .bg-muted-100,
.dark .bg-muted-900 {
  background: transparent !important;
}

.dark body,
html.dark body {
  background: 
    radial-gradient(ellipse at top left, rgba(230, 57, 70, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at bottom right, rgba(255, 215, 0, 0.06) 0%, transparent 50%),
    linear-gradient(180deg, #0f0f1a 0%, #1a1a2e 50%, #0f0f1a 100%) !important;
  background-attachment: fixed !important;
}

.dark .wt-sidebar,
html.dark .wt-sidebar {
  background: linear-gradient(180deg, rgba(22, 33, 62, 0.98) 0%, rgba(15, 15, 26, 0.98) 100%) !important;
  backdrop-filter: blur(20px) !important;
  border-right: 1px solid var(--tet-border) !important;
}


html.dark .wt-sidebar a[class],
html.dark .wt-sidebar button[class],
html.dark .wt-sidebar a[class*="bg-primary"],
html.dark .wt-sidebar button[class*="bg-primary"],
html.dark .wt-sidebar a[class*="router-link"],
html.dark .wt-sidebar a[class*="active"],
html.dark .wt-sidebar button[class*="active"],
html.dark .wt-sidebar li a[class] {
  background-color: transparent !important;
  background: transparent !important;
  border-left-color: transparent !important;
}

html.dark .wt-sidebar a[class]:hover,
html.dark .wt-sidebar button[class]:hover {
  background: rgba(255, 215, 0, 0.05) !important;
}

.dark .nui-card {
  background: linear-gradient(145deg, rgba(22, 33, 62, 0.9) 0%, rgba(26, 26, 46, 0.9) 100%) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid var(--tet-border) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 215, 0, 0.05) !important;
  transition: all 0.3s ease !important;
}

.dark .nui-card:hover {
  border-color: rgba(255, 215, 0, 0.3) !important;
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 20px rgba(255, 215, 0, 0.1) !important;
}

.nui-button-primary,
.nui-button-solid.nui-button-primary {
  background: linear-gradient(135deg, var(--tet-red) 0%, var(--tet-red-dark) 100%) !important;
  border: none !important;
  box-shadow: 0 4px 15px rgba(230, 57, 70, 0.4) !important;
  transition: all 0.3s ease !important;
}

.nui-button-primary:hover,
.nui-button-solid.nui-button-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(230, 57, 70, 0.5) !important;
}

.nui-button-success,
.nui-button-solid.nui-button-success {
  background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%) !important;
  box-shadow: 0 4px 15px rgba(46, 204, 113, 0.35) !important;
}

.dark .nui-input,
.dark .nui-select,
.dark .nui-textarea {
  background: rgba(15, 15, 26, 0.8) !important;
  border: 1px solid rgba(255, 215, 0, 0.1) !important;
  transition: all 0.2s ease !important;
}

.dark .nui-input:focus,
.dark .nui-select:focus,
.dark .nui-textarea:focus {
  border-color: var(--tet-gold) !important;
  box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.1), 0 0 20px rgba(255, 215, 0, 0.1) !important;
}

.marquee {
  z-index: 50 !important;
  background: transparent !important;
  border: none !important;
}

.marquee span {
  color: var(--tet-cream) !important;
}

.wt-sidebar {
  z-index: 60 !important;
}

.swiper {
  border-radius: 16px !important;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4) !important;
}

.swiper-button-next,
.swiper-button-prev {
  background: linear-gradient(135deg, var(--tet-red) 0%, var(--tet-red-dark) 100%) !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  transition: all 0.3s ease !important;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 20px rgba(230, 57, 70, 0.5) !important;
}

.swiper-button-next::after,
.swiper-button-prev::after {
  font-size: 16px !important;
  color: #fff !important;
}

::-webkit-scrollbar {
  width: 8px !important;
  height: 8px !important;
}

::-webkit-scrollbar-track {
  background: rgba(26, 26, 46, 0.5) !important;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--tet-red) 0%, var(--tet-gold) 100%) !important;
  border-radius: 10px !important;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--tet-accent) 0%, var(--tet-gold-light) 100%) !important;
}

.dark .lavender-preloader {
  background: radial-gradient(ellipse at center, #1a1a2e 0%, #0f0f1a 100%) !important;
}

.loader .path {
  stroke: var(--tet-gold) !important;
}

.dark .text-primary-500 {
  color: var(--tet-gold) !important;
}

.dark .bg-primary-500 {
  background: linear-gradient(135deg, var(--tet-red) 0%, var(--tet-red-dark) 100%) !important;
}

.magic-text {
  background: linear-gradient(90deg, var(--tet-red), var(--tet-gold), var(--tet-red)) !important;
  background-size: 200% !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  animation: tet-gradient 3s ease infinite !important;
}

@keyframes tet-gradient {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 100% center; }
}

.nui-avatar img {
  box-shadow: 0 0 0 2px var(--tet-bg-card), 0 0 0 4px rgba(255, 215, 0, 0.3);
  transition: all 0.3s ease;
}

.nui-avatar:hover img {
  box-shadow: 0 0 0 2px var(--tet-bg-card), 0 0 0 4px var(--tet-gold), 0 0 20px rgba(255, 215, 0, 0.3);
}

.wt-sidebar .logo-area img,
.wt-sidebar > div:first-child img {
  filter: none;
}

.dark .nui-tag-primary {
  background: linear-gradient(135deg, rgba(230, 57, 70, 0.2) 0%, rgba(255, 215, 0, 0.1) 100%) !important;
  color: var(--tet-gold) !important;
  border: 1px solid rgba(255, 215, 0, 0.3) !important;
}

.text-red-500,
.text-danger-500 {
  background: linear-gradient(90deg, var(--tet-red), var(--tet-accent)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: 600 !important;
}

.text-warning-500 {
  color: var(--tet-gold) !important;
}

.dark .popup-banner {
  background: linear-gradient(145deg, rgba(22, 33, 62, 0.98) 0%, rgba(15, 15, 26, 0.98) 100%) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid var(--tet-border) !important;
  border-radius: 20px !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(255, 215, 0, 0.1) !important;
}

@keyframes tet-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(255, 215, 0, 0.2); }
  50% { box-shadow: 0 0 40px rgba(255, 215, 0, 0.4); }
}

.dark .nui-card:first-child {
  animation: tet-glow 4s ease-in-out infinite;
}

body, select, button, a:hover, input, textarea {
  cursor: auto !important;
}

button, a, [role="button"] {
  cursor: pointer !important;
}

input, textarea {
  cursor: text !important;
}

@media (max-width: 768px) {
  .swiper {
    border-radius: 12px !important;
  }
  
  .nui-card {
    border-radius: 12px !important;
  }
}