/* ==========================================================
   DANCEHIRES PREMIUM CONCEPT V1
   Visual layer only
========================================================== */

:root {
  --dh-sidebar-width: 276px;

  --dh-navy: #0d0824;
  --dh-navy-2: #13062d;
  --dh-navy-3: #21104a;

  --dh-purple: #6e35ff;
  --dh-violet: #8e30ff;
  --dh-magenta: #d927ff;
  --dh-lavender: #eee8ff;

  --dh-gold: #d5a74f;
  --dh-gold-light: #f2d28b;

  --dh-ink: #17162a;
  --dh-muted: #77748f;
  --dh-border: #e8e3f3;

  --dh-bg: #ffffff;
  --dh-soft: #faf9ff;
}


/* ==========================================================
   PAGE
========================================================== */

html,
body {
  background: #ffffff;
}

body {
  color: var(--dh-ink);
}

.main {
  margin-left: var(--dh-sidebar-width);
  background:
    radial-gradient(
      circle at 70% 5%,
      rgba(139, 74, 255, .055),
      transparent 27%
    ),
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fbfaff 48%,
      #ffffff 100%
    );
}

.page {
  padding:
    31px 36px 56px;
}


/* ==========================================================
   SIDEBAR
========================================================== */

.sidebar {
  width: var(--dh-sidebar-width);

  overflow: hidden;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(128, 45, 255, .35),
      transparent 34%
    ),
    radial-gradient(
      circle at -15% 88%,
      rgba(154, 53, 255, .33),
      transparent 31%
    ),
    linear-gradient(
      180deg,
      #100626 0%,
      #0c0821 44%,
      #160733 100%
    );

  border-right:
    1px solid rgba(255,255,255,.09);

  box-shadow:
    16px 0 50px rgba(43, 14, 89, .08);
}

.sidebar::before {
  content: "";

  position: absolute;

  width: 360px;
  height: 150px;

  left: -120px;
  bottom: 145px;

  pointer-events: none;

  transform: rotate(-29deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(143, 52, 255, .03),
      rgba(191, 78, 255, .43),
      rgba(245, 205, 112, .56),
      rgba(133, 38, 255, .18),
      transparent
    );

  filter: blur(3px);

  border-radius: 50%;
}

.sidebar::after {
  content: "";

  position: absolute;

  width: 8px;
  height: 8px;

  left: 80px;
  bottom: 251px;

  pointer-events: none;

  border-radius: 50%;

  background: #fff;

  box-shadow:
    0 0 9px #fff,
    0 0 23px #c950ff,
    0 0 48px #8e35ff;
}


/* BRAND */

.sidebar-brand {
  position: relative;
  z-index: 3;

  height: 91px;

  padding:
    0 20px;

  border-bottom:
    1px solid rgba(255,255,255,.07);
}

.brand-symbol {
  width: 48px;
  height: 48px;

  position: relative;

  border-radius: 15px;

  background:
    radial-gradient(
      circle at 40% 25%,
      rgba(255,255,255,.26),
      transparent 25%
    ),
    linear-gradient(
      145deg,
      #8c42ff,
      #5014d3
    );

  border:
    1px solid rgba(255,255,255,.18);

  box-shadow:
    0 10px 30px rgba(111, 47, 255, .38);

  color: #fff;

  font-size: 11px;
}

.brand-symbol::before {
  content: "";

  position: absolute;

  width: 23px;
  height: 2px;

  top: 8px;
  left: 12px;

  transform: rotate(-36deg);

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      var(--dh-gold),
      #fff2bc
    );

  box-shadow:
    0 0 10px rgba(230, 186, 89, .5);
}

.brand-copy strong {
  font-size: 18px;
  letter-spacing: -.6px;
}

.brand-copy strong span {
  background:
    linear-gradient(
      90deg,
      #b486ff,
      #e13bff
    );

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;
}

.brand-copy small {
  color: #aaa0bf;
  font-size: 9px;
  letter-spacing: .5px;
}


/* COMPETITION SWITCHER */

.competition-switcher {
  position: relative;
  z-index: 3;

  min-height: 70px;

  margin: 17px 13px 7px;

  border:
    1px solid rgba(255,255,255,.14);

  border-radius: 17px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.10),
      rgba(255,255,255,.04)
    );

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.09),
    0 12px 30px rgba(0,0,0,.10);

  backdrop-filter: blur(18px);
}

.competition-symbol {
  background:
    linear-gradient(
      145deg,
      #d7a947,
      #8d6124
    );

  color: white;

  box-shadow:
    0 6px 18px rgba(195, 141, 50, .25);
}

.competition-switcher span {
  color: #978aa8;
}

.competition-switcher strong {
  color: #fff;
}

.competition-switcher small {
  color: #b5aabf;
}


/* NAV */

.nav-scroll {
  position: relative;
  z-index: 3;

  padding:
    5px 12px 25px;
}

.nav-title {
  margin-top: 4px;

  padding:
    0 13px 10px;

  color: #80748f;

  font-size: 8px;
  letter-spacing: 1.6px;
}

.nav-item {
  min-height: 44px;

  margin: 3px 0;

  padding:
    0 13px;

  border-radius: 13px;

  color: #c6bdd4;

  font-size: 11px;

  transition:
    background .18s ease,
    color .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

.nav-item:hover {
  color: white;

  background:
    rgba(255,255,255,.065);

  transform:
    translateX(2px);
}

.nav-item.active {
  color: white;

  background:
    linear-gradient(
      100deg,
      #5b27e7,
      #8c21ff 60%,
      #d632f4 100%
    );

  border:
    1px solid rgba(219, 105, 255, .55);

  box-shadow:
    0 0 0 1px rgba(133, 55, 255, .16),
    0 8px 22px rgba(105, 40, 255, .31),
    0 0 24px rgba(201, 51, 255, .24),
    inset 0 1px 0 rgba(255,255,255,.28);
}

.nav-icon {
  width: 25px;

  color: #857991;

  font-size: 15px;
}

.nav-item.active .nav-icon {
  color: #fff;

  filter:
    drop-shadow(
      0 0 5px
      rgba(255,255,255,.45)
    );
}


/* PROFILE */

.account {
  position: relative;
  z-index: 4;

  margin: 8px 13px 15px;

  min-height: 72px;

  padding:
    12px 13px;

  border:
    1px solid rgba(255,255,255,.14);

  border-radius: 17px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.10),
      rgba(67, 16, 117, .22)
    );

  box-shadow:
    0 16px 40px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.08);

  backdrop-filter:
    blur(16px);
}

.avatar {
  width: 41px;
  height: 41px;

  background:
    linear-gradient(
      145deg,
      #5033ff,
      #cf2bff
    );

  color: #fff;

  box-shadow:
    0 5px 18px
    rgba(116, 52, 255, .35);
}

.account strong {
  color: white;
}

.account span {
  color: #b8aec3;
}


/* ==========================================================
   HEADER
========================================================== */

.topbar {
  height: 70px;

  padding:
    0 29px;

  background:
    rgba(255,255,255,.95);

  border-bottom:
    1px solid #ece8f2;

  box-shadow:
    0 5px 22px rgba(46, 31, 76, .03);

  backdrop-filter:
    blur(18px);
}

.breadcrumb {
  display: none;
}

.top-actions {
  width: 100%;
  justify-content: space-between;
}

.search-box {
  width:
    min(420px, 44vw);

  height: 44px;

  border:
    1px solid #e5dff0;

  border-radius: 18px;

  background:
    rgba(255,255,255,.95);

  box-shadow:
    0 5px 17px rgba(52, 30, 92, .055);
}

.search-box input {
  font-size: 10px;
}

.round-action {
  width: 43px;
  height: 43px;

  border:
    1px solid #e6e0ef;

  border-radius: 14px;

  background: white;

  box-shadow:
    0 4px 14px rgba(46, 31, 76, .04);
}

