/* ============================================================
   KTMY — Visual Overhaul v3.0
   "The Pulse of Malaysia" — Immersive State-of-the-Art Design
   ============================================================ */

/* ============================================================
   ENHANCED DESIGN TOKENS
   ============================================================ */
:root {
  /* Deeper background */
  --bg-primary: #040811;
  --bg-secondary: #07091a;

  /* Richer glass */
  --glass-bg: rgba(255, 255, 255, 0.028);
  --glass-bg-hover: rgba(255, 255, 255, 0.052);
  --glass-border: rgba(255, 255, 255, 0.065);
  --glass-border-hover: rgba(255, 255, 255, 0.13);

  /* Premium shadows */
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255,255,255,0.05) inset;
  --shadow-card-hover: 0 14px 44px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0,201,167,0.08), 0 1px 0 rgba(255,255,255,0.08) inset;

  /* Spring easing */
  --ease-spring-soft: cubic-bezier(0.34, 1.3, 0.64, 1);
  --ease-float: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================================
   AURORA ANIMATED BACKGROUND
   ============================================================ */
body {
  background: #040811;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 110% 75% at 5% 0%, rgba(0, 201, 167, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse 75% 55% at 95% 20%, rgba(77, 124, 254, 0.10) 0%, transparent 55%),
    radial-gradient(ellipse 85% 65% at 55% 100%, rgba(168, 85, 247, 0.08) 0%, transparent 55%),
    radial-gradient(ellipse 55% 45% at 25% 70%, rgba(220, 20, 60, 0.05) 0%, transparent 50%),
    linear-gradient(180deg, #040811 0%, #07091a 50%, #040811 100%);
  animation: ktmyAurora 30s ease-in-out infinite alternate;
}

@keyframes ktmyAurora {
  0% {
    background:
      radial-gradient(ellipse 110% 75% at 5% 0%, rgba(0, 201, 167, 0.12) 0%, transparent 55%),
      radial-gradient(ellipse 75% 55% at 95% 20%, rgba(77, 124, 254, 0.10) 0%, transparent 55%),
      radial-gradient(ellipse 85% 65% at 55% 100%, rgba(168, 85, 247, 0.08) 0%, transparent 55%),
      radial-gradient(ellipse 55% 45% at 25% 70%, rgba(220, 20, 60, 0.05) 0%, transparent 50%),
      linear-gradient(180deg, #040811 0%, #07091a 55%, #040811 100%);
  }
  33% {
    background:
      radial-gradient(ellipse 110% 75% at 20% 8%, rgba(77, 124, 254, 0.11) 0%, transparent 55%),
      radial-gradient(ellipse 75% 55% at 80% 35%, rgba(0, 201, 167, 0.10) 0%, transparent 55%),
      radial-gradient(ellipse 85% 65% at 35% 90%, rgba(168, 85, 247, 0.08) 0%, transparent 55%),
      radial-gradient(ellipse 55% 45% at 70% 55%, rgba(255, 140, 0, 0.04) 0%, transparent 50%),
      linear-gradient(180deg, #040811 0%, #07091a 55%, #040811 100%);
  }
  66% {
    background:
      radial-gradient(ellipse 110% 75% at 80% 12%, rgba(168, 85, 247, 0.10) 0%, transparent 55%),
      radial-gradient(ellipse 75% 55% at 15% 45%, rgba(0, 201, 167, 0.11) 0%, transparent 55%),
      radial-gradient(ellipse 85% 65% at 65% 85%, rgba(77, 124, 254, 0.08) 0%, transparent 55%),
      radial-gradient(ellipse 55% 45% at 45% 40%, rgba(220, 20, 60, 0.04) 0%, transparent 50%),
      linear-gradient(180deg, #040811 0%, #07091a 55%, #040811 100%);
  }
  100% {
    background:
      radial-gradient(ellipse 110% 75% at 55% 2%, rgba(0, 201, 167, 0.09) 0%, transparent 55%),
      radial-gradient(ellipse 75% 55% at 92% 65%, rgba(77, 124, 254, 0.11) 0%, transparent 55%),
      radial-gradient(ellipse 85% 65% at 12% 80%, rgba(168, 85, 247, 0.07) 0%, transparent 55%),
      radial-gradient(ellipse 55% 45% at 60% 25%, rgba(255, 140, 0, 0.04) 0%, transparent 50%),
      linear-gradient(180deg, #040811 0%, #07091a 55%, #040811 100%);
  }
}

/* Subtle noise texture for depth */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.018;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   CURSOR ORB (created by JS)
   ============================================================ */
#ktmy-cursor-orb {
  position: fixed;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at center, rgba(0, 201, 167, 0.055) 0%, transparent 70%);
  will-change: left, top;
  display: none;
}

@media (hover: hover) {
  #ktmy-cursor-orb { display: block; }
}

/* ============================================================
   SCROLLBAR REFINEMENT
   ============================================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.015); }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0, 201, 167, 0.35); }

/* ============================================================
   SIDEBAR ENHANCEMENTS
   ============================================================ */
.sidebar {
  background: rgba(3, 5, 16, 0.97);
  backdrop-filter: blur(36px) saturate(160%);
  -webkit-backdrop-filter: blur(36px) saturate(160%);
  border-right: 1px solid rgba(255, 255, 255, 0.045);
  box-shadow: 6px 0 56px rgba(0, 0, 0, 0.75), inset -1px 0 0 rgba(255, 255, 255, 0.025);
}

.sidebar-header {
  background: linear-gradient(160deg, rgba(0, 201, 167, 0.07) 0%, transparent 65%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  position: relative;
  overflow: hidden;
}

.sidebar-header::before {
  content: '';
  position: absolute;
  top: -30px;
  left: -30px;
  width: 140px;
  height: 140px;
  background: radial-gradient(circle, rgba(0, 201, 167, 0.18) 0%, transparent 70%);
  pointer-events: none;
  animation: sidebarGlow 6s ease-in-out infinite alternate;
}

@keyframes sidebarGlow {
  0% { opacity: 0.6; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.2); }
}

/* Logo refinement */
.nav-logo {
  position: relative;
  z-index: 1;
}

.nav-logo .logo-icon {
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent-blue) 100%);
  box-shadow: 0 2px 14px rgba(0, 201, 167, 0.45);
  transition: transform 0.35s var(--ease-spring-soft), box-shadow 0.35s ease;
}

.nav-logo .logo-icon:hover {
  transform: scale(1.12) rotate(-5deg);
  box-shadow: 0 4px 22px rgba(0, 201, 167, 0.65);
}

/* Group labels */
.nav-group-label {
  color: rgba(255, 255, 255, 0.27);
  font-size: 0.61rem;
  letter-spacing: 0.13em;
}

/* Tab links */
.tab-link {
  transition: all 0.22s cubic-bezier(0.34, 1.3, 0.64, 1);
  position: relative;
  overflow: hidden;
  border-left: 2px solid transparent;
}

.tab-link::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 201, 167, 0.07) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.2s ease;
  border-radius: inherit;
  pointer-events: none;
}

