:root {
  --sidebar:#101014;
  --sidebar-2:#17171d;

  --canvas:#f4f5f7;
  --surface:#ffffff;
  --surface-soft:#f8f8fa;

  --ink:#17171c;
  --ink-soft:#4f5058;
  --muted:#898a92;

  --line:#e7e7eb;

  --violet:#7257ff;
  --violet-2:#9a63ff;
  --violet-soft:#f0edff;

  --blue:#4d7cff;

  --green:#19a56a;
  --green-soft:#eaf8f2;

  --amber:#c77a16;
  --amber-soft:#fff5e5;

  --red:#d84e53;

  --sidebar-width:292px;

  --radius-xl:24px;
  --radius-lg:18px;
  --radius-md:13px;
}

* {
  box-sizing:border-box;
}

html,
body {
  margin:0;
  min-height:100%;
}

body {
  background:var(--canvas);

  color:var(--ink);

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  -webkit-font-smoothing:antialiased;
}

button,
input,
select {
  font:inherit;
}

button {
  cursor:pointer;
}

.app {
  min-height:100vh;
}

.sidebar {
  position:fixed;

  top:0;
  bottom:0;
  left:0;

  width:var(--sidebar-width);

  display:flex;
  flex-direction:column;

  background:
    linear-gradient(
      180deg,
      #0d0d11 0%,
      #15151a 100%
    );

  color:white;

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

  z-index:40;
}

