.vizo-dashboard {
  --vizo-purple: #7254f3;
  --vizo-cyan: #22b8cf;
  --vizo-pink: #e959a0;
  --vizo-orange: #f59f00;
}

.vizo-hero {
  position: relative;
  overflow: hidden;
  min-height: 210px;
  border: 0;
  color: #fff;
  background: linear-gradient(125deg, #171d36 0%, #4635a6 56%, #7254f3 100%);
  box-shadow: 0 18px 45px rgba(42, 29, 105, .2);
}

.vizo-hero.admin-hero {
  background: linear-gradient(125deg, #102a2f 0%, #087f8c 55%, #22b8cf 100%);
}

.vizo-hero.client-hero {
  background: linear-gradient(125deg, #21172d 0%, #6f2d68 52%, #e959a0 100%);
}

.vizo-hero::before,
.vizo-hero::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, .09);
}

.vizo-hero::before { width: 260px; height: 260px; right: -60px; top: -120px; }
.vizo-hero::after { width: 170px; height: 170px; right: 150px; bottom: -125px; }
.vizo-hero .card-body { position: relative; z-index: 1; padding: 2rem; }
.vizo-hero-kicker { font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; opacity: .78; }
.vizo-hero-title { max-width: 760px; font-size: clamp(1.65rem, 3vw, 2.45rem); font-weight: 700; }
.vizo-hero-copy { max-width: 680px; color: rgba(255, 255, 255, .78); }
.vizo-hero-illustration { align-self: stretch; flex: 0 0 175px; align-items: center; justify-content: center; margin: -1.2rem 0; }
.vizo-hero-illustration img { display: block; max-width: 175px; max-height: 175px; object-fit: contain; filter: drop-shadow(0 18px 22px rgba(10, 10, 25, .24)); }
.vizo-hero.client-hero .vizo-hero-illustration { flex-basis: 190px; }
.vizo-hero.client-hero .vizo-hero-illustration img { max-width: 205px; max-height: 185px; }

.vizo-stat-card {
  height: 100%;
  border: 1px solid var(--vz-border-color);
  transition: transform .2s ease, box-shadow .2s ease;
}

.vizo-stat-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(30, 35, 60, .1); }
.vizo-stat-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; font-size: 1.35rem; }
.vizo-stat-value { font-size: 1.8rem; font-weight: 700; line-height: 1; }
.vizo-stat-label { color: var(--vz-secondary-color); font-size: .84rem; }

.vizo-section-title { font-size: 1.05rem; font-weight: 650; margin-bottom: .2rem; }
.vizo-section-subtitle { color: var(--vz-secondary-color); font-size: .84rem; }

.vizo-action {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .9rem;
  color: inherit;
  border: 1px solid var(--vz-border-color);
  border-radius: 12px;
  transition: background .2s ease, border-color .2s ease;
}

.vizo-action:hover { color: inherit; background: rgba(114, 84, 243, .08); border-color: rgba(114, 84, 243, .28); }
.vizo-action i { font-size: 1.25rem; color: var(--vizo-purple); }

.vizo-video-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: #090b12; }
.vizo-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@supports not (aspect-ratio: 16 / 9) {
  .vizo-video-frame { height: 0; padding-top: 56.25%; }
}
.vizo-media-card { overflow: hidden; border: 1px solid var(--vz-border-color); }
.vizo-media-meta { font-size: .78rem; color: var(--vz-secondary-color); }