.tab-link:hover {
  border-left-color: rgba(0, 201, 167, 0.22);
  transform: translateX(2px);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-primary);
}

.tab-link:hover::before {
  opacity: 1;
}

.tab-link.active {
  background: rgba(0, 201, 167, 0.08);
  border-left-color: var(--primary);
  color: var(--primary);
}

.tab-link.active::before {
  opacity: 1;
}

/* Active tab glow pulse */
.tab-link.active::after {
  content: '';
  position: absolute;
  left: -2px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 65%;
  background: linear-gradient(180deg, var(--primary), var(--accent-blue));
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 10px var(--primary), 0 0 22px rgba(0, 201, 167, 0.45);
}

.tab-link.active .nav-icon {
  filter: drop-shadow(0 0 7px rgba(0, 201, 167, 0.9));
}

/* Live badge pulse */
.nav-badge.live {
  background: rgba(0, 255, 136, 0.1);
  color: var(--success);
  animation: ktmyLivePulse 2.5s ease-in-out infinite;
}

@keyframes ktmyLivePulse {
  0%, 100% { box-shadow: 0 0 6px rgba(0, 255, 136, 0.15); }
  50% { box-shadow: 0 0 14px rgba(0, 255, 136, 0.4); }
}

.sidebar-footer {
  background: rgba(0, 0, 0, 0.25);
}

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar {
  background: rgba(3, 5, 16, 0.93);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  box-shadow: 0 4px 36px rgba(0, 0, 0, 0.45);
  position: relative;
}

