:root {
  --bg: #f4f6f9;
  --card: #ffffff;
  --line: #d6dde6;
  --text: #1f2a37;
  --primary: #0c6cf2;
  --app-top-offset: env(safe-area-inset-top);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Roboto", sans-serif;
  background-color: var(--bg);
  color: var(--text);
  padding-top: var(--app-top-offset);
}

body.appShellVisible main {
  padding-bottom: calc(248px + env(safe-area-inset-bottom));
}

body.appShellVisible #publicSection,
body.appShellVisible #eventDetailSection,
body.appShellVisible #myProfileSection,
body.appShellVisible #organizerPublicSection,
body.appShellVisible #organizerSection,
body.appShellVisible #adminSection {
  padding-top: 14px;
  padding-bottom: calc(168px + env(safe-area-inset-bottom));
}

body.appShellVisible #organizerSection {
  margin-bottom: calc(36px + env(safe-area-inset-bottom));
}

body.appShellVisible #eventDetailSection,
body.appShellVisible #organizerPublicSection {
  margin-top: 8px;
  margin-bottom: calc(28px + env(safe-area-inset-bottom));
}

body.appShellVisible #organizerPublicSection .eventDetailCard {
  margin-top: calc(20px + env(safe-area-inset-top));
}

body.appShellVisible #eventDetailSection::after,
body.appShellVisible #organizerPublicSection::after {
  content: "";
  display: block;
  height: calc(84px + env(safe-area-inset-bottom));
}

body.appShellVisible #organizerSection .grid2,
body.appShellVisible #organizerSection .organizerCalendarBody,
body.appShellVisible #organizerSection #organizerEventsBody,
body.appShellVisible #organizerSection #organizerFormBody {
  padding-bottom: calc(44px + env(safe-area-inset-bottom));
}

body:not(.homeMode) {
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  background-color: #1f1f24;
  background-image:
    repeating-linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.12) 0px,
      rgba(255, 255, 255, 0.12) 2px,
      transparent 2px,
      transparent 14px
    ),
    radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.07), transparent 35%),
    radial-gradient(circle at 80% 90%, rgba(0, 0, 0, 0.35), transparent 40%);
  background-attachment: fixed;
}

#appHeader {
  position: relative;
  padding: 18px 16px 54px;
  min-height: 210px;
  background-image: linear-gradient(rgba(6, 10, 20, 0.45), rgba(6, 10, 20, 0.45)), url('/images/fons%20capcelera%201.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
}

.brandHeaderWrap {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.brandHeaderLogo {
  display: block;
  width: clamp(360px, 44vw, 560px);
  height: auto;
  max-width: 100%;
}

#appHeader h1 {
  margin: 0 auto;
  width: min(75vw, 1200px);
  text-align: center;
  font-size: clamp(34px, 7.6vw, 112px);
  line-height: 0.95;
  letter-spacing: 1.5px;
}

.brandLine {
  display: inline;
}

#appHeader > p {
  margin: 10px auto 0;
  width: min(75vw, 1200px);
  text-align: center;
}

#sessionInfo {
  position: absolute;
  top: auto;
  bottom: 10px;
  right: 12px;
  left: auto;
  z-index: 20;
}

.headerSession {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 6px;
}

.headerTop {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 8px;
}

.headerActions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.adminImpersonationBanner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  color: #fff;
  text-align: right;
}

.adminImpersonationBtn {
  border: 1px solid rgba(255, 255, 255, 0.65);
  background: #111;
  color: #fff;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
}

.mapGroupMarkerIcon {
  background: transparent;
  border: 0;
}

.mapGroupMarker {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  overflow: hidden;
  background: #111;
  border: 2px solid #fff;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mapGroupMarkerImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mapGroupMarkerFallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.08em;
  background: linear-gradient(135deg, #ff6a00, #ff2d55);
}

.headerUser {
  font-size: 13px;
  color: #fff;
}

.headerAvatar {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  object-fit: cover;
  border: 2px solid #fff;
  margin-bottom: 0;
}

.headerAvatarBtn {
  border: 0;
  background: transparent;
  padding: 0;
  width: auto;
  min-width: 0;
  cursor: pointer;
}

#logoutBtn {
  width: 100px;
  min-width: 100px;
  padding: 6px 10px;
  font-size: 13px;
  background: #000;
  border: 1px solid #fff;
  color: #fff;
}

#profileBtn {
  width: 100px;
  min-width: 100px;
  padding: 6px 10px;
  font-size: 13px;
  background: #000;
  border: 1px solid #fff;
  color: #fff;
}

.notifyBtn {
  width: auto;
  min-width: 88px;
  padding: 6px 10px;
  font-size: 13px;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #000;
  border: 1px solid #fff;
  color: #fff;
}

.notifyBadge {
  display: inline-block;
  min-width: 20px;
  padding: 1px 6px;
  margin-left: 6px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-weight: 700;
  text-align: center;
}

.notifyBell {
  display: inline-block;
  color: #ef4444;
  transform-origin: 50% 0%;
}

.notifyBtn.hasUnread .notifyBell {
  animation: notifyRing 0.9s ease-in-out infinite;
}

.notifyBtn.hasUnread {
  animation: notifyPulse 1.2s ease-in-out infinite;
}

@keyframes notifyRing {
  0% { transform: rotate(0deg); }
  15% { transform: rotate(16deg); }
  30% { transform: rotate(-14deg); }
  45% { transform: rotate(10deg); }
  60% { transform: rotate(-8deg); }
  75% { transform: rotate(6deg); }
  100% { transform: rotate(0deg); }
}

@keyframes notifyPulse {
  0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); }
  70% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

.notifyPanel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: min(360px, 92vw);
  background: rgba(10, 12, 18, 0.96);
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 10px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4);
  padding: 10px;
}

.notifyPanelHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.notifyPanelHead button {
  width: auto;
  min-width: 92px;
  font-size: 12px;
  padding: 6px 8px;
}

.notifyList {
  display: grid;
  gap: 8px;
  max-height: min(60vh, 520px);
  overflow: auto;
  padding-right: 2px;
}

.notifyItem {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  padding: 8px;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.notifyItem.unread {
  background: rgba(255, 255, 255, 0.08);
}

.notifyItem.read {
  background: rgba(255, 255, 255, 0.03);
  opacity: 0.86;
}

.notifyItem.upcoming {
  border-color: rgba(34, 197, 94, 0.62);
}

.notifyItem.past {
  border-color: rgba(239, 68, 68, 0.7);
}

.notifyItemMain {
  min-width: 0;
  flex: 1 1 auto;
}

.notifyText {
  color: #fff;
  font-size: 13px;
}

.notifyDeleteBtn {
  width: 32px;
  min-width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(0, 0, 0, 0.24);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.notificationsModalPanel {
  width: min(560px, calc(100vw - 24px));
  background: rgba(10, 12, 18, 0.96);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  margin: max(36px, 8vh) auto;
  max-height: calc(100vh - 72px);
}

.notificationsModalHeader {
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.notificationsModalHeader h3 {
  color: #fff;
}

.notificationsModalActions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.notificationsModalActions button {
  width: auto;
  min-width: 96px;
  background: #000;
  color: #fff;
  border: 1px solid #fff;
}

.notificationsModalBody {
  background: transparent;
  color: #fff;
  padding-top: 18px;
}

#notificationsModal .notifyList,
#notificationsModal .notifyItem,
#notificationsModal .notifyItemMain,
#notificationsModal .notifyText,
#notificationsModal .notifyMeta,
#notificationsModal .small {
  color: #fff !important;
}

#notificationsModal .notifyItem {
  background: rgba(0, 0, 0, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 10px;
  padding: 10px;
}

#notificationsModal .notifyItem.read {
  background: rgba(18, 18, 18, 0.82);
  opacity: 1;
}

#notificationsModal .notifyItem.notifyItemCancelled {
  border-color: rgba(255, 59, 48, 0.95);
  box-shadow: 0 0 0 1px rgba(255, 59, 48, 0.2), 0 10px 24px rgba(255, 59, 48, 0.12);
}

#notificationsModal .notifyItemMain {
  padding-right: 10px;
}

#notificationsModal .notifyCancelledStamp {
  margin: 0 0 8px;
}

#notificationsModal .notifyCancelledVerb {
  color: #ff3b30;
  font-weight: 900;
}

.notifyItemActions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
  min-width: 96px;
}

.notifyReadBtn,
.notifyDeleteBtn {
  width: 100%;
  min-width: 0;
  height: auto;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.92);
  background: #000;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.notificationsModalBody .notifyEmpty {
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
}

.supportModalPanel {
  width: min(760px, calc(100vw - 24px));
}

.supportModalHeader {
  background: #111;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}

.supportModalHeader h3 {
  color: #fff;
}

.supportModalHeader button {
  background: #000;
  color: #fff;
  border: 1px solid #fff;
}

.supportModalBody {
  background: #fff;
  color: #111;
}

.supportModalBody,
.supportModalBody p,
.supportModalBody .small,
.supportModalBody h4,
.supportModalBody strong,
.supportModalBody label,
.supportModalBody div,
.supportModalBody span,
.supportModalBody .authBlock,
.supportModalBody .authBlock p,
.supportModalBody .authBlock label,
.supportModalBody .authBlock .small {
  color: #111 !important;
}

.supportModalBody .authBlock input,
.supportModalBody .authBlock textarea,
.supportModalBody .authBlock select {
  color: #111;
  background: #fff;
  border: 1px solid #111;
}

.supportBlock + .supportBlock {
  margin-top: 18px;
}

.supportBlock h4 {
  margin: 0 0 8px;
  font-size: 18px;
}

.supportLegalList {
  margin: 8px 0 12px 18px;
  padding: 0;
}

.supportLegalList li + li {
  margin-top: 4px;
}

.contactConsentRow {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.35;
}

.contactConsentRow input {
  width: 16px;
  min-width: 16px;
  margin-top: 2px;
}

.registerRatesHelpBox {
  margin: 10px 0 4px;
  padding: 10px 12px;
  border: 1px solid rgba(17, 17, 17, 0.14);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
}

.professionalRatesHint {
  margin: 0 0 10px;
}

.secondaryInlineBtn {
  width: auto;
  min-width: 0;
  padding: 8px 12px;
  border-radius: 8px;
  background: #000;
  color: #fff;
  border: 1px solid #fff;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.notifyMeta {
  margin-top: 4px;
}

.notifyEmpty {
  margin: 0;
}

h1, h2, h3, h4 {
  margin-top: 0;
  text-transform: uppercase;
}

main {
  max-width: 1320px;
  margin: 12px auto 18px;
  padding: 0 18px;
}

html {
  scroll-padding-top: calc(var(--app-top-offset) + 10px);
}

main {
  padding-bottom: 128px;
}

body.homeMode {
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  background-image: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), url('/images/imatge_capcelera_home1.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

body.homeMode #appHeader,
body.homeMode main > section:not(#homeSection) {
  display: none !important;
}

body.homeMode main {
  max-width: none;
  margin: 0;
  padding: 0;
}

#homeSection {
  display: none;
}

body.homeMode #homeSection {
  display: flex;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  width: 100%;
  align-items: center;
  justify-content: center;
  position: relative;
}

.homeOverlay {
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  padding: 32px 16px 180px;
  position: relative;
}

.homeBrandLockup {
  display: grid;
  justify-items: center;
  gap: 8px;
  width: min(100%, 560px);
  margin: 0 auto;
}

.homeBrandLogo {
  display: block;
  width: min(100%, 320px);
  height: auto;
}

.homeBrandTagline {
  margin: 0;
  text-align: center;
  font-size: clamp(14px, 1.8vw, 18px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.84);
}

.homeTitle {
  color: #fff;
  font-size: clamp(22px, 4vw, 44px);
  letter-spacing: 2px;
  text-align: center;
  position: absolute;
  top: 40px;
  margin: 0;
}

.homeCenterZone {
  position: relative;
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0 14px;
}

.homeButtons {
  width: min(100%, 500px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.homePanel {
  width: min(560px, 92vw);
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  box-shadow: none;
}

.homeHeroCard,
.homeProfessionalCard {
  width: 100%;
  border-radius: 18px;
  backdrop-filter: blur(14px);
}

.homeHeroCard {
  display: grid;
  gap: 14px;
  padding: 20px;
  background: rgba(22, 27, 38, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
}

.homeHeroCopy {
  display: grid;
  gap: 10px;
  justify-items: center;
  text-align: center;
}

.homeHeroEyebrow {
  margin: 0;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.homeHeroTitle {
  margin: 0;
  color: #fff;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.02;
  text-transform: uppercase;
  text-align: center;
}

.homeHeroText {
  margin: 0;
  max-width: 38ch;
  color: rgba(255, 255, 255, 0.84);
  font-size: 17px;
  line-height: 1.5;
  text-align: center;
}

.homePrimaryDiscoverBtn {
  width: 100%;
  min-height: 58px;
  border-radius: 12px;
  border: 1px solid #ffeb00;
  background: #ffeb00 !important;
  background-image: none !important;
  color: #111;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: none;
}

#homeGoogleLoginWrap {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#homeGoogleLoginWrap.hidden {
  display: none !important;
}

#homeGoogleLoginButton {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

#homeGoogleLoginButton > div {
  display: flex;
  justify-content: center;
  width: auto;
  margin: 0 auto;
}

#homeGoogleLoginButton iframe {
  margin: 0 auto !important;
  display: block !important;
}

.homeRegisterPrompt {
  margin: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
}

.homeRegisterInlineBtn {
  width: 100%;
  min-height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: #111111;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.homeProfessionalRegisterPrompt {
  margin-top: 4px;
}

.homeProfessionalRegisterBtn {
  max-width: 100%;
}

.homeProfessionalCard {
  display: grid;
  justify-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: rgba(22, 27, 38, 0.52);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.homeProfessionalCopy {
  min-width: 0;
  width: 100%;
  text-align: center;
}

.homeProfessionalTitle {
  margin: 0 0 4px;
  color: #fff;
  font-size: 16px;
  line-height: 1.25;
  text-transform: uppercase;
  max-width: 100%;
  white-space: normal;
  text-wrap: balance;
  text-align: center;
}

.homeProfessionalText {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  line-height: 1.4;
  max-width: none;
  white-space: nowrap;
  text-align: center;
}

.homeProfessionalBtn {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 11px 16px;
  border-radius: 12px;
  border: 1px solid #ffeb00;
  background: #ffeb00 !important;
  background-image: none !important;
  color: #111;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: normal;
  text-wrap: balance;
  box-shadow: none;
}

.homeUnifiedCard {
  width: 100%;
  display: grid;
  gap: 14px;
  padding: 22px 20px;
  background: rgba(22, 27, 38, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 18px;
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18);
}

.homeHeroSubtext {
  margin: -2px 0 0;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
}

.homeInstallHint {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
}

.homeInstallHelpBtn {
  width: 100%;
  margin-top: 2px;
}

.homeLoginForm {
  display: grid;
  gap: 8px;
  width: 100%;
}

.homeLoginForm label {
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.homeLoginForm input {
  width: 100%;
  min-width: 0;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  padding: 13px 14px;
}

.homeLoginForm input::placeholder {
  color: rgba(255, 255, 255, 0.58);
}

.homeProfileCard {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  justify-content: space-between;
  min-width: 0;
}

.homeBtn {
  position: relative;
  overflow: hidden;
  background-color: #111;
  background-image: linear-gradient(rgba(0, 0, 0, 0.44), rgba(0, 0, 0, 0.56));
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  border: 3px solid rgba(255, 255, 255, 0.96);
  width: 100%;
  aspect-ratio: 1 / 1;
  min-height: 210px;
  font-size: 14px;
  font-weight: 700;
  padding: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  border-radius: 22px;
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.18);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, filter 180ms ease;
}

.homeBtn:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 38px rgba(0, 0, 0, 0.24);
  border-color: rgba(255, 255, 255, 0.42);
  filter: brightness(1.12) saturate(1.08);
}

#goAuthUser {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.58)),
    url('/images/home-boto-groupie.png');
  background-size: cover;
  background-position: center;
}