.new-button {
  height: 43px;

  border-radius: 14px;

  background:
    linear-gradient(
      115deg,
      #321276,
      #15082f
    );

  box-shadow:
    0 6px 18px rgba(42, 15, 91, .20);
}


/* ==========================================================
   COMPETITION DASHBOARD HERO
========================================================== */

#dashboard-page {
  position: relative;

  overflow: hidden;

  padding-top: 29px;
}

#dashboard-page .welcome {
  position: relative;

  min-height: 198px;

  margin-bottom: 0;

  padding:
    31px 34px 68px;

  overflow: hidden;

  align-items: flex-start;

  border-radius:
    0;

  background:
    radial-gradient(
      ellipse at 83% 50%,
      rgba(129, 25, 255, .23),
      transparent 34%
    ),
    radial-gradient(
      ellipse at 63% 27%,
      rgba(255,255,255,.88),
      rgba(231, 212, 255, .64) 44%,
      transparent 72%
    ),
    linear-gradient(
      100deg,
      #ffffff 0%,
      #fbf8ff 42%,
      #e7d5ff 100%
    );
}

#dashboard-page .welcome::before {
  content: "";

  position: absolute;

  width: 740px;
  height: 265px;

  right: -44px;
  top: 7px;

  transform:
    rotate(-8deg)
    skewX(-19deg);

  border-radius:
    62% 21% 60% 29%;

  background:
    linear-gradient(
      152deg,
      transparent 8%,
      rgba(94, 16, 173, .88) 22%,
      #5110bb 31%,
      #aa1fff 42%,
      #35108c 53%,
      #d328ff 64%,
      #451295 72%,
      transparent 89%
    );

  filter:
    drop-shadow(
      0 20px 28px
      rgba(108, 21, 198, .22)
    );

  opacity: .92;
}

#dashboard-page .welcome::after {
  content: "";

  position: absolute;

  width: 620px;
  height: 18px;

  right: 1%;
  top: 107px;

  transform:
    rotate(-11deg);

  border-radius: 50%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(237, 192, 82, .92),
      rgba(255, 240, 174, .95),
      rgba(186, 127, 35, .85),
      transparent
    );

  filter:
    blur(2px)
    drop-shadow(
      0 0 12px
      rgba(246, 211, 117, .42)
    );

  opacity: .82;
}

#dashboard-page .welcome > div:first-child {
  position: relative;
  z-index: 5;
}

#dashboard-page .mini-label {
  color: #7427f7;

  font-size: 9px;
  font-weight: 900;

  letter-spacing: 2.2px;
}

#dashboard-page .welcome h1 {
  margin:
    8px 0 5px;

  max-width: 610px;

  color: #131324;

  font-size:
    clamp(34px, 4.1vw, 54px);

  line-height: .98;

  letter-spacing: -2.4px;
}

#dashboard-page .welcome h1::first-letter {
  color: #131324;
}

#dashboard-page .welcome p {
  color: #65617d;

  font-size: 14px;
}

#dashboard-page .welcome .outline-button {
  position: relative;
  z-index: 6;

  margin-top: 4px;

  border-color:
    rgba(119, 49, 245, .15);

  box-shadow:
    0 7px 20px rgba(95, 50, 160, .08);
}


/* Existing command card becomes premium Oro glass card */

#dashboard-page .hero-panel {
  position: absolute;

  z-index: 8;

  top: 72px;
  right: 57px;

  width: 262px;
  min-height: 139px;

  margin: 0;

  padding:
    22px 20px;

  overflow: hidden;

  border:
    1px solid rgba(255,255,255,.33);

  border-radius: 21px;

  background:
    linear-gradient(
      145deg,
      rgba(84, 12, 139, .70),
      rgba(25, 4, 74, .79)
    );

  color: white;

  box-shadow:
    0 18px 50px rgba(61, 10, 128, .23),
    inset 0 1px 0 rgba(255,255,255,.22);

  backdrop-filter:
    blur(18px);
}

#dashboard-page .hero-panel::before {
  content: "ORO";

  position: absolute;

  inset:
    25px 0 auto 0;

  color: white;

  text-align: center;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 41px;

  letter-spacing: 4px;

  text-shadow:
    0 0 17px
    rgba(255,255,255,.13);
}

#dashboard-page .hero-panel::after {
  content:
    "DANCE COMPETITION  ·  WHERE TALENT SHINES BRIGHTER THAN GOLD";

  position: absolute;

  left: 21px;
  right: 21px;
  bottom: 26px;

  color:
    rgba(255,255,255,.77);

  text-align: center;

  font-size: 6px;
  font-weight: 700;

  letter-spacing: 1.15px;
}

#dashboard-page .hero-copy,
#dashboard-page .hero-status {
  visibility: hidden;

  pointer-events: none;
}


/* ==========================================================
   METRIC CARDS
========================================================== */

#dashboard-page .metrics {
  position: relative;
  z-index: 12;

  margin:
    -42px 14px 22px;

  gap: 15px;
}

#dashboard-page .metric-card {
  min-height: 105px;

  position: relative;

  padding:
    18px 46px 18px 18px;

  border:
    1px solid rgba(131, 77, 216, .12);

  border-radius: 20px;

  background:
    rgba(255,255,255,.97);

  box-shadow:
    0 13px 32px rgba(69, 37, 120, .10),
    0 2px 8px rgba(79, 36, 136, .035);

  transition:
    transform .16s ease,
    box-shadow .16s ease;
}

#dashboard-page .metric-card:hover {
  transform:
    translateY(-3px);

  box-shadow:
    0 18px 38px rgba(77, 32, 140, .14);
}

#dashboard-page .metric-card::after {
  content: "›";

  position: absolute;

  right: 17px;
  top: 50%;

  transform:
    translateY(-50%);

  color: #7f3dff;

  font-size: 23px;
  font-weight: 300;
}

#dashboard-page .metric-icon {
  width: 51px;
  height: 51px;

  border-radius: 17px;

  color: white;

  background:
    linear-gradient(
      145deg,
      #4d2cff,
      #9326ff 58%,
      #ce30f9
    );

  box-shadow:
    0 6px 16px rgba(95, 45, 255, .28),
    0 0 22px rgba(187, 45, 255, .22),
    inset 0 1px 0 rgba(255,255,255,.27);

  font-size: 17px;
}

#dashboard-page .metric-card span {
  color: #62617a;

  font-size: 8px;

  letter-spacing: .9px;
}

#dashboard-page .metric-card strong {
  margin-top: 2px;

  color: #111126;

  font-size: 25px;
}

#dashboard-page .metric-card small {
  color: #85829b;
}


/* ==========================================================
   LOWER DASHBOARD
========================================================== */

#dashboard-page .content-grid {
  position: relative;

  z-index: 3;

  gap: 17px;

  grid-template-columns:
    minmax(0, 1.65fr)
    minmax(300px, .76fr);
}

#dashboard-page .surface {
  border:
    1px solid
    rgba(122, 74, 194, .12);

  border-radius: 22px;

  background:
    rgba(255,255,255,.98);

  box-shadow:
    0 14px 38px rgba(70, 39, 116, .065);
}

#dashboard-page .surface-head {
  min-height: 80px;

  padding:
    18px 22px;

  border-bottom:
    1px solid #eeeaf5;
}

#dashboard-page .surface-head span {
  color: #7855aa;

  letter-spacing: 1.15px;
}

#dashboard-page .surface-head h3 {
  color: #17162a;

  font-size: 17px;
}

#dashboard-page .surface-head button,
#dashboard-page .small-primary,
.hero-primary {
  min-height: 39px;

  padding:
    0 17px;

  border: 0;

  border-radius: 999px;

  background:
    linear-gradient(
      105deg,
      #5221dd,
      #8923ff 58%,
      #d82bed
    );

  color: white;

  font-weight: 750;

  box-shadow:
    0 7px 20px rgba(111, 35, 235, .25),
    0 0 16px rgba(209, 42, 237, .12);
}