/* Gradient accent underline */
.topbar::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(0, 201, 167, 0.45) 25%, rgba(77, 124, 254, 0.45) 75%, transparent 100%);
}

.topbar-breadcrumb span {
  color: var(--text-primary);
  font-weight: 600;
}

.search-input-wrapper {
  background: rgba(255, 255, 255, 0.038);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: all 0.22s ease;
}

.search-input-wrapper:focus-within {
  background: rgba(255, 255, 255, 0.065);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(0, 201, 167, 0.12), 0 4px 16px rgba(0, 0, 0, 0.3);
}

.topbar-refresh-btn {
  transition: all 0.2s ease;
}

.topbar-refresh-btn:hover {
  background: rgba(0, 201, 167, 0.08);
  border-color: rgba(0, 201, 167, 0.3);
  color: var(--primary);
  box-shadow: 0 0 14px rgba(0, 201, 167, 0.15);
}

/* ============================================================
   GLASS CARDS
   ============================================================ */
.glass-card {
  background: rgba(255, 255, 255, 0.026);
  border: 1px solid rgba(255, 255, 255, 0.065);
  box-shadow: var(--shadow-card);
  transition: transform 0.38s var(--ease-spring-soft),
              box-shadow 0.38s ease,
              border-color 0.38s ease,
              background 0.38s ease;
}

.glass-card::before {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,255,255,0.09) 35%,
    rgba(255,255,255,0.13) 50%,
    rgba(255,255,255,0.09) 65%,
    transparent 100%);
  height: 1px;
  pointer-events: none;
}

/* Holographic shimmer sweep on hover */
.glass-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    118deg,
    transparent 25%,
    rgba(255,255,255,0.028) 38%,
    rgba(255,255,255,0.055) 50%,
    rgba(255,255,255,0.028) 62%,
    transparent 75%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

@media (hover: hover) {
  .glass-card:hover {
    background: rgba(255, 255, 255, 0.046);
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-5px);
  }

  .glass-card:hover::after {
    opacity: 1;
  }
}

/* Flat variant */
.glass-card-flat {
  background: rgba(255, 255, 255, 0.026);
  border: 1px solid rgba(255, 255, 255, 0.065);
  box-shadow: var(--shadow-card);
}

/* ============================================================
   CARD ENTRANCE ANIMATIONS (driven by JS)
   ============================================================ */
@keyframes ktmyCardIn {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.ktmy-card-animating {
  animation: ktmyCardIn 0.52s var(--ease-float) both;
}

/* ============================================================
   CHART CONTAINERS
   ============================================================ */
.chart-container {
  background: rgba(255, 255, 255, 0.018);
  border: 1px solid rgba(255, 255, 255, 0.065);
  box-shadow: var(--shadow-card);
  min-height: 340px;
  position: relative;
  overflow: hidden;
}

.chart-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(0, 201, 167, 0.35) 30%, rgba(77, 124, 254, 0.35) 70%, transparent 100%);
  z-index: 2;
  pointer-events: none;
}

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.section-badge {
  background: rgba(0, 201, 167, 0.065);
  border: 1px solid rgba(0, 201, 167, 0.18);
  box-shadow: 0 0 20px rgba(0, 201, 167, 0.05);
  transition: all 0.2s ease;
}

