/* Custom Enhancements for Thien.Studio & Upwork Client Hub */
/* Feng Shui Palette: Canh Ngọ 1990 — Mệnh Thổ (Lộ Bàng Thổ) & Hỏa tương sinh */

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Safe area for modern phones with gesture bars */
.safe-area-bottom {
  padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
}

/* Custom scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #0c0a09;
}
::-webkit-scrollbar-thumb {
  background: #2a2420;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #f59e0b;
}

/* Hide scrollbar utility */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Desktop Tab active style — Luxury Amber Gold */
.active-tab {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #0c0a09 !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 16px rgba(245, 158, 11, 0.4);
}

.active-tab svg {
  stroke: #0c0a09 !important;
}

/* Filter active style */
.active-filter {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #0c0a09 !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 10px rgba(245, 158, 11, 0.35);
}

/* Voice Card Selected */
.voice-card-selected {
  border-color: #f59e0b !important;
  background-color: rgba(245, 158, 11, 0.1) !important;
}

/* Range input styling */
input[type=range] {
  height: 6px;
  border-radius: 9999px;
  background: #2a2420;
}

/* VoiceStudio Sub-tab Active Style */
.active-vsub {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #0c0a09 !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);
}

.active-vsub span {
  color: #0c0a09 !important;
}

/* Mobile Bottom Nav Active Button */
.active-mobile-tab {
  color: #f59e0b !important;
}

.active-mobile-tab svg {
  filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.6));
  transform: scale(1.1);
}

/* Voice attribute toggle selected */
.vattr-selected {
  border-color: #f59e0b !important;
  background-color: rgba(245, 158, 11, 0.15) !important;
  color: #ffffff !important;
}

/* Mobile Top Nav Active Tab Style */
.active-top-m-tab {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #0c0a09 !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 10px rgba(245, 158, 11, 0.4) !important;
}

.active-top-m-tab svg {
  stroke: #0c0a09 !important;
}

.active-top-m-tab span {
  color: #0c0a09 !important;
}

/* Active Downloader Format Filter Tab */
.active-fmt-tab {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #0c0a09 !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.35);
}

/* Format Card Selected */
.format-card-selected {
  border-color: #f59e0b !important;
  background-color: rgba(245, 158, 11, 0.12) !important;
  box-shadow: 0 0 0 1px #f59e0b, 0 4px 16px rgba(245, 158, 11, 0.2) !important;
}