.sidebar-brand {
  height:84px;

  padding:0 22px;

  display:flex;
  align-items:center;

  gap:13px;

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

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

  display:grid;
  place-items:center;

  border-radius:14px;

  background:
    linear-gradient(
      145deg,
      #735bff,
      #a766ff
    );

  box-shadow:
    0 10px 28px
    rgba(115,91,255,.28);

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

.brand-copy {
  display:flex;
  flex-direction:column;
}

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

.brand-copy strong span {
  color:#a981ff;
}

.brand-copy small {
  margin-top:2px;

  color:#777782;

  font-size:10px;
}

.competition-switcher {
  margin:18px 15px 8px;

  min-height:72px;

  padding:13px;

  display:flex;
  align-items:center;

  gap:11px;

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

  border-radius:16px;

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

.competition-symbol {
  width:39px;
  height:39px;

  flex:0 0 auto;

  display:grid;
  place-items:center;

  border-radius:12px;

  background:
    linear-gradient(
      145deg,
      #ba8f41,
      #8b642c
    );

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

.competition-switcher > div:nth-child(2) {
  min-width:0;

  display:flex;
  flex-direction:column;
}

.competition-switcher span {
  color:#707079;

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

  letter-spacing:1.2px;
}

.competition-switcher strong {
  margin-top:4px;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;

  font-size:11px;
}

.competition-switcher small {
  margin-top:3px;

  color:#898892;

  font-size:9px;
}

.competition-switcher button {
  margin-left:auto;

  border:0;

  background:transparent;

  color:#777680;
}

.nav-scroll {
  flex:1;

  padding:5px 13px 24px;

  overflow-y:auto;

  scrollbar-width:thin;
  scrollbar-color:#34343c transparent;
}

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

.nav-title {
  padding:0 12px 9px;

  color:#666671;

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

  letter-spacing:1.5px;

  text-transform:uppercase;
}

.nav-item {
  width:100%;
  height:46px;

  margin:2px 0;

  padding:0 13px;

  display:flex;
  align-items:center;

  gap:12px;

  border:0;
  border-radius:12px;

  background:transparent;

  color:#b9b9c1;

  text-align:left;

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

  transition:.17s ease;
}

.nav-item:hover {
  background:#202026;

  color:white;
}

.nav-item.active {
  background:
    linear-gradient(
      90deg,
      rgba(114,87,255,.22),
      rgba(114,87,255,.08)
    );

  color:white;

  box-shadow:
    inset 3px 0 #8b72ff;
}

.nav-icon {
  width:22px;

  color:#71717c;

  text-align:center;

  font-size:14px;
}

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

.account {
  min-height:76px;

  padding:14px 18px;

  display:flex;
  align-items:center;

  gap:11px;

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

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

  display:grid;
  place-items:center;

  border-radius:50%;

  background:#24242b;

  color:#cfcfd5;

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

.account > div:nth-child(2) {
  display:flex;
  flex-direction:column;
}

.account strong {
  font-size:10px;
}

.account span {
  margin-top:3px;

  color:#787781;

  font-size:9px;
}

.account button {
  margin-left:auto;

  border:0;

  background:transparent;

  color:#777680;
}

.main {
  min-height:100vh;

  margin-left:
    var(--sidebar-width);
}

.topbar {
  height:76px;

  padding:0 34px;

  display:flex;
  align-items:center;
  justify-content:space-between;

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

  border-bottom:
    1px solid var(--line);

  backdrop-filter:
    blur(18px);

  position:sticky;
  top:0;

  z-index:20;
}

.breadcrumb {
  display:flex;
  align-items:center;

  gap:9px;

  font-size:10px;
}

.breadcrumb span,
.breadcrumb b {
  color:#aaaab1;
}

.breadcrumb strong {
  font-size:11px;
}

.top-actions {
  display:flex;
  align-items:center;

  gap:9px;
}

.search-box {
  width:290px;
  height:40px;

  padding:0 12px;

  display:flex;
  align-items:center;

  gap:8px;

  border:
    1px solid var(--line);

  border-radius:12px;

  background:#fafafa;
}

.search-box span {
  color:#a4a4ab;
}

.search-box input {
  flex:1;

  border:0;
  outline:0;

  background:transparent;

  font-size:10px;
}

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

  border:
    1px solid var(--line);

  border-radius:12px;

  background:white;

  color:#77777f;
}

.new-button,
.outline-button,
.hero-primary,
.hero-secondary,
.small-primary {
  border-radius:11px;

  font-weight:700;
}

.new-button {
  height:40px;

  padding:0 15px;

  border:0;

  background:#17171c;

  color:white;

  font-size:10px;
}

.new-button span {
  margin-right:5px;

  color:#a98cff;
}

.page {
  padding:38px 39px 60px;
}

.hidden {
  display:none !important;
}

.welcome,
.module-header {
  margin-bottom:26px;

  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:25px;
}

.mini-label {
  color:var(--violet);

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

  letter-spacing:1.7px;
}

.welcome h1,
.module-header h1 {
  margin:8px 0 7px;

  font-size:
    clamp(30px,3vw,40px);

  line-height:1;

  letter-spacing:-1.7px;
}

.welcome p,
.module-header p {
  margin:0;

  color:var(--muted);

  font-size:11px;
}

.outline-button {
  min-height:40px;

  padding:0 14px;

  border:
    1px solid var(--line);

  background:white;

  color:#4b4b53;

  font-size:10px;
}

.outline-button span {
  margin-left:8px;
}

.hero-panel {
  min-height:250px;

  margin-bottom:18px;

  padding:32px 34px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  overflow:hidden;

  position:relative;

  border-radius:var(--radius-xl);

  background:
    radial-gradient(
      circle at 88% 15%,
      rgba(131,104,255,.35),
      transparent 32%
    ),
    radial-gradient(
      circle at 70% 120%,
      rgba(75,126,255,.19),
      transparent 40%
    ),
    #17171d;

  color:white;
}

.hero-panel::after {
  content:"";

  position:absolute;

  width:310px;
  height:310px;

  right:-100px;
  bottom:-170px;

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

  border-radius:50%;
}

.hero-copy {
  position:relative;
  z-index:2;

  max-width:540px;
}

.hero-label {
  color:#a98cff;

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

  letter-spacing:1.8px;
}

.hero-copy h2 {
  margin:10px 0 9px;

  font-size:29px;

  letter-spacing:-1.2px;
}

.hero-copy p {
  margin:0;

  max-width:430px;

  color:#9d9ca7;

  font-size:11px;
  line-height:1.6;
}

.hero-actions {
  margin-top:25px;

  display:flex;
  gap:9px;
}

.hero-primary,
.small-primary {
  border:0;

  background:
    linear-gradient(
      135deg,
      #795cff,
      #9d66ff
    );

  color:white;
}

.hero-primary {
  height:40px;
  padding:0 15px;

  font-size:9px;
}

.hero-secondary {
  height:40px;
  padding:0 15px;

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

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

  color:#d4d4da;

  font-size:9px;
}

.hero-status {
  position:relative;
  z-index:2;

  display:flex;
  align-items:center;

  gap:28px;

  margin-right:25px;
}

.status-ring {
  width:130px;
  height:130px;

  padding:8px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:
    conic-gradient(
      #8269ff 0deg,
      #8269ff 2deg,
      rgba(255,255,255,.08) 2deg
    );
}

.status-ring > div {
  width:112px;
  height:112px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:#17171d;
}

.status-ring strong {
  font-size:28px;
  letter-spacing:-1px;
}

.status-ring span {
  color:#85848e;

  font-size:8px;
}

.status-copy {
  min-width:120px;

  display:flex;
  flex-direction:column;

  gap:17px;
}

.status-copy div {
  display:flex;
  flex-direction:column;
}

.status-copy span {
  color:#767680;

  font-size:8px;
}

.status-copy strong {
  margin-top:4px;

  font-size:11px;
}

.metrics {
  margin-bottom:18px;

  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:13px;
}

.metric-card {
  min-height:116px;

  padding:20px;

  display:flex;
  align-items:center;

  gap:15px;

  border-radius:var(--radius-lg);

  background:white;

  box-shadow:
    0 10px 35px
    rgba(20,20,30,.045);
}

.metric-icon {
  width:43px;
  height:43px;

  flex:0 0 auto;

  display:grid;
  place-items:center;

  border-radius:14px;

  background:#f1efff;

  color:#7159e9;

  font-size:14px;
}

.metric-card > div:last-child {
  display:flex;
  flex-direction:column;
}

.metric-card span {
  color:#777780;

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

  text-transform:uppercase;

  letter-spacing:.8px;
}

.metric-card strong {
  margin-top:4px;

  font-size:23px;
  letter-spacing:-.8px;
}

.metric-card small {
  margin-top:3px;

  color:#aaaab1;

  font-size:8px;
}

.content-grid {
  display:grid;

  grid-template-columns:
    minmax(0,1.55fr)
    minmax(310px,.7fr);

  gap:15px;
}

.surface {
  border-radius:var(--radius-lg);

  background:white;

  box-shadow:
    0 10px 35px
    rgba(20,20,30,.04);

  overflow:hidden;
}

.surface-head {
  min-height:75px;

  padding:18px 21px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  border-bottom:
    1px solid var(--line);
}

.surface-head span {
  color:#9b9ba3;

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

  letter-spacing:1.3px;
}

.surface-head h3 {
  margin:5px 0 0;

  font-size:15px;
  letter-spacing:-.4px;
}

.surface-head button {
  border:0;

  background:transparent;

  color:#7562d6;

  font-size:9px;
}

.event-empty,
.large-empty {
  min-height:270px;

  padding:38px;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  text-align:center;
}

.empty-icon {
  width:45px;
  height:45px;

  display:grid;
  place-items:center;

  border-radius:14px;

  background:#f2f1f6;

  color:#8b8a93;
}

.empty-icon.large {
  width:55px;
  height:55px;

  border-radius:17px;

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

.event-empty h4,
.large-empty h4 {
  margin:15px 0 6px;

  font-size:14px;
}

.event-empty p,
.large-empty p {
  margin:0;

  color:#96969e;

  font-size:9px;
}

.small-primary {
  min-height:36px;

  margin-top:18px;

  padding:0 13px;

  font-size:8px;
}

.readiness-surface {
  padding-bottom:16px;
}

.readiness-list {
  padding:8px 20px;
}

.readiness-row {
  padding:15px 0;

  border-bottom:
    1px solid var(--line);
}

.readiness-row > div:first-child {
  display:flex;
  justify-content:space-between;
}

.readiness-row span {
  color:#66666f;

  font-size:9px;
}

.readiness-row strong {
  font-size:9px;
}

.modern-progress {
  height:5px;

  margin-top:10px;

  border-radius:999px;

  background:#eeeeF2;

  overflow:hidden;
}

.modern-progress i {
  display:block;

  width:0;
  height:100%;

  border-radius:999px;

  background:
    linear-gradient(
      90deg,
      #715cff,
      #9b69ff
    );
}

.money-panel {
  margin:13px 20px;

  padding:15px;

  display:flex;
  justify-content:space-between;
  align-items:center;

  border-radius:14px;

  background:#f7f7f9;
}

.money-panel > div {
  display:flex;
  flex-direction:column;
}

.money-panel span {
  color:#83838b;

  font-size:8px;
}

.money-panel strong {
  margin-top:4px;

  font-size:16px;
}

.money-arrow {
  font-size:17px !important;
}

.module-actions {
  display:flex;
  gap:8px;
}

.modern-tabs {
  display:flex;

  gap:4px;

  padding:5px;

  overflow-x:auto;

  border-radius:14px;

  background:#eaeaee;

  width:max-content;

  max-width:100%;

  margin-bottom:16px;
}

.modern-tabs button {
  height:35px;

  padding:0 14px;

  border:0;
  border-radius:10px;

  background:transparent;

  color:#777780;

  font-size:9px;
}

.modern-tabs button.active {
  background:white;

  color:#29282f;

  font-weight:750;

  box-shadow:
    0 4px 12px
    rgba(20,20,30,.07);
}

.filter-bar {
  margin-bottom:14px;

  padding:16px;

  display:flex;

  gap:12px;

  border-radius:var(--radius-lg);

  background:white;

  box-shadow:
    0 10px 35px
    rgba(20,20,30,.035);
}

.filter-control {
  width:240px;
}

.filter-search {
  flex:1;
}

.filter-control,
.filter-search {
  display:flex;
  flex-direction:column;

  gap:6px;
}

.filter-control label,
.filter-search label {
  color:#92929a;

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

  letter-spacing:1px;
}

.filter-control select {
  width:100%;
}

.filter-search > div {
  height:42px;

  padding:0 12px;

  display:flex;
  align-items:center;

  gap:8px;

  border:
    1px solid var(--line);

  border-radius:11px;
}

.filter-search > div span {
  color:#aaaab1;
}

.filter-search input {
  flex:1;

  border:0;
  outline:0;

  background:transparent;

  font-size:10px;
}

select {
  height:42px;

  padding:0 11px;

  border:
    1px solid var(--line);

  border-radius:11px;

  background:white;

  outline:0;

  font-size:10px;
}

.registration-summary {
  margin-bottom:15px;

  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:12px;
}

.registration-summary > div {
  min-height:105px;

  padding:19px;

  display:flex;
  flex-direction:column;

  border-radius:var(--radius-lg);

  background:white;

  box-shadow:
    0 10px 35px
    rgba(20,20,30,.035);
}

.registration-summary span {
  color:#888891;

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

  text-transform:uppercase;
}

.registration-summary strong {
  margin-top:10px;

  font-size:23px;
  letter-spacing:-.8px;
}

.count-badge {
  padding:5px 9px;

  border-radius:999px;

  background:#f2f1f6;

  color:#777780;

  font-size:8px;
}

.registrations-surface {
  min-height:360px;
}

.large-empty.standalone {
  min-height:430px;

  border-radius:var(--radius-xl);

  background:white;
}

.table-wrap {
  overflow:auto;
}

table {
  width:100%;

  border-collapse:collapse;

  white-space:nowrap;
}

th {
  padding:12px 14px;

  background:#fafafa;

  border-bottom:
    1px solid var(--line);

  color:#84848c;

  text-align:left;

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

td {
  padding:13px 14px;

  border-bottom:
    1px solid var(--line);

  font-size:9px;
}

.drawer-overlay {
  position:fixed;

  inset:0;

  z-index:80;

  background:
    rgba(10,10,14,.30);

  backdrop-filter:blur(2px);
}

.drawer {
  position:fixed;

  top:0;
  right:0;
  bottom:0;

  width:min(720px,92vw);

  z-index:90;

  overflow-y:auto;

  background:#f7f7f9;

  box-shadow:
    -30px 0 70px
    rgba(15,15,20,.18);
}

.drawer-header {
  padding:25px;

  display:flex;
  justify-content:space-between;

  background:white;

  border-bottom:
    1px solid var(--line);
}

.drawer-header span {
  color:var(--violet);

  font-size:7px;
  font-weight:850;
}

.drawer-header h2 {
  margin:6px 0 4px;

  font-size:22px;
}

.drawer-header p {
  margin:0;

  color:var(--muted);

  font-size:9px;
}

.drawer-header button {
  width:38px;
  height:38px;

  border:
    1px solid var(--line);

  border-radius:11px;

  background:white;

  font-size:19px;
}

.routine-groups {
  padding:20px;
}

@media(max-width:1100px) {

  .metrics,
  .registration-summary {
    grid-template-columns:
      repeat(2,1fr);
  }

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

}

@media(max-width:800px) {

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

  .sidebar {
    display:none;
  }

  .topbar {
    padding:0 18px;
  }

  .search-box {
    display:none;
  }

  .page {
    padding:25px 18px;
  }

  .hero-panel {
    flex-direction:column;
    align-items:flex-start;
  }

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

}

@media(max-width:600px) {

  .metrics,
  .registration-summary {
    grid-template-columns:1fr;
  }

  .filter-bar {
    flex-direction:column;
  }

  .filter-control {
    width:100%;
  }

}

/* =========================================================
   DANCEHIRES MASTER ADMIN
========================================================= */

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

  padding:
    40px 42px 60px;

  background:
    linear-gradient(
      180deg,
      #f7f7fb,
      #f3f4f7
    );
}

.master-top {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;

  gap:24px;

  margin-bottom:30px;
}

.master-top h1 {
  margin:
    8px 0 7px;

  font-size:40px;

  line-height:1;

  letter-spacing:-1.8px;
}

.master-top p {
  margin:0;

  color:#85858e;

  font-size:11px;
}

.master-metrics {
  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:14px;

  margin-bottom:18px;
}

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

  padding:22px;

  display:flex;
  flex-direction:column;

  border:
    1px solid #e8e8ee;

  border-radius:20px;

  background:white;

  box-shadow:
    0 10px 35px
    rgba(20,20,35,.04);
}

.master-metric span {
  color:#93939c;

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

  letter-spacing:1px;
}

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

  font-size:29px;

  letter-spacing:-1.2px;
}

.master-metric small {
  margin-top:auto;

  color:#aaaab2;

  font-size:8px;
}

.master-section {
  overflow:hidden;

  border-radius:22px;

  background:white;

  box-shadow:
    0 12px 40px
    rgba(20,20,35,.045);
}

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

  padding:20px 24px;

  display:flex;
  align-items:center;

  border-bottom:
    1px solid #ededf1;
}

.master-section-head span {
  color:#775cff;

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

  letter-spacing:1.5px;
}

.master-section-head h2 {
  margin:
    5px 0 0;

  font-size:17px;

  letter-spacing:-.5px;
}

.competition-grid {
  padding:20px;

  display:grid;

  grid-template-columns:
    repeat(
      auto-fill,
      minmax(320px,1fr)
    );

  gap:15px;
}

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

  padding:22px;

  position:relative;

  overflow:hidden;

  border:
    1px solid #e8e8ee;

  border-radius:18px;

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

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

.competition-network-card:hover {
  transform:
    translateY(-2px);

  border-color:
    #d8d2ff;

  box-shadow:
    0 18px 45px
    rgba(65,50,130,.10);
}

.competition-card-top {
  display:flex;
  align-items:center;

  gap:13px;
}

.competition-card-logo {
  width:48px;
  height:48px;

  display:grid;
  place-items:center;

  border-radius:15px;

  background:
    linear-gradient(
      145deg,
      #17171c,
      #2b2638
    );

  color:white;

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

.competition-card-title {
  min-width:0;

  display:flex;
  flex-direction:column;
}

.competition-card-title strong {
  font-size:14px;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.competition-card-title span {
  margin-top:4px;

  color:#9999a2;

  font-size:9px;
}

.competition-card-status {
  margin-left:auto;

  padding:
    5px 8px;

  border-radius:999px;

  background:#eaf8f1;

  color:#15965f;

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

.competition-card-stats {
  margin-top:24px;

  padding-top:18px;

  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  border-top:
    1px solid #ededf1;
}

.competition-card-stat {
  display:flex;
  flex-direction:column;
}

.competition-card-stat span {
  color:#9a9aa3;

  font-size:7px;
  font-weight:800;

  letter-spacing:.7px;
}

.competition-card-stat strong {
  margin-top:6px;

  font-size:16px;
}

.competition-card-footer {
  margin-top:24px;

  display:flex;
  align-items:center;
  justify-content:space-between;
}

.competition-card-footer small {
  color:#a0a0a8;

  font-size:8px;
}

.open-competition {
  height:36px;

  padding:0 13px;

  border:0;
  border-radius:10px;

  background:
    linear-gradient(
      135deg,
      #6f55f5,
      #955cf7
    );

  color:white;

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

.master-empty {
  min-height:260px;

  grid-column:1/-1;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  text-align:center;
}

.master-empty strong {
  margin-top:12px;

  font-size:14px;
}

.master-empty span {
  margin-top:6px;

  color:#9999a2;

  font-size:9px;
}

.modal-overlay {
  position:fixed;

  inset:0;

  z-index:200;

  background:
    rgba(10,10,15,.35);

  backdrop-filter:
    blur(4px);
}

.competition-modal {
  position:fixed;

  top:50%;
  left:50%;

  width:min(
    620px,
    calc(100vw - 40px)
  );

  z-index:210;

  transform:
    translate(-50%,-50%);

  overflow:hidden;

  border-radius:22px;

  background:white;

  box-shadow:
    0 30px 100px
    rgba(0,0,0,.22);
}

.modal-head {
  padding:25px;

  display:flex;
  justify-content:space-between;

  border-bottom:
    1px solid #ececf0;
}

.modal-head span {
  color:#7658ff;

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

  letter-spacing:1.5px;
}

.modal-head h2 {
  margin:
    6px 0 5px;

  font-size:23px;
}

.modal-head p {
  margin:0;

  color:#909098;

  font-size:9px;
}

.modal-head button {
  width:38px;
  height:38px;

  border:
    1px solid #e7e7eb;

  border-radius:11px;

  background:white;

  font-size:19px;
}

.modal-body {
  padding:25px;
}

.form-grid {
  display:grid;

  grid-template-columns:
    repeat(2,1fr);

  gap:14px;
}

.form-field {
  display:flex;
  flex-direction:column;

  gap:6px;
}

.form-field.full {
  grid-column:1/-1;
}

.form-field label {
  color:#74747d;

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

.form-field input {
  width:100%;
  height:42px;

  padding:0 11px;

  border:
    1px solid #e5e5ea;

  border-radius:11px;

  outline:0;
}

.form-field input:focus {
  border-color:#8c73f7;

  box-shadow:
    0 0 0 3px
    rgba(115,87,246,.08);
}

.form-error {
  margin-top:14px;

  padding:10px 12px;

  border-radius:10px;

  background:#fff0f1;

  color:#c74650;

  font-size:9px;
}

.modal-footer {
  padding:17px 25px;

  display:flex;
  justify-content:flex-end;

  gap:8px;

  border-top:
    1px solid #ececf0;

  background:#fafafa;
}

.master-link {
  cursor:pointer;
}

@media(max-width:1100px) {

  .master-metrics {
    grid-template-columns:
      repeat(2,1fr);
  }

}

@media(max-width:650px) {

  .master-page {
    padding:
      25px 18px;
  }

  .master-top {
    align-items:flex-start;
    flex-direction:column;
  }

  .master-metrics {
    grid-template-columns:1fr;
  }

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

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

  .form-field.full {
    grid-column:auto;
  }

}