.section-badge:hover {
  background: rgba(0, 201, 167, 0.11);
  border-color: rgba(0, 201, 167, 0.3);
}

.badge-dot {
  animation: ktmyDotPulse 2s ease-in-out infinite;
}

@keyframes ktmyDotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0, 201, 167, 0.5); }
  50% { box-shadow: 0 0 0 4px rgba(0, 201, 167, 0); }
}

.badge-dot.warning {
  animation: ktmyDotPulseWarning 2s ease-in-out infinite;
}

@keyframes ktmyDotPulseWarning {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 184, 0, 0.5); }
  50% { box-shadow: 0 0 0 4px rgba(255, 184, 0, 0); }
}

.section-title {
  background: linear-gradient(135deg, var(--text-primary) 0%, rgba(232, 236, 244, 0.72) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============================================================
   STAT NUMBERS & CHANGES
   ============================================================ */
.stat-number {
  background: linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, 0.72) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-number.glow {
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent-blue) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 14px rgba(0, 201, 167, 0.55));
  text-shadow: none;
}

.stat-change.up {
  color: var(--success);
  background: rgba(0, 255, 136, 0.1);
  box-shadow: 0 0 10px rgba(0, 255, 136, 0.14), inset 0 0 8px rgba(0, 255, 136, 0.04);
}

.stat-change.down {
  color: var(--danger);
  background: rgba(255, 71, 87, 0.1);
  box-shadow: 0 0 10px rgba(255, 71, 87, 0.14), inset 0 0 8px rgba(255, 71, 87, 0.04);
}

/* ============================================================
   GRADIENT TEXT
   ============================================================ */
.gradient-text {
  background: linear-gradient(135deg, #00C9A7 0%, #4D7CFE 40%, #A855F7 75%, #FF8C00 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 5s ease infinite;
}

/* ============================================================
   WEATHER MODULE
   ============================================================ */
.weather-card {
  background: rgba(255, 255, 255, 0.026);
  border: 1px solid rgba(255, 255, 255, 0.065);
  box-shadow: var(--shadow-card);
  transition: all 0.32s var(--ease-spring-soft);
}

.weather-card:hover {
  background: rgba(255, 255, 255, 0.044);
  border-color: rgba(255, 255, 255, 0.12);
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.42);
}

.weather-card.today {
  background: linear-gradient(135deg, rgba(0, 201, 167, 0.09) 0%, rgba(77, 124, 254, 0.05) 100%);
  border-color: rgba(0, 201, 167, 0.3);
  box-shadow: 0 0 0 1px rgba(0, 201, 167, 0.1), var(--shadow-card);
}

.weather-gauge-item {
  background: rgba(255, 255, 255, 0.026) !important;
  border: 1px solid rgba(255, 255, 255, 0.065) !important;
  transition: all 0.2s ease !important;
}

.weather-gauge-item:hover {
  background: rgba(255, 255, 255, 0.044) !important;
  border-color: rgba(0, 201, 167, 0.2) !important;
}

.forecast-day-card {
  background: rgba(255, 255, 255, 0.026) !important;
  border: 1px solid rgba(255, 255, 255, 0.065) !important;
  transition: all 0.28s var(--ease-spring-soft) !important;
}

.forecast-day-card:hover {
  background: rgba(255, 255, 255, 0.044) !important;
  border-color: rgba(0, 201, 167, 0.26) !important;
  transform: translateY(-5px) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45) !important;
}

.city-weather-tile {
  background: rgba(255, 255, 255, 0.026) !important;
  border: 1px solid rgba(255, 255, 255, 0.065) !important;
  transition: all 0.26s var(--ease-spring-soft) !important;
}

