*, :before, :after {
  box-sizing: border-box;
}

:root {
  --green: #81b92a;
  --green-dark: #5f8d19;
  --orange: #ef6b22;
  --orange-dark: #c95518;
  --blue: #53acde;
  --blue-dark: #2f88ba;
  --black: #3c3a39;
  --black-soft: #575351;
  --text: #575351;
  --shadow-soft: 0 14px 34px #3c3a3914;
  --shadow-strong: 0 24px 64px #3c3a3924;
  --container: 1180px;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  color: var(--black);
  background: radial-gradient(circle at 0 0, #81b92a24, #0000 28%), radial-gradient(circle at 100% 100%, #53acde1f, #0000 32%), linear-gradient(#f6f7f1, #fff 54%, #f5f6f0);
  margin: 0;
  font-family: Archivo, Arial, sans-serif;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

.container {
  width: min(var(--container),
    calc(100% - 44px));
  margin: 0 auto;
}

.territory-hero {
  width: min(1320px, 100% - 44px);
  margin: 34px auto 28px;
  position: relative;
}

.territory-hero-inner {
  border: 4px solid var(--green);
  background: #fff;
  border-radius: 32px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 24px 60px #3c3a391f;
}

.territory-slide {
  z-index: 2;
  grid-template-columns: minmax(0, 1.05fr) minmax(340px, .9fr);
  align-items: center;
  gap: 32px;
  min-height: 520px;
  padding: 52px;
  display: grid;
  position: relative;
}

.territory-title {
  color: var(--orange);
  letter-spacing: -1px;
  margin: 0 0 18px;
  font-size: clamp(34px, 4vw, 58px);
  font-weight: 800;
  line-height: .95;
}

.territory-slide-content {
  min-width: 0;
  max-width: 680px;
}

.territory-slide-content h1 {
  letter-spacing: -.8px;
  gap: 2px;
  max-width: 640px;
  margin: 0 0 14px;
  font-size: clamp(26px, 1.2vw, 42px);
  font-weight: 800;
  line-height: 1.04;
  display: grid;
}

.title-orange {
  color: var(--orange);
}

.title-green {
  color: var(--green-dark);
}

.title-blue {
  color: var(--blue-dark);
}

.title-dark {
  color: var(--black);
}

.text-dark {
  color: var(--black);
  font-weight: 800;
}

.text-green {
  color: var(--green-dark);
  font-weight: 800;
}

.text-orange {
  color: var(--orange);
  font-weight: 800;
}

.text-blue {
  color: var(--blue-dark);
  font-weight: 800;
}

.territory-slide-lead {
  letter-spacing: 0;
  color: #4f4b49;
  max-width: 700px;
  margin: 0 0 14px;
  font-size: clamp(15px, 1.2vw, 18px);
  font-weight: 600;
  line-height: 1.72;
}

.territory-slide-content p:not(.territory-slide-lead) {
  color: #575351;
  max-width: 760px;
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.84;
}

.territory-hero-carousel {
  justify-content: center;
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
}

.hero-carousel-track {
  aspect-ratio: 1;
  background: linear-gradient(135deg, #ffffffeb, #ffffffbd);
  border: 1px solid #ffffffc7;
  border-radius: 34px;
  width: min(420px, 100%);
  position: relative;
  overflow: hidden;
  box-shadow: 0 24px 60px #3c3a391a;
}

.hero-carousel-slide {
  opacity: 0;
  justify-content: center;
  align-items: center;
  padding: 42px;
  transition: opacity .45s, transform .45s;
  display: flex;
  position: absolute;
  inset: 0;
  transform: scale(.96);
}

.hero-carousel-slide.is-active {
  opacity: 1;
  z-index: 2;
  transform: scale(1);
}

.hero-carousel-slide img {
  object-fit: contain;
  filter: drop-shadow(0 18px 38px #3c3a391a);
  width: 100%;
  height: 100%;
}

.hero-carousel-controls {
  z-index: 5;
  justify-content: center;
  align-items: center;
  gap: 10px;
  display: flex;
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
}

.hero-carousel-btn {
  width: 42px;
  height: 42px;
  color: var(--black);
  background: #ffffffeb;
  border: none;
  border-radius: 999px;
  place-items: center;
  font-size: 18px;
  font-weight: 900;
  transition: all .2s;
  display: grid;
  box-shadow: 0 10px 24px #3c3a391a;
}

.hero-carousel-btn:hover {
  background: var(--orange);
  color: #fff;
  transform: translateY(-2px);
}

.stats-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  display: grid;
}

.stat-card {
  color: #fff;
  border: 3px solid #ffffff1f;
  border-radius: 20px;
  min-height: 150px;
  padding: 26px;
  transition: transform .25s, box-shadow .25s;
  box-shadow: 0 16px 36px #0000001f;
}

.stat-green {
  background: linear-gradient(135deg,
      var(--green),
      var(--green-dark));
}

.stat-orange {
  background: linear-gradient(135deg,
      var(--orange),
      var(--orange-dark));
}

.stat-blue {
  background: linear-gradient(135deg,
      var(--blue),
      var(--blue-dark));
}

.stat-dark {
  background: linear-gradient(135deg,
      var(--black),
      #1f1e1d);
}

.stat-label {
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #ffffffd6;
  font-size: 11px;
  font-weight: 900;
  display: block;
}

.stat-value {
  margin-top: 14px;
  font-size: clamp(38px, 4vw, 56px);
  line-height: 1;
  display: block;
}

.stat-note {
  color: #ffffffd1;
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.45;
}

.territory-layout {
  grid-template-columns: 1fr;
  gap: 22px;
  display: grid;
}

.panel {
  border-left: 8px solid var(--green);
  background: #fff;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 16px 40px #3c3a3914;
}

.panel-main {
  padding: 34px;
}

.panel-head {
  margin-bottom: 18px;
}

.panel-head h2 {
  letter-spacing: -.5px;
  margin: 0;
  font-size: clamp(24px, 2vw, 34px);
  font-weight: 800;
  line-height: 1.1;
}

.territory-text {
  gap: 16px;
  display: grid;
}

.territory-text p {
  color: #575351;
  max-width: 920px;
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.88;
}

.territory-text p:first-child {
  color: #4f4b49;
  font-size: 15.5px;
  font-weight: 600;
}

@media (width <= 1180px) {
  .territory-slide {
    grid-template-columns: 1fr minmax(300px, .72fr);
    gap: 28px;
    padding: 42px;
  }

  .stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (width <= 940px) {
  .territory-slide {
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 36px;
  }

  .territory-slide-content {
    max-width: 100%;
  }

  .territory-hero-carousel {
    justify-content: flex-start;
  }

  .hero-carousel-track {
    aspect-ratio: 16 / 11;
    width: min(420px, 100%);
  }
}

@media (width <= 760px) {
  .container, .territory-hero {
    width: calc(100% - 22px);
  }

  .territory-slide {
    gap: 20px;
    padding: 22px;
  }

  .territory-slide-content h1 {
    letter-spacing: -.6px;
    margin-bottom: 12px;
    font-size: clamp(24px, 8vw, 34px);
    line-height: 1.06;
  }

  .territory-slide-lead {
    font-size: 14.5px;
    line-height: 1.75;
  }

  .territory-slide-content p:not(.territory-slide-lead) {
    font-size: 14px;
    line-height: 1.82;
  }

  .hero-carousel-track {
    aspect-ratio: 16 / 12;
    border-radius: 22px;
    width: 100%;
  }

  .hero-carousel-slide {
    padding: 20px;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .panel-main {
    padding: 22px;
  }

  .panel-head h2 {
    font-size: 24px;
    line-height: 1.12;
  }

  .territory-text p, .territory-text p:first-child {
    font-size: 14px;
    line-height: 1.82;
  }
}

@media (width <= 520px) {
  .territory-hero {
    width: calc(100% - 18px);
    margin: 14px auto 16px;
  }

  .container {
    width: calc(100% - 18px);
  }

  .territory-hero-inner {
    border-radius: 22px;
  }

  .territory-slide {
    gap: 18px;
    padding: 20px;
  }

  .territory-slide-content h1 {
    font-size: clamp(22px, 10vw, 30px);
    line-height: 1.08;
  }

  .territory-slide-lead {
    font-size: 14px;
    line-height: 1.78;
  }

  .territory-slide-content p:not(.territory-slide-lead) {
    font-size: 13.5px;
    line-height: 1.82;
  }

  .hero-carousel-track {
    aspect-ratio: 1 / .92;
    border-radius: 20px;
  }

  .hero-carousel-slide {
    padding: 18px;
  }

  .stat-card {
    min-height: 118px;
    padding: 18px;
  }

  .stat-value {
    font-size: 34px;
  }

  .panel-main {
    padding: 20px;
  }

  .territory-text p, .territory-text p:first-child {
    font-size: 13.5px;
    line-height: 1.8;
  }
}

@media (width <= 380px) {
  .territory-slide {
    padding: 16px;
  }

  .territory-slide-content h1 {
    font-size: 24px;
  }

  .hero-carousel-slide {
    padding: 14px;
  }

  .panel-main {
    padding: 16px;
  }
}

body {
  background: radial-gradient(circle at 8% 6%, #81b92a33, #0000 30%), radial-gradient(circle at 92% 12%, #53acde29, #0000 32%), radial-gradient(circle at 82% 86%, #ef6b221f, #0000 28%), linear-gradient(#f7f9f2 0%, #fff 44%, #f4f7ef 100%);
}

.bg-grid {
  pointer-events: none;
  opacity: .35;
  z-index: -4;
  background-image: linear-gradient(#3c3a390e 1px, #0000 1px), linear-gradient(90deg, #3c3a390e 1px, #0000 1px);
  background-size: 54px 54px;
  position: fixed;
  inset: 0;
  mask-image: linear-gradient(#000000d9, #0000 78%);
}

.bg-orb, .noise {
  pointer-events: none;
}

.bg-orb {
  filter: blur(16px);
  opacity: .18;
  z-index: -3;
  border-radius: 999px;
  width: 360px;
  height: 360px;
  position: fixed;
}

.orb-1 {
  background: var(--green);
  top: 120px;
  left: -140px;
}

.orb-2 {
  background: var(--blue);
  bottom: 120px;
  right: -160px;
}

.noise {
  z-index: -2;
  opacity: .035;
  background-image: radial-gradient(circle, #000 1px, #0000 1px);
  background-size: 4px 4px;
  position: fixed;
  inset: 0;
}

.territory-hero {
  margin-top: 30px;
}

.territory-hero-inner {
  isolation: isolate;
  background: linear-gradient(135deg, #fffffffa, #ffffffe0), radial-gradient(circle at 76% 18%, #ef6b222e, #0000 36%), radial-gradient(circle at 16% 82%, #81b92a29, #0000 36%);
  border: 1px solid #ffffffdb;
}

.territory-hero-inner:before {
  content: "";
  z-index: 0;
  background: linear-gradient(135deg, #81b92a42, #53acde2e);
  border-radius: 999px;
  width: 330px;
  height: 330px;
  position: absolute;
  inset: auto -90px -130px auto;
}

.territory-hero-inner:after {
  content: "";
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, #81b92a1a, #0000 32%), linear-gradient(0deg, #ef6b2214, #0000 28%);
  position: absolute;
  inset: 0;
}

.territory-slide, .territory-slide-2 {
  z-index: 2;
  position: relative;
}

.territory-slide-content:before {
  content: "CRGR • VILA PINTO";
  width: max-content;
  color: var(--green-dark);
  letter-spacing: .09em;
  text-transform: uppercase;
  background: #81b92a24;
  border: 1px solid #81b92a38;
  border-radius: 999px;
  align-items: center;
  margin-bottom: 18px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  display: inline-flex;
}

.territory-slide-content-2:before {
  width: max-content;
  color: var(--green-dark);
  letter-spacing: .09em;
  text-transform: uppercase;
  background: #81b92a24;
  border: 1px solid #81b92a38;
  border-radius: 999px;
  align-items: center;
  margin-bottom: 18px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  display: inline-flex;
}

.territory-slide-content h1 {
  letter-spacing: -1.4px;
  font-size: clamp(34px, 4.8vw, 64px);
  line-height: .98;
}

.territory-eyebrow {
  width: max-content;
  color: var(--green-dark);
  letter-spacing: .09em;
  text-transform: uppercase;
  background: #81b92a24;
  border: 1px solid #81b92a38;
  border-radius: 999px;
  align-items: center;
  margin-bottom: 18px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  display: inline-flex;
}

.territory-slide-lead {
  border-left: 5px solid var(--green);
  color: #474340;
  padding-left: 18px;
  font-size: clamp(16px, 1.45vw, 20px);
}

.territory-slide-content p:not(.territory-slide-lead) {
  font-size: 16px;
}

.hero-carousel-track {
  background: radial-gradient(circle at 50% 25%, #ffffffeb, #ffffffbd), linear-gradient(135deg, #81b92a1a, #53acde1a);
  box-shadow: 0 24px 64px #3c3a3924, inset 0 0 0 1px #ffffffa6;
}

.hero-carousel-track:before {
  content: "";
  pointer-events: none;
  z-index: 1;
  border: 1px dashed #3c3a391f;
  border-radius: 26px;
  position: absolute;
  inset: 18px;
}

.hero-carousel-slide {
  z-index: 2;
}

.hero-carousel-btn {
  cursor: pointer;
}

.stats-section {
  padding: 22px 0 42px;
}

.stat-card {
  transition: transform .22s, box-shadow .22s;
  position: relative;
  overflow: hidden;
}

.stat-card:after {
  content: "";
  background: #ffffff2e;
  border-radius: 999px;
  width: 130px;
  height: 130px;
  position: absolute;
  bottom: -54px;
  right: -48px;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 52px #3c3a3929;
}

.stat-label, .stat-value, .stat-note {
  z-index: 2;
  position: relative;
}

.content-section {
  padding: 22px 0 82px;
}

.panel-main {
  padding: 42px;
  position: relative;
}

.panel-main:before {
  content: "";
  background: linear-gradient(180deg,var(--green),var(--orange),var(--blue));
  width: 8px;
  position: absolute;
  inset: 0 auto 0 0;
}

.panel-head h2 {
  flex-wrap: wrap;
  gap: 8px;
  font-size: clamp(30px, 3.2vw, 48px);
  display: flex;
}

.territory-text {
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.territory-text p {
  background: #ffffffad;
  border: 1px solid #3c3a3914;
  border-radius: 24px;
  max-width: none;
  padding: 22px;
  box-shadow: 0 12px 28px #3c3a390e;
}

.territory-text p:first-child {
  background: linear-gradient(135deg, #81b92a29, #ffffffb8);
}

.territory-text p:nth-child(2) {
  background: linear-gradient(135deg, #53acde24, #ffffffb8);
}

.territory-text p:nth-child(3) {
  background: linear-gradient(135deg, #ef6b2221, #ffffffb8);
}

.territory-text p:nth-child(4) {
  background: linear-gradient(135deg, #3c3a391a, #ffffffc2);
}

.site-footer-public {
  margin-top: 0;
}

@media (width <= 1180px) {
  .territory-slide-content h1 {
    font-size: clamp(32px, 5vw, 56px);
  }
}

@media (width <= 940px) {
  .territory-slide {
    gap: 30px;
  }

  .territory-hero-carousel {
    justify-content: center;
  }

  .hero-carousel-track {
    width: 100%;
    max-width: 520px;
    margin: auto;
  }

  .territory-text {
    grid-template-columns: 1fr;
  }
}

@media (width <= 760px) {
  .territory-hero {
    margin-top: 18px;
  }

  .territory-slide-content:before {
    padding: 7px 11px;
    font-size: 10px;
  }

  .territory-slide-content h1 {
    font-size: clamp(30px, 10vw, 42px);
  }

  .territory-slide-lead {
    border-left-width: 4px;
    padding-left: 14px;
  }

  .panel-main {
    padding: 26px 22px;
  }

  .panel-main:before {
    width: 5px;
  }

  .territory-text p {
    border-radius: 20px;
    padding: 18px;
  }
}

@media (width <= 520px) {
  .territory-hero-inner {
    border-radius: 26px;
  }

  .territory-slide {
    padding: 22px 18px;
  }

  .territory-slide-content h1 {
    letter-spacing: -.8px;
    font-size: clamp(28px, 11vw, 38px);
  }

  .hero-carousel-controls {
    bottom: 10px;
  }

  .hero-carousel-btn {
    width: 38px;
    height: 38px;
  }

  .stats-section {
    padding-top: 16px;
  }

  .stat-card {
    border-radius: 22px;
  }
}

.territory-banner {
  padding: 0 0 34px;
}

.territory-banner-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  display: grid;
}

.banner-green, .banner-orange, .banner-blue {
  text-align: center;
  color: #fff;
  border-radius: 22px;
  justify-content: center;
  align-items: center;
  min-height: 150px;
  padding: 24px;
  font-size: 28px;
  font-weight: 800;
  display: flex;
  box-shadow: 0 14px 34px #0000001f;
}

.banner-green {
  background: #81b92a;
}

.banner-orange {
  background: #ef6b22;
}

.banner-blue {
  background: #53acde;
}

@media (width <= 900px) {
  .territory-banner-grid {
    grid-template-columns: 1fr;
  }

  .banner-green, .banner-orange, .banner-blue {
    min-height: 110px;
    font-size: 22px;
  }
}

.participant-area {
  padding: 22px 0 44px;
}

.participant-shell {
  background: linear-gradient(145deg, #fffffffa, #f7f9f4f2);
  border: 1px solid #3c3a3917;
  border-radius: 32px;
  padding: clamp(24px, 4vw, 44px);
  position: relative;
  overflow: hidden;
  box-shadow: 0 24px 70px #3c3a391c;
}

.participant-shell:before {
  content: "";
  background: linear-gradient(90deg,var(--green),var(--blue),var(--orange));
  height: 7px;
  position: absolute;
  inset: 0 0 auto;
}

.participant-header {
  justify-content: space-between;
  align-items: flex-start;
  gap: 28px;
  margin-bottom: 28px;
  display: flex;
}

.participant-eyebrow, .participant-dashboard-kicker {
  color: var(--green-dark);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 900;
  display: inline-flex;
}

.participant-header h2 {
  color: var(--black);
  letter-spacing: -1px;
  margin: 0;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1;
}

.participant-header p {
  color: #66615e;
  max-width: 720px;
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.65;
}

.participant-security {
  color: var(--green-dark);
  background: #81b92a1a;
  border: 1px solid #81b92a38;
  border-radius: 999px;
  flex: none;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 800;
  display: flex;
}

.participant-security span {
  color: var(--green);
  font-size: 10px;
}

.participant-search {
  background: #fff;
  border: 1px solid #3c3a3914;
  border-radius: 22px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 14px;
  padding: 18px;
  display: grid;
  box-shadow: 0 12px 34px #3c3a390f;
}

.participant-search-field > span {
  color: #4e4946;
  letter-spacing: .03em;
  text-transform: uppercase;
  margin: 0 0 8px 4px;
  font-size: 12px;
  font-weight: 900;
  display: block;
}

.participant-input-wrap {
  position: relative;
}

.participant-input-icon {
  color: var(--green-dark);
  font-size: 24px;
  font-weight: 900;
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
}

.participant-input-wrap input {
  width: 100%;
  height: 56px;
  color: var(--black);
  background: #f9faf7;
  border: 1px solid #3c3a3924;
  border-radius: 15px;
  outline: none;
  padding: 0 18px 0 50px;
  font: 700 16px Archivo Condensed, Arial, sans-serif;
  transition: all .2s;
}

.participant-input-wrap input:focus {
  border-color: var(--green);
  background: #fff;
  box-shadow: 0 0 0 4px #81b92a1f;
}

.participant-search-btn {
  cursor: pointer;
  background: linear-gradient(135deg,var(--green),var(--green-dark));
  color: #fff;
  letter-spacing: .02em;
  border: 0;
  border-radius: 15px;
  justify-content: center;
  align-items: center;
  gap: 18px;
  min-width: 210px;
  height: 56px;
  padding: 0 20px;
  font: 900 14px Archivo Condensed, Arial, sans-serif;
  transition: all .2s;
  display: flex;
  box-shadow: 0 12px 26px #5f8d193d;
}

.participant-search-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px #5f8d194d;
}

.participant-search-btn:disabled {
  cursor: wait;
  opacity: .65;
  transform: none;
}

.participant-feedback {
  color: #416579;
  background: #53acde17;
  border-radius: 13px;
  margin-top: 14px;
  padding: 12px 15px;
  font-size: 13px;
  font-weight: 700;
}

.participant-feedback.is-error {
  color: #a24816;
  background: #ef6b221c;
}

.participant-feedback.is-success {
  color: var(--green-dark);
  background: #81b92a1c;
}

.participant-dashboard {
  margin-top: 28px;
}

.participant-dashboard[hidden] {
  display: none !important;
}

.participant-dashboard-topbar {
  color: #fff;
  background: linear-gradient(135deg, #253328, #344b38);
  border-radius: 22px;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  margin-bottom: 16px;
  padding: 20px 22px;
  display: flex;
  box-shadow: 0 16px 36px #2533282e;
}

.participant-dashboard-topbar h3 {
  margin: 0 0 5px;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1;
}

.participant-dashboard-topbar p {
  color: #ffffffb3;
  margin: 0;
  font-size: 13px;
}

.participant-dashboard-kicker {
  color: #bfe37e;
  margin-bottom: 7px;
}

.participant-clear-btn {
  cursor: pointer;
  color: #fff;
  background: #ffffff14;
  border: 1px solid #ffffff2e;
  border-radius: 12px;
  padding: 10px 14px;
  font: 800 12px Archivo Condensed, Arial, sans-serif;
}

.participant-kpi-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
  display: grid;
}

.participant-kpi {
  background: #fff;
  border: 1px solid #3c3a3914;
  border-radius: 20px;
  min-height: 138px;
  padding: 22px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 10px 28px #3c3a3911;
}

.participant-kpi:after {
  content: "";
  background: #53acde1a;
  border-radius: 999px;
  width: 110px;
  height: 110px;
  position: absolute;
  bottom: -48px;
  right: -46px;
}

.participant-kpi.kpi-primary {
  background: linear-gradient(135deg,var(--green),var(--green-dark));
  color: #fff;
  border-color: #0000;
}

.participant-kpi.kpi-primary:after {
  background: #ffffff26;
}

.participant-kpi-label {
  z-index: 1;
  color: #78726e;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 900;
  display: block;
  position: relative;
}

.participant-kpi.kpi-primary .participant-kpi-label {
  color: #ffffffc7;
}

.participant-kpi strong {
  z-index: 1;
  color: var(--black);
  margin-top: 13px;
  font-size: clamp(28px, 3.5vw, 42px);
  line-height: 1;
  display: block;
  position: relative;
}

.participant-kpi.kpi-primary strong {
  color: #fff;
}

.participant-kpi small {
  z-index: 1;
  color: #918985;
  margin-top: 10px;
  font-size: 12px;
  display: block;
  position: relative;
}

.participant-kpi.kpi-primary small {
  color: #ffffffb8;
}

.participant-dashboard-grid {
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .75fr);
  gap: 14px;
  display: grid;
}

.participant-visual-card, .participant-table-card {
  background: #fff;
  border: 1px solid #3c3a3914;
  border-radius: 22px;
  box-shadow: 0 12px 32px #3c3a3911;
}

.participant-visual-card {
  min-width: 0;
  padding: 20px;
}

.participant-chart-wide {
  grid-row: span 2;
}

.participant-card-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 14px;
  display: flex;
}

.participant-card-head span {
  color: #98908b;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 900;
  display: block;
}

.participant-card-head h4 {
  color: var(--black);
  margin: 4px 0 0;
  font-size: 20px;
  line-height: 1.1;
}

.participant-card-badge, .participant-record-count {
  white-space: nowrap;
  background: #81b92a1c;
  border-radius: 999px;
  padding: 7px 10px;
  color: var(--green-dark) !important;
  font-size: 10px !important;
}

.participant-chart-box {
  height: 330px;
  position: relative;
}

.participant-chart-donut {
  height: 230px;
}

.participant-summary-list {
  background: #edf0eb;
  border-radius: 14px;
  gap: 1px;
  display: grid;
  overflow: hidden;
}

.participant-summary-list div {
  background: #fafbf9;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 13px 14px;
  display: flex;
}

.participant-summary-list span {
  color: #756f6b;
  font-size: 13px;
}

.participant-summary-list strong {
  color: var(--black);
  font-size: 17px;
}

.participant-table-card {
  margin-top: 14px;
  overflow: hidden;
}

.participant-table-head {
  border-bottom: 1px solid #3c3a3914;
  margin: 0;
  padding: 20px 22px;
}

.participant-table-wrap {
  overflow: auto;
}

.participant-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 720px;
}

.participant-table th, .participant-table td {
  text-align: left;
  border-bottom: 1px solid #3c3a3911;
  padding: 14px 18px;
}

.participant-table th {
  color: #736d69;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: #f7f8f5;
  font-size: 10px;
  font-weight: 900;
}

.participant-table td {
  color: #514c49;
  font-size: 13px;
  font-weight: 600;
}

.participant-table tbody tr:hover {
  background: #81b92a0d;
}

.participant-table .is-number {
  text-align: right;
}

.participant-table-empty td {
  color: #8c8580;
  padding: 32px;
  text-align: center !important;
}

.participant-quality {
  color: #52604f;
  background: #eef2ec;
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 800;
  display: inline-flex;
}

@media (width <= 1050px) {
  .participant-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .participant-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .participant-chart-wide {
    grid-row: auto;
  }
}

@media (width <= 760px) {
  .participant-area {
    padding-top: 10px;
  }

  .participant-shell {
    border-radius: 25px;
    padding: 24px 18px;
  }

  .participant-header {
    display: block;
  }

  .participant-security {
    width: max-content;
    margin-top: 16px;
  }

  .participant-search {
    grid-template-columns: 1fr;
  }

  .participant-search-btn {
    width: 100%;
  }

  .participant-dashboard-topbar {
    align-items: flex-start;
  }

  .participant-kpi-grid {
    grid-template-columns: 1fr;
  }

  .participant-chart-box {
    height: 270px;
  }

  .participant-chart-donut {
    height: 230px;
  }

  .participant-card-head {
    flex-wrap: wrap;
  }
}

@media (width <= 520px) {
  .participant-shell {
    padding: 22px 14px;
  }

  .participant-header h2 {
    font-size: 31px;
  }

  .participant-header p {
    font-size: 14px;
  }

  .participant-dashboard-topbar {
    display: block;
  }

  .participant-clear-btn {
    margin-top: 14px;
  }

  .participant-kpi {
    min-height: 120px;
  }

  .participant-visual-card {
    padding: 16px;
  }

  .participant-chart-box {
    height: 235px;
  }
}