:root {
  --K: #080808;
  --W: #f2ede6;
  --P: #ff0090;
  --Y: #ffe500;
  --V: #7b6fe8;
  --G: #00ff94;
  --bg: var(--K);
  --text: var(--W);
  --pink: var(--P);
  --yellow: var(--Y);
  --violet: var(--V);
  --green: var(--G);
}

html {
  scroll-behavior: smooth;
  background: var(--K);
}

body,
body[data-page="registration"],
body[data-page="live"],
body[data-page="pass"] {
  background: var(--K);
  color: var(--W);
  font-family: "Poppins", sans-serif;
  line-height: 1.6;
}

.portal-shell,
.card,
.grid,
.grid > *,
.field {
  min-width: 0;
}

input,
textarea,
select {
  max-width: 100%;
}

/* Homepage cursor, shared by every participant and organiser view. */
#arc-cursor,
#arc-cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 10000;
  transform: translate(-50%, -50%);
}

#arc-cursor {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--V);
  mix-blend-mode: difference;
  transition: width .2s ease, height .2s ease, background .2s ease, opacity .16s ease;
}

#arc-cursor-ring {
  width: 40px;
  height: 40px;
  border: 1.5px solid rgba(123, 111, 232, .5);
  border-radius: 50%;
  transition: width .2s ease, height .2s ease, border-color .2s ease, opacity .16s ease;
}

#arc-cursor.is-visible,
#arc-cursor-ring.is-visible {
  opacity: 1;
}

#arc-cursor.is-active {
  width: 24px;
  height: 24px;
}

#arc-cursor-ring.is-active {
  width: 60px;
  height: 60px;
  border-color: rgba(123, 111, 232, .8);
}

@media (pointer: fine) and (min-width: 769px) {
  html.arc-custom-cursor,
  html.arc-custom-cursor body,
  html.arc-custom-cursor body * {
    cursor: none !important;
  }
}

/* One header rhythm across registration, Pass, Live, Admin and utility views. */
.topbar,
.live-topbar,
body[data-page="registration"] .registration-topbar,
body[data-page="pass"] .pass-topbar {
  position: sticky;
  top: 0;
  z-index: 200;
  min-height: 72px;
  padding: 1rem 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  background: rgba(8, 8, 8, .93);
  backdrop-filter: blur(16px);
}

.topbar {
  width: 100%;
  max-width: 100vw;
}

.brand,
.live-brand {
  gap: .6rem;
  color: var(--W);
}

.brand-mark,
body[data-page="registration"] .brand-mark,
.live-brand-mark {
  width: auto;
  height: auto;
  color: var(--V);
  font-family: "Anton", sans-serif;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .04em;
}

.brand-text,
.live-brand-copy {
  display: grid;
  gap: 0;
  color: rgba(242, 237, 230, .4);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .18em;
  line-height: 1.4;
  text-transform: uppercase;
}

.brand-title,
.brand-subtitle,
.live-brand-copy strong,
.live-brand-copy span {
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
}

.registration-nav,
.pass-nav,
.live-primary-nav {
  gap: 2.5rem;
}

.registration-nav a,
.pass-nav a {
  color: rgba(242, 237, 230, .45);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: color .2s ease;
}

.registration-nav a:hover,
.pass-nav a:hover {
  color: var(--V);
}

/* Homepage pill language for all primary and secondary actions. */
.btn,
.registration-nav-cta,
.pass-pill,
.live-pass-link,
.live-action,
.live-submit {
  border-radius: 100px;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}

.registration-nav-cta,
.pass-pill,
.live-pass-link {
  width: auto;
  min-height: 42px;
  padding: .55rem 1.6rem;
  gap: .75rem;
  border-color: var(--V);
  background: var(--V);
  color: #fff;
}

.btn:not(.secondary):not(.pink),
.live-submit,
.live-action.is-primary {
  background: var(--V);
}

.btn:hover,
.registration-nav-cta:hover,
.pass-pill:hover,
.live-pass-link:hover,
.live-action:hover,
.live-submit:hover:not(:disabled) {
  transform: translateY(-2px);
}

.btn:not(.secondary):not(.pink):hover,
.registration-nav-cta:hover,
.pass-pill:hover,
.live-pass-link:hover,
.live-submit:hover:not(:disabled) {
  background: #6457d0;
  box-shadow: 0 10px 36px rgba(123, 111, 232, .35);
}

.btn.secondary,
.live-action:not(.is-primary) {
  border-color: rgba(123, 111, 232, .55);
  background: transparent;
  color: var(--W);
}

.btn.secondary:hover,
.live-action:not(.is-primary):hover {
  border-color: var(--V);
  background: rgba(123, 111, 232, .1);
  box-shadow: none;
}

.btn.pink {
  background: var(--P);
}

.mode-chip,
.status-chip,
.live-access {
  border-radius: 100px;
}

.mode-chip::before,
.status-chip::before {
  border-radius: 50%;
}

@media (max-width: 980px) {
  .registration-nav,
  .pass-nav,
  .live-primary-nav {
    gap: 1.35rem;
  }
}

@media (max-width: 768px) {
  .topbar,
  .live-topbar,
  body[data-page="registration"] .registration-topbar,
  body[data-page="pass"] .pass-topbar {
    min-height: 64px;
    padding: .8rem 1.25rem;
  }

  .brand-mark,
  body[data-page="registration"] .brand-mark,
  .live-brand-mark {
    font-size: 1.7rem;
  }

  .brand-text,
  .live-brand-copy {
    font-size: .56rem;
  }

  .registration-title {
    width: 100%;
    max-width: 100%;
    font-size: clamp(42px, 12vw, 58px);
    overflow-wrap: anywhere;
  }

  body[data-page="admin"] .registration-title {
    font-size: clamp(34px, 9vw, 40px);
  }

  body[data-page="pass"] .pass-person,
  body[data-page="pass"] .pass-person strong {
    width: 100%;
    max-width: 100%;
    white-space: normal;
  }

  body[data-page="pass"] .pass-person strong {
    font-size: clamp(32px, 9vw, 36px);
    line-height: 1;
  }
}

@media (max-width: 640px) {
  body[data-page="registration"] .registration-nav-cta {
    display: none;
  }
}

@media (max-width: 520px) {
  .topbar,
  .live-topbar,
  body[data-page="registration"] .registration-topbar,
  body[data-page="pass"] .pass-topbar {
    padding: .75rem 1rem;
  }

  .registration-nav-cta,
  .pass-pill,
  .live-pass-link {
    padding: .5rem 1rem;
  }

  body[data-page="admin"] .top-actions,
  body[data-page="checkin"] .top-actions,
  body[data-page="results"] .top-actions,
  body[data-page="archive"] .top-actions {
    position: static;
    width: auto;
    align-items: center;
    flex-direction: row;
  }

  body[data-page="admin"] .top-actions .btn,
  body[data-page="checkin"] .top-actions .btn,
  body[data-page="results"] .top-actions .btn,
  body[data-page="archive"] .top-actions .btn {
    width: auto;
  }

  body[data-page="admin"] .top-actions {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  #arc-cursor,
  #arc-cursor-ring {
    transition: none;
  }
}