#goAuthOrganizer {
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.42), rgba(0, 0, 0, 0.58)),
    url('/images/home-boto-organizer.png');
  background-size: cover;
  background-position: center;
}

.homeBtnMain {
  font-size: 21px;
  line-height: 0.92;
  max-width: 10ch;
  transition: opacity 160ms ease;
}

.homeBtnSub {
  font-size: 7px;
  font-weight: 600;
  opacity: 0.9;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  transition: opacity 160ms ease;
}

.homeBtn:hover .homeBtnMain,
.homeBtn:hover .homeBtnSub {
  opacity: 0;
}

.homeRoleDesc {
  margin: 0;
  color: #fff;
  font-size: 12px;
  line-height: 1.45;
  text-align: left;
  opacity: 0.9;
  padding: 0 4px;
}

.homePanelText {
  margin: 0;
  color: #fff;
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
  max-width: 500px;
}

.homeCtaRow {
  display: flex;
  gap: 8px;
  width: min(100%, 500px);
}

.homePrimaryCta,
.homeSecondaryCta {
  flex: 1;
  width: auto;
}

.homePrimaryCta {
  background: #111;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  font-weight: 800;
  min-height: 56px;
  border-radius: 18px;
  letter-spacing: 0.2px;
}

.homeSecondaryCta {
  background: #111;
  color: #fff;
  border: 1px solid #fff;
}

.homeHint {
  margin: 2px 0 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
  opacity: 1;
}

.homeTeaserSection {
  position: relative;
  width: min(560px, 92vw);
  background: rgba(22, 27, 38, 0.34);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 10px 10px 8px;
  margin-top: 2px;
  backdrop-filter: blur(12px);
}

.homeTeaserHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.homeTeaserHead h3 {
  margin: 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 11px;
  letter-spacing: 0.06em;
}

.homeTeaserSection .carouselCounter {
  min-width: 40px;
  font-size: 9px;
  font-weight: 700;
  opacity: 1;
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

.homeTeaserSection .eventItem {
  margin: 0;
  padding: 4px 5px;
  min-height: 0;
  aspect-ratio: 1 / 0.58;
  width: 100%;
  max-width: none;
  min-width: 0;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.22);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.12);
  color: #111;
}

.homeTeaserSection .eventsCarouselTrack .eventItem:nth-child(6n + 1) {
  background: #ffd84d;
}

.homeTeaserSection .eventsCarouselTrack .eventItem:nth-child(6n + 2) {
  background: #ff8f3d;
}

.homeTeaserSection .eventsCarouselTrack .eventItem:nth-child(6n + 3) {
  background: #65d6ce;
}

.homeTeaserSection .eventsCarouselTrack .eventItem:nth-child(6n + 4) {
  background: #ff6b6b;
}

.homeTeaserSection .eventsCarouselTrack .eventItem:nth-child(6n + 5) {
  background: #82cfff;
}

.homeTeaserSection .eventsCarouselTrack .eventItem:nth-child(6n + 6) {
  background: #8ce99a;
}

.homeTeaserSection .eventItem,
.homeTeaserSection .eventItem h1,
.homeTeaserSection .eventItem h2,
.homeTeaserSection .eventItem h3,
.homeTeaserSection .eventItem p,
.homeTeaserSection .eventItem div,
.homeTeaserSection .eventItem span,
.homeTeaserSection .eventItem strong {
  color: #111 !important;
}

.homeTeaserSection .agendaTitle {
  font-size: 10px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.homeTeaserMainLine {
  margin-bottom: 2px;
}

.homeTeaserSection .agendaGenre {
  font-size: 10px;
}

.homeTeaserGenreLine,
.homeTeaserSection .small:not(.homeTeaserFoot) {
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.homeTeaserSection .eventsCarouselTrack {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  justify-content: stretch;
}

.homeTeaserSection .agendaDateTime,
.homeTeaserSection .small {
  font-size: 8px;
}

.homeTeaserSection .small,
.homeTeaserFoot {
  color: rgba(255, 255, 255, 0.92);
}

.homeTeaserSection .eventItem .small {
  color: rgba(17, 17, 17, 0.88) !important;
}

.home-locked-info-btn {
  width: auto;
  min-width: 28px;
  padding: 1px 5px;
  font-size: 8px;
  line-height: 1;
  min-height: 16px;
  border-radius: 999px;
}

.homeTeaserCard {
  cursor: pointer;
}

.homeTeaserSection .carouselNav button {
  min-width: 16px;
  width: 16px;
  height: 16px;
  font-size: 10px;
}

.homeTeaserSection .eventsCarouselTrack {
  gap: 6px;
}

.homeBottomPill {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.88);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0;
  padding: 10px 18px;
  min-height: 68px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  z-index: 40;
}

.globalBottomPill {
  display: none;
  z-index: 50;
}

body.homeMode .globalBottomPill {
  display: flex;
}

.appBottomNav {
  position: fixed;
  left: max(12px, env(safe-area-inset-left));
  right: max(12px, env(safe-area-inset-right));
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 1050;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding: 8px;
  border-radius: 24px;
  background: rgba(0, 0, 0, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 20px 36px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(18px);
}

.appBottomNav.hidden {
  display: none !important;
}

.appBottomNavBtn {
  position: relative;
  min-width: 0;
  min-height: 62px;
  padding: 8px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 18px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(255, 255, 255, 0.92);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.appBottomNavBtn.isActive {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 235, 0, 0.72);
  color: #fff;
}

.appBottomNavBtn.hasUnread .appBottomNavIcon {
  color: #ef4444;
  animation: notifyRing 0.9s ease-in-out infinite;
}

.appBottomNavBtn.hasUnread {
  animation: notifyPulse 1.2s ease-in-out infinite;
}

.appBottomNavIcon {
  font-size: 16px;
  line-height: 1;
}

.appBottomNavLabel {
  display: block;
  width: 100%;
  text-align: center;
  line-height: 1.05;
}

.appBottomNavBadge {
  position: absolute;
  top: 5px;
  right: 8px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: #ef4444;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 18px;
  text-align: center;
}

.homeBottomLinks {
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 0;
  flex-wrap: wrap;
}

.homeBottomLinks a,
.footerLinkBtn {
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  border-bottom: 1px solid transparent;
  background: transparent;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  width: auto;
  min-width: 0;
  padding: 0;
}

.homeBottomLinks a:hover,
.footerLinkBtn:hover {
  border-bottom-color: #fff;
}

@media (max-width: 760px) {
  .modal {
    padding: 16px;
  }

  .modalPanel {
    width: min(760px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
  }

  .homeBottomPill {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 70px;
  }

  .homeBottomLinks {
    justify-content: center;
    width: 100%;
  }

  .appBottomNav {
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    bottom: max(8px, env(safe-area-inset-bottom));
    gap: 6px;
    padding: 6px;
    border-radius: 20px;
  }

  .appBottomNavBtn {
    min-height: 58px;
    padding: 6px 2px;
    border-radius: 14px;
    font-size: 10px;
  }

  .appBottomNavIcon {
    font-size: 15px;
  }

  .appBottomNavLabel {
    font-size: 9px;
  }

  body.appShellVisible main {
    padding-bottom: calc(272px + env(safe-area-inset-bottom));
  }
}

.card {
  background: rgba(0, 0, 0, 0.7);
  border: none;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
  color: #fff;
}

.card h1,
.card h2,
.card h3,
.card label,
.card p,
.card div,
.card span {
  color: #fff;
}

.hidden {
  display: none;
}

.authAnimIn {
  animation: authFadeInUp 280ms ease-out;
}

.authAnimOut {
  animation: authFadeOutDown 220ms ease-in;
}

@keyframes authFadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes authFadeOutDown {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(8px);
  }
}

.grid2 {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

#organizerSection .grid2 {
  align-items: start;
}

#organizerSection > h2 {
  margin-bottom: 22px;
  font-size: clamp(28px, 4.5vw, 42px);
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

#organizerSection.card {
  background: transparent;
  border: 0;
  padding: 0;
}

#organizerSection .organizerCol {
  background: transparent;
  border: 0;
  border-radius: 12px;
  padding: 0;
  box-shadow: none;
}

#organizerSection .organizerEventsCol {
  color: #fff;
}

#organizerSection .organizerFormCol {
  color: #fff;
}

#organizerSection .organizerStatsCol {
  color: #fff;
}

#organizerSection .organizerCalendarCol {
  color: #fff;
}

#organizerSection .organizerAccordionSection {
  padding: 0;
  margin-bottom: 14px;
}

#organizerSection .organizerAccordionToggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px 12px 18px;
  background: rgba(0, 0, 0, 0.72);
  border: 1px solid rgba(0, 0, 0, 0.88);
  border-radius: 10px;
  color: #fff;
  text-align: left;
  margin-bottom: 0;
  box-shadow: none;
}

#organizerSection .organizerAccordionTitle {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

#organizerSection .organizerAccordionIcon {
  display: inline-block;
  width: auto;
  height: auto;
  border-radius: 0;
  border: 0;
  font-size: 20px;
  line-height: 1;
  font-weight: 800;
}

#organizerSection .organizerAccordionTitle,
#organizerSection .organizerAccordionIcon {
  color: #fff;
}

#organizerSection .organizerAccordionBody {
  margin-top: 12px;
  padding: 12px 10px 2px;
}

#organizerSection .organizerAccordionSection.isCollapsed {
  padding-bottom: 0;
}

.grid4 {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

label {
  display: block;
  margin: 8px 0 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 12px;
  font-weight: 700;
}

input, select, textarea, button {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 14px;
}

button {
  background: #fff;
  color: #111;
  border: 2px solid #111;
  cursor: pointer;
}

.checkline {
  display: flex;
  gap: 8px;
  align-items: center;
}

.checkline input {
  width: auto;
}

.topSpace {
  margin-top: 12px;
}

.authBlocks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  width: min(900px, 96%);
  margin: 0 auto;
}

#authSection.auth-login-mode > h2 {
  display: none;
}

#authSection.auth-login-mode .authBlocks {
  display: flex;
  justify-content: center;
  width: min(460px, 96%);
}

#authSection.auth-login-mode #loginForm {
  width: 100%;
}

#authSection.auth-login-mode #authWelcomeBlock,
#authSection.auth-login-mode #registerForm {
  display: none !important;
}

#authSection.auth-register-mode .authBlocks {
  display: flex;
  justify-content: center;
  width: min(560px, 96%);
}

#authSection.auth-register-mode #loginForm,
#authSection.auth-register-mode #authWelcomeBlock {
  display: none !important;
}

#authSection.auth-register-mode #registerForm {
  width: 100%;
}

.authBlock {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #111;
  border-radius: 10px;
  padding: 12px;
  width: 100%;
}

.authBlock h3 {
  margin-bottom: 8px;
}

.authBlock label {
  margin-top: 4px;
}

#authSection .authBlock input,
#authSection .authBlock select,
#authSection .authBlock textarea {
  margin-top: 4px;
}

.registerStaticField {
  margin-top: 4px;
  min-height: 42px;
  display: flex;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid #111;
  border-radius: 10px;
  background: #fff;
  color: #111;
  font-weight: 700;
}

.registerStaticField.hidden {
  display: none !important;
}

#loginForm input[name="password"],
#registerForm input[name="password"] {
  margin-bottom: 12px;
}

.passwordField {
  position: relative;
  width: 100%;
}

.passwordField input {
  padding-right: 52px;
}

.passwordToggleBtn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: #111;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  opacity: 0.8;
}

.passwordToggleBtn:hover,
.passwordToggleBtn:focus-visible {
  background: rgba(17, 17, 17, 0.08);
  opacity: 1;
  outline: none;
}

.authDemoHint,
.registerLead {
  margin-top: 8px;
  line-height: 1.35;
}

#googleLoginWrap {
  display: grid;
  justify-items: center;
  gap: 8px;
  width: 100%;
  text-align: center;
}

#googleLoginWrap.hidden {
  display: none !important;
}

#googleLoginButton {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#googleLoginButton > div {
  display: flex;
  justify-content: center;
  width: 100%;
}

#googleLoginButton iframe {
  margin: 0 auto !important;
  display: block !important;
}

.googleLoginLead {
  margin: 0;
  color: #111;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

#myProfileForm.profileEditorForm {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: start;
}

#myProfileForm.profileEditorForm > .profilePanel {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  padding: 14px;
  min-width: 0;
  overflow: hidden;
}

#myProfileForm.profileEditorForm > .profilePanel h3 {
  margin-bottom: 10px;
}

#personalContactSection,
#organizerProfileFields {
  min-height: 100%;
}

#myProfileForm.profileEditorForm > #organizerProfileFields.topSpace,
#myProfileForm.profileEditorForm > #personalContactSection.topSpace {
  margin-top: 0;
}

#fanSearchPreferencesSection,
#fanFollowedGroupsSection,
.profileActionRow,
#profileSaveStatus {
  grid-column: 1 / -1;
}

.profileAuxPanel {
  max-width: 760px;
  min-width: 0;
}

#myProfileSection input,
#myProfileSection select,
#myProfileSection textarea {
  max-width: 100%;
  min-width: 0;
}

.profileActionRow {
  justify-content: flex-start;
  gap: 10px;
}

.profileActionRow button {
  width: auto;
  min-width: 160px;
  padding-left: 18px;
  padding-right: 18px;
}

#registerForm button[type="submit"] {
  margin-top: 14px;
}

#loginForm > button[type="submit"],
#registerForm > button[type="submit"],
#recoverSubmitBtn,
.authWelcomeBtn {
  width: 100%;
}

.authWelcomeBlock {
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: rgba(0, 0, 0, 0.82);
  border: 1px solid rgba(255, 255, 255, 0.35);
}

#authWelcomeBlock h1,
#authWelcomeBlock h2,
#authWelcomeBlock h3,
#authWelcomeBlock p,
#authWelcomeBlock label,
#authWelcomeBlock div,
#authWelcomeBlock span {
  color: #fff;
}

#authWelcomeBlock .small {
  color: rgba(255, 255, 255, 0.92);
}

.authWelcomeLead {
  font-size: 21px;
  font-weight: 800;
  line-height: 1.25;
  margin: 8px 0 10px;
}

.authWelcomeBtn {
  background: #fff;
  color: #111;
  border: 2px solid #111;
  font-weight: 800;
}

.authBlock h1,
.authBlock h2,
.authBlock h3,
.authBlock p,
.authBlock label,
.authBlock div,
.authBlock span {
  color: #111;
}

.registerPlanBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-width: 120px;
  margin-top: 8px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.registerPlanBadge.planFree {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #22c55e;
}

.registerPlanBadge.planPaid {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #ef4444;
}

.registerToggleBtn {
  width: auto;
  margin: 0 auto;
  display: block;
  padding: 0;
  background: transparent;
  border: 0;
  color: rgba(17, 17, 17, 0.72);
  text-decoration: underline;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

#accessPendingSection {
  width: min(720px, 94vw);
  margin: 0 auto;
}

.accessPendingBox {
  display: grid;
  gap: 16px;
  text-align: center;
}

.accessPendingLead {
  margin: 0;
  color: #fff;
  font-size: 16px;
  line-height: 1.5;
}

.accessPendingInstructions {
  display: grid;
  gap: 10px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.07);
}

.accessPendingCode {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  padding: 10px 16px;
  border-radius: 14px;
  background: #ffeb00;
  color: #111;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 0.12em;
}

.accessPendingActions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.accessPendingActions button {
  width: auto;
  min-width: 170px;
}

#registerForm .registerToggleBtn {
  margin-top: 10px;
}

#recoverForm {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px;
  background: rgba(255, 255, 255, 0.7);
  display: grid;
  gap: 6px;
}

.transientPopup {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 120;
  min-width: 300px;
  max-width: min(92vw, 520px);
  padding: 12px 14px;
  border-radius: 10px;
  border: 2px solid #111;
  font-weight: 700;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35);
}

.transientPopup.error {
  background: #ffe4e6;
  color: #991b1b;
}

.transientPopup.success {
  background: #dcfce7;
  color: #14532d;
}

.searchBox {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #111;
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 18px;
}

.searchBox h3,
.searchBox label,
.searchBox p,
.searchBox div {
  color: #111;
}

.eventsTitle {
  margin-top: 18px;
}

.agendaPage {
  background: transparent;
  border: 0;
  border-radius: 14px;
  padding: 0;
}

.agendaHero {
  background: transparent;
  border-radius: 0;
  border: 0;
  padding: 4px 4px 6px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.agendaHeroTitle {
  color: #fff;
  font-size: clamp(24px, 4.2vw, 46px);
  line-height: 1.1;
  margin: 0 0 6px;
  letter-spacing: 1px;
}

.agendaHeroSub {
  color: rgba(255, 255, 255, 0.9);
  margin: 0;
  font-size: 15px;
}

.agendaHero + .agendaSearchBox {
  margin-top: 18px;
}

.agendaSearchBox {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(3px);
}

.agendaSearchBox h3 {
  color: #fff;
}

.agendaSearchBox input,
.agendaSearchBox select {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid #111;
  color: #111;
}

.agendaSearchBox button {
  background: #fff;
}

.agendaSearchBox.accordionBox {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  overflow: visible;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 14px;
}

.agendaSearchBox .accordionToggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px 12px 18px;
  border: 1px solid rgba(0, 0, 0, 0.88);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.72) !important;
  color: #fff !important;
  cursor: pointer;
  text-align: left;
  box-shadow: none;
}

.accordionTitle {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.4px;
  color: #fff;
  text-transform: uppercase;
}

.accordionIcon {
  font-size: 20px;
  line-height: 1;
  font-weight: 700;
  min-width: 20px;
  text-align: center;
}

.accordionBody {
  padding: 12px 10px 2px;
}

.accordionBody .quickActionsGrid {
  background: transparent;
}

.accordionBox.isCollapsed .accordionBody {
  display: none;
}

.accordionBody .carouselHead {
  justify-content: flex-end;
  margin-bottom: 8px;
}

body[class*="groupie-theme-"] {
  --groupie-theme-page-bg: #1f1f24;
  --groupie-theme-page-bg-2: #2a2f3a;
  --groupie-theme-page-line: rgba(255, 255, 255, 0.16);
  --groupie-theme-surface: rgba(255, 255, 255, 0.34);
  --groupie-theme-border: rgba(255, 255, 255, 0.72);
  --groupie-theme-input-bg: #ffffff;
  --groupie-theme-input-text: #111111;
  --groupie-theme-input-border: #111111;
  --groupie-theme-item-bg: #ffffff;
  --groupie-theme-item-text: #111111;
  --groupie-theme-hero-bg: #2a2d33;
  --groupie-theme-hero-border: rgba(255, 255, 255, 0.25);
  --groupie-theme-hero-text: #ffffff;
  --groupie-theme-button-bg: #ffffff;
  --groupie-theme-button-text: #111111;
  --groupie-theme-button-border: #111111;
  --groupie-theme-profile-text: #ffffff;
}

body.groupie-theme-default {
  --groupie-theme-page-bg: #1f1f24;
  --groupie-theme-page-bg-2: #2a2f3a;
  --groupie-theme-page-line: rgba(255, 255, 255, 0.16);
  --groupie-theme-surface: rgba(255, 255, 255, 0.16);
  --groupie-theme-border: rgba(255, 255, 255, 0.55);
}

body.groupie-theme-blanc {
  --groupie-theme-page-bg: #f4f6fb;
  --groupie-theme-page-bg-2: #ffffff;
  --groupie-theme-page-line: rgba(17, 17, 17, 0.16);
  --groupie-theme-surface: rgba(0, 0, 0, 0.08);
  --groupie-theme-border: rgba(17, 17, 17, 0.5);
  --groupie-theme-input-bg: #111111;
  --groupie-theme-input-text: #ffffff;
  --groupie-theme-input-border: #ffffff;
  --groupie-theme-item-bg: #111111;
  --groupie-theme-item-text: #ffffff;
  --groupie-theme-hero-bg: #eef2f8;
  --groupie-theme-hero-border: rgba(17, 17, 17, 0.35);
  --groupie-theme-hero-text: #111111;
  --groupie-theme-button-bg: #111111;
  --groupie-theme-button-text: #ffffff;
  --groupie-theme-button-border: #ffffff;
  --groupie-theme-profile-text: #111111;
}

body.groupie-theme-groc {
  --groupie-theme-page-bg: #ffcf00;
  --groupie-theme-page-bg-2: #ff9d00;
  --groupie-theme-page-line: rgba(17, 17, 17, 0.2);
  --groupie-theme-surface: rgba(255, 213, 0, 0.52);
  --groupie-theme-border: rgba(17, 17, 17, 0.52);
  --groupie-theme-input-bg: #fff082;
  --groupie-theme-input-text: #111111;
  --groupie-theme-input-border: #111111;
  --groupie-theme-item-bg: #ffe14f;
  --groupie-theme-item-text: #111111;
  --groupie-theme-button-bg: #fff9b3;
  --groupie-theme-button-text: #111111;
  --groupie-theme-button-border: #111111;
  --groupie-theme-profile-text: #ffffff;
}

body.groupie-theme-fucsia {
  --groupie-theme-page-bg: #7f005f;
  --groupie-theme-page-bg-2: #ff00b3;
  --groupie-theme-page-line: rgba(255, 255, 255, 0.18);
  --groupie-theme-surface: rgba(255, 0, 179, 0.44);
  --groupie-theme-border: rgba(255, 133, 224, 0.82);
  --groupie-theme-input-bg: #0f0f12;
  --groupie-theme-input-text: #ffffff;
  --groupie-theme-input-border: #ff4dd2;
  --groupie-theme-item-bg: #18181b;
  --groupie-theme-item-text: #ffffff;
  --groupie-theme-hero-bg: #0b0b12;
  --groupie-theme-hero-border: #ff4dd2;
  --groupie-theme-button-bg: #111111;
  --groupie-theme-button-text: #ffffff;
  --groupie-theme-button-border: #ff4dd2;
  --groupie-theme-profile-text: #ffffff;
}

body.groupie-theme-mar {
  --groupie-theme-page-bg: #0077b6;
  --groupie-theme-page-bg-2: #00b4d8;
  --groupie-theme-page-line: rgba(255, 255, 255, 0.16);
  --groupie-theme-surface: rgba(0, 180, 216, 0.42);
  --groupie-theme-border: rgba(208, 244, 255, 0.78);
  --groupie-theme-input-bg: #caf0ff;
  --groupie-theme-input-text: #0b1b2b;
  --groupie-theme-input-border: #0b1b2b;
  --groupie-theme-item-bg: #b7eaff;
  --groupie-theme-item-text: #0b1b2b;
  --groupie-theme-button-bg: #dbf6ff;
  --groupie-theme-button-text: #0b1b2b;
  --groupie-theme-button-border: #0b1b2b;
  --groupie-theme-profile-text: #ffffff;
}

body.groupie-theme-coral {
  --groupie-theme-page-bg: #ff5e3a;
  --groupie-theme-page-bg-2: #ff7f50;
  --groupie-theme-page-line: rgba(255, 255, 255, 0.16);
  --groupie-theme-surface: rgba(255, 126, 95, 0.44);
  --groupie-theme-border: rgba(255, 235, 224, 0.82);
  --groupie-theme-input-bg: #ffe0d2;
  --groupie-theme-input-text: #2a1410;
  --groupie-theme-input-border: #2a1410;
  --groupie-theme-item-bg: #ffd1bf;
  --groupie-theme-item-text: #2a1410;
  --groupie-theme-button-bg: #ffe9df;
  --groupie-theme-button-text: #2a1410;
  --groupie-theme-button-border: #2a1410;
  --groupie-theme-profile-text: #ffffff;
}

body.groupie-theme-bosc {
  --groupie-theme-page-bg: #1f7a1f;
  --groupie-theme-page-bg-2: #38b000;
  --groupie-theme-page-line: rgba(255, 255, 255, 0.14);
  --groupie-theme-surface: rgba(56, 176, 0, 0.42);
  --groupie-theme-border: rgba(220, 252, 231, 0.82);
  --groupie-theme-input-bg: #ddffd6;
  --groupie-theme-input-text: #102812;
  --groupie-theme-input-border: #102812;
  --groupie-theme-item-bg: #c9ffbf;
  --groupie-theme-item-text: #102812;
  --groupie-theme-button-bg: #e7ffdf;
  --groupie-theme-button-text: #102812;
  --groupie-theme-button-border: #102812;
  --groupie-theme-profile-text: #ffffff;
}

body.groupie-theme-posta {
  --groupie-theme-page-bg: #f97316;
  --groupie-theme-page-bg-2: #facc15;
  --groupie-theme-page-line: rgba(17, 17, 17, 0.17);
  --groupie-theme-surface: rgba(251, 146, 60, 0.46);
  --groupie-theme-border: rgba(255, 243, 199, 0.84);
  --groupie-theme-input-bg: #ffe6bf;
  --groupie-theme-input-text: #2e1808;
  --groupie-theme-input-border: #2e1808;
  --groupie-theme-item-bg: #ffd79a;
  --groupie-theme-item-text: #2e1808;
  --groupie-theme-button-bg: #ffedcc;
  --groupie-theme-button-text: #2e1808;
  --groupie-theme-button-border: #2e1808;
  --groupie-theme-profile-text: #ffffff;
}

body.groupie-theme-vintage {
  --groupie-theme-page-bg: #8d6e63;
  --groupie-theme-page-bg-2: #c8ad7f;
  --groupie-theme-page-line: rgba(255, 255, 255, 0.15);
  --groupie-theme-surface: rgba(200, 173, 127, 0.44);
  --groupie-theme-border: rgba(244, 232, 220, 0.82);
  --groupie-theme-input-bg: #f1e3d3;
  --groupie-theme-input-text: #2b2218;
  --groupie-theme-input-border: #2b2218;
  --groupie-theme-item-bg: #e9d7c4;
  --groupie-theme-item-text: #2b2218;
  --groupie-theme-button-bg: #f6ecdf;
  --groupie-theme-button-text: #2b2218;
  --groupie-theme-button-border: #2b2218;
  --groupie-theme-profile-text: #ffffff;
}

body.groupie-theme-neon {
  --groupie-theme-page-bg: #05070f;
  --groupie-theme-page-bg-2: #0f172a;
  --groupie-theme-page-line: rgba(56, 189, 248, 0.26);
  --groupie-theme-surface: rgba(3, 105, 161, 0.38);
  --groupie-theme-border: rgba(56, 189, 248, 0.85);
  --groupie-theme-input-bg: #0b1020;
  --groupie-theme-input-text: #f8fafc;
  --groupie-theme-input-border: #38bdf8;
  --groupie-theme-item-bg: #111827;
  --groupie-theme-item-text: #f8fafc;
  --groupie-theme-hero-bg: #05070f;
  --groupie-theme-hero-border: rgba(56, 189, 248, 0.75);
  --groupie-theme-button-bg: #111827;
  --groupie-theme-button-text: #f8fafc;
  --groupie-theme-button-border: #38bdf8;
  --groupie-theme-profile-text: #ffffff;
}

body.groupie-theme-esbojarrat {
  --groupie-theme-page-bg: #05070f;
  --groupie-theme-page-bg-2: #0f172a;
  --groupie-theme-page-line: rgba(56, 189, 248, 0.26);
  --groupie-theme-surface: rgba(255, 255, 255, 0.22);
  --groupie-theme-border: rgba(255, 255, 255, 0.86);
  --groupie-theme-input-bg: #ffffff;
  --groupie-theme-input-text: #111111;
  --groupie-theme-input-border: #111111;
  --groupie-theme-item-bg: #ffffff;
  --groupie-theme-item-text: #111111;
  --groupie-theme-hero-bg: #0f0f12;
  --groupie-theme-hero-border: rgba(255, 255, 255, 0.95);
  --groupie-theme-hero-text: #ffffff;
  --groupie-theme-button-bg: #111111;
  --groupie-theme-button-text: #ffffff;
  --groupie-theme-button-border: #ffffff;
  --groupie-theme-profile-text: #111111;
}

body[class*="groupie-theme-"]:not(.homeMode) {
  background-color: var(--groupie-theme-page-bg);
  background-image:
    repeating-linear-gradient(
      -45deg,
      var(--groupie-theme-page-line) 0px,
      var(--groupie-theme-page-line) 2px,
      transparent 2px,
      transparent 14px
    ),
    radial-gradient(circle at 20% 10%, rgba(255, 255, 255, 0.22), transparent 40%),
    radial-gradient(circle at 80% 90%, rgba(0, 0, 0, 0.26), transparent 45%);
}

body[class*="groupie-theme-"] #myProfileSection .authBlock {
  background: var(--groupie-theme-hero-bg);
  border-color: var(--groupie-theme-hero-border);
}

body[class*="groupie-theme-"] #publicSection .agendaHero {
  background: transparent;
  border-color: transparent;
}

body[class*="groupie-theme-"] #publicSection .agendaHeroTitle,
body[class*="groupie-theme-"] #publicSection .agendaHeroSub,
body[class*="groupie-theme-"] #publicSection .agendaSearchBox h3 {
  color: var(--groupie-theme-hero-text);
}

body[class*="groupie-theme-"] #publicSection .searchBox,
body[class*="groupie-theme-"] #publicSection .followedSearchBox {
  background: var(--groupie-theme-surface);
  border-color: var(--groupie-theme-border);
}

body[class*="groupie-theme-"] #profileCalendarSection {
  background: transparent !important;
  border-color: transparent !important;
}