.city-weather-tile:hover,
.city-weather-tile.active {
  background: rgba(0, 201, 167, 0.08) !important;
  border-color: rgba(0, 201, 167, 0.3) !important;
  transform: translateY(-3px) !important;
}

/* ============================================================
   PRICE TAGS
   ============================================================ */
.price-tag {
  background: rgba(255, 255, 255, 0.026);
  border: 1px solid rgba(255, 255, 255, 0.065);
  box-shadow: var(--shadow-card);
  transition: all 0.38s var(--ease-spring-soft);
}

.price-tag:hover {
  transform: translateY(-8px) scale(1.025);
  border-color: rgba(0, 201, 167, 0.32);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.52), 0 0 0 1px rgba(0, 201, 167, 0.1);
  background: rgba(0, 201, 167, 0.06);
}

/* ============================================================
   CURRENCY CARDS
   ============================================================ */
.currency-card {
  background: rgba(255, 255, 255, 0.026);
  border: 1px solid rgba(255, 255, 255, 0.065);
  box-shadow: var(--shadow-card);
  transition: all 0.26s var(--ease-spring-soft);
}

.currency-card:hover {
  background: rgba(0, 201, 167, 0.04);
  border-color: rgba(0, 201, 167, 0.2);
  transform: translateX(5px);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.42), -4px 0 0 rgba(0, 201, 167, 0.3);
}

/* ============================================================
   INFO CARDS
   ============================================================ */
.info-card {
  background: rgba(255, 255, 255, 0.026);
  border: 1px solid rgba(255, 255, 255, 0.065);
  box-shadow: var(--shadow-card);
  transition: all 0.26s var(--ease-spring-soft);
}

.info-card:hover {
  background: rgba(0, 201, 167, 0.04);
  border-color: rgba(0, 201, 167, 0.16);
  transform: translateX(4px);
}

.info-card .info-icon {
  background: linear-gradient(135deg, rgba(0, 201, 167, 0.12) 0%, rgba(77, 124, 254, 0.08) 100%);
  border: 1px solid rgba(0, 201, 167, 0.13);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.22);
}

/* ============================================================
   PROGRESS BARS
   ============================================================ */
.progress-bar {
  background: rgba(255, 255, 255, 0.05);
  overflow: hidden;
}

.progress-bar .progress-fill {
  background: linear-gradient(90deg, var(--primary) 0%, var(--accent-blue) 50%, var(--accent-purple) 100%);
  background-size: 200% 100%;
  animation: ktmyProgressShine 3s linear infinite;
  position: relative;
}

@keyframes ktmyProgressShine {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* ============================================================
   FILTER CHIPS
   ============================================================ */
.filter-chip {
  background: rgba(255, 255, 255, 0.026);
  border: 1px solid rgba(255, 255, 255, 0.065);
  transition: all 0.22s var(--ease-spring-soft);
}

.filter-chip:hover {
  background: rgba(0, 201, 167, 0.06);
  border-color: rgba(0, 201, 167, 0.26);
  color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}

.filter-chip.active {
  background: rgba(0, 201, 167, 0.1);
  border-color: rgba(0, 201, 167, 0.36);
  color: var(--primary);
  box-shadow: 0 0 14px rgba(0, 201, 167, 0.2), 0 4px 14px rgba(0, 0, 0, 0.3);
}

/* ============================================================
   DATA TABLES
   ============================================================ */
.data-table {
  border: 1px solid rgba(255, 255, 255, 0.065);
}

.data-table thead th {
  background: rgba(255, 255, 255, 0.026);
  border-bottom: 1px solid rgba(255, 255, 255, 0.065);
}

.data-table tbody tr {
  transition: background 0.15s ease;
}

.data-table tbody tr:hover {
  background: rgba(0, 201, 167, 0.038);
}

.data-table tbody td {
  border-bottom: 1px solid rgba(255, 255, 255, 0.026);
}

/* ============================================================
   TABS (inner sub-tabs)
   ============================================================ */
.tabs {
  background: rgba(255, 255, 255, 0.026);
  border: 1px solid rgba(255, 255, 255, 0.065);
}

.tab-btn {
  transition: all 0.22s var(--ease-spring-soft);
}

.tab-btn:hover {
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.04);
}