#dashboard-page .event-empty {
  min-height: 284px;

  margin:
    13px;

  border:
    1px solid #eee7fa;

  border-radius: 18px;

  background:
    radial-gradient(
      circle at 50% 25%,
      rgba(135, 71, 255, .075),
      transparent 32%
    ),
    linear-gradient(
      180deg,
      #fff,
      #fdfbff
    );
}

#dashboard-page .empty-icon {
  width: 64px;
  height: 64px;

  border:
    1px solid #decfff;

  border-radius: 50%;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      #f1e9ff
    );

  color: #7d31ff;

  box-shadow:
    0 0 0 9px rgba(131, 68, 255, .035),
    0 8px 25px rgba(102, 45, 194, .10);

  font-size: 18px;
}

#dashboard-page .event-empty h4 {
  color: #17162a;

  font-size: 17px;
}

#dashboard-page .event-empty p {
  color: #7a7691;

  font-size: 10px;
}


/* Registration health */

#dashboard-page .readiness-surface {
  overflow: hidden;
}

#dashboard-page .readiness-surface .surface-head::after {
  content: "●  Ready";

  padding:
    7px 11px;

  border-radius: 999px;

  background: #e7fbf2;

  color: #20a26b;

  font-size: 8px;
  font-weight: 800;
}

#dashboard-page .readiness-list {
  padding:
    9px 20px 4px;
}

#dashboard-page .readiness-row {
  padding:
    16px 0;
}

#dashboard-page .modern-progress {
  height: 7px;

  background: #eee9fb;
}

#dashboard-page .modern-progress i {
  background:
    linear-gradient(
      90deg,
      #7943ff,
      #ba32ff
    );

  box-shadow:
    0 0 10px rgba(135, 52, 255, .17);
}

#dashboard-page .money-panel {
  margin:
    15px 18px 18px;

  padding:
    17px;

  border:
    1px solid #eee8f8;

  border-radius: 17px;

  background:
    linear-gradient(
      145deg,
      #faf8ff,
      #f1ecff
    );
}


/* ==========================================================
   MASTER COMPETITION NETWORK
========================================================== */

.master-page {
  min-height:
    calc(100vh - 70px);

  padding:
    34px 37px 55px;

  background:
    radial-gradient(
      circle at 90% 0%,
      rgba(127, 46, 255, .09),
      transparent 26%
    ),
    linear-gradient(
      180deg,
      #ffffff,
      #fbf9ff
    );
}

.master-top {
  min-height: 183px;

  position: relative;

  margin-bottom: 18px;

  padding:
    33px 35px;

  overflow: hidden;

  align-items: flex-start;

  border-radius: 23px;

  background:
    linear-gradient(
      110deg,
      #ffffff 0%,
      #f7f1ff 48%,
      #e9d7ff 100%
    );

  box-shadow:
    0 15px 40px rgba(64, 31, 116, .06);
}

.master-top::before {
  content: "";

  position: absolute;

  width: 640px;
  height: 215px;

  right: -70px;
  top: -20px;

  transform:
    rotate(-9deg)
    skewX(-17deg);

  border-radius: 55%;

  background:
    linear-gradient(
      150deg,
      transparent,
      #5115c2 24%,
      #c92dff 42%,
      #4b149d 57%,
      #e0aa44 66%,
      #761cff 74%,
      transparent 91%
    );

  opacity: .82;

  filter:
    drop-shadow(
      0 18px 26px
      rgba(93, 28, 178, .18)
    );
}

.master-top > * {
  position: relative;
  z-index: 2;
}

.master-top h1 {
  color: #151427;

  font-size:
    clamp(34px,4vw,47px);

  letter-spacing: -2px;
}

.master-top p {
  color: #69667e;

  font-size: 12px;
}

.master-top .new-button {
  background:
    linear-gradient(
      105deg,
      #4a1ccf,
      #8e23ff,
      #dc2bea
    );

  box-shadow:
    0 8px 22px rgba(107, 34, 229, .28);
}


/* MASTER METRICS */

.master-metrics {
  gap: 15px;

  margin:
    -41px 14px 21px;

  position: relative;
  z-index: 5;
}

.master-metric {
  min-height: 108px;

  padding:
    18px 20px;

  border:
    1px solid
    rgba(124, 69, 211, .12);

  border-radius: 20px;

  box-shadow:
    0 13px 32px rgba(68, 37, 118, .09);

  background:
    rgba(255,255,255,.98);
}

.master-metric span {
  color: #716c85;
}

.master-metric strong {
  margin-top: 8px;

  font-size: 26px;
}

.master-section {
  border:
    1px solid
    rgba(126, 78, 191, .12);

  border-radius: 23px;

  box-shadow:
    0 15px 42px rgba(70, 39, 116, .055);
}

.master-section-head {
  min-height: 78px;

  padding:
    18px 22px;
}

.competition-grid {
  padding: 18px;
}

.competition-network-card {
  min-height: 225px;

  border:
    1px solid #e4dcf1;

  border-radius: 20px;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(133, 65, 255, .075),
      transparent 35%
    ),
    white;

  box-shadow:
    0 11px 29px rgba(68, 35, 117, .055);
}

.competition-network-card:hover {
  border-color:
    #cab9ee;

  box-shadow:
    0 17px 39px rgba(84, 36, 157, .11);
}

.competition-card-logo {
  border-radius: 15px;

  background:
    linear-gradient(
      145deg,
      #31106f,
      #741edb
    );

  box-shadow:
    0 7px 20px rgba(83, 30, 163, .22);

  color:
    var(--dh-gold-light);
}

.open-competition {
  border-radius: 999px;

  background:
    linear-gradient(
      105deg,
      #5420dc,
      #9124ff,
      #cf2dea
    );

  box-shadow:
    0 6px 18px rgba(112, 36, 221, .25);
}


/* ==========================================================
   REGISTRATION AND OTHER WORKSPACES
========================================================== */

.module-header h1 {
  color: #18172a;
}

.modern-tabs {
  padding: 5px;

  border:
    1px solid #ebe5f4;

  border-radius: 16px;

  background: #f5f1fb;
}

.modern-tabs button {
  border-radius: 12px;
}

.modern-tabs button.active {
  color: #6f2af4;

  box-shadow:
    0 5px 16px rgba(94, 47, 157, .08);
}

.filter-bar,
.registration-summary > div,
.registrations-surface,
.large-empty.standalone {
  border:
    1px solid #ebe6f2;

  border-radius: 20px;

  box-shadow:
    0 11px 31px rgba(57, 36, 87, .045);
}

.registration-summary > div {
  background:
    linear-gradient(
      145deg,
      white,
      #fdfbff
    );
}


/* ==========================================================
   EVENT ROWS CREATED BY EXISTING JS
========================================================== */

.event-row-modern {
  min-height: 68px;

  padding:
    13px 19px;

  display: grid;

  grid-template-columns:
    1.1fr
    .8fr
    auto;

  align-items: center;

  gap: 14px;

  border-bottom:
    1px solid #eeeaf4;

  background:
    rgba(255,255,255,.98);
}

.event-row-modern:last-child {
  border-bottom: 0;
}

.event-row-modern strong {
  display: block;

  color: #18172a;

  font-size: 10px;
}

.event-row-modern span {
  color: #89859a;

  font-size: 8px;
}

.event-pill {
  padding:
    6px 10px;

  border-radius: 999px;

  background:
    #e7faf1;

  color:
    #179864 !important;

  font-weight: 800;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media(max-width: 1180px) {

  #dashboard-page .hero-panel {
    right: 30px;
  }

  #dashboard-page .welcome::before {
    opacity: .67;
  }

}

@media(max-width: 950px) {

  #dashboard-page .hero-panel {
    display: none;
  }

  #dashboard-page .welcome h1 {
    max-width: 100%;
  }

  #dashboard-page .welcome::before {
    right: -250px;
    opacity: .42;
  }

}

