:root{
  --bg:#0b1020;
  --panel:#121932;
  --panel-2:#0f1630;
  --line:rgba(255,255,255,.08);
  --text:#edf2ff;
  --muted:#98a3c7;
  --accent:#72d0ff;
  --accent-2:#bf7bff;
  --accent-3:#ffd86b;
}
*{box-sizing:border-box}
body{
  background:
    radial-gradient(circle at top left, rgba(114,208,255,.12), transparent 30%),
    radial-gradient(circle at top right, rgba(191,123,255,.10), transparent 28%),
    linear-gradient(180deg, #09101f 0%, #0b1020 100%);
  color:var(--text);
  min-height:100vh;
}
.dashboard-nav{
  background:rgba(8,12,26,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.panel{
  background:linear-gradient(180deg, rgba(18,25,50,.95), rgba(12,18,38,.95));
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:0 20px 50px rgba(0,0,0,.30);
  padding:1.2rem;
}
.metric-card{
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border:1px solid var(--line);
  border-radius:18px;
  padding:1rem 1.1rem;
  min-height:110px;
}
.metric-label{
  color:var(--muted);
  font-size:.9rem;
  letter-spacing:.03em;
  text-transform:uppercase;
}
.metric-value{
  font-size:2.15rem;
  line-height:1.05;
  font-weight:700;
  margin-top:.45rem;
  background:linear-gradient(90deg, var(--accent), #fff, var(--accent-2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.map-wrap{ position:relative; }
.hero-label{
  position:absolute;
  color:rgba(255,255,255,0.88);
  font-size:10px;
  font-family:'Inter',sans-serif;
  pointer-events:none;
  white-space:nowrap;
  text-shadow:0 1px 4px rgba(0,0,0,0.9);
  transform:translate(-50%,-140%);
  background:rgba(6,12,28,0.55);
  border-radius:4px;
  padding:1px 5px;
}
.hero-legend{
  position:absolute;
  bottom:12px;
  left:12px;
  display:flex;
  flex-direction:column;
  gap:5px;
  background:rgba(6,12,28,0.78);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:10px;
  padding:8px 11px;
  pointer-events:none;
}
.hero-legend-item{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:10px;
  color:rgba(255,255,255,0.78);
  line-height:1;
}
.hero-legend-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  flex-shrink:0;
}
@media(max-width:576px){
  .hero-label{font-size:8px;}
  .hero-legend{font-size:9px;padding:6px 8px;}
  .hero-legend-dot{width:7px;height:7px;}
}
.hero-scene,.map-scene{
  width:100%;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.05);
  background:radial-gradient(circle at center, rgba(114,208,255,.08), rgba(0,0,0,.15));
}
.hero-scene{height:420px}
.map-scene{height:360px}
.timeline-wrap{
  position:relative;
}
#timelineCanvas{
  width:100%;
  height:480px;
  display:block;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
  border-radius:14px;
  cursor:crosshair;
}
.timeline-tooltip{
  position:absolute;
  display:none;
  pointer-events:none;
  z-index:20;
  background:rgba(10,15,38,0.97);
  border:1px solid rgba(114,208,255,0.4);
  border-radius:12px;
  padding:.6rem .9rem;
  max-width:230px;
  box-shadow:0 8px 28px rgba(0,0,0,.55);
  transition:opacity .12s;
}
.timeline-tooltip.visible{display:block}
.tt-name{
  font-weight:700;
  color:#fff;
  font-size:.92rem;
  line-height:1.3;
}
.tt-date{
  color:var(--accent);
  font-size:.8rem;
  margin-top:.2rem;
}
.tt-meta{
  color:var(--muted);
  font-size:.8rem;
  margin-top:.3rem;
  line-height:1.5;
}
.bars{
  display:grid;
  gap:.8rem;
  margin-top:1rem;
}
.bar-row{
  display:grid;
  grid-template-columns: 180px 1fr 56px;
  gap:.75rem;
  align-items:center;
}
.bar-track{
  height:18px;
  background:rgba(255,255,255,.05);
  border-radius:999px;
  overflow:hidden;
}
.bar-fill{
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow:0 0 25px rgba(114,208,255,.25);
}
.table-search{
  max-width:320px;
  background:rgba(255,255,255,.04);
  border-color:var(--line);
  color:#fff;
}
.table-search::placeholder{color:#aeb7d5}
.dashboard-table-wrap{
  max-height:540px;
  overflow:auto;
  border-radius:12px;
}
.table-dark{
  --bs-table-bg:transparent;
  --bs-table-striped-bg:rgba(255,255,255,.02);
  --bs-table-hover-bg:rgba(114,208,255,.08);
  --bs-table-border-color:var(--line);
}
.form-select,.btn-outline-light,.form-control{
  background-color:rgba(255,255,255,.04);
  color:#fff;
  border-color:var(--line);
}
.form-select:focus,.form-control:focus{
  border-color:rgba(114,208,255,.7);
  box-shadow:0 0 0 .25rem rgba(114,208,255,.15);
  background-color:rgba(255,255,255,.06);
  color:#fff;
}
.small.text-secondary,.text-secondary{color:var(--muted)!important}
.badge-soft{
  display:inline-block;
  padding:.35rem .55rem;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:.75rem;
  color:#dce4ff;
  background:rgba(255,255,255,.03);
}
@media (max-width: 992px){
  .hero-scene{height:340px}
  .bar-row{grid-template-columns: 130px 1fr 44px}
}