.tab-btn.active {
  background: linear-gradient(135deg, var(--primary), var(--accent-blue));
  box-shadow: 0 2px 14px rgba(0, 201, 167, 0.38);
  color: #040811;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 4px 18px rgba(0, 201, 167, 0.38);
  transition: all 0.28s var(--ease-spring-soft);
  position: relative;
  overflow: hidden;
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  transition: left 0.5s ease;
  pointer-events: none;
}

.btn-primary:hover::before {
  left: 100%;
}

.btn-primary:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 10px 28px rgba(0, 201, 167, 0.52);
  color: var(--text-inverse);
}

.btn-accept-disclaimer {
  transition: all 0.28s var(--ease-spring-soft);
}

.btn-accept-disclaimer:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 201, 167, 0.52);
}

/* ============================================================
   QUICK LINK CARDS
   ============================================================ */
.quick-link-card {
  background: rgba(255, 255, 255, 0.026) !important;
  border: 1px solid rgba(255, 255, 255, 0.065) !important;
  box-shadow: var(--shadow-card);
  transition: all 0.32s var(--ease-spring-soft) !important;
}

.quick-link-card:hover {
  background: rgba(0, 201, 167, 0.07) !important;
  border-color: rgba(0, 201, 167, 0.3) !important;
  transform: translateY(-5px) !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 201, 167, 0.1) !important;
}

/* ============================================================
   STAT HIGHLIGHT CARDS
   ============================================================ */
.stat-highlight {
  transition: all 0.3s var(--ease-spring-soft);
}

.stat-highlight:hover {
  transform: translateY(-4px);
}

/* ============================================================
   ALERT BANNERS
   ============================================================ */
.alert-banner {
  backdrop-filter: blur(10px);
}

/* ============================================================
   LIVE DOT
   ============================================================ */
.live-dot {
  box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.5);
  animation: ktmyLiveDot 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes ktmyLiveDot {
  0% { box-shadow: 0 0 0 0 rgba(0, 255, 136, 0.5); }
  70% { box-shadow: 0 0 0 6px rgba(0, 255, 136, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 255, 136, 0); }
}

/* ============================================================
   TICKER
   ============================================================ */
.ticker {
  background: rgba(3, 5, 16, 0.72);
  border-top: 1px solid rgba(255, 255, 255, 0.038);
  border-bottom: 1px solid rgba(255, 255, 255, 0.038);
  position: relative;
}

.ticker::before,
.ticker::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}