@media(max-width: 800px) {

  :root {
    --dh-sidebar-width: 0px;
  }

  .main {
    margin-left: 0;
  }

  .page {
    padding:
      22px 17px 40px;
  }

  .master-page {
    padding:
      22px 17px 40px;
  }

  #dashboard-page .welcome {
    padding:
      26px 22px 64px;
  }

  #dashboard-page .metrics,
  .master-metrics {
    margin-left: 0;
    margin-right: 0;
  }

}


#dashboard-page .premium-name {
  background:
    linear-gradient(
      110deg,
      #7a2bff 0%,
      #b328ff 54%,
      #5424f6 100%
    );

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;

  text-shadow:
    0 7px 20px
    rgba(133, 44, 255, .11);
}


/* ==========================================================
   SIDEBAR READABILITY POLISH
========================================================== */

.sidebar {
  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(117, 40, 225, .30),
      transparent 31%
    ),
    radial-gradient(
      circle at 0% 100%,
      rgba(111, 31, 211, .18),
      transparent 30%
    ),
    linear-gradient(
      180deg,
      #11072a 0%,
      #0d0821 46%,
      #14082d 100%
    );
}


/* Move decorative light away from menu labels */

.sidebar::before {
  width: 320px;
  height: 120px;

  left: -150px;
  bottom: 115px;

  transform:
    rotate(-31deg);

  opacity: .55;

  filter:
    blur(5px);
}

.sidebar::after {
  left: 36px;
  bottom: 165px;

  opacity: .55;
}


/* Cleaner navigation background area */

.nav-scroll {
  position: relative;

  padding:
    7px 13px 28px;

  background:
    linear-gradient(
      180deg,
      rgba(7, 5, 20, .12),
      rgba(7, 5, 20, .30)
    );
}


/* Section labels */

.nav-title {
  padding:
    0 13px 10px;

  margin-top: 6px;

  color: #9d91ad;

  font-size: 8px;
  font-weight: 850;

  letter-spacing: 1.7px;
}


/* Main menu rows */

.nav-item {
  min-height: 48px;

  margin: 3px 0;

  padding:
    0 14px;

  gap: 13px;

  border-radius: 14px;

  color: #ded8e8;

  font-size: 12px;
  font-weight: 620;

  letter-spacing: -.05px;
}

.nav-item:hover {
  color: #ffffff;

  background:
    rgba(255,255,255,.075);
}


/* Icons */

.nav-icon {
  width: 24px;

  color: #aaa0ba;

  font-size: 16px;
  font-weight: 500;
}

.nav-item:hover .nav-icon {
  color: #ffffff;
}


/* Active state */

.nav-item.active {
  color: #ffffff;

  background:
    linear-gradient(
      100deg,
      #6230eb 0%,
      #9127ff 55%,
      #d42df0 100%
    );

  border:
    1px solid rgba(231, 141, 255, .50);

  box-shadow:
    0 8px 22px rgba(115, 35, 255, .34),
    0 0 24px rgba(188, 52, 255, .20),
    inset 0 1px 0 rgba(255,255,255,.24);
}

.nav-item.active .nav-icon {
  color: #ffffff;
}


/* Improve group spacing */

.nav-group {
  margin-top: 24px;
}

.nav-group:first-child {
  margin-top: 12px;
}


/* Competition switcher clarity */

.competition-switcher {
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.11),
      rgba(255,255,255,.045)
    );

  border:
    1px solid rgba(255,255,255,.17);
}

.competition-switcher span {
  color: #aa9db8;
}

.competition-switcher strong {
  color: #ffffff;

  font-size: 11px;
}

.competition-switcher small {
  color: #bcb1c7;
}


/* Brand readability */

.brand-copy strong {
  color: #ffffff;
}

.brand-copy small {
  color: #aaa0b8;
}


/* Profile card */

.account {
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.13),
      rgba(75, 22, 125, .30)
    );

  border:
    1px solid rgba(255,255,255,.19);

  box-shadow:
    0 15px 35px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.09);
}

.account strong {
  color: #ffffff;

  font-size: 10px;
}

.account span {
  color: #c0b5ca;
}


/* Scrollbar less distracting */

.nav-scroll {
  scrollbar-color:
    rgba(255,255,255,.20)
    transparent;
}

.nav-scroll::-webkit-scrollbar {
  width: 4px;
}

.nav-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.nav-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;

  background:
    rgba(255,255,255,.20);
}


/* ==========================================================
   DANCEHIRES READABLE TYPOGRAPHY
   Larger, clearer, stronger for all ages
========================================================== */


/* ---------- GLOBAL ---------- */

body {
  font-size: 15px;
}

button,
input,
select {
  font-size: 14px;
}


/* ---------- SIDEBAR ---------- */

.brand-copy strong {
  font-size: 20px;
  font-weight: 800;
}

.brand-copy small {
  font-size: 11px;
  font-weight: 500;
}

.competition-switcher span {
  font-size: 9px;
  font-weight: 800;
}

.competition-switcher strong {
  font-size: 13px;
  font-weight: 800;
}

.competition-switcher small {
  font-size: 10px;
  font-weight: 600;
}

.nav-title {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.8px;
}

.nav-item {
  min-height: 50px;

  font-size: 14px;
  font-weight: 700;

  letter-spacing: 0;
}

.nav-icon {
  font-size: 17px;
}

.account strong {
  font-size: 12px;
  font-weight: 800;
}

.account span {
  font-size: 10px;
  font-weight: 500;
}


/* ---------- TOP HEADER ---------- */

.search-box input {
  font-size: 13px;
}

.round-action {
  font-size: 14px;
}

.new-button {
  font-size: 12px;
  font-weight: 800;
}


/* ---------- DASHBOARD HERO ---------- */

#dashboard-page .mini-label,
.master-page .mini-label {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 2px;
}

#dashboard-page .welcome h1 {
  font-size:
    clamp(40px, 4.3vw, 58px);

  font-weight: 850;
  line-height: 1;
}

#dashboard-page .welcome p {
  font-size: 16px;
  font-weight: 500;
}


/* ---------- METRIC CARDS ---------- */

#dashboard-page .metric-card span {
  font-size: 10px;
  font-weight: 850;
}

#dashboard-page .metric-card strong {
  font-size: 30px;
  font-weight: 850;
}

#dashboard-page .metric-card small {
  font-size: 10px;
  font-weight: 500;
}

#dashboard-page .metric-icon {
  font-size: 19px;
}


/* ---------- SURFACE / CARD HEADERS ---------- */

.surface-head span {
  font-size: 9px;
  font-weight: 900;
}

.surface-head h3 {
  font-size: 19px;
  font-weight: 800;
}

.surface-head button {
  font-size: 11px;
  font-weight: 800;
}


/* ---------- EMPTY STATES ---------- */

.event-empty h4,
.large-empty h4 {
  font-size: 18px;
  font-weight: 800;
}

.event-empty p,
.large-empty p {
  font-size: 12px;
  line-height: 1.5;
}

.small-primary,
.hero-primary {
  min-height: 42px;

  padding-left: 18px;
  padding-right: 18px;

  font-size: 11px;
  font-weight: 800;
}


/* ---------- REGISTRATION HEALTH ---------- */

.readiness-row span {
  font-size: 11px;
  font-weight: 600;
}

.readiness-row strong {
  font-size: 11px;
  font-weight: 800;
}

.money-panel span {
  font-size: 10px;
}

.money-panel strong {
  font-size: 20px;
  font-weight: 850;
}


/* ---------- MASTER ADMIN ---------- */

.master-top h1 {
  font-size:
    clamp(40px, 4vw, 54px);

  font-weight: 850;
}

.master-top p {
  font-size: 14px;
}

.master-metric span {
  font-size: 10px;
  font-weight: 850;
}

.master-metric strong {
  font-size: 31px;
  font-weight: 850;
}

.master-metric small {
  font-size: 10px;
}

.master-section-head span {
  font-size: 9px;
  font-weight: 900;
}

.master-section-head h2 {
  font-size: 20px;
  font-weight: 800;
}

.competition-card-title strong {
  font-size: 16px;
  font-weight: 800;
}

.competition-card-title span {
  font-size: 11px;
}

