/* Blueprint Dashboard CSS — extracted from ui-ref.html */
:root {
  --grid: rgba(70, 170, 240, .08);
  --grid2: rgba(70, 170, 240, .04);
}

* { scrollbar-width: thin; scrollbar-color: #194b76 #061426; }
body {
  background:
    radial-gradient(circle at 80% 0%, rgba(33,128,255,.08), transparent 28%),
    radial-gradient(circle at 15% 30%, rgba(53,191,255,.05), transparent 26%),
    #061426;
  color: #d8efff;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

.blueprint {
  background-image:
    linear-gradient(var(--grid2) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid2) 1px, transparent 1px),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 8px 8px, 8px 8px, 40px 40px, 40px 40px;
}

.panel {
  background: linear-gradient(180deg, rgba(10,29,54,.93), rgba(7,23,43,.93));
  border: 1px solid rgba(47,145,222,.38);
  box-shadow: inset 0 0 0 1px rgba(53,191,255,.025), 0 10px 30px rgba(0,0,0,.16);
  position: relative;
}

.panel::before,
.panel::after {
  content: "";
  position: absolute;
  width: 11px;
  height: 11px;
  border-color: rgba(113,214,255,.65);
  pointer-events: none;
}
.panel::before {
  left: -1px; top: -1px;
  border-left: 1px solid; border-top: 1px solid;
}
.panel::after {
  right: -1px; bottom: -1px;
  border-right: 1px solid; border-bottom: 1px solid;
}

.metric {
  background: linear-gradient(180deg, rgba(12,34,62,.98), rgba(8,25,46,.98));
  border: 1px solid rgba(53,191,255,.25);
}

.glow-text { text-shadow: 0 0 18px rgba(53,191,255,.28); }

.tiny-grid {
  background-image:
    linear-gradient(rgba(53,191,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(53,191,255,.06) 1px, transparent 1px);
  background-size: 16px 16px;
}

.spark path { vector-effect: non-scaling-stroke; }

.status-dot {
  width: 7px; height: 7px; border-radius: 999px;
  box-shadow: 0 0 12px currentColor;
}

.sidebar-item {
  border: 1px solid transparent;
  transition: .18s ease;
}
.sidebar-item:hover {
  background: rgba(32,132,255,.08);
  border-color: rgba(53,191,255,.18);
}
.sidebar-item.active {
  background: linear-gradient(90deg, rgba(32,132,255,.19), rgba(53,191,255,.05));
  border-color: rgba(53,191,255,.34);
  box-shadow: inset 3px 0 0 #35bfff, 0 0 20px rgba(32,132,255,.07);
}

.mini-bar {
  background: rgba(37,85,128,.34);
  overflow: hidden;
}

.mini-bar > span {
  display: block; height: 100%;
  background: linear-gradient(90deg, #2084ff, #35bfff);
  box-shadow: 0 0 12px rgba(53,191,255,.32);
}

.btn {
  transition: .16s ease;
}
.btn:hover {
  transform: translateY(-1px);
  border-color: rgba(113,214,255,.48);
  background: rgba(53,191,255,.08);
}

.table-row { border-top: 1px solid rgba(37,85,128,.28); }

/* Dropdown + toast animations */
.dropdown-panel {
  animation: menuIn .16s ease-out;
  transform-origin: top right;
  background: #081a31 !important;
  background-color: #081a31 !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
@keyframes menuIn {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.toast {
  animation: toastIn .22s ease-out;
}
@keyframes toastIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* SPA pages */
.app-page { display: none; }
.app-page.active { display: block; animation: pageIn .18s ease-out; }
@keyframes pageIn { from { opacity: .25; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

/* Detail pages */
.detail-kpi { background: linear-gradient(180deg, rgba(12,34,62,.96), rgba(8,25,46,.96)); border: 1px solid rgba(53,191,255,.22); }

/* Chart background grid */
.chart-box {
  background-image:
    linear-gradient(rgba(53,191,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(53,191,255,.05) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Live pill */
.pill-live { box-shadow: 0 0 12px rgba(49,209,140,.28); }