* { box-sizing: border-box }
html, body { height: 100% }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text);
  background: var(--bg);
}

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0 }

.bg-aurora {
  position: fixed;
  inset: -10% -10% -10% -10%;
  background: radial-gradient(1200px 600px at 10% 0%, rgba(14,165,233,.25), transparent 55%),
              conic-gradient(from 0deg at 30% 10%, rgba(139,92,246,.25), rgba(6,182,212,.15), rgba(236,72,153,.25), transparent 60%);
  filter: blur(40px) saturate(120%);
  opacity: .6;
  pointer-events: none;
  animation: aurora 18s linear infinite;
}

@keyframes aurora {
  0% { transform: translate3d(0,0,0) scale(1) }
  50% { transform: translate3d(0,-3%,0) scale(1.05) }
  100% { transform: translate3d(0,0,0) scale(1) }
}

.app-header {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-3);
  padding: var(--space-4);
  background: linear-gradient(180deg, var(--bg-soft), transparent);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
  backdrop-filter: saturate(120%) blur(10px);
}
.brand { display: flex; align-items: center; gap: var(--space-3) }
.brand-icon { width: 28px; height: 28px }
.actions { display: flex; align-items: center; gap: var(--space-3) }
.btn {
  appearance: none;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: transform .15s ease, background .2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-1px); border-color: var(--brand-500) }
.btn:active { transform: translateY(0) scale(.99) }
select {
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  padding: 10px 12px;
  border-radius: var(--radius-sm);
}

.layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  padding: var(--space-4);
}

.kpis {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}
.kpi-card {
  position: relative;
  background: linear-gradient(180deg, rgba(56,189,248,.10), rgba(56,189,248,.04)), var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  box-shadow: 0 10px 30px var(--glow);
  display: grid;
  gap: var(--space-4);
}
.kpi-card::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(45deg, var(--brand-500), var(--accent-2), var(--warn));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .35;
}
.kpi-top { display: flex; align-items: baseline; justify-content: space-between }
.kpi-label { color: var(--text-dim) }
.kpi-value { font-size: 32px; font-weight: 800; text-shadow: 0 0 12px rgba(14,165,233,.25) }
.kpi-trend { font-size: 14px }

.charts {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
.chart-card {
  background: radial-gradient(800px 400px at 0% 0%, rgba(2,132,199,.18), transparent 50%), var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-4);
  box-shadow: 0 18px 40px rgba(2,132,199,.15);
  min-height: 220px;
  display: grid;
}

.chart-card::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(90deg, var(--brand-500), var(--accent-2), var(--warn));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: .25;
}

.bg-particles { position: fixed; inset: 0; z-index: 0; pointer-events: none }
.bg-aurora { z-index: 0 }
.bg-scanline { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.03) 0px, rgba(255,255,255,.03) 1px, transparent 2px);
  animation: scan 8s linear infinite; opacity: .25 }

@keyframes scan {
  0% { transform: translateY(-10%) }
  100% { transform: translateY(10%) }
}

.chart-tooltip {
  position: absolute; transform: translate(-50%, -140%);
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 12px;
  box-shadow: var(--shadow-soft);
  pointer-events: none;
}

.app-footer {
  padding: var(--space-5);
  color: var(--text-dim);
  display: flex; justify-content: space-between; align-items: center;
}

@media (min-width: 900px) {
  .layout { grid-template-columns: 1fr }
  .kpis { grid-template-columns: repeat(5, 1fr) }
  .charts { grid-template-columns: repeat(3, 1fr) }
}

@media (prefers-reduced-motion: no-preference) {
  .kpi-card { transition: transform .2s ease, box-shadow .3s ease }
  .kpi-card:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(2,132,199,.15) }
}