.competition-card-status {
  font-size: 10px;
  font-weight: 800;
}

.competition-card-stat span {
  font-size: 9px;
}

.competition-card-stat strong {
  font-size: 20px;
  font-weight: 850;
}

.competition-card-footer small {
  font-size: 10px;
}

.open-competition {
  min-height: 40px;

  padding-left: 16px;
  padding-right: 16px;

  font-size: 11px;
  font-weight: 800;
}


/* ---------- REGISTRATION MODULE ---------- */

.module-header h1 {
  font-size:
    clamp(34px, 3vw, 46px);

  font-weight: 850;
}

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

.modern-tabs button {
  min-height: 40px;

  padding-left: 16px;
  padding-right: 16px;

  font-size: 11px;
  font-weight: 650;
}

.modern-tabs button.active {
  font-weight: 850;
}

.filter-control label,
.filter-search label {
  font-size: 9px;
  font-weight: 900;
}

.filter-control select,
.filter-search input,
select,
input {
  font-size: 13px;
}

.filter-search > div,
.filter-control select,
select {
  min-height: 44px;
}

.registration-summary span {
  font-size: 10px;
  font-weight: 850;
}

.registration-summary strong {
  font-size: 30px;
  font-weight: 850;
}


/* ---------- TABLES ---------- */

th {
  padding-top: 14px;
  padding-bottom: 14px;

  font-size: 10px;
  font-weight: 900;
}

td {
  padding-top: 15px;
  padding-bottom: 15px;

  font-size: 12px;
}

td strong {
  font-size: 12px;
  font-weight: 800;
}


/* ---------- MODALS / DRAWERS ---------- */

.drawer-header span,
.modal-head span {
  font-size: 9px;
}

.drawer-header h2,
.modal-head h2 {
  font-size: 24px;
  font-weight: 850;
}

.drawer-header p,
.modal-head p {
  font-size: 11px;
}

.form-field label {
  font-size: 10px;
  font-weight: 800;
}

.form-field input {
  min-height: 45px;
  font-size: 13px;
}


/* ---------- RESPONSIVE ---------- */

@media(max-width: 800px) {

  #dashboard-page .welcome h1 {
    font-size: 38px;
  }

  .module-header h1,
  .master-top h1 {
    font-size: 36px;
  }

  .nav-item {
    font-size: 14px;
  }

}


/* ==========================================================
   DANCEHIRES COMPETITION CUSTOM THEME V1
========================================================== */

:root {
  --competition-primary: #6E35FF;
  --competition-secondary: #D927FF;
  --competition-accent: #D5A74F;

  --competition-primary-soft:
    color-mix(
      in srgb,
      var(--competition-primary) 12%,
      white
    );

  --competition-primary-glow:
    color-mix(
      in srgb,
      var(--competition-primary) 32%,
      transparent
    );
}


/* ACTIVE SIDEBAR */

.nav-item.active {
  background:
    linear-gradient(
      100deg,
      var(--competition-primary),
      color-mix(
        in srgb,
        var(--competition-primary) 65%,
        var(--competition-secondary)
      ),
      var(--competition-secondary)
    ) !important;

  border-color:
    color-mix(
      in srgb,
      var(--competition-secondary) 45%,
      white
    ) !important;

  box-shadow:
    0 8px 22px
      color-mix(
        in srgb,
        var(--competition-primary) 34%,
        transparent
      ),
    0 0 24px
      color-mix(
        in srgb,
        var(--competition-secondary) 23%,
        transparent
      ),
    inset 0 1px 0
      rgba(255,255,255,.24) !important;
}


/* PRIMARY BUTTONS */

.setup-save-button,
.setup-add-button,
.small-primary,
.hero-primary,
.open-competition,
#dashboard-page .surface-head button {
  background:
    linear-gradient(
      105deg,
      var(--competition-primary),
      color-mix(
        in srgb,
        var(--competition-primary) 55%,
        var(--competition-secondary)
      ),
      var(--competition-secondary)
    ) !important;

  box-shadow:
    0 8px 22px
      color-mix(
        in srgb,
        var(--competition-primary) 27%,
        transparent
      ) !important;
}


/* DASHBOARD ICONS */

#dashboard-page .metric-icon {
  background:
    linear-gradient(
      145deg,
      var(--competition-primary),
      color-mix(
        in srgb,
        var(--competition-primary) 55%,
        var(--competition-secondary)
      ),
      var(--competition-secondary)
    ) !important;

  box-shadow:
    0 7px 19px
      color-mix(
        in srgb,
        var(--competition-primary) 29%,
        transparent
      ),
    0 0 22px
      color-mix(
        in srgb,
        var(--competition-secondary) 20%,
        transparent
      ) !important;
}


/* METRIC ARROWS */

#dashboard-page .metric-card::after {
  color:
    var(--competition-primary) !important;
}


/* TEXT ACCENTS */

#dashboard-page .mini-label,
.master-page .mini-label,
.setup-section-head span,
.master-section-head span {
  color:
    var(--competition-primary) !important;
}

#dashboard-page .premium-name {
  background:
    linear-gradient(
      110deg,
      var(--competition-primary),
      var(--competition-secondary)
    ) !important;

  -webkit-background-clip: text !important;
  background-clip: text !important;

  color: transparent !important;
}


/* DASHBOARD HERO */

#dashboard-page .welcome {
  background:
    radial-gradient(
      ellipse at 83% 50%,
      color-mix(
        in srgb,
        var(--competition-primary) 23%,
        transparent
      ),
      transparent 34%
    ),
    radial-gradient(
      ellipse at 63% 27%,
      rgba(255,255,255,.88),
      color-mix(
        in srgb,
        var(--competition-primary) 17%,
        white
      ) 44%,
      transparent 72%
    ),
    linear-gradient(
      100deg,
      #ffffff 0%,
      #fbf8ff 42%,
      color-mix(
        in srgb,
        var(--competition-primary) 16%,
        white
      ) 100%
    ) !important;
}


#dashboard-page .welcome::before {
  background:
    linear-gradient(
      152deg,
      transparent 8%,

      color-mix(
        in srgb,
        var(--competition-primary) 72%,
        #1d093d
      ) 22%,

      var(--competition-primary) 34%,

      var(--competition-secondary) 46%,

      color-mix(
        in srgb,
        var(--competition-primary) 65%,
        #180630
      ) 58%,

      var(--competition-secondary) 67%,

      var(--competition-primary) 76%,

      transparent 89%
    ) !important;
}


#dashboard-page .welcome::after {
  background:
    linear-gradient(
      90deg,
      transparent,
      var(--competition-accent),
      color-mix(
        in srgb,
        var(--competition-accent) 45%,
        white
      ),
      var(--competition-accent),
      transparent
    ) !important;
}


/* ORO GLASS CARD */

#dashboard-page .hero-panel {
  background:
    linear-gradient(
      145deg,
      color-mix(
        in srgb,
        var(--competition-primary) 62%,
        #18052e
      ),
      color-mix(
        in srgb,
        var(--competition-primary) 18%,
        #09021c
      )
    ) !important;

  border-color:
    color-mix(
      in srgb,
      var(--competition-primary) 28%,
      white
    ) !important;
}


/* REGISTRATION HEALTH */

#dashboard-page .modern-progress i {
  background:
    linear-gradient(
      90deg,
      var(--competition-primary),
      var(--competition-secondary)
    ) !important;
}


/* SETUP NAVIGATION */

.setup-nav-item.active {
  color:
    var(--competition-primary) !important;

  background:
    color-mix(
      in srgb,
      var(--competition-primary) 9%,
      white
    ) !important;

  box-shadow:
    inset 3px 0
    var(--competition-primary) !important;
}

.setup-nav-item.active span {
  color:
    var(--competition-primary) !important;
}


/* SWITCHES */

.setup-switch input:checked + i {
  background:
    linear-gradient(
      105deg,
      var(--competition-primary),
      var(--competition-secondary)
    ) !important;
}