body[class*="groupie-theme-"] #publicSection .profileCalendarShell {
  background: transparent !important;
  border-color: transparent !important;
}

body[class*="groupie-theme-"] #publicSection .agendaSearchBox.accordionBox {
  background: transparent !important;
  border-color: transparent !important;
}

body[class*="groupie-theme-"] #publicSection .agendaSearchBox input,
body[class*="groupie-theme-"] #publicSection .agendaSearchBox select,
body[class*="groupie-theme-"] #myProfileSection input,
body[class*="groupie-theme-"] #myProfileSection select,
body[class*="groupie-theme-"] #myProfileSection textarea {
  background: var(--groupie-theme-input-bg);
  color: var(--groupie-theme-input-text);
  border-color: var(--groupie-theme-input-border);
}

body[class*="groupie-theme-"] #publicSection .eventItem,
body[class*="groupie-theme-"] #myProfileSection .preferredChip,
body[class*="groupie-theme-"] #profileCalendarSection .profileDayEventItem,
body[class*="groupie-theme-"] #eventDetailSection .eventDetailCard {
  background: var(--groupie-theme-item-bg);
  color: var(--groupie-theme-item-text);
  border-color: var(--groupie-theme-input-border);
}

body[class*="groupie-theme-"] #publicSection .eventItem h1,
body[class*="groupie-theme-"] #publicSection .eventItem h2,
body[class*="groupie-theme-"] #publicSection .eventItem h3,
body[class*="groupie-theme-"] #publicSection .eventItem p,
body[class*="groupie-theme-"] #publicSection .eventItem div,
body[class*="groupie-theme-"] #publicSection .eventItem span,
body[class*="groupie-theme-"] #publicSection .eventItem strong,
body[class*="groupie-theme-"] #profileCalendarSection .profileDayEventItem .small,
body[class*="groupie-theme-"] #myProfileSection h2,
body[class*="groupie-theme-"] #myProfileSection h3,
body[class*="groupie-theme-"] #myProfileSection label,
body[class*="groupie-theme-"] #myProfileSection p,
body[class*="groupie-theme-"] #myProfileSection span,
body[class*="groupie-theme-"] #publicSection .small {
  color: var(--groupie-theme-item-text);
}

body[class*="groupie-theme-"] #myProfileSection h2,
body[class*="groupie-theme-"] #myProfileSection h3,
body[class*="groupie-theme-"] #myProfileSection label,
body[class*="groupie-theme-"] #myProfileSection p,
body[class*="groupie-theme-"] #myProfileSection span,
body[class*="groupie-theme-"] #myProfileSection .small,
body[class*="groupie-theme-"] #myProfileSection .genreSelectedText {
  color: var(--groupie-theme-profile-text) !important;
}

body[class*="groupie-theme-"] #myProfileSection .authBlock h1,
body[class*="groupie-theme-"] #myProfileSection .authBlock h2,
body[class*="groupie-theme-"] #myProfileSection .authBlock h3,
body[class*="groupie-theme-"] #myProfileSection .authBlock p,
body[class*="groupie-theme-"] #myProfileSection .authBlock label,
body[class*="groupie-theme-"] #myProfileSection .authBlock div,
body[class*="groupie-theme-"] #myProfileSection .authBlock span {
  color: #ffffff !important;
}

body.groupie-theme-blanc #myProfileSection .authBlock h1,
body.groupie-theme-blanc #myProfileSection .authBlock h2,
body.groupie-theme-blanc #myProfileSection .authBlock h3,
body.groupie-theme-blanc #myProfileSection .authBlock p,
body.groupie-theme-blanc #myProfileSection .authBlock label,
body.groupie-theme-blanc #myProfileSection .authBlock div,
body.groupie-theme-blanc #myProfileSection .authBlock span,
body.groupie-theme-blanc #myProfileSection .authBlock .small,
body.groupie-theme-blanc #myProfileSection .authBlock .genreSelectedText,
body.groupie-theme-blanc #myProfileSection .authBlock .genreHelpText {
  color: #111111 !important;
}

.groupTypeTag,
.groupTypeTag.type-band,
.groupTypeTag.type-venue {
  color: #111111 !important;
}

body[class*="groupie-theme-"] #myProfileSection .authBlock .groupTypeTag,
body[class*="groupie-theme-"] #myProfileSection .authBlock .groupTypeTag.type-band,
body[class*="groupie-theme-"] #myProfileSection .authBlock .groupTypeTag.type-venue {
  color: #111111 !important;
}

body[class*="groupie-theme-"] #publicSection .eventMapBtn,
body[class*="groupie-theme-"] #publicSection button,
body[class*="groupie-theme-"] #myProfileSection button {
  background: var(--groupie-theme-button-bg);
  color: var(--groupie-theme-button-text);
  border-color: var(--groupie-theme-button-border);
}

body.groupie-theme-esbojarrat #publicSection .eventItem {
  color: #111 !important;
  border-width: 2px;
}

body.groupie-theme-esbojarrat #publicSection .eventsCarouselTrack .eventItem:nth-child(6n + 1),
body.groupie-theme-esbojarrat #publicSection #publicSearchResultsList .eventItem:nth-child(6n + 1),
body.groupie-theme-esbojarrat #publicSection #followedGroupsList .eventItem:nth-child(6n + 1),
body.groupie-theme-esbojarrat #profileCalendarSection .calendarDayEventsGrid .eventItem:nth-child(6n + 1) {
  background: #ff4d6d !important;
}

body.groupie-theme-esbojarrat #publicSection .eventsCarouselTrack .eventItem:nth-child(6n + 2),
body.groupie-theme-esbojarrat #publicSection #publicSearchResultsList .eventItem:nth-child(6n + 2),
body.groupie-theme-esbojarrat #publicSection #followedGroupsList .eventItem:nth-child(6n + 2),
body.groupie-theme-esbojarrat #profileCalendarSection .calendarDayEventsGrid .eventItem:nth-child(6n + 2) {
  background: #ffd166 !important;
}

body.groupie-theme-esbojarrat #publicSection .eventsCarouselTrack .eventItem:nth-child(6n + 3),
body.groupie-theme-esbojarrat #publicSection #publicSearchResultsList .eventItem:nth-child(6n + 3),
body.groupie-theme-esbojarrat #publicSection #followedGroupsList .eventItem:nth-child(6n + 3),
body.groupie-theme-esbojarrat #profileCalendarSection .calendarDayEventsGrid .eventItem:nth-child(6n + 3) {
  background: #06d6a0 !important;
}

body.groupie-theme-esbojarrat #publicSection .eventsCarouselTrack .eventItem:nth-child(6n + 4),
body.groupie-theme-esbojarrat #publicSection #publicSearchResultsList .eventItem:nth-child(6n + 4),
body.groupie-theme-esbojarrat #publicSection #followedGroupsList .eventItem:nth-child(6n + 4),
body.groupie-theme-esbojarrat #profileCalendarSection .calendarDayEventsGrid .eventItem:nth-child(6n + 4) {
  background: #4cc9f0 !important;
}

body.groupie-theme-esbojarrat #publicSection .eventsCarouselTrack .eventItem:nth-child(6n + 5),
body.groupie-theme-esbojarrat #publicSection #publicSearchResultsList .eventItem:nth-child(6n + 5),
body.groupie-theme-esbojarrat #publicSection #followedGroupsList .eventItem:nth-child(6n + 5),
body.groupie-theme-esbojarrat #profileCalendarSection .calendarDayEventsGrid .eventItem:nth-child(6n + 5) {
  background: #f72585 !important;
}

body.groupie-theme-esbojarrat #publicSection .eventsCarouselTrack .eventItem:nth-child(6n + 6),
body.groupie-theme-esbojarrat #publicSection #publicSearchResultsList .eventItem:nth-child(6n + 6),
body.groupie-theme-esbojarrat #publicSection #followedGroupsList .eventItem:nth-child(6n + 6),
body.groupie-theme-esbojarrat #profileCalendarSection .calendarDayEventsGrid .eventItem:nth-child(6n + 6) {
  background: #b8f200 !important;
}

body.groupie-theme-esbojarrat #publicSection .eventItem h1,
body.groupie-theme-esbojarrat #publicSection .eventItem h2,
body.groupie-theme-esbojarrat #publicSection .eventItem h3,
body.groupie-theme-esbojarrat #publicSection .eventItem p,
body.groupie-theme-esbojarrat #publicSection .eventItem div,
body.groupie-theme-esbojarrat #publicSection .eventItem span,
body.groupie-theme-esbojarrat #publicSection .eventItem strong,
body.groupie-theme-esbojarrat #publicSection .eventItem .small {
  color: #111111 !important;
}

body.groupie-theme-esbojarrat #myProfileSection .preferredChip,
body.groupie-theme-esbojarrat #myProfileSection .preferredChip .preferredChipName {
  color: #111111 !important;
}

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

.quickActionCard {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 150px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
  position: relative;
  overflow: hidden;
}

.quickActionCard h4 {
  margin: 0;
  color: #ffeb00;
  font-size: 15px;
  line-height: 1.2;
}

#publicSection .quickActionCard h4 {
  color: #ffeb00 !important;
}

.quickActionCard select {
  margin-top: 0;
  width: 100%;
  border: 1px solid rgba(17, 17, 17, 0.22);
  border-radius: 10px;
  background: #f7f7f7;
  color: #111;
}

.quickActionCard button {
  margin-top: auto;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 10px;
  background: #111;
  color: #fff;
  font-size: 12px;
  min-height: 38px;
}

.quickSearchForm {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
}

.quickSearchForm input[type="text"] {
  margin: 0;
  width: 100%;
  border: 1px solid rgba(17, 17, 17, 0.22);
  border-radius: 10px;
  background: #f7f7f7;
  color: #111;
}

/* SonaProp shared visual language for public and professional screens. */
#publicSection .quickActionCard h4,
#myProfileSection .profilePanel h3,
.eventSectionTitle {
  color: #ffeb00 !important;
}

#organizerPublicSection .eventSectionTitle,
#organizerModalBody .eventSectionTitle {
  color: #0f172a !important;
}

#publicSection .accordionTitle,
#organizerSection .organizerAccordionTitle,
.organizerCalendarToggleTitle {
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

#publicSection .agendaSearchBox .accordionToggle,
#organizerSection .organizerAccordionToggle,
.organizerCalendarToggle {
  background: rgba(0, 0, 0, 0.72) !important;
  border: 1px solid rgba(0, 0, 0, 0.88) !important;
  border-radius: 10px;
}

#publicSection .agendaSearchBox button,
#myProfileSection .profilePanel button,
#organizerSection .organizerAccordionBody button,
.organizerCalendarNav button,
.eventDetailActionsBar button,
.eventMapBtn,
.modalFollowBtn,
.modalUnfollowBtn,
.publicOrganizerFollowBtn,
.publicOrganizerUnfollowBtn {
  background: #111 !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.82) !important;
}

#publicSection .agendaSearchBox input,
#publicSection .agendaSearchBox select,
#myProfileSection input,
#myProfileSection select,
#myProfileSection textarea,
#organizerSection input,
#organizerSection select,
#organizerSection textarea {
  border-radius: 10px;
}

.eventsMapCanvas {
  width: 100%;
  height: 420px;
  border: 1px solid #111;
  border-radius: 10px;
  overflow: hidden;
}

.mapModalPanel {
  width: min(980px, calc(100vw - 22px));
}

.mapFiltersRow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin: 14px 0 10px;
}

.mapFilterBtn {
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: #111;
  color: #fff;
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 700;
}

.mapFilterBtn.isActive {
  background: #fff;
  color: #111;
  border-color: #111;
}

#closeMapBtn {
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 999px;
  font-size: 20px;
  line-height: 1;
}

.agendaPage .eventsTitle {
  color: #fff;
  margin-top: 18px;
}

.groupSearchBox {
  margin-top: 12px;
}

.groupResults {
  margin-top: 10px;
  display: grid;
  gap: 8px;
}

.followedSearchBox {
  margin-top: 14px;
  margin-bottom: 12px;
}

.followedSearchBox h3 {
  margin: 0 0 8px;
  color: #fff;
  font-size: 15px;
}

.profileCalendarShell {
  background: transparent !important;
  border-color: transparent !important;
  backdrop-filter: none;
  padding-left: 0;
  padding-right: 0;
}

.publicSearchStatus {
  margin: 8px 0 0;
}

.publicSearchStatus.error {
  color: #dc2626 !important;
  font-weight: 700;
}

.preferredCarousel {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

.preferredChip {
  flex: 0 0 auto;
  background: #fff;
  border: 1px solid #111;
  border-radius: 12px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.preferredChipName {
  color: #111 !important;
  font-size: 13px;
  font-weight: 700;
  white-space: normal;
}

.preferredChipBtn {
  width: auto;
  min-width: 86px;
  padding: 5px 9px;
  font-size: 12px;
}

.fanFollowedRemoveBtn {
  background: #fff;
  border-color: #111;
  color: #b91c1c;
}

.preferredChipAvatar {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid #111;
  background: #fff;
  flex: 0 0 auto;
}

.preferredChipAvatarFallback {
  display: inline-block;
  background: #0b0b0b;
  object-fit: cover;
}

#fanFollowedGroupsList.preferredCarousel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 190px));
  justify-content: start;
  overflow: visible;
}

.preferredCard {
  min-height: 0;
  max-width: 190px;
  padding: 8px;
  gap: 5px;
}

.preferredCardTop {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

.preferredCardInfo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  align-items: flex-start;
}

.preferredCardInfo .preferredChipName {
  display: block;
  font-size: 12px;
  line-height: 1.2;
  word-break: break-word;
}

.preferredCardActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 0;
}

.preferredCard .preferredChipBtn {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 4px 6px;
  font-size: 10px;
  line-height: 1.1;
}

.preferredCard .preferredChipAvatar {
  width: 36px;
  height: 36px;
}

.groupItemHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.groupTypeTag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid #111;
  border-radius: 999px;
  padding: 3px 8px;
  background: #fff;
  color: #111;
}

.groupTypeTag.type-band {
  background: #e6f7ff;
  border-color: #0369a1;
  color: #0c4a6e;
}

.groupTypeTag.type-venue {
  background: #fff7ed;
  border-color: #c2410c;
  color: #7c2d12;
}

.groupTypeTag.type-promoter {
  background: #f5f3ff;
  border-color: #7c3aed;
  color: #5b21b6;
}

.organizerTypeMeta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.organizerTypeMeta .small {
  margin: 0;
  color: #111;
}

.eventsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.adminStatsGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 8px;
  margin: 8px 0 12px;
}

.adminFeedbackBox {
  margin-bottom: 14px;
}

.adminFilterBar {
  display: grid;
  grid-template-columns: 2fr 1fr auto auto;
  gap: 6px;
  align-items: center;
  margin: 6px 0 8px;
}

.adminBlockedOnlyWrap {
  margin: 0;
  color: #fff;
  font-size: 13px;
}

@media (max-width: 900px) {
  .adminFilterBar {
    grid-template-columns: 1fr;
  }

  .adminFilterBar input,
  .adminFilterBar button,
  .adminFilterBar select {
    width: 100%;
  }

  .adminBlockedOnlyWrap {
    justify-content: flex-start;
  }
}
.adminStatCard {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: 10px;
  padding: 7px 8px;
  min-height: 72px;
}

