.fs-view {
  --fs-r: clamp(14px, 0.7vw + 10px, 17px);
  --fs-mono: ui-monospace, Menlo, Consolas, monospace;

  position: relative;
  padding: 0;
  gap: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--fs-background);
  color: var(--fs-neutral);
  font-family: 'IBM Plex Sans', 'Segoe UI', sans-serif;
  font-size: var(--fs-r);
  line-height: 1.5;
}

.fs-view.active { display: block; }

.fs-view * { box-sizing: border-box; }

.fs-view::before,
.fs-view::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.fs-view::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='220' viewBox='0 0 360 220'%3E%3Cg fill='none' stroke='white' stroke-opacity='.24' stroke-width='.6'%3E%3Cpath d='M18 44L92 20l76 54 82-38 91 58M42 176l80-52 76 45 66-54 78 42M92 20l30 104M168 74l30 95M250 36l14 79'/%3E%3C/g%3E%3Cg fill='white' fill-opacity='.55'%3E%3Ccircle cx='18' cy='44' r='1.6'/%3E%3Ccircle cx='92' cy='20' r='2'/%3E%3Ccircle cx='168' cy='74' r='1.5'/%3E%3Ccircle cx='250' cy='36' r='1.8'/%3E%3Ccircle cx='341' cy='94' r='1.4'/%3E%3Ccircle cx='42' cy='176' r='1.5'/%3E%3Ccircle cx='122' cy='124' r='2'/%3E%3Ccircle cx='198' cy='169' r='1.5'/%3E%3Ccircle cx='264' cy='115' r='1.8'/%3E%3Ccircle cx='342' cy='157' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 360px 220px;
  animation: fs-network-drift 24s linear infinite;
}

.fs-view::after {
  background:
    radial-gradient(circle at 12% 24%, rgba(255, 255, 255, 0.7) 0 1px, transparent 2px),
    radial-gradient(circle at 31% 72%, rgba(255, 255, 255, 0.65) 0 1px, transparent 2px),
    radial-gradient(circle at 54% 18%, rgba(255, 255, 255, 0.75) 0 1px, transparent 2px),
    radial-gradient(circle at 73% 64%, rgba(255, 255, 255, 0.7) 0 1px, transparent 2px),
    radial-gradient(circle at 91% 34%, rgba(255, 255, 255, 0.65) 0 1px, transparent 2px);
  animation: fs-network-node-blink 7s ease-in-out infinite;
}

@keyframes fs-network-drift {
  0%   { background-position: 0 0; opacity: 0.1; }
  45%  { opacity: 0.2; }
  100% { background-position: 360px 220px; opacity: 0.1; }
}

@keyframes fs-network-node-blink {
  0%, 100% { opacity: 0.08; }
  24%      { opacity: 0.28; }
  38%      { opacity: 0.1; }
  72%      { opacity: 0.2; }
}

@media (prefers-reduced-motion: reduce) {
  .fs-view::before,
  .fs-view::after { animation: none; opacity: 0.12; }
}

.fs-page {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 96%;
  margin: 0 auto;
  padding: 2% 2.5%;
}

.fs-page > * + * { margin-top: 1.2%; }

.fs-row {
  display: flex;
  width: 100%;
  gap: 1.1%;
  align-items: stretch;
}

.fs-row-px {
  display: flex;
  width: 100%;
  gap: 9.6px;
  align-items: stretch;
}

.fs-col {
  display: flex;
  flex-direction: column;
  gap: 9.6px;
  min-width: 0;
}

.fs-panel {
  background: var(--fs-banner);
  border-radius: 3px;
  border: none;
  box-shadow: inset 0 0 28px rgb(var(--fs-inset-rgb) / 0.55);
  padding: calc(var(--fs-r) * 0.95) calc(var(--fs-r) * 1.1);
  display: flex;
  flex-direction: column;
}