/* SCORE TOTAL */

.score-total-card strong {
  background:
    linear-gradient(
      90deg,
      color-mix(
        in srgb,
        var(--competition-primary) 65%,
        white
      ),
      var(--competition-secondary)
    ) !important;

  -webkit-background-clip: text !important;
  background-clip: text !important;

  color: transparent !important;
}


/* CHIPS */

.setup-chip {
  color:
    color-mix(
      in srgb,
      var(--competition-primary) 80%,
      #221430
    ) !important;

  border-color:
    color-mix(
      in srgb,
      var(--competition-primary) 20%,
      #ddd
    ) !important;

  background:
    color-mix(
      in srgb,
      var(--competition-primary) 7%,
      white
    ) !important;
}


/* GOLD / PREMIUM ACCENT */

.competition-symbol,
.competition-card-logo {
  box-shadow:
    0 7px 20px
    color-mix(
      in srgb,
      var(--competition-accent) 23%,
      transparent
    ) !important;
}


/* ==========================================================
   COMPETITION CUSTOM SIDEBAR THEME V1
========================================================== */

.sidebar {
  background:
    radial-gradient(
      circle at 100% 0%,
      color-mix(
        in srgb,
        var(--competition-primary) 38%,
        transparent
      ),
      transparent 34%
    ),

    radial-gradient(
      circle at 0% 100%,
      color-mix(
        in srgb,
        var(--competition-secondary) 28%,
        transparent
      ),
      transparent 31%
    ),

    linear-gradient(
      180deg,
      color-mix(
        in srgb,
        var(--competition-primary) 14%,
        #090714
      ) 0%,

      #0b0915 48%,

      color-mix(
        in srgb,
        var(--competition-secondary) 12%,
        #0a0713
      ) 100%
    ) !important;

  border-right:
    1px solid
    color-mix(
      in srgb,
      var(--competition-primary) 12%,
      rgba(255,255,255,.06)
    ) !important;
}


/* Ambient premium ribbon */

.sidebar::before {
  background:
    linear-gradient(
      90deg,
      transparent,

      color-mix(
        in srgb,
        var(--competition-primary) 16%,
        transparent
      ),

      color-mix(
        in srgb,
        var(--competition-secondary) 42%,
        transparent
      ),

      color-mix(
        in srgb,
        var(--competition-accent) 68%,
        transparent
      ),

      color-mix(
        in srgb,
        var(--competition-primary) 24%,
        transparent
      ),

      transparent
    ) !important;
}


/* Small glow point */

.sidebar::after {
  background:
    color-mix(
      in srgb,
      var(--competition-accent) 75%,
      white
    ) !important;

  box-shadow:
    0 0 9px #fff,

    0 0 24px
      color-mix(
        in srgb,
        var(--competition-secondary) 70%,
        transparent
      ),

    0 0 46px
      color-mix(
        in srgb,
        var(--competition-primary) 68%,
        transparent
      ) !important;
}


/* Brand symbol follows competition */

.brand-symbol {
  background:
    radial-gradient(
      circle at 40% 25%,
      rgba(255,255,255,.24),
      transparent 25%
    ),

    linear-gradient(
      145deg,
      var(--competition-primary),
      var(--competition-secondary)
    ) !important;

  box-shadow:
    0 10px 30px
    color-mix(
      in srgb,
      var(--competition-primary) 38%,
      transparent
    ) !important;
}


/* Gold/accent slash */

.brand-symbol::before {
  background:
    linear-gradient(
      90deg,
      var(--competition-accent),
      color-mix(
        in srgb,
        var(--competition-accent) 45%,
        white
      )
    ) !important;

  box-shadow:
    0 0 10px
    color-mix(
      in srgb,
      var(--competition-accent) 45%,
      transparent
    ) !important;
}


/* DanceHires word accent */

.brand-copy strong span {
  background:
    linear-gradient(
      90deg,
      color-mix(
        in srgb,
        var(--competition-primary) 55%,
        white
      ),
      var(--competition-secondary)
    ) !important;

  -webkit-background-clip: text !important;
  background-clip: text !important;

  color: transparent !important;
}


/* Competition switcher */

.competition-switcher {
  background:
    linear-gradient(
      145deg,
      color-mix(
        in srgb,
        var(--competition-primary) 14%,
        rgba(255,255,255,.06)
      ),
      rgba(255,255,255,.035)
    ) !important;

  border-color:
    color-mix(
      in srgb,
      var(--competition-primary) 19%,
      rgba(255,255,255,.12)
    ) !important;
}


/* Competition icon accent */

.competition-symbol {
  background:
    linear-gradient(
      145deg,
      var(--competition-accent),
      color-mix(
        in srgb,
        var(--competition-accent) 55%,
        #5a3d1b
      )
    ) !important;
}


/* Sidebar profile card */

.account {
  background:
    linear-gradient(
      145deg,
      color-mix(
        in srgb,
        var(--competition-primary) 17%,
        rgba(255,255,255,.08)
      ),
      color-mix(
        in srgb,
        var(--competition-secondary) 10%,
        rgba(15,8,25,.35)
      )
    ) !important;

  border-color:
    color-mix(
      in srgb,
      var(--competition-primary) 20%,
      rgba(255,255,255,.14)
    ) !important;
}


/* Profile avatar */

.avatar {
  background:
    linear-gradient(
      145deg,
      var(--competition-primary),
      var(--competition-secondary)
    ) !important;

  box-shadow:
    0 6px 18px
    color-mix(
      in srgb,
      var(--competition-primary) 32%,
      transparent
    ) !important;
}


/* Inactive icon subtle tint */

.nav-icon {
  color:
    color-mix(
      in srgb,
      var(--competition-primary) 18%,
      #aaa0ba
    ) !important;
}


/* Hover tint */

.nav-item:hover {
  background:
    color-mix(
      in srgb,
      var(--competition-primary) 8%,
      rgba(255,255,255,.05)
    ) !important;
}


/* Active navigation */

.nav-item.active {
  background:
    linear-gradient(
      100deg,
      var(--competition-primary),
      color-mix(
        in srgb,
        var(--competition-primary) 58%,
        var(--competition-secondary)
      ),
      var(--competition-secondary)
    ) !important;
}


/* Scrollbar follows theme */

.nav-scroll {
  scrollbar-color:
    color-mix(
      in srgb,
      var(--competition-primary) 35%,
      transparent
    )
    transparent !important;
}

.nav-scroll::-webkit-scrollbar-thumb {
  background:
    color-mix(
      in srgb,
      var(--competition-primary) 35%,
      transparent
    ) !important;
}


/* ==========================================================
   DANCEHIRES FULL COMPETITION COLOR SYSTEM V1
   Removes remaining hard-coded purple UI accents
========================================================== */


/* ----------------------------------------------------------
   MASTER COMPETITION NETWORK HERO
---------------------------------------------------------- */

.master-page {
  background:
    radial-gradient(
      circle at 90% 0%,
      color-mix(
        in srgb,
        var(--competition-primary) 7%,
        transparent
      ),
      transparent 26%
    ),
    linear-gradient(
      180deg,
      #ffffff,
      color-mix(
        in srgb,
        var(--competition-primary) 2%,
        #ffffff
      )
    ) !important;
}


.master-top {
  background:
    linear-gradient(
      110deg,
      #ffffff 0%,
      color-mix(
        in srgb,
        var(--competition-primary) 5%,
        #ffffff
      ) 48%,
      color-mix(
        in srgb,
        var(--competition-primary) 14%,
        #ffffff
      ) 100%
    ) !important;
}


/* Metallic ribbon on Competition Network */

.master-top::before {
  background:
    linear-gradient(
      150deg,

      transparent 5%,

      color-mix(
        in srgb,
        var(--competition-primary) 75%,
        #17131e
      ) 22%,

      var(--competition-primary) 34%,

      color-mix(
        in srgb,
        var(--competition-primary) 52%,
        var(--competition-secondary)
      ) 46%,

      var(--competition-secondary) 57%,

      var(--competition-accent) 67%,

      color-mix(
        in srgb,
        var(--competition-accent) 45%,
        var(--competition-primary)
      ) 72%,

      transparent 91%
    ) !important;

  filter:
    drop-shadow(
      0 18px 26px
      color-mix(
        in srgb,
        var(--competition-primary) 18%,
        transparent
      )
    ) !important;
}