.adminStatLabel {
  color: rgba(17, 17, 17, 0.72);
  font-size: 9px;
  letter-spacing: 0.02em;
}

.adminStatValue {
  color: #111;
  font-size: 16px;
  font-weight: 800;
  margin-top: 2px;
}

.adminStatBar {
  margin-top: 5px;
  height: 6px;
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.1);
  margin-top: 8px;
  overflow: hidden;
}

#adminStatsSection .adminStatCard,
#adminStatsGrid .adminStatCard {
  background: #ffffff !important;
  border: 1px solid rgba(17, 17, 17, 0.12) !important;
}

#adminStatsSection .adminStatLabel,
#adminStatsGrid .adminStatLabel {
  color: rgba(17, 17, 17, 0.72) !important;
}

#adminStatsSection .adminStatValue,
#adminStatsGrid .adminStatValue {
  color: #111111 !important;
}

#adminStatsSection .adminStatBar,
#adminStatsGrid .adminStatBar {
  background: rgba(17, 17, 17, 0.1) !important;
}

#adminStatsSection .adminStatBar span,
#adminStatsGrid .adminStatBar span {
  background: #111111 !important;
}

.adminEventTrafficList {
  display: grid;
  gap: 12px;
}

.adminEventTrafficTitle {
  margin: 0;
  color: #111;
}

.adminEventTrafficGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.adminTrafficCard {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: 16px;
  padding: 14px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}

.adminTrafficTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.adminTrafficValue {
  font-weight: 800;
  color: #111;
  white-space: nowrap;
}

.adminTrafficEventName {
  font-weight: 700;
  margin-bottom: 4px;
}

#organizerStatsSection .adminStatCard,
#organizerStatsGrid .adminStatCard {
  background: rgba(0, 0, 0, 0.7) !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  box-shadow: none !important;
}

#organizerStatsSection .adminStatLabel,
#organizerStatsGrid .adminStatLabel {
  color: rgba(255, 255, 255, 0.72) !important;
}

#organizerStatsSection .adminStatValue,
#organizerStatsGrid .adminStatValue {
  color: #ffffff !important;
}

#organizerStatsSection .adminStatBar,
#organizerStatsGrid .adminStatBar {
  background: rgba(255, 255, 255, 0.16) !important;
}

#organizerStatsSection .adminStatBar span,
#organizerStatsGrid .adminStatBar span {
  background: #ffeb00 !important;
}

.feedbackItem {
  margin-bottom: 10px;
}

.feedbackToggleMain {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 0;
}

.feedbackToggleSide {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.feedbackMetaInline {
  color: rgba(17, 17, 17, 0.68);
  text-transform: capitalize;
}

.feedbackItemTop {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}

.feedbackBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 72px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.18);
  color: #111 !important;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.1;
}

.feedbackStatusBadge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 66px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.1;
}

.feedbackStatusBadge.isNew {
  background: #111;
  color: #fff;
  border: 1px solid #111;
}

.feedbackStatusBadge.isRead {
  background: #fff;
  color: #111;
  border: 1px solid rgba(17, 17, 17, 0.22);
}

.feedbackMessage {
  margin: 8px 0 0;
  white-space: pre-wrap;
}

.feedbackItem .adminItemToggle {
  align-items: center;
}

.feedbackItem .adminItemBody {
  padding-left: 12px;
}

.adminFeedbackActions {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.feedbackModalPanel {
  width: min(560px, calc(100vw - 28px));
}

.feedbackFormBlock {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

#organizerStatsGrid {
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: 8px;
  margin: 8px 0 12px;
}

#organizerEventsList {
  display: grid;
  gap: 6px;
}

#organizerSection .organizerEventCompact {
  margin: 0;
  padding: 7px 8px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: none;
}

.organizerEventCompactHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.organizerEventCompactTitle {
  font-size: 13px;
  line-height: 1.2;
  color: #ffffff;
}

.organizerEventCompactMeta {
  margin-top: 3px;
  font-size: 11px;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.84);
}

.organizerEventCompactActions {
  margin-top: 6px;
  gap: 4px;
}

.organizerEventCompactBtn {
  width: auto;
  min-width: 0;
  padding: 3px 7px;
  font-size: 10px;
  line-height: 1.1;
  border-radius: 999px;
  border-width: 1px;
}

.organizerEventCompactDelete {
  color: #7f1d1d;
}

.organizerEventCompactCancelled {
  margin-top: 0;
  font-size: 10px;
  white-space: nowrap;
}

.adminStatBar span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #fff;
}

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

.adminAccordionBox {
  position: relative;
  box-shadow: none !important;
}

.adminAccordionToggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px 8px 16px;
  background: transparent;
  border: 0;
  text-align: left;
  box-shadow: none !important;
}

.adminAccordionTitle {
  font-size: 18px;
  font-weight: 800;
  color: #111 !important;
}

.adminAccordionIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  border: 0;
  font-size: 20px;
  line-height: 1;
  color: #111 !important;
}

.adminAdsManager {
  margin: 12px 0 14px;
}

#adminAdsSection .adminAccordionToggle {
  --accordion-accent: rgba(244, 114, 182, 0.9);
  color: #111 !important;
}

#adminAdsSection .adminAccordionTitle {
  font-size: 20px;
  font-weight: 800;
  color: #111 !important;
}

#adminAdsSection .adminAccordionIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  border: 0;
  font-size: 20px;
  line-height: 1;
  color: #111 !important;
}

.adminAccordionBody {
  margin-top: 10px;
}

.adminMaintenanceActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.adminMaintenanceHint {
  margin: 10px 0;
  color: #111 !important;
}

.adminMaintenanceResult {
  margin-top: 10px;
}

.adminMaintenanceCard {
  padding: 10px 12px;
  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: 10px;
  background: #fff;
}

.adminMaintenanceTitle {
  margin-bottom: 6px;
  color: #111;
  font-size: 16px;
  font-weight: 800;
}

.adminMaintenanceSubline {
  padding-left: 10px;
}

.adminAdsSettings {
  display: grid;
  grid-template-columns: 1fr minmax(120px, 180px) auto;
  gap: 8px;
  align-items: center;
}

.adminAdsSettings label {
  margin: 0;
}

.adminAdsManager .adminAdsSettings .checkline {
  color: #111111 !important;
}

.adminAdsManager #adminAdsForm {
  border-color: rgba(255, 255, 255, 0.22);
}

.adminAdsManager #adminAdsForm h4 {
  color: #111111 !important;
}

#adminAdsSection .adminAccordionBody,
#adminAdsSection .adminAccordionBody p,
#adminAdsSection .adminAccordionBody .small,
#adminAdsSection .adminAccordionBody label,
#adminAdsSection .adminAccordionBody h4,
#adminAdsSection .adminAccordionBody div,
#adminAdsSection .adminAccordionBody span {
  color: #111 !important;
}

#adminAdsSection .adminAccordionBody input[type="text"],
#adminAdsSection .adminAccordionBody input[type="url"],
#adminAdsSection .adminAccordionBody input[type="number"],
#adminAdsSection .adminAccordionBody input[type="file"] {
  color: #111;
  background: #fff;
  border-color: rgba(17, 17, 17, 0.18);
}

#adminAdsEnabled,
#adminAdsSection .adminAdsSettings .checkline,
#adminAdsSection .adminAdsSettings label,
#adminAdsSection .adminHomeHeaders h4,
#adminAdsSection .adminHomeHeaders .small {
  color: #fff !important;
}

.adminHomeHeaders {
  border-top: 1px solid rgba(17, 17, 17, 0.12);
  padding-top: 12px;
}

.adminHomeHeaders h4 {
  margin: 0 0 4px;
  color: #111 !important;
}

.adminHomeHeaderUploadRow {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}

.adminHomeHeaderList {
  display: grid;
  gap: 8px;
}

.adminHomeHeaderItem {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: 10px;
  background: #fff;
}

.adminHomeHeaderThumb {
  width: 88px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(17, 17, 17, 0.12);
}

.adminHomeHeaderMeta {
  min-width: 0;
}

.adminHomeHeaderMeta .small {
  color: #111 !important;
  opacity: 0.8;
}

@media (max-width: 900px) {
  .adminAdsSettings {
    grid-template-columns: 1fr;
  }

  .adminHomeHeaderUploadRow,
  .adminHomeHeaderItem {
    grid-template-columns: 1fr;
  }

  .adminHomeHeaderThumb {
    width: 100%;
    height: 140px;
  }
}

.adminColumn {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: 10px;
  padding: 8px;
}

.adminFeedbackBox {
  background: #fff;
  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: 10px;
  padding: 8px;
}

.adminColumnHead {
  margin-bottom: 6px;
}

.adminColumnHead h3 {
  margin: 0;
  color: #111 !important;
  font-size: 18px;
  font-weight: 800;
}

.adminColumnTools {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0;
}

.adminColumnTools .small {
  margin: 0;
}

.adminColumnTools select {
  width: auto;
  min-width: 136px;
  padding-top: 6px;
  padding-bottom: 6px;
}

.adminItem .row {
  flex-wrap: wrap;
  justify-content: flex-start;
}

.adminItemAccordion {
  padding: 6px 8px;
}

.adminItemToggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 6px 4px 12px;
  background: transparent;
  border: 0;
  color: #111;
  text-align: left;
  box-shadow: none;
}

.adminItemToggleTitle {
  font-weight: 700;
  color: #111;
}

.adminItemToggleIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  border: 0;
  color: #111;
  font-size: 18px;
  line-height: 1;
}

.adminItemBody {
  margin-top: 8px;
}

.adminItemAccordion.isCollapsed .adminItemBody {
  display: none;
}

.adminBlockedText {
  color: #dc2626 !important;
  font-weight: 700;
}

@media (max-width: 1100px) {
  .adminColumns {
    grid-template-columns: 1fr;
  }

  .adminColumnTools {
    flex-direction: column;
    align-items: stretch;
  }

  .adminColumnTools select {
    width: 100%;
    min-width: 0;
  }
}

.carouselHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.carouselNav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.carouselCounter {
  font-size: 12px;
  font-weight: 700;
  color: inherit;
  min-width: 58px;
  text-align: center;
}

.carouselNav button {
  width: 34px;
  min-width: 34px;
  height: 34px;
  padding: 0;
  font-size: 24px;
  line-height: 1;
}

.carouselNav button:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.eventsCarouselTrack {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}

.latestCompactSection.agendaSearchBox.accordionBox {
  background: transparent;
  border: 0;
  box-shadow: none;
}

.latestCompactSection .accordionBody {
  padding: 8px 0 0;
}

.latestCompactSection .carouselHead {
  align-items: center;
  margin-bottom: 10px;
}

.latestCompactSection .carouselHead h3 {
  font-size: 16px;
  letter-spacing: 0.02em;
}

.latestCompactSection .carouselNav {
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.38);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);
}

.latestCompactSection .carouselCounter {
  font-size: 14px;
  font-weight: 800;
  opacity: 1;
  min-width: 72px;
}

.latestCompactSection .carouselNav button {
  width: 42px;
  min-width: 42px;
  height: 42px;
  padding: 0;
  font-size: 24px;
  line-height: 1;
  background: #000;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.92);
}

.latestCompactSection .eventsCarouselTrack {
  grid-template-columns: repeat(auto-fit, minmax(300px, 300px));
  justify-content: start;
  gap: 8px;
}

.latestCompactSection .carouselEventItem {
  width: 300px;
  min-height: 300px;
  max-width: 300px;
  padding: 10px;
  gap: 4px;
}

.latestCompactSection .carouselNav button {
  border-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.latestCompactSection .carouselEventItem .agendaMainLine {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.latestCompactSection .carouselEventItem .agendaSep {
  display: none;
}

.latestCompactSection .carouselEventItem .agendaTitle,
.latestCompactSection .carouselEventItem .agendaGenre {
  font-size: 14px;
  line-height: 1.2;
}

.latestCompactSection .carouselEventItem .agendaOrganizerName {
  font-size: 16px;
  line-height: 1.15;
  font-weight: 800;
}

.latestCompactSection .carouselEventItem .agendaMiniLine {
  width: 100%;
  padding: 4px 0 6px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.92);
}

.latestCompactSection .carouselEventItem .agendaMiniLine:last-child {
  border-bottom: 0;
  padding-bottom: 2px;
}

.latestCompactSection .carouselEventItem .small,
.latestCompactSection .carouselEventItem .agendaDateTime {
  font-size: 11px;
  line-height: 1.25;
}

.latestCompactSection .carouselEventItem .carouselActionsRow {
  margin-top: auto;
  gap: 4px;
}

.latestCompactSection .carouselEventItem .carouselActionBtn,
.latestCompactSection .carouselEventItem .eventMapBtn {
  padding: 4px 6px;
  font-size: 10px;
  min-height: 0;
}

@media (max-width: 720px) {
  .latestCompactSection .eventsCarouselTrack {
    grid-template-columns: minmax(0, 1fr);
  }

  .latestCompactSection .carouselEventItem {
    width: 100%;
    max-width: 100%;
    min-height: 280px;
  }
}

.eventsCarouselTrack.slideInNext {
  animation: carouselSlideInNext 280ms cubic-bezier(0.12, 0.82, 0.2, 1);
}

.eventsCarouselTrack.slideInPrev {
  animation: carouselSlideInPrev 280ms cubic-bezier(0.12, 0.82, 0.2, 1);
}

.eventsCarouselTrack.slideOutNext {
  animation: carouselSlideOutNext 360ms cubic-bezier(0.22, 0.82, 0.24, 1);
}

.eventsCarouselTrack.slideOutPrev {
  animation: carouselSlideOutPrev 360ms cubic-bezier(0.22, 0.82, 0.24, 1);
}

@keyframes carouselSlideInNext {
  from {
    transform: translateX(72px);
    opacity: 0.65;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes carouselSlideInPrev {
  from {
    transform: translateX(-72px);
    opacity: 0.65;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes carouselSlideOutNext {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(-88px);
    opacity: 0.35;
  }
}

@keyframes carouselSlideOutPrev {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(88px);
    opacity: 0.35;
  }
}

.carouselEventItem {
  margin: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
}

@media (max-width: 1120px) {
  .eventsCarouselTrack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px) {
  .eventsCarouselTrack {
    grid-template-columns: 1fr;
  }
}

.eventItem {
  background: #fff;
  border: 1px solid #111;
  border-radius: 8px;
  padding: 10px;
  margin: 8px 0;
  color: #111;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  min-width: 0;
}

.eventItem h1,
.eventItem h2,
.eventItem h3,
.eventItem p,
.eventItem div,
.eventItem span,
.eventItem strong {
  color: #111;
}

.eventItem .small {
  color: #444;
}

.eventCardImageWrap {
  margin: -10px -10px 10px;
  height: 150px;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
  background: #111;
}

.eventCardImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.event-info-btn {
  width: auto;
  min-width: 90px;
}

.carouselActionsRow {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  margin-top: auto;
  padding-bottom: 5px;
}

.carouselActionBtn,
a.carouselActionBtn {
  width: 94% !important;
  min-width: 94% !important;
  max-width: 94% !important;
  padding: 6px 10px !important;
  font-size: 12px;
  line-height: 1.15;
  text-align: center;
  display: block !important;
  margin: 0 auto !important;
  color: #fff !important;
  border: 1px solid #111827 !important;
  background-color: #111 !important;
  background-image: none !important;
  border-radius: 999px;
  font-weight: 700;
  box-shadow: none !important;
}

.carouselActionsRow .eventMapBtn.compact.carouselActionBtn {
  margin-right: 0 !important;
}

.carouselActionsRow .carouselActionBtn,
.carouselActionsRow a.carouselActionBtn {
  width: calc(100% - 20px) !important;
  min-width: calc(100% - 20px) !important;
  max-width: calc(100% - 20px) !important;
  margin: 0 !important;
  align-self: center !important;
}

.carouselActionsRow .eventMapBtn.compact {
  margin-right: 0 !important;
}

.genreChips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 6px;
}

.genreChipBtn {
  width: auto;
  min-width: 0;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  background: #fff;
  color: #111;
  border: 1px solid #111;
}

.genreChipBtn.active {
  background: #111;
  color: #fff;
  border-color: #111;
}

.genrePickerRow {
  align-items: stretch;
  flex-wrap: nowrap;
}

.genrePickerRow select {
  flex: 1 1 auto;
  min-width: 180px;
}

.genrePickerRow button {
  width: auto;
  min-width: 110px;
}

#eventForm .genrePickerRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  margin-top: 4px;
}

#eventForm #organizerGenreChips {
  display: flex;
  flex-wrap: nowrap;
  gap: 5px;
  overflow-x: auto;
  padding: 2px 0 4px;
  scrollbar-width: thin;
}