.fs-head {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.fs-head-left {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6.8px;
  min-width: 0;
}

.fs-head-right {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.fs-accent {
  width: 4px;
  height: 13px;
  border-radius: 1px;
  flex-shrink: 0;
}

.fs-accent-orange { background: var(--fs-orange); }
.fs-accent-red    { background: var(--fs-red); }

.fs-head-title {
  color: var(--fs-secondary);
  font-size: calc(var(--fs-r) * 0.7);
  font-weight: 700;
  letter-spacing: 0.11em;
  white-space: nowrap;
}

.fs-hours {
  min-width: calc(var(--fs-r) * 7.5);
  color: var(--fs-neutral);
  font-family: inherit;
  font-weight: 600;
  font-size: clamp(calc(var(--fs-r) * 0.95), 1.2vw, calc(var(--fs-r) * 1.15));
  background-color: var(--fs-background);
  border: 1px solid rgb(var(--fs-ink-rgb) / 0.2);
  border-radius: 2px;
  padding: 8.5px 32px 8.5px 14px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23e8ecf1' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 7px center;
  background-size: 24px 24px;
}

.fs-hours:hover  { border-color: rgb(var(--fs-ink-rgb) / 0.4); }
.fs-hours:focus  { border-color: var(--fs-primary); outline: none; }
.fs-hours option { background: var(--fs-banner); color: var(--fs-neutral); }

.fs-toggle {
  display: flex;
  flex-direction: row;
  gap: 3.2px;
  flex-shrink: 0;
}

.fs-toggle button {
  padding: 1.2px 6px;
  cursor: pointer;
  user-select: none;
  border-radius: 2px;
  font-family: inherit;
  font-size: calc(var(--fs-r) * 0.6);
  font-weight: 700;
  letter-spacing: 0.04em;
  background: transparent;
  color: rgb(var(--fs-ink-rgb) / 0.333);
  border: 1px solid rgb(var(--fs-ink-rgb) / 0.078);
}

.fs-toggle button.ativo {
  background: #e5433f33;
  color: var(--fs-red);
  border-color: #e5433f66;
}

.fs-table-head {
  display: flex;
  flex-direction: row;
  padding-bottom: 4.8px;
  border-bottom: 1px solid rgb(var(--fs-ink-rgb) / 0.059);
}

.fs-table-head span {
  color: var(--fs-faint);
  font-size: calc(var(--fs-r) * 0.58);
  font-weight: 600;
  letter-spacing: 0.06em;
}

@keyframes fs-chart-glow {
  0%, 100% { filter: drop-shadow(0 0 1px rgba(0, 77, 253, 0.08)); }
  50%      { filter: drop-shadow(0 0 5px rgba(0, 77, 253, 0.2)); }
}

@keyframes fs-chart-reveal {
  from {
    clip-path: inset(0 100% 0 0);
    opacity: 0.35;
  }

  to {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}

/*
 * Abertura lateral — duração alinhada ao animationDuration do betaBlind / ECharts por painel.
 * (--fs-reveal-duration espelha o tempo de desenho do gráfico, não 1,35s fixo.)
 */
.fs-view .vg-alvos-chart,
.fs-view .vg-vetores-chart,
.fs-view .ib-card-spark,
.fs-view .ob-card-spark {
  --fs-reveal-duration: 1s;
}

.fs-view .ib-asns-chart,
.fs-view .ib-alvos-chart,
.fs-view .ob-proto-chart,
.fs-view .ob-ports-chart {
  --fs-reveal-duration: 1.2s;
}

.fs-view .ib-volume-chart {
  --fs-reveal-duration: 1.6s;
}

.fs-view .vg-volume-chart,
.fs-view .ob-disp-chart,
.fs-view .ob-mbps-chart,
.fs-view .ra-chart[data-papel="tendencia"] {
  --fs-reveal-duration: 3s;
}

.fs-view .vg-alvos-chart,
.fs-view .vg-vetores-chart,
.fs-view .vg-volume-chart,
.fs-view .ib-asns-chart,
.fs-view .ib-alvos-chart,
.fs-view .ib-volume-chart,
.fs-view .ob-disp-chart,
.fs-view .ob-proto-chart,
.fs-view .ob-mbps-chart,
.fs-view .ob-ports-chart,
.fs-view .ib-card-spark,
.fs-view .ob-card-spark,
.fs-view .ra-chart[data-papel="tendencia"] {
  animation: fs-chart-reveal var(--fs-reveal-duration, 1s) cubic-bezier(0.22, 1, 0.36, 1) both;
  transform: translateZ(0);
}

/* Pulso azul — panoramas (betaBlind: chart-glow nos mesmos papéis) */
.fs-view .ra-gauge,
.fs-view .ra-chart[data-papel="pizza"],
.fs-view .vg-fluxo-chart,
.fs-view .vg-mapa-chart,
.fs-view .ib-map-chart,
.fs-view .ob-map-chart {
  animation: fs-chart-glow 4s ease-in-out infinite;
  transform: translateZ(0);
}

.fs-view .vg-alvos-chart,
.fs-view .vg-vetores-chart {
  animation:
    fs-chart-reveal var(--fs-reveal-duration) cubic-bezier(0.22, 1, 0.36, 1) both,
    fs-chart-glow 4s ease-in-out var(--fs-reveal-duration) infinite;
}

.fs-view .vg-volume-chart,
.fs-view .ra-chart[data-papel="tendencia"] {
  animation:
    fs-chart-reveal var(--fs-reveal-duration) cubic-bezier(0.22, 1, 0.36, 1) both,
    fs-chart-glow 4s ease-in-out var(--fs-reveal-duration) infinite;
}

@media (prefers-reduced-motion: reduce) {
  .fs-view .vg-alvos-chart,
  .fs-view .vg-vetores-chart,
  .fs-view .vg-volume-chart,
  .fs-view .ib-asns-chart,
  .fs-view .ib-alvos-chart,
  .fs-view .ib-volume-chart,
  .fs-view .ob-disp-chart,
  .fs-view .ob-proto-chart,
  .fs-view .ob-mbps-chart,
  .fs-view .ob-ports-chart,
  .fs-view .ib-card-spark,
  .fs-view .ob-card-spark,
  .fs-view .ra-chart[data-papel="tendencia"],
  .fs-view .ra-gauge,
  .fs-view .ra-chart[data-papel="pizza"],
  .fs-view .vg-fluxo-chart,
  .fs-view .vg-mapa-chart,
  .fs-view .ib-map-chart,
  .fs-view .ob-map-chart {
    animation: none;
    clip-path: none;
    opacity: 1;
  }
}

.fs-vazio {
  color: #7d8794;
  font-style: italic;
  border-bottom: 1px dotted currentColor;
  cursor: help;
}

.fs-estado {
  color: var(--fs-muted);
  font-size: calc(var(--fs-r) * 0.72);
  padding: calc(var(--fs-r) * 1.1) 0;
  text-align: center;
  width: 100%;
}

@media (max-width: 899.95px) {
  .fs-row,
  .fs-row-px { flex-direction: column; gap: 9.6px; }
}