/* New Competition */

.master-top .new-button {
  background:
    linear-gradient(
      105deg,
      var(--competition-primary),
      color-mix(
        in srgb,
        var(--competition-primary) 55%,
        var(--competition-secondary)
      ),
      var(--competition-secondary)
    ) !important;

  box-shadow:
    0 8px 22px
    color-mix(
      in srgb,
      var(--competition-primary) 29%,
      transparent
    ) !important;
}


/* ----------------------------------------------------------
   MASTER METRICS
---------------------------------------------------------- */

.master-metric {
  border-color:
    color-mix(
      in srgb,
      var(--competition-primary) 11%,
      #e9e6ee
    ) !important;
}


.master-metric span,
.master-section-head span {
  color:
    color-mix(
      in srgb,
      var(--competition-primary) 72%,
      #676171
    ) !important;
}


/* ----------------------------------------------------------
   COMPETITION NETWORK CARD
---------------------------------------------------------- */

.competition-network-card {
  border-color:
    color-mix(
      in srgb,
      var(--competition-primary) 20%,
      #dedbe5
    ) !important;

  background:
    radial-gradient(
      circle at 100% 0%,
      color-mix(
        in srgb,
        var(--competition-primary) 7%,
        transparent
      ),
      transparent 36%
    ),
    #ffffff !important;
}


.competition-network-card:hover {
  border-color:
    color-mix(
      in srgb,
      var(--competition-primary) 37%,
      #d5d0dc
    ) !important;

  box-shadow:
    0 17px 39px
    color-mix(
      in srgb,
      var(--competition-primary) 11%,
      transparent
    ) !important;
}


/* Competition logo */

.competition-card-logo {
  background:
    linear-gradient(
      145deg,
      var(--competition-primary),
      color-mix(
        in srgb,
        var(--competition-primary) 58%,
        var(--competition-secondary)
      )
    ) !important;

  color:
    var(--competition-accent) !important;

  box-shadow:
    0 7px 20px
    color-mix(
      in srgb,
      var(--competition-primary) 22%,
      transparent
    ) !important;
}


/* Open Admin */

.open-competition {
  background:
    linear-gradient(
      105deg,
      var(--competition-primary),
      color-mix(
        in srgb,
        var(--competition-primary) 58%,
        var(--competition-secondary)
      ),
      var(--competition-secondary)
    ) !important;
}


/* ----------------------------------------------------------
   TOP CREATE BUTTON
---------------------------------------------------------- */

.new-button {
  background:
    linear-gradient(
      105deg,
      color-mix(
        in srgb,
        var(--competition-primary) 72%,
        #090811
      ),
      color-mix(
        in srgb,
        var(--competition-primary) 42%,
        #08070e
      )
    ) !important;

  box-shadow:
    0 6px 18px
    color-mix(
      in srgb,
      var(--competition-primary) 18%,
      transparent
    ) !important;
}


/* ----------------------------------------------------------
   SEARCH / CONTROLS
---------------------------------------------------------- */

.search-box:focus-within {
  border-color:
    color-mix(
      in srgb,
      var(--competition-primary) 40%,
      #ded9e5
    ) !important;

  box-shadow:
    0 0 0 3px
    color-mix(
      in srgb,
      var(--competition-primary) 8%,
      transparent
    ) !important;
}


/* ----------------------------------------------------------
   DASHBOARD CARDS
---------------------------------------------------------- */

#dashboard-page .metric-card {
  border-color:
    color-mix(
      in srgb,
      var(--competition-primary) 11%,
      #ebe8ef
    ) !important;
}


#dashboard-page .metric-card:hover {
  box-shadow:
    0 18px 38px
    color-mix(
      in srgb,
      var(--competition-primary) 14%,
      transparent
    ) !important;
}


#dashboard-page .surface {
  border-color:
    color-mix(
      in srgb,
      var(--competition-primary) 11%,
      #ebe7ef
    ) !important;
}


/* Empty event icon */

#dashboard-page .empty-icon {
  border-color:
    color-mix(
      in srgb,
      var(--competition-primary) 25%,
      #ece8f1
    ) !important;

  color:
    var(--competition-primary) !important;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      color-mix(
        in srgb,
        var(--competition-primary) 7%,
        #ffffff
      )
    ) !important;

  box-shadow:
    0 0 0 9px
      color-mix(
        in srgb,
        var(--competition-primary) 3%,
        transparent
      ),
    0 8px 25px
      color-mix(
        in srgb,
        var(--competition-primary) 10%,
        transparent
      ) !important;
}


/* ----------------------------------------------------------
   REGISTRATION HEALTH
---------------------------------------------------------- */

#dashboard-page .modern-progress {
  background:
    color-mix(
      in srgb,
      var(--competition-primary) 8%,
      #eeeeee
    ) !important;
}


#dashboard-page .money-panel {
  background:
    linear-gradient(
      145deg,
      #ffffff,
      color-mix(
        in srgb,
        var(--competition-primary) 7%,
        #ffffff
      )
    ) !important;

  border-color:
    color-mix(
      in srgb,
      var(--competition-primary) 11%,
      #eae6ee
    ) !important;
}


/* ----------------------------------------------------------
   REGISTRATION CENTER
---------------------------------------------------------- */

.modern-tabs {
  background:
    color-mix(
      in srgb,
      var(--competition-primary) 5%,
      #f7f6f8
    ) !important;
}


.modern-tabs button.active {
  color:
    var(--competition-primary) !important;

  background:
    #ffffff !important;
}


.filter-bar,
.registration-summary > div,
.registrations-surface,
.large-empty.standalone {
  border-color:
    color-mix(
      in srgb,
      var(--competition-primary) 10%,
      #e9e6ed
    ) !important;
}


/* ----------------------------------------------------------
   GENERAL LINKS / ACCENTS
---------------------------------------------------------- */

a {
  accent-color:
    var(--competition-primary);
}


input[type="checkbox"],
input[type="radio"] {
  accent-color:
    var(--competition-primary);
}


/* ----------------------------------------------------------
   ACTIVE / FOCUS STATES
---------------------------------------------------------- */

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline-color:
    var(--competition-primary) !important;
}


/* ----------------------------------------------------------
   FOOTER CREATE BUTTON
---------------------------------------------------------- */

.bottom-bar .new-button,
.bottom-bar button {
  --local-primary:
    var(--competition-primary);
}


/* ----------------------------------------------------------
   MASTER PAGE COMPETITION COUNT SECTION
---------------------------------------------------------- */

.master-section {
  border-color:
    color-mix(
      in srgb,
      var(--competition-primary) 10%,
      #e8e5ec
    ) !important;
}


/* ----------------------------------------------------------
   CUSTOM SCROLLBAR
---------------------------------------------------------- */

::-webkit-scrollbar-thumb {
  background:
    color-mix(
      in srgb,
      var(--competition-primary) 22%,
      #aaa
    );
}


/* ==========================================================
   DANCEHIRES FULL COMPETITION COLOR SYSTEM V1
   Removes remaining hard-coded purple UI accents
========================================================== */


/* ----------------------------------------------------------
   MASTER COMPETITION NETWORK HERO
---------------------------------------------------------- */

.master-page {
  background:
    radial-gradient(
      circle at 90% 0%,
      color-mix(
        in srgb,
        var(--competition-primary) 7%,
        transparent
      ),
      transparent 26%
    ),
    linear-gradient(
      180deg,
      #ffffff,
      color-mix(
        in srgb,
        var(--competition-primary) 2%,
        #ffffff
      )
    ) !important;
}