#eventForm #organizerGenreChips .genreChipBtn {
  flex: 0 0 auto;
  white-space: nowrap;
}

#eventForm .eventGenreCreateRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: stretch;
  margin-top: 4px;
}

#eventForm .eventGenreCreateRow input,
#eventForm .eventGenreCreateRow button {
  margin: 0;
}

#eventForm input,
#eventForm select,
#eventForm textarea {
  background: #ffffff;
  color: #111111;
  border-color: #111111;
}

#eventForm input::placeholder,
#eventForm textarea::placeholder {
  color: rgba(17, 17, 17, 0.6);
}

.eventImageUploadRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.eventImageUploadLabel {
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fileActionBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 112px;
  padding: 10px 14px;
  border-radius: 6px;
  border: 2px solid #111;
  background: #fff;
  color: #111;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  color: #111 !important;
}

.fileActionBtn:hover {
  background: #f2f2f2;
}

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

.eventDateTimeField {
  min-width: 0;
  width: 100%;
  overflow: hidden;
}

.eventDateTimeField label {
  margin-top: 0;
  margin-bottom: 6px;
}

.eventDateTimeField input[type="datetime-local"] {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 42px;
  padding-right: 10px;
  color: #111111;
  background: #ffffff;
  display: block;
  appearance: none;
  -webkit-appearance: none;
}

.eventDateTimeField input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  opacity: 1;
  cursor: pointer;
  filter: invert(0);
}

.compactSelectOnlyRow {
  display: block;
  margin-bottom: 10px;
}

.compactSelectOnlyRow select {
  min-width: 0;
  max-width: 340px;
  width: 100%;
}

#eventVenueNameLabel {
  display: block;
  margin-top: 18px;
}

#organizerProfileFields .genrePickerRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

#fanPreferredGenresRow .genrePickerRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

#fanPreferredGenresRow #fanPreferredGenreChips {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

#fanPreferredGenresRow #fanPreferredGenreChips .genreChipBtn {
  flex: 0 0 auto;
  white-space: nowrap;
}

#organizerProfileFields #organizerProfileGenreChips {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

#organizerProfileFields #organizerProfileGenreChips .genreChipBtn {
  flex: 0 0 auto;
  white-space: nowrap;
}

#organizerProfileFields .row.topSpace,
#fanSearchPreferencesSection .row.topSpace {
  align-items: stretch;
}

#fanSearchPreferencesSection .row.topSpace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin-top: 10px;
}

#fanSearchPreferencesSection .row.topSpace input[type="text"],
#fanSearchPreferencesSection .row.topSpace input[type="number"] {
  min-width: 0;
}

#fanSearchPreferencesSection .row.topSpace button {
  width: auto;
  min-width: 132px;
  padding-left: 14px;
  padding-right: 14px;
}

#fanSearchPreferencesSection label {
  margin-top: 10px;
}

#fanSearchPreferencesSection #fanPreferredGenreChips {
  margin-top: 6px;
}

#organizerProfileFields .row.topSpace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

#organizerProfileFields .row.topSpace input[type="text"] {
  min-width: 0;
}

#organizerProfileFields .row.topSpace button {
  width: auto;
  min-width: 132px;
  padding-left: 14px;
  padding-right: 14px;
}

.visuallyHiddenInput {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#organizerGenreSelected {
  color: #111;
  font-weight: 700;
  margin: 0 0 6px;
}

.genreSelectedText {
  color: #111;
  font-weight: 700;
  margin: 0 0 6px;
}

.genreHelpText {
  margin: 2px 0 8px;
  color: #111;
  opacity: 0.85;
}

#organizerGenreSelect {
  display: block;
}

#eventForm > label,
#eventForm .inlineFieldLabelRow,
#eventForm .eventImageUploadRow {
  margin: 12px 0 6px;
}

.inlineFieldLabelRow {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.inlineFieldLabelRow label {
  margin: 0;
}

.organizerEventGenreHelpText {
  margin: 0;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
  font-size: 12px;
}

#eventForm #organizerGenreSelected {
  margin: 4px 0 6px;
}

.eventPreview {
  margin-top: 8px;
  width: 140px;
  height: 140px;
  object-fit: contain;
  background: rgba(0, 0, 0, 0.4);
  border: 2px solid #111;
  border-radius: 8px;
}

.galleryPreview {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.gallerySlot {
  width: 100%;
  padding: 0;
  min-width: 0;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #ffffff;
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.gallerySlot.isFilled img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.galleryPreview > img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.gallerySlotPlaceholder {
  color: #ffffff;
  font-size: 34px;
  line-height: 1;
  font-weight: 700;
}

.backToAgendaBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid #111827;
  background: #111827;
  color: #ffffff;
  font-weight: 800;
  line-height: 1;
}

.backToAgendaBtnIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: #dc2626;
  color: #ffffff;
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}

.backToAgendaBtnLabel {
  display: inline-block;
}

.backSecondaryBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid #111827;
  background: #111827;
  color: #ffffff;
  font-weight: 800;
  line-height: 1;
}

.backSecondaryBtnArrow {
  display: inline-block;
  color: #ffffff;
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
}

.backSecondaryBtnLabel {
  display: inline-block;
}

@media (max-width: 700px) {
  .authBlocks,
  #authSection.auth-login-mode .authBlocks,
  #authSection.auth-register-mode .authBlocks {
    width: min(100%, 94vw);
  }

  .authBlock {
    padding: 14px;
  }

  .authWelcomeLead {
    font-size: 19px;
  }

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

@media (max-width: 520px) {
  .galleryPreview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.eventDetailImage {
  width: 100%;
  max-height: 460px;
  object-fit: cover;
  background: transparent;
  border: 0;
  border-radius: 20px;
  margin-bottom: 18px;
  padding: 0;
}

body[class*="groupie-theme-"] #eventDetailSection .eventDetailCard,
body[class*="groupie-theme-"] #publicSection .eventDetailCard,
.eventDetailCard {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.98));
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 24px;
  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.14);
  padding: 22px;
  color: #0f172a;
}

.eventDetailHeader {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.eventDetailHeader h2 {
  margin: 0;
  color: #0f172a;
  font-size: clamp(34px, 4vw, 46px);
  line-height: 1.05;
}

.eventDetailTitleBlock {
  display: grid;
  gap: 6px;
}

.eventDetailEventName {
  margin: 0;
  color: #1e293b;
  font-size: clamp(20px, 2.3vw, 28px);
  font-weight: 800;
  line-height: 1.15;
}

.eventDetailSubtitle {
  margin: 0;
  color: #475569;
  font-size: 15px;
  letter-spacing: 0.03em;
}

.organizerMetaStack {
  display: grid;
  gap: 12px;
  margin-bottom: 22px;
}

.organizerMetaRow {
  display: grid;
  grid-template-columns: minmax(110px, 140px) 1fr;
  gap: 18px;
  align-items: start;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.22);
}

.organizerMetaRow:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.organizerMetaLabel {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.organizerMetaValue {
  color: #0f172a;
  font-size: 15px;
  line-height: 1.65;
}

.organizerSocialBlock {
  margin: 10px 0 22px;
}

.organizerSocialLabel {
  margin: 0 0 10px;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.organizerSocialRow {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-start;
}

.organizerSocialIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: #111827;
  color: #ffffff;
  text-decoration: none;
  border: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.14);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.organizerSocialIcon:hover,
.organizerSocialIcon:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(15, 23, 42, 0.22);
  background: #0f172a;
}

.organizerSocialIcon svg {
  width: 20px;
  height: 20px;
  display: block;
}

.organizerSocialIcon-instagram {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 8%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
  border-color: rgba(214, 36, 159, 0.28);
}

.organizerSocialIcon-facebook {
  background: #1877f2;
  border-color: rgba(24, 119, 242, 0.35);
}

.organizerSocialIcon-spotify {
  background: #1db954;
  border-color: rgba(29, 185, 84, 0.35);
  color: #08130c;
}

.organizerSocialIcon-youtube {
  background: #ff0000;
  border-color: rgba(255, 0, 0, 0.3);
}

.eventDetailUtilityRow {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 18px 0 22px;
  margin-bottom: 22px;
  border-top: 1px solid rgba(148, 163, 184, 0.22);
  border-bottom: 1px solid rgba(148, 163, 184, 0.22);
}

.organizerProfileColumn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex: 0 0 110px;
}

.organizerProfilePreview {
  margin-top: 0;
  width: 96px;
  height: 96px;
  border-radius: 999px;
  border: 3px solid rgba(15, 23, 42, 0.08);
  background: #ffffff;
}

.organizerProfilePreviewFallback {
  background: #0b0b0b;
  object-fit: cover;
}

.eventDetailActions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: 100%;
}

.eventDetailActions button,
.eventDetailActions .eventMapBtn {
  margin: 0;
  width: auto;
  min-width: 0;
  padding: 6px 10px;
  font-size: 11px;
  line-height: 1.1;
  white-space: nowrap;
  align-self: center;
}

.organizerMediaStrip {
  display: flex;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: thin;
}

.organizerMediaTile {
  flex: 0 0 110px;
  width: 110px;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.14);
  background: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  text-decoration: none;
}

.organizerMediaTile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.organizerMediaVideo {
  flex-direction: column;
  gap: 8px;
  color: #fff;
  background: linear-gradient(180deg, #111111, #242424);
}

.organizerMediaPlay {
  font-size: 28px;
  line-height: 1;
}

.organizerMediaText {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
}

.eventSectionTitle {
  margin: 0 0 14px;
  color: #0f172a;
  font-size: 20px;
  letter-spacing: 0.02em;
}

.eventDetailCardSingle {
  gap: 0;
}

.eventMetaGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 18px;
  margin: 0 0 18px;
}

.eventMetaItem {
  display: grid;
  gap: 5px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.eventMetaLabel {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.eventMetaValue {
  color: #0f172a;
  font-size: 15px;
  line-height: 1.55;
}

.eventDescriptionBlock {
  margin: 0 0 18px;
  padding: 0 0 14px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.eventDescriptionLead {
  margin: 0 0 8px;
  color: #0f172a;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.eventDescriptionText {
  margin: 0;
  color: #334155;
  line-height: 1.7;
  white-space: pre-wrap;
}

.eventDetailActionsBar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin-bottom: 18px;
}

.eventDetailActionsBar button,
.eventDetailActionsBar .eventMapBtn {
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 9px 14px;
  border-radius: 999px;
  background: #111827;
  border: 1px solid #111827;
  color: #ffffff;
  font-weight: 700;
}

.eventDetailFooterLinks {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
}

.eventDetailSocialBlock {
  margin: 0;
}

.eventDetailSocialBlock .organizerSocialRow {
  gap: 8px;
  justify-content: center;
}

.eventDetailSocialBlock .organizerSocialIcon {
  width: 40px;
  height: 40px;
}

.eventTextInfo {
  margin: 8px 0 14px;
}

.eventTextInfo p {
  margin: 0 0 8px;
  color: #334155;
}

.eventDescriptionBox {
  border-left: 4px solid #111827;
  background: #f8fafc;
  padding: 14px 16px;
  border-radius: 16px;
  margin-bottom: 16px;
}

.eventDescriptionBox h3 {
  margin: 0 0 8px;
  color: #0f172a;
}

.eventDescriptionBox p {
  margin: 0;
  color: #334155;
}

.eventMapBtn {
  display: inline-block;
  background: #111827;
  border: 1px solid #111827;
  border-radius: 999px;
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
  padding: 10px 16px;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.eventMapBtn:hover,
.eventMapBtn:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.16);
}

.eventMapBtn.compact {
  width: auto;
  min-width: 72px;
  padding: 7px 12px;
  font-size: 12px;
  margin-right: 8px;
}

.event-info-btn.compact {
  display: inline-block;
  width: auto;
  min-width: 72px;
  padding: 7px 12px;
  font-size: 12px;
  margin-right: 8px;
  border-radius: 999px;
  background: #111827;
  border: 1px solid #111827;
  color: #ffffff;
  font-weight: 700;
  line-height: 1.2;
}

.event-info-btn.compact:hover,
.event-info-btn.compact:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(15, 23, 42, 0.16);
}

.publicAgendaActionsRow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.publicAgendaActionsRow .eventMapBtn.compact,
.publicAgendaActionsRow .event-info-btn.compact {
  margin-right: 0;
}

body[class*="groupie-theme-"] #eventDetailSection .eventDetailCard .small,
body[class*="groupie-theme-"] #eventDetailSection .eventDetailCard p,
body[class*="groupie-theme-"] #eventDetailSection .eventDetailCard h3,
body[class*="groupie-theme-"] #eventDetailSection .eventDetailCard span,
body[class*="groupie-theme-"] #eventDetailSection .eventDetailCard strong,
body[class*="groupie-theme-"] #publicSection .eventDetailCard .small,
body[class*="groupie-theme-"] #publicSection .eventDetailCard p,
body[class*="groupie-theme-"] #publicSection .eventDetailCard h3,
body[class*="groupie-theme-"] #publicSection .eventDetailCard span,
body[class*="groupie-theme-"] #publicSection .eventDetailCard strong,
.eventDetailCard .small,
.eventDetailCard p,
.eventDetailCard h3,
.eventDetailCard span,
.eventDetailCard strong {
  color: #334155;
}

.eventDetailCard .eventItem,
.eventDetailCard .eventItem h1,
.eventDetailCard .eventItem h2,
.eventDetailCard .eventItem h3,
.eventDetailCard .eventItem p,
.eventDetailCard .eventItem div,
.eventDetailCard .eventItem span,
.eventDetailCard .eventItem strong {
  color: #111;
}