.vizo-photo-tile { position: relative; display: block; overflow: hidden; min-height: 190px; border-radius: 14px; background: #161924; }
.vizo-photo-tile img { width: 100%; height: 100%; min-height: 190px; object-fit: cover; transition: transform .3s ease; }
.vizo-photo-tile:hover img { transform: scale(1.04); }
.vizo-photo-tile::after { content: ""; position: absolute; inset: auto 0 0; height: 45%; background: linear-gradient(transparent, rgba(0, 0, 0, .65)); }
.vizo-photo-number { position: absolute; z-index: 1; left: 12px; bottom: 10px; color: #fff; font-size: .78rem; }

.vizo-empty { padding: 2.4rem 1.25rem; text-align: center; color: var(--vz-secondary-color); border: 1px dashed var(--vz-border-color); border-radius: 14px; }
.vizo-empty i { display: block; margin-bottom: .6rem; font-size: 2rem; opacity: .7; }

.vizo-company-row { display: grid; grid-template-columns: minmax(170px, 1.5fr) repeat(3, minmax(72px, .5fr)); gap: 1rem; align-items: center; padding: .9rem 0; border-bottom: 1px solid var(--vz-border-color); }
.vizo-company-row:last-child { border-bottom: 0; }
.vizo-company-metric { text-align: center; }
.vizo-company-metric strong { display: block; font-size: 1rem; }
.vizo-company-metric span { color: var(--vz-secondary-color); font-size: .72rem; }

.vizo-chip { display: inline-flex; align-items: center; padding: .35rem .65rem; margin: 0 .3rem .35rem 0; border-radius: 999px; background: rgba(114, 84, 243, .1); color: var(--vizo-purple); font-size: .75rem; font-weight: 600; }

.vizo-client-dashboard { max-width: 2200px; margin-inline: auto; }
.vizo-client-dashboard a,
.vizo-client-dashboard button,
.vizo-client-dashboard iframe { scroll-margin: 5rem; }
.vizo-client-dashboard a:focus-visible,
.vizo-client-dashboard button:focus-visible,
.vizo-client-dashboard iframe:focus-visible {
  outline: 4px solid #8b72ff;
  outline-offset: 4px;
  box-shadow: 0 0 0 8px rgba(139, 114, 255, .2);
  border-radius: 10px;
}
.vizo-client-dashboard .vizo-photo-tile:focus-visible { outline-color: #fff; box-shadow: 0 0 0 8px rgba(233, 89, 160, .55); }
.vizo-client-dashboard .vizo-featured-player:focus-visible { border-radius: 0; outline-offset: -5px; }
.vizo-client-dashboard .vizo-client-counters { flex-shrink: 0; }

@media (max-width: 575.98px) {
  .vizo-client-dashboard .client-hero { min-height: auto; border-radius: 16px; }
  .vizo-client-dashboard .client-hero .card-body { gap: 1.15rem !important; }
  .vizo-client-dashboard .vizo-hero-title { font-size: 1.55rem; line-height: 1.15; }
  .vizo-client-dashboard .vizo-hero-copy { font-size: .9rem; }
  .vizo-client-dashboard .vizo-client-counters { width: 100%; justify-content: center; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, .16); }
  .vizo-client-dashboard .vizo-client-section-head { align-items: flex-start !important; gap: .65rem; }
  .vizo-client-dashboard .vizo-client-section-head .btn { min-height: 42px; display: inline-flex; align-items: center; }
  .vizo-client-dashboard .vizo-section-title { font-size: 1rem; }
  .vizo-client-dashboard .vizo-section-subtitle { font-size: .78rem; }
  .vizo-client-dashboard .vizo-media-card .card-body { padding: 1rem; }
  .vizo-client-dashboard .vizo-media-card h4 { font-size: 1.05rem; }
  .vizo-client-dashboard .vizo-photo-tile,
  .vizo-client-dashboard .vizo-photo-tile img { min-height: 150px; }
  .vizo-client-dashboard .vizo-stat-card .card-body { padding: 1rem; }
  .vizo-client-dashboard .btn { min-height: 44px; }
}

@media (min-width: 1600px) {
  .vizo-client-dashboard { font-size: 1.06rem; }
  .vizo-client-dashboard .client-hero { min-height: 270px; }
  .vizo-client-dashboard .client-hero .card-body { padding: 2.5rem 3rem; }
  .vizo-client-dashboard .vizo-hero-title { font-size: 3rem; }
  .vizo-client-dashboard .vizo-hero-copy { font-size: 1.1rem; }
  .vizo-client-dashboard .vizo-hero-illustration { flex-basis: 235px; }
  .vizo-client-dashboard .vizo-hero-illustration img { max-width: 245px; max-height: 220px; }
  .vizo-client-dashboard .vizo-section-title { font-size: 1.3rem; }
  .vizo-client-dashboard .vizo-section-subtitle,
  .vizo-client-dashboard .vizo-media-meta { font-size: .95rem; }
  .vizo-client-dashboard .card-body { padding: 1.6rem; }
  .vizo-client-dashboard .btn { min-height: 48px; padding-inline: 1.15rem; font-size: 1rem; }
  .vizo-client-dashboard .vizo-stat-icon { width: 56px; height: 56px; font-size: 1.55rem; }
  .vizo-client-dashboard .vizo-photo-tile,
  .vizo-client-dashboard .vizo-photo-tile img { min-height: 260px; }
  .vizo-client-dashboard .vizo-photo-number { font-size: .95rem; left: 16px; bottom: 14px; }
}

@media (min-width: 2400px) {
  .vizo-client-dashboard { font-size: 1.18rem; }
  .vizo-client-dashboard .client-hero { min-height: 320px; }
  .vizo-client-dashboard .vizo-hero-title { font-size: 3.5rem; }
  .vizo-client-dashboard .vizo-section-title { font-size: 1.5rem; }
  .vizo-client-dashboard .vizo-photo-tile,
  .vizo-client-dashboard .vizo-photo-tile img { min-height: 310px; }
}

@media (max-width: 767.98px) {
  .vizo-hero .card-body { padding: 1.4rem; }
  .vizo-company-row { grid-template-columns: 1fr repeat(3, 55px); gap: .4rem; }
  .vizo-company-row .text-muted { display: none; }
}