.master-top {
  background:
    linear-gradient(
      110deg,
      #ffffff 0%,
      color-mix(
        in srgb,
        var(--competition-primary) 5%,
        #ffffff
      ) 48%,
      color-mix(
        in srgb,
        var(--competition-primary) 14%,
        #ffffff
      ) 100%
    ) !important;
}


/* Metallic ribbon on Competition Network */

.master-top::before {
  background:
    linear-gradient(
      150deg,

      transparent 5%,

      color-mix(
        in srgb,
        var(--competition-primary) 75%,
        #17131e
      ) 22%,

      var(--competition-primary) 34%,

      color-mix(
        in srgb,
        var(--competition-primary) 52%,
        var(--competition-secondary)
      ) 46%,

      var(--competition-secondary) 57%,

      var(--competition-accent) 67%,

      color-mix(
        in srgb,
        var(--competition-accent) 45%,
        var(--competition-primary)
      ) 72%,

      transparent 91%
    ) !important;

  filter:
    drop-shadow(
      0 18px 26px
      color-mix(
        in srgb,
        var(--competition-primary) 18%,
        transparent
      )
    ) !important;
}


/* New Competition */

.master-top .new-button {
  background:
    linear-gradient(
      105deg,
      var(--competition-primary),
      color-mix(
        in srgb,
        var(--competition-primary) 55%,
        var(--competition-secondary)
      ),
      var(--competition-secondary)
    ) !important;

  box-shadow:
    0 8px 22px
    color-mix(
      in srgb,
      var(--competition-primary) 29%,
      transparent
    ) !important;
}


/* ----------------------------------------------------------
   MASTER METRICS
---------------------------------------------------------- */

.master-metric {
  border-color:
    color-mix(
      in srgb,
      var(--competition-primary) 11%,
      #e9e6ee
    ) !important;
}


.master-metric span,
.master-section-head span {
  color:
    color-mix(
      in srgb,
      var(--competition-primary) 72%,
      #676171
    ) !important;
}


/* ----------------------------------------------------------
   COMPETITION NETWORK CARD
---------------------------------------------------------- */

.competition-network-card {
  border-color:
    color-mix(
      in srgb,
      var(--competition-primary) 20%,
      #dedbe5
    ) !important;

  background:
    radial-gradient(
      circle at 100% 0%,
      color-mix(
        in srgb,
        var(--competition-primary) 7%,
        transparent
      ),
      transparent 36%
    ),
    #ffffff !important;
}


.competition-network-card:hover {
  border-color:
    color-mix(
      in srgb,
      var(--competition-primary) 37%,
      #d5d0dc
    ) !important;

  box-shadow:
    0 17px 39px
    color-mix(
      in srgb,
      var(--competition-primary) 11%,
      transparent
    ) !important;
}


/* Competition logo */

.competition-card-logo {
  background:
    linear-gradient(
      145deg,
      var(--competition-primary),
      color-mix(
        in srgb,
        var(--competition-primary) 58%,
        var(--competition-secondary)
      )
    ) !important;

  color:
    var(--competition-accent) !important;

  box-shadow:
    0 7px 20px
    color-mix(
      in srgb,
      var(--competition-primary) 22%,
      transparent
    ) !important;
}


/* Open Admin */

.open-competition {
  background:
    linear-gradient(
      105deg,
      var(--competition-primary),
      color-mix(
        in srgb,
        var(--competition-primary) 58%,
        var(--competition-secondary)
      ),
      var(--competition-secondary)
    ) !important;
}


/* ----------------------------------------------------------
   TOP CREATE BUTTON
---------------------------------------------------------- */

.new-button {
  background:
    linear-gradient(
      105deg,
      color-mix(
        in srgb,
        var(--competition-primary) 72%,
        #090811
      ),
      color-mix(
        in srgb,
        var(--competition-primary) 42%,
        #08070e
      )
    ) !important;

  box-shadow:
    0 6px 18px
    color-mix(
      in srgb,
      var(--competition-primary) 18%,
      transparent
    ) !important;
}


/* ----------------------------------------------------------
   SEARCH / CONTROLS
---------------------------------------------------------- */

.search-box:focus-within {
  border-color:
    color-mix(
      in srgb,
      var(--competition-primary) 40%,
      #ded9e5
    ) !important;

  box-shadow:
    0 0 0 3px
    color-mix(
      in srgb,
      var(--competition-primary) 8%,
      transparent
    ) !important;
}


/* ----------------------------------------------------------
   DASHBOARD CARDS
---------------------------------------------------------- */

#dashboard-page .metric-card {
  border-color:
    color-mix(
      in srgb,
      var(--competition-primary) 11%,
      #ebe8ef
    ) !important;
}


#dashboard-page .metric-card:hover {
  box-shadow:
    0 18px 38px
    color-mix(
      in srgb,
      var(--competition-primary) 14%,
      transparent
    ) !important;
}


#dashboard-page .surface {
  border-color:
    color-mix(
      in srgb,
      var(--competition-primary) 11%,
      #ebe7ef
    ) !important;
}


/* Empty event icon */

#dashboard-page .empty-icon {
  border-color:
    color-mix(
      in srgb,
      var(--competition-primary) 25%,
      #ece8f1
    ) !important;

  color:
    var(--competition-primary) !important;

  background:
    linear-gradient(
      145deg,
      #ffffff,
      color-mix(
        in srgb,
        var(--competition-primary) 7%,
        #ffffff
      )
    ) !important;

  box-shadow:
    0 0 0 9px
      color-mix(
        in srgb,
        var(--competition-primary) 3%,
        transparent
      ),
    0 8px 25px
      color-mix(
        in srgb,
        var(--competition-primary) 10%,
        transparent
      ) !important;
}


/* ----------------------------------------------------------
   REGISTRATION HEALTH
---------------------------------------------------------- */

#dashboard-page .modern-progress {
  background:
    color-mix(
      in srgb,
      var(--competition-primary) 8%,
      #eeeeee
    ) !important;
}


#dashboard-page .money-panel {
  background:
    linear-gradient(
      145deg,
      #ffffff,
      color-mix(
        in srgb,
        var(--competition-primary) 7%,
        #ffffff
      )
    ) !important;

  border-color:
    color-mix(
      in srgb,
      var(--competition-primary) 11%,
      #eae6ee
    ) !important;
}


/* ----------------------------------------------------------
   REGISTRATION CENTER
---------------------------------------------------------- */

.modern-tabs {
  background:
    color-mix(
      in srgb,
      var(--competition-primary) 5%,
      #f7f6f8
    ) !important;
}


.modern-tabs button.active {
  color:
    var(--competition-primary) !important;

  background:
    #ffffff !important;
}


.filter-bar,
.registration-summary > div,
.registrations-surface,
.large-empty.standalone {
  border-color:
    color-mix(
      in srgb,
      var(--competition-primary) 10%,
      #e9e6ed
    ) !important;
}


/* ----------------------------------------------------------
   GENERAL LINKS / ACCENTS
---------------------------------------------------------- */

a {
  accent-color:
    var(--competition-primary);
}


input[type="checkbox"],
input[type="radio"] {
  accent-color:
    var(--competition-primary);
}


/* ----------------------------------------------------------
   ACTIVE / FOCUS STATES
---------------------------------------------------------- */

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline-color:
    var(--competition-primary) !important;
}


/* ----------------------------------------------------------
   FOOTER CREATE BUTTON
---------------------------------------------------------- */

.bottom-bar .new-button,
.bottom-bar button {
  --local-primary:
    var(--competition-primary);
}


/* ----------------------------------------------------------
   MASTER PAGE COMPETITION COUNT SECTION
---------------------------------------------------------- */

.master-section {
  border-color:
    color-mix(
      in srgb,
      var(--competition-primary) 10%,
      #e8e5ec
    ) !important;
}


/* ----------------------------------------------------------
   CUSTOM SCROLLBAR
---------------------------------------------------------- */

::-webkit-scrollbar-thumb {
  background:
    color-mix(
      in srgb,
      var(--competition-primary) 22%,
      #aaa
    );
}