.eventDetailCard .eventItem .small {
  color: #222;
}

.eventDetailCard .eventItem {
  border-radius: 18px;
  border: 1px solid rgba(15, 23, 42, 0.1);
  box-shadow: none;
}

.modalFollowBtn,
.modalUnfollowBtn,
.publicOrganizerFollowBtn,
.publicOrganizerUnfollowBtn {
  background: #0f172a;
  color: #ffffff;
  border: 1px solid #0f172a;
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 700;
}

@media (max-width: 720px) {
  .eventDetailCard {
    padding: 18px 18px 40px;
    border-radius: 20px;
  }

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

  .organizerMetaRow {
    grid-template-columns: 1fr;
    gap: 6px;
  }

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

  .organizerProfileColumn {
    flex: 0 0 auto;
  }

  .organizerMediaStrip {
    width: 100%;
  }

  .eventMetaGrid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .eventDetailActionsBar {
    gap: 8px;
    margin-bottom: 18px;
  }

  .eventDetailFooterLinks {
    gap: 8px;
    margin-bottom: 18px;
  }

  .eventDetailActions,
  .eventDetailUtilityRow,
  .organizerMediaStrip,
  .organizerMetaStack {
    margin-bottom: 14px;
  }

  body.appShellVisible #eventDetailSection,
  body.appShellVisible #organizerPublicSection {
    padding-bottom: calc(196px + env(safe-area-inset-bottom));
  }

  body.appShellVisible #organizerPublicSection {
    padding-top: calc(28px + env(safe-area-inset-top));
  }

  body.appShellVisible #organizerPublicSection .eventDetailCard {
    margin-top: calc(28px + env(safe-area-inset-top));
  }

  body.appShellVisible #eventDetailSection::after,
  body.appShellVisible #organizerPublicSection::after {
    height: calc(112px + env(safe-area-inset-bottom));
  }

  #organizerPublicContent .eventItem:last-child,
  #organizerModalBody .eventItem:last-child {
    margin-bottom: calc(124px + env(safe-area-inset-bottom));
  }

  #organizerPublicContent .publicAgendaActionsRow,
  #organizerModalBody .topSpace {
    margin-bottom: 10px;
  }

  .organizerAgendaItem {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 12px;
  }

  .organizerAgendaThumb {
    width: 72px;
    height: 72px;
  }
}

@media (max-width: 720px) {
  #organizerModal.modal {
    align-items: flex-start;
    padding-top: calc(26px + env(safe-area-inset-top));
    padding-bottom: calc(14px + env(safe-area-inset-bottom));
  }

  #organizerModal .modalPanel {
    width: min(100vw - 16px, 760px);
    max-height: calc(100vh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    margin-top: 0;
  }

  #organizerModal .modalHeader {
    padding-top: calc(12px + env(safe-area-inset-top));
  }

  #organizerModal .modalBody {
    padding-bottom: calc(132px + env(safe-area-inset-bottom));
  }
}

.agendaMainLine {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}

.agendaMiniLine {
  width: 100%;
}

.agendaTitle {
  font-size: inherit;
}

.agendaOrganizerName {
  font-size: inherit;
  font-weight: 800;
}

.agendaGenre {
  font-weight: 600;
}

.agendaDateTime {
  margin-top: 4px;
}

.cancelledText {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 12px;
  color: #ff3b30 !important;
  font-weight: 900;
  letter-spacing: 1.1px;
  text-transform: uppercase;
  border: 2px solid rgba(255, 59, 48, 0.95);
  background: rgba(255, 59, 48, 0.12);
  border-radius: 999px;
  box-shadow: 0 0 0 1px rgba(255, 59, 48, 0.12), 0 6px 16px rgba(255, 59, 48, 0.16);
  transform: rotate(-4deg);
  text-shadow: 0 0 10px rgba(255, 59, 48, 0.2);
}

.organizerEventCompactCancelled {
  transform: none;
  letter-spacing: 0.8px;
  padding: 4px 10px;
  font-size: 12px;
}

.small {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
}

.profileSaveStatus {
  min-height: 18px;
  margin: 8px 0 0;
}

.profileSaveStatus.error {
  color: #ff6b6b;
  font-weight: 700;
}

.profileSaveStatus.success {
  color: #8bf3a2;
  font-weight: 700;
}

.appToast {
  position: fixed;
  right: 18px;
  bottom: 26px;
  z-index: 1400;
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(420px, calc(100vw - 24px));
  min-height: 64px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(7, 7, 9, 0.94);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.34);
  backdrop-filter: blur(10px);
  pointer-events: auto;
  transform: translateY(0);
  opacity: 1;
  transition: transform 220ms ease, opacity 220ms ease;
}

.appToast.hidden {
  display: none !important;
}

.appToast.success {
  border-color: rgba(34, 197, 94, 0.45);
}

.appToast.error {
  border-color: rgba(239, 68, 68, 0.45);
}

.appToast.closing {
  transform: translateY(22px);
  opacity: 0;
}

.appToastIcon {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  object-fit: contain;
}

.appToastText {
  color: #ffffff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
}

.appToastClose {
  margin-left: auto;
  width: 28px;
  min-width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 18px;
  line-height: 1;
}

.profileCalendarTop {
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.profileCalControls {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: center;
  justify-content: flex-end;
  margin-left: auto;
}

.profileCalFilters,
.profileCalMonthNav {
  display: inline-flex;
  flex-wrap: nowrap !important;
  gap: 6px;
}

.profileCalFilters button,
.profileCalMonthNav button {
  width: auto;
  min-width: 96px;
  padding: 6px 10px;
  font-size: 12px;
  white-space: nowrap;
  border-color: rgba(255, 255, 255, 0.9);
}

.profileCalendarTop .row button.active {
  background: #16a34a !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9), 0 6px 14px rgba(22, 163, 74, 0.24);
  transform: translateY(-1px);
}

#profileCalendarSection {
  margin-top: 12px;
  background: transparent !important;
  border: 0 !important;
  padding: 0;
}

#profileCalTitle {
  font-size: 30px;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0;
}

.profileCalendarWeekdays {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin: 8px 0 6px;
}

.profileCalendarWeekdays span {
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
}

.profileCalendarGrid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.profileCalDay,
.organizerCalDay {
  min-height: 52px;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  border-radius: 8px;
  background: rgba(90, 90, 90, 0.5) !important;
  color: #fff !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px;
  cursor: pointer;
  position: relative;
  appearance: none;
  -webkit-appearance: none;
}

.profileCalDay.empty {
  opacity: 0.2;
  cursor: default;
}

.profileCalDay.hasEvents {
  border-color: #ffffff;
  border-width: 4px;
  box-shadow:
    0 0 0 2px #ffffff,
    0 0 14px rgba(255, 255, 255, 0.22);
}

.profileCalDay.active {
  background: #16a34a !important;
  border-color: #dcfce7 !important;
  box-shadow: 0 8px 18px rgba(22, 163, 74, 0.28);
  transform: translateY(-1px);
}

.profileCalDay:hover {
  background: rgba(90, 90, 90, 0.5) !important;
}

#publicSection .agendaSearchBox .profileCalendarGrid .profileCalDay,
#publicSection .profileCalendarShell .profileCalendarGrid .profileCalDay,
#publicSection .profileCalDay {
  background: rgba(90, 90, 90, 0.5) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  color: #fff !important;
  box-shadow: none !important;
  filter: none !important;
  transition: none !important;
}

#publicSection .agendaSearchBox .profileCalendarGrid .profileCalDay.hasEvents,
#publicSection .profileCalendarShell .profileCalendarGrid .profileCalDay.hasEvents,
#publicSection .profileCalDay.hasEvents,
#publicSection .agendaSearchBox .profileCalendarGrid .profileCalDay.hasEvents:not(.active):hover,
#publicSection .profileCalendarShell .profileCalendarGrid .profileCalDay.hasEvents:not(.active):hover,
#publicSection .profileCalDay.hasEvents:not(.active):hover {
  border-color: #ffffff !important;
  border-width: 4px !important;
  box-shadow:
    0 0 0 2px #ffffff !important,
    0 0 16px rgba(255, 255, 255, 0.24) !important;
}

#publicSection .agendaSearchBox .profileCalendarGrid .profileCalDay:hover,
#publicSection .profileCalendarShell .profileCalendarGrid .profileCalDay:hover,
#publicSection .profileCalDay:hover {
  background: rgba(90, 90, 90, 0.5) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  outline: 0 !important;
}

#publicSection .agendaSearchBox .profileCalendarGrid .profileCalDay:not(.active),
#publicSection .agendaSearchBox .profileCalendarGrid .profileCalDay:not(.active):hover,
#publicSection .agendaSearchBox .profileCalendarGrid .profileCalDay:not(.active):focus,
#publicSection .agendaSearchBox .profileCalendarGrid .profileCalDay:not(.active):focus-visible,
#publicSection .profileCalendarShell .profileCalendarGrid .profileCalDay:not(.active),
#publicSection .profileCalendarShell .profileCalendarGrid .profileCalDay:not(.active):hover,
#publicSection .profileCalendarShell .profileCalendarGrid .profileCalDay:not(.active):focus,
#publicSection .profileCalendarShell .profileCalendarGrid .profileCalDay:not(.active):focus-visible,
#publicSection .profileCalendarGrid .profileCalDay:not(.active),
#publicSection .profileCalendarGrid .profileCalDay:not(.active):hover,
#publicSection .profileCalendarGrid .profileCalDay:not(.active):focus,
#publicSection .profileCalendarGrid .profileCalDay:not(.active):focus-visible {
  background: rgba(90, 90, 90, 0.5) !important;
  border-color: rgba(255, 255, 255, 0.35) !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none !important;
  outline: 0 !important;
}

#publicSection .agendaSearchBox .profileCalendarGrid .profileCalDay.active,
#publicSection .profileCalendarShell .profileCalendarGrid .profileCalDay.active,
#publicSection .profileCalDay.active {
  background: #16a34a !important;
  border-color: #dcfce7 !important;
  box-shadow: 0 0 0 2px rgba(220, 252, 231, 0.95), 0 8px 18px rgba(22, 163, 74, 0.28) !important;
  transform: translateY(-1px) !important;
  outline: 0 !important;
}

.profileCalDayNum {
  font-size: 13px;
  font-weight: 700;
}

.profileCalDot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  margin-top: 4px;
  background: #8b5cf6;
}

.profileCalTooltip {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  min-width: 200px;
  max-width: 280px;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.92);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 12px;
  line-height: 1.35;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 20;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.profileCalTooltipMore {
  margin-top: 5px;
  color: #fca5a5;
  font-weight: 700;
}

.profileCalDay:hover .profileCalTooltip,
.profileCalDay:focus-visible .profileCalTooltip {
  opacity: 1;
  visibility: visible;
}

#publicSection .profileCalDay:hover .profileCalTooltip,
#publicSection .profileCalDay:focus-visible .profileCalTooltip {
  opacity: 0;
  visibility: hidden;
}

.profileCalendarDayEvents {
  margin-top: 10px;
}

.profileCalendarDayEvents h4,
.organizerCalendarDayEvents h4 {
  margin: 0 0 10px;
  color: #fff !important;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.calendarDayEventsGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}

.calendarDayEventsGrid .eventItem {
  margin: 0;
}

.calendarDayEventsGrid .carouselEventItem {
  min-height: 300px;
  padding: 10px;
  gap: 4px;
}

.calendarDayEventsGrid .carouselEventItem .agendaMainLine {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.calendarDayEventsGrid .carouselEventItem .agendaMiniLine {
  width: 100%;
  padding: 4px 0 6px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.92);
}

.calendarDayEventsGrid .carouselEventItem .agendaMiniLine:last-child {
  border-bottom: 0;
  padding-bottom: 2px;
}

.calendarDayEventsGrid .carouselEventItem .agendaOrganizerName {
  font-size: 16px;
  line-height: 1.15;
  font-weight: 800;
}

.calendarDayEventsGrid .carouselEventItem .agendaTitle,
.calendarDayEventsGrid .carouselEventItem .agendaGenre {
  font-size: 14px;
  line-height: 1.2;
}

.calendarDayEventsGrid .carouselEventItem .small,
.calendarDayEventsGrid .carouselEventItem .agendaDateTime {
  font-size: 11px;
  line-height: 1.25;
}

.organizerAgendaItem {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.organizerAgendaThumb {
  width: 92px;
  height: 92px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.12);
  background: #111827;
  display: flex;
  align-items: center;
  justify-content: center;
}

.organizerAgendaThumbImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.organizerAgendaThumbFallback {
  color: #ffffff;
  font-size: 30px;
  line-height: 1;
}

.organizerAgendaBody {
  min-width: 0;
}

.organizerAgendaItem .agendaMainLine {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  margin-bottom: 6px;
}

.organizerAgendaItem .agendaMiniLine {
  width: 100%;
  padding: 4px 0 6px;
  border-bottom: 2px solid rgba(15, 23, 42, 0.12);
}

.organizerAgendaItem .agendaMiniLine:last-child {
  border-bottom: 0;
  padding-bottom: 2px;
}

.organizerAgendaItem .agendaOrganizerName {
  font-size: 15px;
  line-height: 1.15;
  font-weight: 800;
}

.organizerAgendaItem .agendaTitle,
.organizerAgendaItem .agendaGenre {
  font-size: 13px;
  line-height: 1.2;
}

.organizerAgendaItem .carouselActionsRow {
  grid-column: 1 / -1;
  margin-top: 4px;
}

.organizerCalendarSection {
  margin: 10px 0 16px;
  background: transparent;
  border: 0;
  border-radius: 12px;
  padding: 0;
}

.organizerCalendarToggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px 12px 18px;
  background: rgba(0, 0, 0, 0.72);
  border: 1px solid rgba(0, 0, 0, 0.88);
  border-radius: 10px;
  color: #ffffff;
  text-align: left;
}

.organizerCalendarToggleTitle {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

#organizerCalMonthLabel {
  font-size: 30px;
  line-height: 1.1;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0;
  font-weight: 800;
}

.organizerCalendarToggleIcon {
  display: inline-block;
  width: auto;
  height: auto;
  border-radius: 0;
  border: 0;
  font-size: 20px;
  line-height: 1;
  font-weight: 800;
}

.organizerCalendarBody {
  margin-top: 10px;
  padding: 12px 10px 2px;
}

.organizerCalendarSection.isCollapsed {
  padding-bottom: 0;
}

.organizerCalendarTop {
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.organizerCalendarNav {
  display: inline-flex;
  gap: 8px;
  flex-wrap: nowrap !important;
}

.organizerCalendarNav button {
  width: auto;
  min-width: 126px;
}

.organizerCalendarLegend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 8px 0 10px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 12px;
}

.organizerCalendarLegend .dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
  margin-right: 6px;
  vertical-align: middle;
  border: 1px solid rgba(255, 255, 255, 0.45);
}

.organizerCalendarLegend .dot.lvl1 { background: rgba(74, 222, 128, 0.42); }
.organizerCalendarLegend .dot.lvl2 { background: rgba(251, 191, 36, 0.52); }
.organizerCalendarLegend .dot.lvl3 { background: rgba(248, 113, 113, 0.62); }

.organizerCalendarGrid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.organizerCalDay {
  text-align: center;
}