.ticker::before {
  left: 0;
  background: linear-gradient(90deg, #040811, transparent);
}

.ticker::after {
  right: 0;
  background: linear-gradient(-90deg, #040811, transparent);
}

/* ============================================================
   MOBILE ELEMENTS
   ============================================================ */
.mobile-header {
  background: rgba(3, 5, 16, 0.97) !important;
  backdrop-filter: blur(36px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(36px) saturate(160%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.045) !important;
  box-shadow: 0 4px 36px rgba(0, 0, 0, 0.5) !important;
}

.mobile-bottom-nav {
  background: rgba(3, 5, 16, 0.97) !important;
  backdrop-filter: blur(36px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(36px) saturate(160%) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.045) !important;
  box-shadow: 0 -8px 44px rgba(0, 0, 0, 0.65) !important;
}

.mobile-bottom-item.active .bottom-icon {
  filter: drop-shadow(0 0 9px rgba(0, 201, 167, 0.85));
}

/* ============================================================
   FEEDBACK FAB
   ============================================================ */
.feedback-fab {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  box-shadow: 0 4px 22px rgba(0, 201, 167, 0.42);
  animation: ktmyFabPulse 4s ease-in-out infinite;
  transition: all 0.3s var(--ease-spring-soft) !important;
}

@keyframes ktmyFabPulse {
  0%, 100% { box-shadow: 0 4px 22px rgba(0, 201, 167, 0.38); }
  50% { box-shadow: 0 4px 30px rgba(0, 201, 167, 0.58), 0 0 0 8px rgba(0, 201, 167, 0.05); }
}

.feedback-fab:hover {
  transform: scale(1.12) translateY(-3px) !important;
  box-shadow: 0 10px 32px rgba(0, 201, 167, 0.65) !important;
  animation: none !important;
}

.feedback-card {
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.65), 0 0 40px rgba(0, 201, 167, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(135deg, rgba(12, 18, 45, 0.97), rgba(6, 9, 24, 0.99)) !important;
}

.feedback-link-btn:hover {
  background: rgba(0, 201, 167, 0.06) !important;
  border-color: rgba(0, 201, 167, 0.25) !important;
  color: var(--primary) !important;
}

/* ============================================================
   SEARCH RESULTS
   ============================================================ */
.search-results-dropdown {
  background: rgba(3, 5, 16, 0.97);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.65);
}

.search-result-item:hover {
  background: rgba(0, 201, 167, 0.05);
}

/* ============================================================
   DISCLAIMER MODAL
   ============================================================ */
.disclaimer-overlay {
  background: rgba(2, 3, 12, 0.9);
}

.disclaimer-modal {
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.75), 0 0 60px rgba(0, 201, 167, 0.07);
}

/* ============================================================
   BACK TO TOP
   ============================================================ */
.back-to-top {
  background: rgba(0, 201, 167, 0.1);
  border-color: rgba(0, 201, 167, 0.22);
  color: var(--primary);
  backdrop-filter: blur(20px);
  box-shadow: 0 8px 36px rgba(0, 0, 0, 0.55);
  transition: all 0.32s var(--ease-spring-soft) !important;
}

.back-to-top:hover {
  background: var(--primary);
  color: #040811;
  border-color: var(--primary);
  box-shadow: 0 0 28px rgba(0, 201, 167, 0.55), 0 8px 36px rgba(0, 0, 0, 0.45);
  transform: translateY(-7px) !important;
}

/* ============================================================
   TAB CONTENT ANIMATION
   ============================================================ */
.tab-content.active {
  animation: ktmyTabReveal 0.5s var(--ease-float) both !important;
}

@keyframes ktmyTabReveal {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================
   SPINNER REFINEMENT
   ============================================================ */
.spinner {
  border: 2px solid rgba(255, 255, 255, 0.04);
  border-top-color: var(--primary);
  box-shadow: 0 0 16px rgba(0, 201, 167, 0.18);
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  body::before,
  .gradient-text,
  .progress-bar .progress-fill,
  .feedback-fab,
  .live-dot,
  .badge-dot,
  .badge-dot.warning,
  .nav-badge.live,
  .ktmy-card-animating,
  .tab-content.active,
  .sidebar-header::before {
    animation: none !important;
    transition: none !important;
  }

  body::before {
    background:
      radial-gradient(ellipse 110% 75% at 5% 0%, rgba(0, 201, 167, 0.12) 0%, transparent 55%),
      radial-gradient(ellipse 75% 55% at 95% 20%, rgba(77, 124, 254, 0.10) 0%, transparent 55%),
      linear-gradient(180deg, #040811 0%, #07091a 55%, #040811 100%);
  }
}

/* ============================================================
   MOBILE & TOUCH OPTIMIZATIONS
   ============================================================ */
@media (max-width: 768px) {
  body::before {
    animation: none !important;
    background: linear-gradient(180deg, #040811 0%, #07091a 100%) !important;
  }
  body::after {
    display: none !important; /* Disable noise pattern to save GPU repaints */
  }
  .chart-container {
    min-height: 250px !important; /* Restore height from responsive.css */
  }
}