/* =========================================
   PREMIUM DARK CANVAS (FINAL – LOCKED)
   Visual Layer Only (Glass + Glow + Vignette)
========================================= */

/* -----------------------------------------
   Premium Accent Extensions (NON-STRUCTURAL)
----------------------------------------- */
:root {
  --accent-soft: rgba(99, 102, 241, 0.18);
  --border-glass: rgba(255, 255, 255, 0.06);

  --shadow-glass:
    0 12px 40px rgba(0, 0, 0, 0.7),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* -----------------------------------------
   Premium Dark Canvas (GLOBAL)
----------------------------------------- */
html,
body {
  background:
    radial-gradient(
      1200px 600px at 50% -10%,
      rgba(99, 102, 241, 0.14),
      transparent 60%
    ),
    radial-gradient(
      900px 500px at 80% 20%,
      rgba(56, 189, 248, 0.10),
      transparent 65%
    ),
    radial-gradient(
      700px 400px at 20% 30%,
      rgba(34, 197, 94, 0.08),
      transparent 60%
    ),
    linear-gradient(
      180deg,
      #020617 0%,
      #000000 100%
    );

  color: #e5e7eb;
  -webkit-font-smoothing: antialiased;
}

/* -----------------------------------------
   Glass Surfaces (ONLY TOP-LEVEL CARDS)
----------------------------------------- */
.dashboard,
.panel {
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  border: 1px solid var(--border-glass);
  box-shadow: var(--shadow-glass);

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease;
}

.dashboard:hover,
.panel:hover {
  transform: translateY(-2px);
}

/* -----------------------------------------
   Controls (Premium Feel Only)
----------------------------------------- */
.control-input {
  background: rgba(2, 6, 23, 0.65);
  border: 1px solid var(--border-glass);
  color: #e5e7eb;
}

.control-input::placeholder {
  color: rgba(229, 231, 235, 0.5);
}

.control-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

/* -----------------------------------------
   Tabs (Glow Accent)
----------------------------------------- */
.tab.active {
  text-shadow: 0 0 14px var(--accent-soft);
}

/* -----------------------------------------
   KPI Cards (Inset Glass)
----------------------------------------- */
.kpi-card {
  background: rgba(2, 6, 23, 0.6);
  border: 1px solid var(--border-glass);
}

/* -----------------------------------------
   Tables (Premium Hover)
----------------------------------------- */
tbody tr:hover {
  background: rgba(255, 255, 255, 0.04);
}

/* -----------------------------------------
   Suggested Queries (RESPECT STRUCTURE)
----------------------------------------- */
.suggestion-btn {
  background: rgba(2, 6, 23, 0.65);
  border: 1px solid var(--border-glass);
  color: #e5e7eb;
}

.suggestion-btn:hover {
  background: var(--accent-soft);
}

/* -----------------------------------------
   Entry Animation (SINGLE SOURCE OF TRUTH)
----------------------------------------- */
.dashboard {
  animation: fadeUp 0.35s ease both;
}