.organizerCalDay.empty {
  opacity: 0.2;
  pointer-events: none;
}

.organizerCalDay.hasEvents.lvl1 {
  background: rgba(74, 222, 128, 0.36) !important;
}

.organizerCalDay.hasEvents.lvl2 {
  background: rgba(251, 191, 36, 0.36) !important;
}

.organizerCalDay.hasEvents.lvl3 {
  background: rgba(248, 113, 113, 0.42) !important;
}

.organizerCalDay.cancelledOnly {
  border-color: rgba(255, 59, 48, 0.9);
}

.organizerCalDay.active {
  background: #16a34a !important;
  border-color: #dcfce7 !important;
  outline: 0;
  box-shadow: 0 0 0 2px rgba(220, 252, 231, 0.95), 0 8px 18px rgba(22, 163, 74, 0.28);
  transform: translateY(-1px);
}

.profileCalDay.active .profileCalDayNum,
.organizerCalDay.active .profileCalDayNum,
.organizerCalDay.active .organizerCalCount {
  color: #ffffff !important;
}

.profileCalDay.active .profileCalDot {
  background: #ffffff;
}

.organizerCalCount {
  position: absolute;
  right: 8px;
  bottom: 6px;
  font-size: 12px;
  font-weight: 800;
}

.organizerCalendarDayEvents {
  margin-top: 10px;
}

@media (max-width: 1120px) {
  .calendarDayEventsGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .calendarDayEventsGrid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  #appHeader {
    min-height: auto;
    padding: 14px 12px 96px;
  }

  #appHeader h1,
  #appHeader > p {
    width: min(92vw, 720px);
  }

  #sessionInfo {
    right: 10px;
    left: 10px;
    bottom: 10px;
  }

  .headerSession,
  .headerTop {
    align-items: stretch;
  }

  .headerActions {
    justify-content: flex-end;
    flex-wrap: wrap;
  }

  .headerAvatar {
    width: 60px;
    height: 60px;
  }

  .homeHeroCard {
    padding: 18px;
    gap: 14px;
  }

  .homeUnifiedCard {
    padding: 18px 16px;
  }

  .homeHeroTitle {
    font-size: clamp(22px, 7vw, 28px);
  }

  .homeHeroText {
    font-size: 16px;
  }

  .homeHeroSubtext {
    font-size: 15px;
  }

  .homePrimaryDiscoverBtn {
    min-height: 60px;
    font-size: 15px;
    letter-spacing: 0.05em;
  }

  .homeProfessionalCard {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .homeProfessionalCopy {
    text-align: center;
    width: 100%;
  }

  .homeProfessionalTitle {
    font-size: 14px;
    text-align: center;
  }

  .homeProfessionalText {
    font-size: 12px;
    max-width: none;
    white-space: normal;
    text-align: center;
  }

  .homeProfessionalBtn {
    width: 100%;
    min-width: 0;
  }

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

  .authBlocks {
    grid-template-columns: 1fr;
    width: min(560px, 94%);
  }

  .homeTeaserSection {
    position: static;
    margin-top: 8px;
    width: min(560px, 94vw);
    padding: 8px;
  }

  .homeOverlay {
    padding-top: 34px;
    padding-bottom: 166px;
    gap: 18px;
  }

  .homeCenterZone {
    position: static;
    top: auto;
    bottom: auto;
    padding: 0 6px;
  }

  .homePanel {
    width: min(560px, 94vw);
    padding: 0;
    gap: 12px;
  }

  .homeCtaRow {
    gap: 8px;
  }

  .homePanelText,
  .homeHint {
    max-width: 100%;
  }

  .agendaHero {
    padding: 6px 4px 8px;
  }

  .agendaHeroTitle {
    font-size: clamp(22px, 7.5vw, 34px);
  }

  .agendaSearchBox,
  .searchBox,
  .card {
    padding: 10px;
  }

  .grid2,
  .grid4,
  .eventsGrid,
  .adminColumns,
  .adminStatsGrid,
  .groupResults {
    grid-template-columns: 1fr;
  }

  #myProfileForm.profileEditorForm {
    grid-template-columns: 1fr;
  }

  .carouselHead,
  .profileCalendarTop,
  .organizerCalendarTop {
    align-items: flex-start;
  }

  .carouselNav {
    width: 100%;
    justify-content: flex-end;
  }

  .profileCalControls {
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-left: 0;
  }

  .profileCalFilters,
  .profileCalMonthNav,
  .organizerCalendarNav {
    width: 100%;
    flex-wrap: wrap !important;
  }

  .profileCalFilters button,
  .profileCalMonthNav button,
  .organizerCalendarNav button {
    flex: 1 1 calc(50% - 6px);
    min-width: 0;
  }

  .profileCalendarWeekdays,
  .profileCalendarGrid,
  .organizerCalendarGrid {
    gap: 4px;
  }

  .profileCalendarWeekdays,
  .profileCalendarGrid,
  .organizerCalendarGrid {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  .profileCalendarWeekdays span {
    font-size: 10px;
  }

  .profileCalDay,
  .organizerCalDay {
    min-height: 46px;
    padding: 4px;
  }

  .modalPanel {
    width: min(100vw - 16px, 760px);
    max-height: calc(100vh - 16px);
    margin: 8px auto;
  }

  .profileActionRow button {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 520px) {
  .eventDateTimeRow {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .eventDateTimeField,
  .eventDateTimeField input[type="datetime-local"] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .profileCalendarWeekdays,
  .profileCalendarGrid,
  .organizerCalendarGrid {
    gap: 3px;
  }

  .profileCalendarWeekdays span {
    font-size: 9px;
  }

  .profileCalDay {
    min-height: 42px;
    border-radius: 6px;
    padding: 3px;
  }

  .organizerCalDay {
    min-height: 42px;
    border-radius: 6px;
    padding: 3px;
  }

  .profileCalDayNum {
    font-size: 11px;
  }

  #fanSearchPreferencesSection .row.topSpace,
  #fanPreferredGenresRow .genrePickerRow,
  #organizerProfileFields .row.topSpace,
  #organizerProfileFields .genrePickerRow {
    grid-template-columns: 1fr;
  }

  #fanSearchPreferencesSection .row.topSpace button,
  #fanPreferredGenresRow .genrePickerRow button,
  #organizerProfileFields .row.topSpace button,
  #organizerProfileFields .genrePickerRow button {
    width: 100%;
    min-width: 0;
  }

  #authSection {
    padding: 10px;
  }

  .authBlocks,
  #authSection.auth-login-mode .authBlocks,
  #authSection.auth-register-mode .authBlocks {
    width: 100%;
  }

  .authBlock {
    padding: 12px 10px;
    border-radius: 10px;
  }

  .authBlock h3 {
    font-size: 22px;
    line-height: 1.15;
  }

  .authWelcomeLead {
    font-size: 17px;
  }

  .registerPlanBadge {
    min-width: 0;
    width: 100%;
  }

  .registerToggleBtn {
    font-size: 14px;
    line-height: 1.35;
  }

  .authDemoHint,
  .registerLead,
  #registerOrganizerTypeHint {
    font-size: 13px;
  }

  .accessPendingActions {
    flex-direction: column;
  }

  .accessPendingActions button {
    width: 100%;
    min-width: 0;
  }

  #adminSection h2 {
    font-size: 24px;
  }

  .adminColumn,
  .adminFeedbackBox,
  #adminAdsSection {
    padding: 8px;
  }

  .adminColumn h3,
  #adminAdsSection .adminAccordionTitle {
    font-size: 18px;
  }

  .adminItemBody {
    margin-top: 6px;
  }

  #appHeader {
    padding-bottom: 150px;
  }

  main {
    margin: 8px auto 16px;
  }

  #sessionInfo {
    left: 10px;
    right: 10px;
  }

  #appHeader h1 {
    width: min(92vw, 720px);
    text-align: left;
    white-space: nowrap;
  }

  .brandLine {
    display: inline;
  }

  .headerSession,
  .headerTop {
    align-items: flex-start;
  }

  .headerSession {
    width: 100%;
  }

  .headerTop {
    width: min(92vw, 720px);
    align-items: center;
  }

  .headerUser {
    text-align: center;
  }

  .headerActions {
    width: min(92vw, 720px);
    flex-direction: row;
    align-items: stretch;
    justify-content: space-between;
    gap: 6px;
  }

  .notifyBtn,
  #profileBtn,
  #logoutBtn {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    max-width: none;
    padding: 5px 8px;
    font-size: 12px;
    justify-content: center;
  }

  .homeTitle {
    top: 24px;
  }

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

  .homeBtn {
    aspect-ratio: 1.25 / 1;
  }

  .homeBottomPill {
    padding: 8px 12px;
    min-height: 76px;
  }

  .homeBottomLinks {
    gap: 10px;
  }

  .homeBottomLinks a {
    font-size: 12px;
  }

  .homeTeaserSection .eventsCarouselTrack {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
  }

  .homeTeaserSection .eventItem {
    aspect-ratio: 1 / 0.5;
    padding: 3px 4px;
  }

  .homeTeaserSection .agendaTitle,
  .homeTeaserSection .agendaGenre,
  .homeTeaserGenreLine,
  .homeTeaserOrganizerLine {
    font-size: 8px;
  }

  .home-locked-info-btn {
    padding: 1px 4px;
    font-size: 7px;
  }

  .eventsMapCanvas {
    height: 300px;
  }

  .quickActionCard h4 {
    font-size: 15px;
  }

  .eventDetailActionsBar button,
  .eventDetailActionsBar .eventMapBtn,
  .eventDetailFooterLinks .eventMapBtn,
  .modalFollowBtn,
  .modalUnfollowBtn,
  .publicOrganizerFollowBtn,
  .publicOrganizerUnfollowBtn {
    width: 100%;
    text-align: center;
  }

  .eventDetailFooterLinks {
    align-items: stretch;
  }

  .eventDetailSocialBlock {
    width: 100%;
  }

  .eventDetailSocialBlock .organizerSocialRow {
    justify-content: center;
  }
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.modal.hidden {
  display: none !important;
}

.modalBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
}

.modalPanel {
  position: relative;
  width: min(760px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  margin: 0;
  background: #fff;
  border: 2px solid #111;
  border-radius: 12px;
  color: #111;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
}

.profileImageModalPanel {
  width: min(700px, calc(100vw - 24px));
  background: rgba(0, 0, 0, 0.6);
}

.profileImageModalBody {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px;
}

.profileImageModalImg {
  width: auto;
  max-width: 100%;
  max-height: 75vh;
  object-fit: contain;
  border-radius: 10px;
  border: 2px solid #111;
}

.adVideoModalPanel {
  width: auto;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  margin: 0;
  background: transparent;
  color: #fff;
  border: 0;
  box-shadow: none;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
}

#adVideoModal.isImageAd .adVideoModalPanel {
  width: 100vw;
  max-width: 100vw;
  max-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.adVideoModalHeader {
  background: #000;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}

.adVideoModalHeader h3 {
  color: #fff;
}

.adVideoModalBody {
  padding: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

#adVideoModal.isImageAd .adVideoModalBody {
  width: 100vw;
  min-height: 100vh;
  padding: 8px 8px calc(108px + env(safe-area-inset-bottom)) 8px;
  display: grid;
  place-items: center;
  overflow: hidden;
}

.adVideoPlayer {
  display: block;
  width: auto;
  height: auto;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  object-fit: contain;
  border-radius: 0;
  border: 0;
  background: transparent !important;
  box-shadow: none;
}

.adImagePlayer {
  display: block;
  width: auto;
  height: auto;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
  object-fit: contain;
  object-position: center center;
  border-radius: 0;
  border: 0;
  background: transparent !important;
  box-shadow: none;
  margin: 0 auto;
  align-self: center;
}

#adVideoModal.isImageAd .adImagePlayer {
  display: block !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  max-width: calc(100vw - 16px) !important;
  max-height: calc(100vh - 16px) !important;
  min-width: 0;
  min-height: 0;
  margin: 0 auto !important;
  flex: 0 1 auto;
  object-fit: contain;
  object-position: center center;
  transform: translateY(calc(-44px - (env(safe-area-inset-bottom) / 2)));
}

#adVideoModal:not(.hidden) {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

#adVideoModal .modalBackdrop {
  background: rgba(0, 0, 0, 0.8);
}

#adVideoModal.isVerticalVideo .adVideoPlayer {
  width: auto;
  height: 100vh;
  max-height: 100vh;
  max-width: 100vw;
}

#adVideoModal.isHorizontalVideo .adVideoPlayer {
  width: auto;
  height: auto;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
}

#profileImageModal .modalHeader {
  background: #000;
  border-bottom: 1px solid #000;
}

#profileImageModal .modalHeader h3 {
  color: #fff;
}

#profileImageModal .modalHeader button {
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
}

.modalHeader {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #fff;
  border-bottom: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
}

.modalHeader h3 {
  margin: 0;
  color: #111;
}

.modalHeader button {
  width: auto;
  min-width: 86px;
}

.modalBody {
  padding: 12px;
}

.homeIntroModalPanel {
  width: min(380px, calc(100vw - 24px));
  background: #ffff00;
  color: #000;
  margin: 0;
}

.homeIntroModalHeader {
  background: #ffff00;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
}

.homeIntroModalHeader h3 {
  color: #000;
}

.homeIntroModalHeader button {
  width: auto;
  min-width: 46px;
  padding: 6px 10px;
  border: 1px solid #000;
  color: #000;
  background: transparent;
}

.googleWelcomeModalPanel {
  width: min(460px, calc(100vw - 24px));
  margin: 0;
}

#googleWelcomeModal:not(.hidden) {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}

.googleWelcomeLead {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
}

.googleWelcomeText {
  margin: 0;
  color: #111;
  line-height: 1.5;
}

.googleOnboardingForm {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.googleOnboardingForm label {
  color: #111;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.googleOnboardingForm input,
.googleOnboardingForm select {
  margin-top: 0;
}

#googleOnboardingOrganizerFields {
  display: grid;
  gap: 10px;
}

.googleWelcomeActions {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

.googleWelcomePrimaryBtn,
.googleWelcomeSecondaryBtn {
  width: 100%;
}

.googleWelcomePrimaryBtn {
  background: #ffeb00;
  color: #111;
  border: 1px solid #111;
  font-weight: 900;
}

.googleWelcomeSecondaryBtn {
  background: #111;
  color: #fff;
  border: 1px solid #111;
}

.homeIntroModalBody {
  display: grid;
  gap: 14px;
}

.homeIntroText {
  margin: 0;
  color: #000;
  font-size: clamp(18px, 2.4vw, 28px);
  line-height: 1.35;
  text-align: center;
  font-weight: 500;
}

.homeIntroInstallHint {
  margin: 2px 0 0;
  color: #000;
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
}

.homeIntroRememberRow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: #000;
  font-size: 14px;
  white-space: nowrap;
}

.homeIntroRememberRow input {
  margin: 0;
  width: auto;
  min-width: 0;
  flex: 0 0 auto;
}

#homeIntroModal {
  display: flex;
  align-items: center;
  justify-content: center;
}

#homeIntroModal.hidden {
  display: none;
}

#homeIntroModal .modalBackdrop {
  background: rgba(0, 0, 0, 0.7);
}