@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Manrope:wght@400;500;700;800&family=Outfit:wght@500;600;700&display=swap");

:root {
  --page-bg: #ffffff;
  --card: #ffffff;
  --brand: #6f68b8;
  --brand-dark: #4f2785;
  --brand-soft: #f5f1fc;
  --text-main: #1a2628;
  --text-muted: #6d7678;
  --danger: #e23d4f;
  --line: #d6dddd;
  --soft-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
  --header-height: 74px;
  --sidenav-width: 280px;
  --admin-min-width: 1280px;
  --toolbar-control-height: 42px;
}

/* Manage Exclusives Page (pages/manage-exclusives.php) */

.manage-exclusives-surface {
  --exclusive-ink: #20233b;
  --exclusive-muted: #707891;
  --exclusive-line: #dfe3ef;
  --exclusive-soft: #f6f5fd;
  min-height: calc(100vh - 150px);
  min-height: calc(100dvh - 150px);
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 92% 8%, rgba(194, 233, 148, 0.13), transparent 26%),
    linear-gradient(180deg, #ffffff 0%, #fdfdff 100%);
}

.manage-exclusives-main {
  flex: 1 1 auto;
  min-height: calc(100vh - 190px);
  min-height: calc(100dvh - 190px);
  display: flex;
  flex-direction: column;
}

.manage-exclusives-header {
  margin-bottom: 22px;
}

.manage-exclusives-toolbar {
  max-width: 760px;
}

.manage-exclusives-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: 22px;
}

.manage-exclusive-card {
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--exclusive-line);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(37, 43, 72, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.manage-exclusive-card:hover {
  transform: translateY(-3px);
  border-color: #c9c4e8;
  box-shadow: 0 18px 36px rgba(37, 43, 72, 0.13);
}

.manage-exclusive-card-media {
  position: relative;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  background: #edf0f7;
}

.manage-exclusive-card-media::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 46%;
  background: linear-gradient(180deg, transparent, rgba(16, 19, 39, 0.28));
  pointer-events: none;
}

.manage-exclusive-card-media>img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.manage-exclusive-card:hover .manage-exclusive-card-media>img {
  transform: scale(1.025);
}

.manage-exclusive-card-media .application-status-badge {
  position: absolute;
  z-index: 1;
  top: 14px;
  right: 14px;
  box-shadow: 0 5px 14px rgba(21, 26, 49, 0.16);
}

.manage-exclusive-card-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px;
}

.manage-exclusive-card-heading {
  min-width: 0;
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
}

.manage-exclusive-card-heading>img {
  width: 60px;
  height: 60px;
  display: block;
  border: 1px solid #d9deeb;
  border-radius: 16px;
  background: #ffffff;
  padding: 5px;
  object-fit: contain;
  box-shadow: 0 7px 16px rgba(31, 38, 68, 0.1);
}

.manage-exclusive-card-heading>div {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.manage-exclusive-card-heading span {
  color: #777f99;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.manage-exclusive-card-heading h2 {
  overflow: hidden;
  margin: 0;
  color: var(--exclusive-ink);
  font-size: 1.05rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.manage-exclusive-card-body>p {
  display: -webkit-box;
  overflow: hidden;
  min-height: 4.35em;
  margin: 0;
  color: #59617a;
  font-size: 0.88rem;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.manage-exclusive-card-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.manage-exclusive-card-dates span {
  border: 1px solid #e1e4ef;
  border-radius: 999px;
  background: #f8f8fc;
  padding: 5px 9px;
  color: #6f7690;
  font-size: 0.7rem;
  font-weight: 650;
}

.manage-exclusive-card-footer {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid #eceef5;
  padding-top: 14px;
}

.manage-exclusive-card-footer>span {
  color: #858ca2;
  font-size: 0.74rem;
}

.manage-exclusive-card .masterclass-card-edit-button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #6f68b8;
  border-radius: 10px;
  background: #6f68b8;
  padding: 8px 16px;
  color: #ffffff;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 750;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.manage-exclusive-card .masterclass-card-edit-button:hover,
.manage-exclusive-card .masterclass-card-edit-button:focus-visible {
  border-color: #5d56a8;
  background: #5d56a8;
  transform: translateY(-1px);
}

.manage-exclusives-empty {
  display: grid;
  place-items: center;
  gap: 6px;
  min-height: 300px;
  border: 1px dashed #d8ddea;
  border-radius: 18px;
  background: #fafafe;
  padding: 30px;
  text-align: center;
}

.manage-exclusives-empty strong {
  color: var(--exclusive-ink);
  font-size: 1rem;
}

.manage-exclusives-empty p {
  margin: 0;
  color: var(--exclusive-muted);
  font-size: 0.86rem;
}

.manage-exclusives-main>.manage-exclusives-pagination {
  margin-top: auto;
  padding-top: 24px;
}

.manage-exclusive-modal .ws-default-modal-dialog {
  max-height: calc(100vh - 44px);
  max-height: calc(100dvh - 44px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.manage-exclusive-modal .ws-default-modal-head {
  flex: 0 0 auto;
}

.manage-exclusive-form {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 20px;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

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

.manage-exclusive-form label {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 6.5px;
}

.manage-exclusive-form label>span:first-child {
  color: #555c76;
  font-size: 0.79rem;
  font-weight: 700;
  line-height: 1.25;
}

.manage-exclusive-form input,
.manage-exclusive-form select,
.manage-exclusive-form textarea {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.manage-exclusive-form input[type="file"] {
  min-height: 44px;
  padding: 8px 10px;
}

.manage-exclusive-form textarea {
  min-height: 130px;
  resize: vertical;
}

.manage-exclusive-preview {
  position: relative;
  overflow: visible;
  min-height: 245px;
  margin-bottom: 7px;
  border: 1px solid #dce1ed;
  border-radius: 16px;
  background: #eef1f7;
}

.manage-exclusive-preview-banner {
  width: 100%;
  height: 245px;
  display: block;
  border-radius: 15px;
  object-fit: cover;
}

.manage-exclusive-preview-logo {
  position: absolute;
  left: 24px;
  bottom: -20px;
  width: 82px;
  height: 82px;
  border: 5px solid #ffffff;
  border-radius: 20px;
  background: #ffffff;
  padding: 5px;
  object-fit: contain;
  box-shadow: 0 9px 24px rgba(28, 34, 61, 0.2);
}

.manage-exclusive-preview.is-empty .manage-exclusive-preview-banner {
  object-fit: contain;
  padding: 50px;
}

.manage-exclusive-preview.is-empty .manage-exclusive-preview-logo {
  padding: 12px;
}

.manage-exclusive-assets-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(180px, 220px);
  align-items: end;
  gap: 20px;
}

.manage-exclusive-assets-row>label {
  display: grid;
  gap: 6.5px;
}

.manage-exclusive-assets-row .manage-schedules-active-switch {
  align-self: stretch;
  justify-content: center;
  border: 1px solid #e0e3ef;
  border-radius: 12px;
  background: #f8f8fc;
  padding: 12px 14px;
}

.manage-exclusive-date-row input:disabled {
  cursor: not-allowed;
  background: #f2f3f7;
  color: #9aa0b2;
}

.manage-exclusive-category-manager-dialog {
  width: min(1440px, calc(100vw - 36px));
}

.manage-exclusive-category-manager-form {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.manage-exclusive-category-manager-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 24px;
  scrollbar-gutter: stable;
  overscroll-behavior: contain;
}

.manage-exclusive-category-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
  border: 1px solid #e0e2f0;
  border-radius: 16px;
  background: linear-gradient(135deg, #faf9ff 0%, #f5f3fd 100%);
  padding: 20px 22px;
}

.manage-exclusive-category-toolbar>div {
  min-width: 0;
}

.manage-exclusive-category-toolbar strong {
  display: block;
  margin-bottom: 4px;
  color: #2f2059;
  font-size: 1rem;
}

.manage-exclusive-category-toolbar p {
  margin: 0;
  color: #747b94;
  font-size: 0.82rem;
}

.manage-exclusive-category-list {
  display: grid;
  gap: 18px;
}

.manage-exclusive-category-row {
  display: grid;
  grid-template-columns: minmax(210px, 260px) minmax(0, 1fr);
  gap: 20px;
  border: 1px solid #e0e3ef;
  border-radius: 16px;
  background: #ffffff;
  padding: 16px;
  box-shadow: 0 8px 22px rgba(41, 45, 76, 0.06);
}

.manage-exclusive-category-preview {
  position: relative;
  min-height: 190px;
  overflow: hidden;
  border: 1px solid #dce1ed;
  border-radius: 14px;
  background: #eef1f7;
}

.manage-exclusive-category-banner {
  width: 100%;
  height: 100%;
  min-height: 190px;
  display: block;
  object-fit: cover;
}

.manage-exclusive-category-logo {
  position: absolute;
  left: 14px;
  bottom: 14px;
  width: 62px;
  height: 62px;
  border: 4px solid #ffffff;
  border-radius: 15px;
  background: #ffffff;
  padding: 4px;
  object-fit: contain;
  box-shadow: 0 7px 18px rgba(29, 34, 61, 0.2);
}

.manage-exclusive-category-fields {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-content: start;
  gap: 16px;
}

.manage-exclusive-category-fields label,
.manage-exclusive-category-assets label {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 6.5px;
}

.manage-exclusive-category-fields label>span:first-child,
.manage-exclusive-category-assets label>span:first-child {
  color: #555c76;
  font-size: 0.79rem;
  font-weight: 700;
}

.manage-exclusive-category-fields input,
.manage-exclusive-category-fields textarea,
.manage-exclusive-category-assets input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.manage-exclusive-category-fields textarea {
  min-height: 84px;
  resize: vertical;
}

.manage-exclusive-category-assets {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(170px, 210px);
  align-items: end;
  gap: 16px;
}

.manage-exclusive-category-assets input[type="file"] {
  min-height: 44px;
  padding: 8px 10px;
  color: transparent;
  font-size: 0.72rem;
}

.manage-exclusive-category-assets input[type="file"]::file-selector-button {
  margin-right: 8px;
  border: 1px solid #cfd5e5;
  border-radius: 8px;
  background: #ffffff;
  padding: 6px 10px;
  color: #31384f;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.manage-exclusive-category-assets .manage-schedules-active-switch,
.manage-exclusive-category-active-field {
  align-self: stretch;
  justify-content: center;
  border: 1px solid #e0e3ef;
  border-radius: 12px;
  background: #f8f8fc;
  padding: 12px 14px;
}

.manage-exclusive-category-actions {
  flex: 0 0 auto;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  border-top: 1px solid #e5e7f0;
  background: #ffffff;
  padding: 16px 24px;
}

.manage-exclusive-submit-row {
  display: flex;
  justify-content: flex-end;
}

.manage-exclusive-submit-row .page-modal-actions {
  margin-left: auto;
}

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

  .manage-exclusive-assets-row,
  .manage-exclusive-category-assets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .manage-exclusive-assets-row .manage-schedules-active-switch,
  .manage-exclusive-category-assets .manage-schedules-active-switch {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {

  .manage-exclusives-surface,
  .manage-exclusives-main {
    min-height: auto;
  }

  .manage-exclusives-header {
    align-items: stretch;
  }

  .manage-exclusives-toolbar,
  .manage-exclusives-header .masterclass-header-actions,
  .manage-exclusives-header .membership-toolbar-btn {
    width: 100%;
  }

  .manage-exclusives-grid,
  .manage-exclusive-form,
  .manage-exclusive-assets-row,
  .manage-exclusive-category-row,
  .manage-exclusive-category-fields,
  .manage-exclusive-category-assets {
    grid-template-columns: 1fr;
  }

  .manage-exclusive-category-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .manage-exclusive-category-toolbar .membership-toolbar-btn {
    width: 100%;
  }

  .manage-exclusive-category-assets,
  .manage-exclusive-assets-row .manage-schedules-active-switch,
  .manage-exclusive-category-assets .manage-schedules-active-switch {
    grid-column: auto;
  }

  .manage-exclusive-category-manager-content {
    padding: 16px;
  }

  .manage-exclusive-preview,
  .manage-exclusive-preview-banner {
    min-height: 190px;
    height: 190px;
  }

  .manage-exclusive-preview-logo {
    left: 16px;
    width: 68px;
    height: 68px;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-width: var(--admin-min-width);
  margin: 0;
  font-family: "Manrope", "Segoe UI", sans-serif;
  color: var(--text-main);
  background: var(--page-bg);
  overflow-x: auto;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

img,
svg {
  vertical-align: middle;
}

button,
input,
select,
textarea {
  min-width: 0;
  margin: 0;
  font: inherit;
}

input,
select,
textarea {
  color: inherit;
}

label,
form,
fieldset {
  min-width: 0;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
}

input[type="search"] {
  -webkit-appearance: none;
  appearance: none;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none;
}

button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  transition:
    transform 0.18s ease,
    filter 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
}

button:hover:not(:disabled),
input[type="button"]:hover:not(:disabled),
input[type="submit"]:hover:not(:disabled),
input[type="reset"]:hover:not(:disabled) {
  transform: translateY(-1px);
  filter: brightness(1.03);
}

button:disabled,
input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled {
  cursor: not-allowed;
}

/* Login Page (login.php) */

.login-body {
  min-width: 0;
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
  overflow-x: hidden;
  background: #f2f5f7;
}

.login-body::before,
.login-body::after {
  content: "";
  position: fixed;
  z-index: 0;
  pointer-events: none;
  border: 4px dashed rgba(111, 104, 184, 0.82);
  border-radius: 50%;
}

.login-body::before {
  width: 770px;
  height: 430px;
  top: -154px;
  left: -150px;
  transform: rotate(-19deg);
}

.login-body::after {
  width: 760px;
  height: 380px;
  right: -210px;
  bottom: -138px;
  transform: rotate(-19deg);
}

.login-shell {
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: 48px 20px;
}

.login-card {
  width: min(460px, 100%);
  min-height: 650px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: var(--card);
  border: 1px solid rgba(138, 146, 157, 0.18);
  border-radius: 26px;
  padding: 50px 48px 40px;
  box-shadow: 0 18px 34px rgba(36, 43, 53, 0.12);
}

.login-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}

.login-brand-emblem {
  display: block;
  width: 152px;
  height: 152px;
  max-width: 152px;
  max-height: 152px;
  flex: 0 0 auto;
  object-fit: contain;
}

.login-brand-title {
  display: block;
  width: 132px;
  max-width: 132px;
  height: auto;
  flex: 0 0 auto;
  object-fit: contain;
}

.login-portal-label {
  margin: -3px 0 0;
  font-family: "Outfit", "Manrope", sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #6f68b8;
}

.login-form-wrap {
  width: 100%;
  margin-top: 44px;
}

.login-alert {
  margin: 0 0 22px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid #efb8c0;
  background: linear-gradient(180deg, #fff6f7 0%, #fce8ea 100%);
  color: #b83a47;
  font-size: 0.91rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
  animation: loginAlertIn 0.25s ease-out;
}

.login-alert-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  display: inline-flex;
  color: #cd4b4b;
}

.login-alert-icon svg {
  width: 100%;
  height: 100%;
}

.login-alert-text {
  line-height: 1.35;
}

@keyframes loginAlertIn {
  0% {
    opacity: 0;
    transform: translateY(-4px) scale(0.99);
  }

  60% {
    opacity: 1;
    transform: translateY(0) scale(1.005);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.login-form {
  display: grid;
  gap: 16px;
}

.login-input-group {
  position: relative;
  display: flex;
  align-items: center;
}

.login-input-icon {
  position: absolute;
  left: 20px;
  top: 50%;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #6f68b8;
  transform: translateY(-50%);
  pointer-events: none;
}

.login-input-icon svg {
  width: 100%;
  height: 100%;
}

.login-form input {
  width: 100%;
  min-height: 54px;
  border: 2px solid #dedede;
  border-radius: 9px;
  padding: 12px 16px 12px 62px;
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 0.96rem;
  font-weight: 500;
  color: var(--text-main);
  background: #ffffff;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}

.login-form input::placeholder {
  color: #7d7f87;
  opacity: 1;
}

.login-form input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(111, 104, 184, 0.14);
  outline: none;
  background: #fffefe;
}

.login-form .login-submit {
  border: 0;
  border-radius: 7px;
  background: var(--brand);
  color: #ffffff;
  min-height: 56px;
  font-family: "Manrope", "Inter", sans-serif;
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 13px 16px;
  margin-top: 16px;
  cursor: pointer;
  transition:
    background-color 0.18s ease,
    transform 0.18s ease,
    box-shadow 0.18s ease;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  isolation: isolate;
}

.login-form .login-submit:hover {
  background: var(--brand-dark);
  transform: translateY(-1px);
  box-shadow: 0 12px 22px rgba(111, 104, 184, 0.24);
}

.login-submit-loading {
  display: none;
}

.login-form.is-submitting .login-submit,
.login-form .login-submit.is-loading {
  cursor: wait;
  pointer-events: none;
}

.login-form .login-submit.is-loading .login-submit-label {
  display: none;
}

.login-form .login-submit.is-loading .login-submit-loading {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.94rem;
  font-weight: 700;
}

.login-form .login-submit.is-loading .login-submit-loading::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #ffffff;
  animation: loginSpinner 0.7s linear infinite;
}

@keyframes loginSpinner {
  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 640px) {
  .login-shell {
    padding: 26px 16px;
  }

  .login-card {
    min-height: auto;
    padding: 38px 24px 30px;
    border-radius: 22px;
  }

  .login-brand-emblem {
    width: 130px;
    height: 130px;
  }

  .login-brand-title {
    width: 118px;
  }

  .login-form-wrap {
    margin-top: 34px;
  }

  .login-form .login-submit {
    margin-top: 14px;
  }
}

/* Header (header.php) */

.app-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1200;
  width: 100%;
  min-width: var(--admin-min-width);
  background: #ffffff;
  border-bottom: 1px solid #d9dde6;
  box-shadow: 0 2px 10px rgba(22, 35, 64, 0.05);
}

.header-inner {
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
}

.header-left-group {
  display: flex;
  align-items: center;
  gap: 18px;
}

.header-logo-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  padding-left: 12px;
  border-radius: 8px;
}

.header-logo-link::before {
  content: none;
}

.header-logo {
  height: 46px;
  width: auto;
  object-fit: contain;
  transition: transform 0.22s ease;
}

.header-logo-link:hover .header-logo,
.header-logo-link:focus-visible .header-logo {
  transform: translateX(3px);
}

.header-menu-btn {
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  display: grid;
  place-items: center;
  gap: 5px;
  padding: 9px 8px;
  cursor: pointer;
}

.header-menu-btn span {
  display: block;
  width: 24px;
  height: 2.4px;
  border-radius: 2px;
  background: #ffffff;
  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

.header-menu-btn:hover {
  background: rgba(255, 255, 255, 0.14);
}

body.sidenav-open .header-menu-btn span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

body.sidenav-open .header-menu-btn span:nth-child(2) {
  opacity: 0;
}

body.sidenav-open .header-menu-btn span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}

.header-profile-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.header-avatar-btn {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  background: #ffffff;
  color: #17458b;
  border: 1px solid #cfd6e5;
  border-radius: 999px;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}

.header-avatar-btn:hover {
  background-color: #eef3fb;
  transform: translateY(-1px);
}

.header-avatar-btn svg,
.header-home-btn svg,
.dropdown-link svg {
  width: 22px;
  height: 22px;
  display: block;
}

.header-home-btn {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  color: #17458b;
  border: 1px solid #cfd6e5;
  border-radius: 999px;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    transform 0.2s ease;
}

.header-home-btn:hover {
  background-color: #eef3fb;
  transform: translateY(-1px);
}

.header-dropdown {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  width: min(320px, calc(100vw - 24px));
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid #dde3ef;
  box-shadow: 0 14px 28px rgba(27, 54, 108, 0.12);
  overflow: hidden;
}

.header-dropdown[hidden] {
  display: none;
}

.dropdown-header {
  padding: 18px 24px 14px;
  border-bottom: 1px solid var(--line);
}

.dropdown-admin-name {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.1;
  color: #193f83;
}

.dropdown-admin-username {
  margin: 8px 0 0;
  color: #6a7487;
  font-size: 0.92rem;
}

.dropdown-menu {
  padding: 10px 0 14px;
}

.dropdown-link {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  color: #324057;
  font: inherit;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 24px;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    padding-left 0.2s ease;
}

.dropdown-link:hover {
  background: #eef3fb;
  color: #193f83;
  padding-left: 28px;
}

.dropdown-link.logout-link {
  color: var(--danger);
}

.dropdown-link.logout-link:hover {
  color: #c13241;
  background: #f9e7e9;
}

/* Header account modals */

.header-account-modal .ws-default-modal-dialog {
  width: min(760px, 100%);
  max-height: calc(100vh - 44px);
  overflow-y: auto;
  overflow-x: hidden;
}

.header-account-modal .ws-default-modal-head>div {
  min-width: 0;
}

.header-account-modal .ws-default-modal-head p {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.78rem;
  font-weight: 600;
}

.header-profile-modal-body {
  display: grid;
  gap: 20px;
  padding: 20px;
}

.header-profile-identity {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  border: 1px solid #dddff0;
  border-radius: 16px;
  background: linear-gradient(135deg, #f6f3ff 0%, #eef4ff 100%);
}

.header-profile-initials {
  flex: 0 0 auto;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(145deg, #746bc3, #5443a3);
  box-shadow: 0 10px 22px rgba(84, 67, 163, 0.22);
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.header-profile-identity h3,
.header-profile-identity p,
.header-profile-permissions h3 {
  margin: 0;
}

.header-profile-identity h3 {
  color: #241641;
  font-size: 1.08rem;
}

.header-profile-identity p {
  margin-top: 4px;
  color: #6f68b8;
  font-size: 0.82rem;
  font-weight: 700;
}

.header-profile-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.header-profile-field {
  min-width: 0;
  display: grid;
  gap: 6.5px;
  padding: 14px 16px;
  border: 1px solid #e0e4f0;
  border-radius: 13px;
  background: #fbfcff;
}

.header-profile-field span {
  color: #747b91;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.035em;
}

.header-profile-field strong {
  overflow-wrap: anywhere;
  color: #24263a;
  font-size: 0.92rem;
}

.header-profile-permissions {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid #e0e4f0;
  border-radius: 14px;
  background: #ffffff;
}

.header-profile-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.header-profile-section-head h3 {
  color: #341d5e;
  font-size: 0.92rem;
}

.header-profile-section-head>span {
  color: #7a8093;
  font-size: 0.76rem;
  font-weight: 700;
}

.header-profile-permission-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-height: 180px;
  overflow-y: auto;
}

.header-profile-permission-chip {
  padding: 7px 10px;
  border: 1px solid #ded8f2;
  border-radius: 999px;
  background: #f5f2fd;
  color: #554c94;
  font-size: 0.76rem;
  font-weight: 700;
}

.header-profile-permission-empty {
  color: #80869a;
  font-size: 0.82rem;
}

.header-password-form {
  display: grid;
  gap: 20px;
}

.header-password-form>label,
.header-password-grid label {
  display: grid;
  gap: 6.5px;
}

.header-password-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.header-password-intro {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid #dddff0;
  border-radius: 14px;
  background: linear-gradient(135deg, #f8f6ff, #f2f6ff);
}

.header-password-lock {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: #6f68b8;
  color: #ffffff;
}

.header-password-lock svg {
  width: 22px;
  height: 22px;
}

.header-password-intro strong {
  color: #341d5e;
  font-size: 0.88rem;
}

.header-password-intro p {
  margin: 4px 0 0;
  color: #727a90;
  font-size: 0.78rem;
  line-height: 1.45;
}

.header-account-feedback {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 700;
}

.header-account-feedback.is-error {
  border: 1px solid #f0c5cb;
  background: #fff1f3;
  color: #ad3140;
}

.header-account-feedback[hidden] {
  display: none;
}

@media (max-width: 640px) {
  .header-account-modal {
    padding: 12px;
  }

  .header-profile-details,
  .header-password-grid {
    grid-template-columns: 1fr;
  }

  .header-profile-modal-body,
  .header-password-form {
    padding: 16px;
  }

  .header-account-modal .ws-default-modal-head p {
    display: none;
  }
}

/* Shared Modal (header.php) */

body.ws-modal-open {
  overflow: hidden;
}

.ws-modal {
  position: fixed;
  inset: 0;
  z-index: 2400;
  display: grid;
  place-items: center;
  padding: 18px;
}

.ws-modal[hidden] {
  display: none !important;
}

.ws-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 23, 42, 0.55);
}

.ws-modal-dialog {
  position: relative;
  width: min(420px, 100%);
  border-radius: 14px;
  border: 0;
  background: #ffffff;
  box-shadow: 0 24px 40px rgba(24, 36, 63, 0.28);
  overflow: hidden;
  padding: 20px;
}

.ws-modal-title {
  margin: -20px -20px 12px;
  padding: 14px 20px;
  font-size: 1.18rem;
  color: #ffffff;
  background: var(--brand);
}

.ws-modal-message {
  margin: 8px 0 0;
  font-size: 0.94rem;
  line-height: 1.55;
  color: #425173;
}

.ws-modal-actions {
  margin-top: 18px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.ws-modal-button {
  border: 0;
  border-radius: 9px;
  min-width: 96px;
  padding: 9px 14px;
  font: inherit;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
}

.ws-modal-button.is-cancel {
  background: #ffffff;
  color: var(--brand);
  border: 1px solid #ccbce8;
}

.ws-modal-button.is-confirm {
  background: var(--brand);
  color: #ffffff;
}

.ws-modal-button.is-confirm.is-danger {
  background: #6f68b8;
  color: #ffffff;
}

.ws-modal-button:hover {
  filter: brightness(1.03);
}

/* Page Modals (pages/*.php) */

.page-modal {
  position: fixed;
  inset: 0;
  z-index: 2300;
  display: grid;
  place-items: center;
  padding: 22px;
}

.page-modal[hidden] {
  display: none !important;
}

.page-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16, 23, 42, 0.55);
}

.page-modal-dialog {
  position: relative;
  width: min(720px, 100%);
  max-height: calc(100vh - 44px);
  overflow: auto;
  border-radius: 14px;
  border: 0;
  background: #ffffff;
  box-shadow: 0 24px 40px rgba(24, 36, 63, 0.28);
  padding: 16px;
}

.page-modal-lg {
  width: min(760px, 100%);
}

.page-modal-xl {
  width: min(980px, 100%);
}

.page-modal-head {
  margin: -16px -16px 0;
  padding: 14px 16px;
  background: var(--brand);
  border-radius: 14px 14px 0 0;
  border-bottom: 1px solid #d7c8ef;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.page-modal-head h2 {
  margin: 0;
  font-size: 1.08rem;
  color: #ffffff;
}

.page-modal-close {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #ffffff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

.page-modal-close:hover {
  background: rgba(255, 255, 255, 0.14);
}

.page-modal-actions {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.page-modal-actions .application-action-button {
  margin: 0;
  background: var(--brand);
  color: #ffffff;
}

.page-modal-actions .membership-toolbar-reset {
  padding: 8px 14px;
  background: #ffffff;
  color: var(--brand);
  border: 1px solid #ccbce8;
}

.page-modal-actions .membership-toolbar-reset:hover {
  background: #f6f1ff;
}

/* Application Layout (index.php, pages/*.php) */

.app-layout {
  min-width: var(--admin-min-width);
  min-height: 100vh;
  padding-top: var(--header-height);
}

.app-content {
  margin-left: 0;
  padding: 0;
  min-height: calc(100vh - var(--header-height));
  width: 100%;
}

.content-frame {
  background: #edf1fa;
  border-radius: 0;
  padding: 24px;
  min-height: calc(100vh - var(--header-height));
  box-shadow: inset 6px 0 10px -8px rgba(83, 97, 132, 0.18);
}

body.sidenav-open .content-frame {
  box-shadow: inset 8px 0 12px -9px rgba(83, 97, 132, 0.24);
}

.content-surface {
  background: #ffffff;
  border-radius: 8px;
  min-height: calc(100vh - var(--header-height) - 80px);
  padding: 28px;
  box-shadow: 0 6px 20px rgba(76, 91, 128, 0.2);
}

.content-surface-membership,
.content-surface-masterclass,
.content-surface-user-accounts {
  display: flex;
  flex-direction: column;
}

body.sidenav-open .content-surface {
  box-shadow: 0 8px 24px rgba(76, 91, 128, 0.24);
}

/* Home Page (index.php) */

.app-layout-home .app-content {
  background: #ffffff;
}

.home-dashboard-wrap {
  position: relative;
  min-height: calc(100vh - var(--header-height));
  padding: 80px;
  background: #f2f4f7;
}

.home-module-search {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.home-module-search-toggle {
  display: inline-flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid #cfd6e5;
  border-radius: 999px;
  background: #ffffff;
  color: #17458b;
  cursor: pointer;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    background 0.2s ease;
}

.home-module-search-toggle svg,
.home-module-search-field svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.home-module-search-toggle:hover,
.home-module-search-toggle:focus-visible {
  transform: translateY(-1px);
  background: #eef3fb;
  outline: none;
}

.home-module-search-field {
  display: flex;
  width: 0;
  height: 42px;
  align-items: center;
  gap: 10px;
  overflow: hidden;
  border: 1px solid rgba(119, 111, 190, 0);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  color: #6f68b8;
  opacity: 0;
  transform: translateX(18px);
  box-shadow: 0 12px 26px rgba(57, 70, 106, 0.12);
  pointer-events: none;
  transition:
    width 0.28s ease,
    padding 0.28s ease,
    opacity 0.2s ease,
    transform 0.28s ease,
    border-color 0.2s ease;
}

.home-module-search.is-open .home-module-search-field {
  width: min(320px, calc(100vw - 150px));
  padding: 0 16px;
  border-color: rgba(119, 111, 190, 0.28);
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.home-module-search-field input {
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  color: #1d2440;
  font: 500 14px/1.2 "Inter", "Manrope", sans-serif;
  outline: none;
}

.home-module-search-field input::placeholder {
  color: #7c789d;
}

.home-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(230px, 1fr));
  gap: 24px;
}

.home-module-tile {
  position: relative;
  display: flex;
  width: 100%;
  height: 240px;
  padding: 20px 24px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  border-radius: 28px;
  border: 0.5px solid rgba(214, 214, 214, 0.25);
  background: #ffffff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.home-module-tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(36, 27, 55, 0.12);
  border-color: rgba(97, 48, 161, 0.26);
}

.home-module-badge {
  position: absolute;
  top: 22px;
  right: 24px;
  min-width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 3px solid #ffffff;
  border-radius: 999px;
  background: #e23d4f;
  padding: 0 8px;
  color: #ffffff;
  font-family: "Inter", "Manrope", sans-serif;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 10px 20px rgba(226, 61, 79, 0.28);
  pointer-events: none;
}

.home-module-icon {
  display: flex;
  width: 70px;
  height: 70px;
  padding: 14px;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  border-radius: 14px;
  background: #6f68b8;
  box-shadow: 0 5.25px 7px rgba(0, 0, 0, 0.12);
  color: #ffffff;
}

.home-module-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.home-module-title {
  align-self: stretch;
  color: #2f2f32;
  text-align: center;
  font-family: "Inter", "Manrope", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
}

.home-module-tile.is-placeholder {
  cursor: pointer;
}

.home-module-tile.is-hidden-by-search {
  display: none;
}

.home-module-empty {
  margin: 24px 0 0;
  padding: 18px 22px;
  border-left: 4px solid #6f68b8;
  border-radius: 14px;
  background: #ffffff;
  color: #4e4778;
  box-shadow: 0 10px 24px rgba(57, 70, 106, 0.08);
  font: 500 15px/1.4 "Inter", "Manrope", sans-serif;
}

@media (max-width: 900px) {
  .home-dashboard-wrap {
    padding: 76px 28px 36px;
  }

  .home-dashboard-grid {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }
}

@media (max-width: 620px) {
  .header-actions .home-module-search.is-open {
    position: absolute;
    right: 104px;
    top: 50%;
    transform: translateY(-50%);
    width: calc(100vw - 180px);
  }

  .header-actions .home-module-search.is-open .home-module-search-field {
    width: 100%;
  }

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

/* Membership Page (pages/membership.php) */

.membership-main {
  padding: 0;
}

body:not(.membership-detail-view) .membership-main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.membership-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 20px;
  flex-wrap: wrap;
}

.membership-header-copy {
  min-width: 250px;
}

.membership-header-copy.is-detail {
  flex: 1;
  min-width: 0;
  padding-top: -10px;
  /* 'back to list' button to top of header */
}

.membership-back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #6f68b8;
  font-family: "Inter", "Manrope", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.membership-back-icon {
  color: #6f68b8;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}

.membership-header-copy h1 {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: "Inter", "Manrope", sans-serif;
  font-size: 28px;
  font-style: normal;
  line-height: normal;
}

.membership-header-copy.is-detail h1 {
  margin-top: 12.5px;
  /* 'membership profile' to 'back to list' button */
}

.membership-detail-view .membership-header-copy.is-detail h1 {
  font-size: 28px;
  gap: 6px;
}

.membership-title-primary {
  color: #6f68b8;
  font-weight: 700;
}

.membership-title-secondary {
  color: #2f2f32;
  font-weight: 600;
}

.membership-header-copy .membership-count {
  margin: 4px 0 0;
  font-family: "Inter", "Manrope", sans-serif;
  font-size: 14px;
  font-style: normal;
  line-height: normal;
}

.membership-header-copy:not(.is-detail) .membership-count {
  margin-top: 4px;
  margin-bottom: 0;
}

.membership-count-number {
  color: #6f68b8;
  font-weight: 700;
}

.membership-count-label {
  color: #71717a;
  font-weight: 400;
}

.membership-header-copy>p:not(.membership-count) {
  margin: 10px 0 0;
}

.membership-toolbar {
  margin-top: 0;
  margin-left: auto;
  flex: 1 1 600px;
  width: min(100%, 860px);
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(150px, 190px) auto;
  gap: 10px;
  align-items: end;
  max-width: 860px;
}

.membership-search,
.membership-filter {
  display: grid;
  gap: 6px;
}

.membership-search {
  max-width: none;
}

.membership-search span,
.membership-filter span {
  font-size: 0.78rem;
  font-weight: 700;
  color: #5c5d72;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.membership-search input,
.membership-filter select {
  width: 100%;
  height: var(--toolbar-control-height);
  min-height: var(--toolbar-control-height);
  border: 1px solid #d4daea;
  border-radius: 10px;
  padding: 0 11px;
  font: inherit;
  line-height: 1.2;
  color: #2a2d3d;
  background: #ffffff;
}

.membership-toolbar-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
}

.membership-toolbar-btn,
.membership-toolbar-reset {
  min-height: var(--toolbar-control-height);
  border-radius: 10px;
  padding: 0 14px;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.2;
}

.membership-toolbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: var(--brand);
  color: #ffffff;
  cursor: pointer;
  text-decoration: none;
}

.membership-toolbar-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  margin-left: 8px;
  padding: 0 7px;
  border-radius: 999px;
  background: #ffffff;
  color: var(--brand);
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1;
}

.membership-toolbar-reset {
  border: 1px solid #cad4ea;
  color: #2d4371;
  background: #ffffff;
}

.membership-removal-requests-modal .page-modal-dialog {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.membership-removal-modal-body {
  padding: 22px;
  overflow-y: auto;
}

.membership-removal-request-list {
  display: grid;
  gap: 16px;
}

.membership-removal-request-card {
  border: 1px solid #dce3f2;
  border-radius: 18px;
  background: linear-gradient(135deg, #ffffff 0%, #f8f7ff 100%);
  padding: 18px;
  box-shadow: 0 18px 34px rgba(43, 43, 84, 0.08);
}

.membership-removal-request-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e4e8f3;
}

.membership-removal-request-head .member-mini-profile {
  margin: 0;
}

.membership-removal-request-head h3 {
  margin: 0;
  color: #1f2433;
  font-size: 1.05rem;
  line-height: 1.25;
}

.membership-removal-request-head p {
  margin: 3px 0 0;
  color: #74809b;
  font-size: 0.9rem;
}

.membership-removal-request-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.membership-removal-request-grid div {
  min-width: 0;
  border: 1px solid #e2e7f4;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.78);
  padding: 12px;
}

.membership-removal-request-grid span,
.membership-removal-remarks span {
  display: block;
  margin-bottom: 6px;
  color: #68728d;
  font-size: 0.82rem;
  font-weight: 800;
}

.membership-removal-request-grid strong {
  display: block;
  color: #182033;
  font-size: 0.94rem;
  overflow-wrap: anywhere;
}

.membership-removal-request-grid small {
  display: block;
  margin-top: 4px;
  color: #7c879f;
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}

.membership-removal-review-form {
  margin-top: 16px;
}

.membership-removal-remarks textarea {
  width: 100%;
  min-height: 92px;
  border: 1px solid #d4daea;
  border-radius: 14px;
  padding: 12px 14px;
  color: #2a2d3d;
  font: inherit;
  resize: vertical;
  background: #ffffff;
}

.membership-removal-review-form .page-modal-actions {
  margin-top: 16px;
}

.membership-removal-review-form .application-action-button.is-decline {
  background: #d84a5f;
  color: #ffffff;
}

.membership-removal-reviewed-note {
  margin: 14px 0 0;
  border-radius: 14px;
  background: #f3f1ff;
  color: #4d4f6e;
  padding: 12px 14px;
  line-height: 1.45;
}

@media (max-width: 900px) {
  .membership-removal-request-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .membership-removal-request-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .membership-removal-request-grid {
    grid-template-columns: 1fr;
  }
}

.kids-journey-toolbar {
  margin-top: 0;
  margin-left: auto;
  flex: 1 1 600px;
  width: min(100%, 860px);
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto;
  gap: 10px;
  align-items: end;
  max-width: 860px;
}

.kids-journey-toolbar .membership-toolbar-actions {
  justify-content: flex-end;
}

.kids-journey-qa-modal-dialog {
  width: min(880px, 100%);
  max-height: calc(100vh - 44px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.kids-journey-qa-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  gap: 16px;
  background: #f7f8fc;
}

.kids-journey-qa-modal-subtitle {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: #6f68b8;
}

.kids-journey-qa-empty {
  margin: 0;
}

.kids-journey-qa-list {
  display: grid;
  gap: 14px;
}

.kids-journey-qa-card {
  border: 1px solid #e3e7f2;
  border-radius: 14px;
  background: #ffffff;
  padding: 14px 14px 12px;
  display: grid;
  gap: 10px;
}

.kids-journey-qa-card h3 {
  margin: 0;
  color: #333742;
  font-size: 1.02rem;
  font-weight: 500;
  line-height: 1.35;
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
}

.kids-journey-qa-question-number {
  color: #6f68b8;
  font-weight: 700;
}

.kids-journey-qa-question-description {
  margin: 0;
  color: #666b7e;
  font-size: 0.9rem;
  line-height: 1.35;
}

.kids-journey-qa-meta {
  margin: 0;
  color: #7b8093;
  font-size: 0.76rem;
  font-weight: 700;
}

.kids-journey-qa-answer-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 7px;
}

.kids-journey-qa-answer-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #323744;
  font-size: 0.9rem;
  line-height: 1.35;
}

.kids-journey-qa-answer-indicator {
  width: 16px;
  height: 16px;
  border: 2px solid #8f87cc;
  border-radius: 50%;
  flex: 0 0 16px;
  margin-top: 2px;
  position: relative;
  background: #ffffff;
}

.kids-journey-qa-answer-list.is-multiple .kids-journey-qa-answer-indicator {
  border-radius: 5px;
}

.kids-journey-qa-answer-item.is-selected .kids-journey-qa-answer-indicator {
  background: #6f68b8;
  border-color: #6f68b8;
}

.kids-journey-qa-answer-list.is-single .kids-journey-qa-answer-item.is-selected .kids-journey-qa-answer-indicator::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffffff;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.kids-journey-qa-answer-copy {
  display: grid;
  gap: 1px;
}

.kids-journey-qa-answer-copy strong {
  font-weight: 500;
  color: #2f3240;
}

.kids-journey-qa-answer-description {
  color: #666b7e;
  font-size: 0.83rem;
}

.membership-error,
.membership-empty {
  margin-top: 20px;
  background: #ffffff;
  border-left: 4px solid var(--brand);
  border-radius: 12px;
  padding: 14px 16px;
  color: #3f3f4d;
  box-shadow: var(--soft-shadow);
}

.membership-flash {
  margin-top: 18px;
  border-radius: 12px;
  padding: 12px 15px;
  font-size: 0.9rem;
  box-shadow: var(--soft-shadow);
}

.membership-flash.is-success {
  background: #eaf7ee;
  border-left: 4px solid #2f9b5d;
  color: #1f6f42;
}

.membership-flash.is-error {
  background: #fbeaec;
  border-left: 4px solid #c63f51;
  color: #922f3e;
}

.application-list {
  margin-top: 20px;
  display: grid;
  gap: 14px;
}

.application-card {
  background: #fcfcfd;
  border-radius: 16px;
  box-shadow: var(--soft-shadow);
  overflow: hidden;
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease;
}

body:not(.membership-detail-view) .application-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(44, 24, 80, 0.13);
}

body:not(.membership-detail-view) .application-card:hover .application-summary {
  background: #ece8f8;
}

.application-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  background: var(--brand-soft);
}

button.application-summary {
  width: 100%;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
}

.application-summary::-webkit-details-marker {
  display: none;
}

.application-summary h2 {
  margin: 0;
  font-size: 1.08rem;
  color: #2c1850;
}

.application-summary-main {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.application-summary-avatar {
  width: 58px;
  height: 58px;
  border-radius: 999px;
  object-fit: cover;
  background: #ffffff;
  border: 2px solid #dfe3f2;
  flex-shrink: 0;
}

.application-summary-copy {
  min-width: 0;
}

.application-summary-meta {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.summary-meta-item {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid #d9dff1;
  background: #ffffff;
  padding: 4px 10px;
  font-size: 0.74rem;
  font-weight: 600;
  color: #4a5372;
  line-height: 1.2;
}

.application-summary p {
  margin: 4px 0 0;
  color: #5f5b73;
  font-size: 0.93rem;
}

.membership-main .application-card {
  background: #ffffff;
  border: 1px solid #e7e7ea;
  border-radius: 10px;
  box-shadow: none;
}

.membership-main .application-list {
  margin-top: 34px;
}

.membership-detail-view .membership-main .application-list {
  margin-top: 20px;
  /* fam banner to header */
  gap: 0;
}

.membership-detail-view .membership-main .application-card {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body:not(.membership-detail-view) .membership-main .application-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(47, 47, 50, 0.08);
}

body:not(.membership-detail-view) .membership-main .application-card:hover .application-summary {
  background: #f3f3f5;
}

.membership-main .application-summary {
  padding: 20px 18px;
  gap: 16px;
  align-items: flex-start;
  background: #f8f8f8;
}

.membership-main .application-summary-main {
  gap: 14px;
}

.membership-main .application-summary-avatar {
  width: 50px;
  height: 50px;
  border: 1px solid #d7d7dc;
}

.membership-main .application-summary-copy {
  display: grid;
  gap: 6px;
}

.membership-main .application-summary h2 {
  margin: 0;
  color: #2f2f32;
  font-family: "Inter", "Manrope", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.membership-main .application-summary-meta {
  margin-top: 0;
  display: grid;
  gap: 10px;
}

.membership-main .summary-membership-line {
  color: #71717a;
  font-family: "Inter", "Manrope", sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.membership-main .summary-membership-line span {
  color: #71717a;
  font-weight: 400;
}

.membership-main .summary-stats-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 38px;
}

.membership-main .summary-stat-item {
  display: grid;
  gap: 2px;
  min-width: 125px;
}

.membership-main .summary-stat-label {
  color: #71717a;
  font-family: "Inter", "Manrope", sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.membership-main .summary-stat-value {
  color: #2f2f32;
  font-family: "Inter", "Manrope", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.summary-right {
  text-align: right;
  display: flex;
  align-items: flex-start;
  font-size: 0.9rem;
  color: #3f355c;
  flex-shrink: 0;
}

.summary-label {
  display: block;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #8572a8;
  margin-bottom: 3px;
}

.application-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 10px;
  margin-bottom: 0;
}

.membership-main .application-status-badge {
  display: flex;
  width: 120px;
  padding: 8px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 30px;
  font-family: "Inter", "Manrope", sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.application-status-badge.is-pending {
  background: #eceef5;
  color: #616781;
}

.application-status-badge.is-activated {
  background: #e3f6ea;
  color: #1f7d4f;
}

.application-status-badge.is-declined {
  background: #fae8eb;
  color: #a53848;
}

.application-status-badge.is-blacklisted {
  background: #111827;
  color: #ffffff;
}

.application-status-badge.is-expired {
  background: #fff3cd;
  color: #9a6700;
}

.membership-main .application-status-badge.is-activated {
  background: #d7ffe2;
  color: #34a855;
}

.membership-main .application-status-badge.is-pending {
  background: #e6e6e6;
  color: #71717a;
}

.membership-main .application-status-badge.is-blacklisted {
  background: #2f2f32;
  color: #ffffff;
}

.membership-main .application-status-badge.is-declined {
  background: #ffe0e0;
  color: #cd4b4b;
}

.application-content {
  padding: 18px 20px 22px;
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 14px;
}

body:not(.membership-detail-view) .application-content {
  display: none;
}

.membership-detail-view .application-card:not(.is-editing) .application-summary {
  display: none;
}

.membership-detail-view .application-card:not(.is-editing) .application-content {
  display: block;
  padding: 0;
}

.membership-detail-view .application-card.is-editing .application-summary {
  cursor: default;
  pointer-events: none;
}

.membership-detail-view .application-card.is-editing .application-content {
  grid-template-columns: 1fr;
}

.membership-detail-view .content-frame {
  background: #ebeff9;
  padding: 22px;
  box-shadow: none;
}

.membership-detail-view .content-surface-membership {
  background: #ffffff;
  border: 1px solid #e3e4e9;
  border-radius: 12px;
  min-height: auto;
  padding: 22px;
  box-shadow: 0 6px 18px rgba(25, 27, 33, 0.05);
}

.membership-detail-view .membership-header {
  align-items: flex-start;
}

.membership-detail-shell {
  display: grid;
  gap: 18px;
  padding: 0;
}

.membership-detail-hero {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}

.membership-family-banner-card,
.membership-detail-summary-card,
.membership-detail-group-card {
  border: 1px solid #d7d8de;
  border-radius: 12px;
  background: #f3f6fb;
}

.membership-family-banner-card {
  overflow: hidden;
  min-height: 315px;
  height: 100%;
  position: relative;
  background: #e8edf8;
}

.membership-family-banner-image-bg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center;
  transform: scale(1.06);
  filter: blur(14px) saturate(1.1);
  opacity: 0.55;
}

.membership-family-banner-image {
  position: absolute;
  inset: 10px;
  z-index: 1;
  display: block;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  min-height: 0;
  object-fit: contain;
  object-position: center;
  padding: 0;
}

.membership-family-banner-card.is-placeholder-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  height: 100%;
}

.membership-family-banner-image.is-placeholder {
  position: static;
  width: 72%;
  height: auto;
  min-height: 0;
  max-height: 220px;
  object-fit: contain;
}

.membership-family-banner-meta {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 12px 14px;
  background: linear-gradient(180deg,
      rgba(20, 21, 26, 0) 0%,
      rgba(20, 21, 26, 0.7) 100%);
}

.membership-family-banner-meta h3 {
  margin: 0;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 700;
}

.membership-family-banner-meta p {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 0.8rem;
}

.membership-detail-summary-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  min-height: 315px;
  height: auto;
  align-self: stretch;
  padding: 20px 16px 39px;
  justify-content: flex-start;
  align-items: stretch;
  border: 0.5px solid rgba(214, 214, 214, 0.6);
  border-radius: 8px;
  background: #f4f3ff;
  gap: 0;
}

.membership-detail-summary-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  column-gap: 16px;
  width: 100%;
  min-width: 0;
  margin-bottom: 28px;
}

.membership-detail-summary-avatar {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid rgba(214, 214, 214, 0.6);
  background: #ffffff;
}

.membership-detail-summary-copy {
  min-width: 0;
}

.membership-detail-summary-copy h2 {
  margin: 0;
  font-size: 20px;
  line-height: 1.2;
  color: #30313a;
  font-family: "Inter", "Manrope", sans-serif;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.membership-detail-summary-copy p {
  margin: 4px 0 0;
  color: #727583;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 400;
  font-family: "Inter", "Manrope", sans-serif;
}

.membership-detail-summary-head .application-status-badge {
  margin-left: 0;
  flex-shrink: 0;
  min-width: 132px;
  min-height: 36px;
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
}

.membership-detail-summary-stats {
  display: grid;
  gap: 28px;
  margin-left: 60px;
  margin-top: 0;
  margin-bottom: 28px;
}

.membership-detail-summary-stats-row {
  display: flex;
  align-items: flex-start;
}

.membership-detail-summary-stats-row.is-members {
  gap: 48px;
}

.membership-detail-summary-stats-row.is-dates {
  gap: 48px;
}

.membership-detail-summary-stats-row.is-dates .membership-detail-summary-stat:nth-child(3) {
  margin-left: 32px;
}

.membership-detail-summary-stat {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.membership-detail-summary-stats span {
  color: #777986;
  font-size: 12px;
  line-height: 1.2;
}

.membership-detail-summary-stats strong {
  color: #343640;
  font-size: 14px;
  line-height: 1.25;
  font-weight: 500;
}

.membership-detail-summary-tools {
  display: none;
}

.membership-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: flex-start;
  margin-top: auto;
  margin-left: 60px;
}

.membership-detail-actions .application-action-button {
  display: flex;
  width: 117px;
  height: 40px;
  min-width: 117px;
  min-height: 40px;
  padding: 0 8px;
  justify-content: center;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  margin: 0;
  border-radius: 6px;
  font-family: "Inter", "Manrope", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}

.membership-detail-actions .application-action-form {
  margin: 0;
}

.membership-detail-actions .application-action-button.is-edit {
  background: #6f68b8;
  color: #ffffff;
  border: 0;
}

.membership-detail-actions-label {
  width: 100%;
  margin: 0;
  color: #707380;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 500;
}

.membership-detail-view .membership-detail-summary-head .application-status-badge.is-pending {
  background: #dddddf;
  color: #747783;
}

.membership-detail-view .membership-detail-summary-head .application-status-badge.is-activated {
  background: #d7ffe2;
  color: #2f8f55;
}

.membership-detail-view .membership-detail-summary-head .application-status-badge.is-declined {
  background: #ffd9d9;
  color: #c84e4e;
}

.membership-detail-view .membership-detail-summary-head .application-status-badge.is-blacklisted {
  background: #31343e;
  color: #ffffff;
}

.membership-detail-view .membership-detail-actions .application-action-button.is-activate {
  background: #6f68b8;
  color: #ffffff;
}

.membership-detail-view .membership-detail-actions .application-action-button.is-decline {
  background: #e76363;
  color: #ffffff;
}

.membership-detail-view .membership-detail-actions .application-action-button.is-blacklist {
  background: #404040;
  color: #ffffff;
}

.membership-detail-view .membership-detail-actions .application-action-note {
  width: 100%;
}

.membership-detail-group-card {
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
  display: grid;
  gap: 10px;
}

.membership-detail-group-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: nowrap;
}

.membership-detail-group-header h3 {
  margin: 0;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}

.membership-group-count {
  color: #6f68b8;
  font-size: 14px;
  font-weight: 700;
}

.membership-group-title {
  color: #676b77;
  font-size: 14px;
  font-weight: 400;
}

.membership-detail-row-grid {
  display: grid;
  gap: 16px;
}

.membership-detail-row-grid.is-child-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.membership-detail-row-stack {
  display: grid;
  gap: 14px;
}

.membership-detail-row-card {
  border: 1px solid #d7dbe6;
  border-radius: 10px;
  background: #f8f8f8;
  padding: 14px 16px;
  display: grid;
  gap: 14px;
}

.membership-detail-row-card.is-child {
  min-height: 148px;
}

.membership-detail-row-card.is-wide {
  grid-template-columns: minmax(0, 1fr) minmax(118px, auto);
  align-items: start;
  gap: 12px 16px;
}

.membership-detail-row-main {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.membership-detail-row-side {
  display: flex;
  min-height: 90px;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  justify-self: end;
}

.membership-detail-row-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: flex-start;
  gap: 12px;
}

.membership-detail-row-main .membership-detail-row-top {
  grid-template-columns: minmax(0, 1fr);
}

.membership-detail-row-top-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.membership-detail-row-avatar {
  width: 46px;
  height: 46px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid #d7d9df;
  background: #ffffff;
}

.membership-detail-row-name-wrap h4 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  color: #31333b;
  font-size: 18px;
  font-family: "Inter", "Manrope", sans-serif;
  font-weight: 700;
  line-height: 1.2;
}

.membership-detail-member-role {
  color: #6f68b8;
  font-size: 0.85em;
  font-weight: 700;
}

.membership-detail-row-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px 24px;
}

.membership-detail-row-fields.is-child {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.membership-detail-row-fields.is-child-wide {
  grid-template-columns: 130px 195px;
  margin-left: 60px;
  margin-top: -2px;
  padding-left: 0;
}

.membership-detail-row-fields.is-wide {
  grid-template-columns: 130px 195px 115px minmax(260px, 1fr);
  margin-left: 60px;
  margin-top: -2px;
  column-gap: 28px;
  padding-left: 0;
}

.membership-detail-row-fields div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.membership-detail-row-fields span {
  color: #777a86;
  font-size: 12px;
}

.membership-detail-row-fields strong {
  color: #353740;
  font-size: 14px;
  font-weight: 500;
  word-break: break-word;
}

.membership-detail-row-fields.is-wide>div:first-child strong {
  white-space: nowrap;
  word-break: normal;
  overflow-wrap: normal;
}

.membership-detail-row-edit-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin-top: 1px;
  color: #41434d;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  transform: translateX(16px);
}

.membership-edit-icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.membership-edit-icon svg {
  display: block;
  width: 16px;
  height: 16px;
}

.info-block {
  background: #faf9fc;
  border: 1px solid #ebe6f5;
  border-radius: 12px;
  padding: 12px;
}

.info-block h3 {
  margin: 0;
  font-size: 0.95rem;
  color: #341d5e;
}

.info-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.info-block-edit-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid #cad4ea;
  background: #ffffff;
  font-size: 0.78rem;
  font-weight: 700;
  color: #2a4e97;
  line-height: 1;
  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease;
}

.info-block-edit-link:hover {
  background: #eef3ff;
  border-color: #b8c8ea;
  color: #1f4488;
}

.info-block-edit-lock {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid #dfe3ec;
  background: #f6f8fc;
  font-size: 0.76rem;
  font-weight: 600;
  color: #8b93a9;
  line-height: 1;
}

.info-edit-form {
  display: grid;
  gap: 8px;
}

.info-edit-form label {
  display: grid;
  gap: 5px;
}

.info-edit-form label span {
  font-size: 0.75rem;
  color: #676a7e;
}

.info-edit-form input,
.info-edit-form select {
  border: 1px solid #d7dded;
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  font-size: 0.85rem;
  color: #252735;
  background: #ffffff;
  width: 100%;
}

.membership-modal-form {
  gap: 10px;
}

.membership-modal-row {
  display: grid;
  gap: 10px;
}

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

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

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

.membership-modal-form .js-child-age[readonly] {
  background: #f4f6fb;
  color: #4d5673;
}

.info-edit-actions {
  margin-top: 4px;
}

.info-block dl {
  margin: 0;
  display: grid;
  grid-template-columns: 135px 1fr;
  gap: 8px 10px;
}

.info-block dt {
  margin: 0;
  color: #706884;
  font-size: 0.82rem;
}

.info-block dd {
  margin: 0;
  color: #242633;
  font-size: 0.86rem;
  word-break: break-word;
}

.member-mini-profile {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.member-mini-avatar {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  object-fit: cover;
  border: 2px solid #dfe3f2;
  background: #ffffff;
}

.member-mini-copy {
  font-size: 0.82rem;
  font-weight: 700;
  color: #4a5372;
}

.welcome-kit-list {
  margin: 0;
  padding-left: 18px;
}

.welcome-kit-list li {
  margin-bottom: 4px;
}

.info-block-actions {
  grid-column: 1 / -1;
}

.info-block-family-members {
  grid-column: 1 / -1;
}

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

.family-member-card {
  background: #ffffff;
  border: 1px solid #e7e3f2;
  border-radius: 10px;
  padding: 10px;
}

.family-member-card .member-mini-copy {
  font-size: 0.8rem;
}

.family-member-card dl {
  margin: 0;
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 7px 9px;
}

.family-member-card dt {
  margin: 0;
  color: #706884;
  font-size: 0.79rem;
}

.family-member-card dd {
  margin: 0;
  color: #242633;
  font-size: 0.83rem;
  word-break: break-word;
}

.application-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.application-action-form {
  margin: 0;
}

.application-action-inline {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.application-action-inline .application-action-form {
  margin-left: auto;
}

.application-action-inline .application-action-button {
  margin: 0;
}

.application-action-button {
  border: 0;
  margin-top: 10px;
  margin-bottom: 10px;
  border-radius: 9px;
  padding: 9px 16px;
  font: inherit;
  font-weight: 700;
  color: #ffffff;
  cursor: pointer;
  transition:
    transform 0.18s ease,
    filter 0.18s ease;
}

.application-action-button:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
}

.application-action-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  filter: none;
}

.application-action-button.is-activate {
  background: var(--brand);
}

.application-action-button.is-decline {
  background: #ce4455;
}

.application-action-button.is-blacklist {
  background: #111827;
}

.membership-member-modal-actions {
  justify-content: space-between;
  gap: 10px;
}

.membership-member-danger-actions,
.membership-member-save-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.membership-member-modal-actions .application-action-button,
.membership-member-modal-actions .membership-toolbar-reset {
  margin-top: 0;
  margin-bottom: 0;
}

.application-action-button.is-freeze {
  background: #b9e7ff;
}

.application-action-button.is-unfreeze {
  background: #16877e;
}

.application-status-badge.is-frozen {
  background: #fff0d2;
  color: #9a5a00;
}

.application-action-inline .application-action-form+.application-action-form {
  margin-left: 0;
}

.application-action-note {
  margin: 0;
  color: #3d4a68;
  font-size: 0.86rem;
  font-weight: 600;
}

.application-action-note.is-declined {
  color: #a53848;
}

.membership-pagination {
  margin-top: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.membership-page-link {
  background: #ffffff;
  border: 1px solid #cad4ea;
  border-radius: 10px;
  padding: 7px 12px;
  color: #2a4e97;
  font-size: 0.85rem;
  font-weight: 700;
}

.membership-page-current {
  font-size: 0.84rem;
  color: #4f5a78;
}

/* Masterclass Page (pages/masterclass.php) */

.masterclass-main {
  padding: 0;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.masterclass-header {
  display: grid;
  grid-template-columns: 1fr 620px auto;
  align-items: end;
  gap: 12px 16px;
}

.masterclass-header-copy {
  min-width: 250px;
}

.masterclass-header-copy h1 {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: "Inter", "Manrope", sans-serif;
  font-size: 28px;
  font-style: normal;
  line-height: normal;
}

.masterclass-header-copy .membership-count {
  margin: 4px 0 0;
  font-family: "Inter", "Manrope", sans-serif;
  font-size: 14px;
  font-style: normal;
  line-height: normal;
}

.masterclass-header-copy .membership-count-number {
  color: #6f68b8;
  font-weight: 700;
}

.masterclass-header-copy .membership-count-label {
  color: #71717a;
  font-weight: 400;
}

.masterclass-header-copy>p:not(.membership-count) {
  margin: 8px 0 0;
  color: #5f6073;
}

.masterclass-header-actions {
  margin-left: 0;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  justify-self: end;
}

.masterclass-header-actions .membership-toolbar-btn {
  margin: 0;
}

.manage-schedules-main .masterclass-header {
  grid-template-columns: minmax(250px, 1fr) auto;
}

.manage-schedules-main .masterclass-header-actions {
  flex-wrap: nowrap;
  align-items: end;
}

.manage-schedules-main .masterclass-header-actions .membership-toolbar-btn {
  min-height: var(--toolbar-control-height);
  white-space: nowrap;
}

.manage-schedules-header-toolbar {
  display: flex;
  align-items: end;
  gap: 10px;
}

.manage-schedules-header-toolbar label:nth-child(1) {
  width: 250px;
}

.manage-schedules-header-toolbar label:nth-child(2) {
  width: 160px;
}

.manage-schedules-header-toolbar label:nth-child(n+3) {
  width: 140px;
}

.manage-schedules-header-toolbar label {
  display: grid;
  gap: 6px;
}

.manage-schedules-header-toolbar span {
  color: #555c76;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.manage-schedules-header-toolbar input,
.manage-schedules-header-toolbar select {
  width: 100%;
  height: var(--toolbar-control-height);
  min-height: var(--toolbar-control-height);
  border: 1px solid #d4dcf0;
  border-radius: 12px;
  background: #ffffff;
  color: #22273a;
  font: inherit;
  padding: 0 12px;
  box-sizing: border-box;
}

.masterclass-inline-search-toolbar {
  margin: 0;
  width: 620px;
  max-width: 620px;
  display: grid;
  grid-template-columns: minmax(240px, 1fr);
  gap: 10px;
  align-items: end;
  justify-self: end;
}

.campaign-toolbar {
  grid-template-columns: minmax(240px, 1fr) minmax(190px, 230px);
}

.masterclass-source-toolbar {
  width: 620px;
  max-width: 620px;
}

.masterclass-inline-search-toolbar+.masterclass-header-actions {
  margin-left: auto;
}

.masterclass-week-navigation {
  width: 100%;
  margin: 14px 0 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.masterclass-week-nav-button {
  width: 34px;
  height: 34px;
  border: 1px solid #c9d3ea;
  border-radius: 10px;
  color: #4f5a78;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.masterclass-week-nav-button:hover,
.masterclass-week-nav-button:focus-visible {
  color: #3f3b95;
  border-color: #9ea8d0;
  background: #f3f2ff;
}

.masterclass-week-nav-label {
  color: #4f5a78;
  font-size: 0.98rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.masterclass-toolbar {
  margin-top: 0;
  margin-left: auto;
  flex: 1 1 600px;
  width: min(100%, 860px);
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(150px, 190px) auto;
  gap: 10px;
  align-items: end;
  max-width: 860px;
}

.workshop-toolbar {
  width: min(100%, 760px);
  max-width: 760px;
  display: grid;
  grid-template-columns: minmax(320px, 1fr) auto;
  gap: 10px;
  align-items: end;
}

.workshop-toolbar .membership-search {
  width: 100%;
  max-width: none;
}

.workshop-toolbar .membership-search input {
  width: 100%;
}

.workshop-toolbar .membership-toolbar-actions {
  display: flex;
  transform: translateY(11px);
  justify-content: flex-end;
  align-items: flex-end;
}

.workshop-toolbar .application-action-button {
  height: 42px;
  white-space: nowrap;
}

.workshop-main {
  min-height: calc(100vh - var(--header-height) - 92px);
}

.workshop-header {
  grid-template-columns: minmax(250px, 1fr) minmax(520px, 760px);
}

.workshop-header .workshop-toolbar {
  width: 100%;
  max-width: none;
  justify-self: stretch;
}

.workshop-main>.default-pagination {
  margin-top: auto;
  padding-top: 18px;
}

.masterclass-search,
.masterclass-filter {
  display: grid;
  gap: 6px;
}

.masterclass-search {
  max-width: none;
}

.masterclass-search span,
.masterclass-filter span {
  font-size: 0.78rem;
  font-weight: 700;
  color: #5c5d72;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.masterclass-search input,
.masterclass-filter select {
  width: 100%;
  border: 1px solid #d4daea;
  border-radius: 10px;
  padding: 9px 11px;
  font: inherit;
  color: #2a2d3d;
  background: #ffffff;
}

.masterclass-create-card {
  margin-top: 16px;
  background: #fcfcfd;
  border-radius: 14px;
  border: 1px solid #ebe6f5;
  box-shadow: var(--soft-shadow);
  padding: 14px;
}

.masterclass-create-card h2 {
  margin: 0 0 12px;
  font-size: 1rem;
  color: #341d5e;
}

.masterclass-create-form,
.masterclass-edit-form {
  display: grid;
  gap: 8px;
}

.masterclass-modal-form {
  margin-top: 12px;
}

.masterclass-create-form .page-modal-actions,
.masterclass-edit-form .page-modal-actions,
.user-accounts-form .page-modal-actions,
.role-edit-form .page-modal-actions,
.compact-form-grid .page-modal-actions {
  grid-column: 1 / -1;
  justify-content: flex-end;
}

.compact-form-grid {
  grid-template-columns: minmax(220px, 320px) minmax(240px, 1fr);
  gap: 10px;
  align-items: start;
}

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

.masterclass-color-category-field {
  display: grid;
  gap: 0.55rem;
}

.masterclass-color-category-picker {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.masterclass-color-category-picker select {
  flex: 1 1 auto;
}

.masterclass-color-swatch {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.85rem;
  border: 1px solid rgba(58, 48, 84, 0.18);
  background: linear-gradient(135deg, #f7f5fb 0%, #ebe6f5 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45);
  flex: 0 0 auto;
}

.workshop-modal-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: -50px;
}

/* Edit Workshop modal scroll fix */
[id^="editWorkshopModal"] .ws-default-modal-dialog {
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

[id^="editWorkshopModal"] .ws-default-modal-head {
  flex: 0 0 auto;
}

[id^="editWorkshopModal"] .workshop-confirm-form {
  overflow-y: auto;
  max-height: calc(100vh - 110px);
  padding-bottom: 24px;
  min-height: 0;
}

.compact-form-grid .field-file input[type="file"] {
  max-width: 320px;
}

.masterclass-create-form label,
.masterclass-edit-form label {
  display: grid;
  gap: 6.5px;
}

.masterclass-create-form label span,
.masterclass-edit-form label span {
  font-size: 0.75rem;
  color: #676a7e;
}

.masterclass-create-form input,
.masterclass-edit-form input,
.masterclass-create-form textarea,
.masterclass-edit-form textarea {
  border: 1px solid #d7dded;
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  font-size: 0.85rem;
  color: #252735;
  background: #ffffff;
}

.masterclass-create-form textarea,
.masterclass-edit-form textarea {
  resize: vertical;
  min-height: 74px;
}

.masterclass-form-actions {
  margin-top: 4px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.masterclass-list {
  margin-top: 16px;
  display: grid;
  gap: 12px;
}

.masterclass-card {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 12px;
  background: #fcfcfd;
  border-radius: 14px;
  border: 1px solid #ebe6f5;
  box-shadow: var(--soft-shadow);
  overflow: hidden;
}

.masterclass-card-media {
  background: #eef2fb;
  min-height: 160px;
}

.masterclass-card-media img {
  width: 100%;
  height: 100%;
  min-height: 160px;
  object-fit: cover;
  display: block;
}

.masterclass-card-body {
  padding: 12px 14px;
  display: grid;
  gap: 8px;
}

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

.masterclass-card-head h3 {
  margin: 0;
  font-size: 1rem;
  color: #2c1850;
}

.masterclass-description {
  margin: 0;
  color: #3e4254;
  font-size: 0.89rem;
  line-height: 1.5;
}

.masterclass-meta {
  margin: 0;
  color: #6a728c;
  font-size: 0.78rem;
}

.masterclass-card-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.masterclass-card-actions .application-action-button {
  margin: 0;
}

.masterclass-toggle-form {
  margin: 0;
}

/* Campaign Banners Page (pages/campaign-banners.php) */

.campaign-card .masterclass-card-body {
  gap: 10px;
}

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

.campaign-family-banner-check {
  display: flex !important;
  align-items: center;
  gap: 8px;
}

.campaign-family-banner-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
}

.campaign-family-banner-check span {
  margin: 0;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 0.83rem !important;
  font-weight: 600 !important;
}

.campaign-route-field-group {
  display: grid;
  gap: 6px;
}

.campaign-route-field-group>label {
  display: grid;
  gap: 6px;
}

.ws-modal-banner-form .manage-schedules-form-row,
.ws-modal-banner-form .manage-schedules-form-row-last {
  grid-template-columns: repeat(3, minmax(170px, 1fr));
}

.ws-modal-two-col-row,
.ws-modal-three-col-row,
.ws-modal-four-col-row {
  display: grid;
  align-items: end;
  gap: 10px;
}

.ws-modal-two-col-row {
  grid-template-columns: repeat(2, minmax(200px, 1fr));
}

.ws-modal-three-col-row {
  grid-template-columns: repeat(3, minmax(170px, 1fr));
}

.ws-modal-four-col-row {
  grid-template-columns: minmax(190px, 1.15fr) minmax(120px, 0.75fr) minmax(150px, 0.8fr) minmax(150px, 0.8fr);
}

.ws-modal-family-active-row {
  display: flex;
  align-items: end;
  justify-content: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.ws-modal-family-active-row>label {
  width: auto;
  min-width: 150px;
}

.ws-modal-memory-active-row {
  display: flex;
  align-items: end;
  justify-content: flex-start;
}

.ws-modal-two-col-row>label,
.ws-modal-three-col-row>label,
.ws-modal-four-col-row>label {
  display: grid;
  gap: 6px;
}

.ws-modal-banner-form label {
  display: grid;
  gap: 6.5px;
}

.ws-default-modal-form> :where(label,
  .field-full:not(.ws-modal-submit-row),
  .ws-modal-two-col-row,
  .ws-modal-three-col-row,
  .ws-modal-four-col-row,
  .manage-schedules-form-row,
  .manage-schedules-description-field,
  .manage-schedules-active-switch)+ :where(label,
  .field-full:not(.ws-modal-submit-row),
  .ws-modal-two-col-row,
  .ws-modal-three-col-row,
  .ws-modal-four-col-row,
  .manage-schedules-form-row,
  .manage-schedules-description-field,
  .manage-schedules-active-switch) {
  padding-top: 10px;
}

.ws-modal-banner-form .field-file input[type="file"] {
  width: 100%;
  max-width: 100%;
}

.ws-modal-banner-form input,
.ws-modal-banner-form select,
.ws-modal-banner-form textarea {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.ws-modal-section-divider {
  border-top: 1px solid #e3e8f4;
  margin-top: 2px;
  padding-top: 2px;
}

.ws-modal-banner-preview-wrap {
  display: grid;
  gap: 8px;
}

.ws-modal-banner-preview-label {
  font-size: 0.79rem;
  font-weight: 700;
  color: #555c76;
}

.ws-modal-banner-preview-image {
  width: 100%;
  min-height: 180px;
  max-height: 260px;
  border-radius: 12px;
  border: 1px solid #d8dff0;
  background: #eef2fb;
  object-fit: cover;
  display: block;
}

.campaign-banner-preview-trigger {
  position: relative;
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: zoom-in;
}

.campaign-banner-preview-trigger .ws-modal-banner-preview-image {
  transition: filter 0.18s ease, transform 0.18s ease;
}

.campaign-banner-preview-trigger:hover .ws-modal-banner-preview-image {
  filter: brightness(0.94);
}

.campaign-banner-preview-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  color: #fff;
  background: rgba(21, 27, 45, 0.72);
  box-shadow: 0 10px 24px rgba(21, 27, 45, 0.2);
  pointer-events: none;
}

.campaign-banner-preview-icon svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}

.ws-modal-submit-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.ws-modal-banner-form .ws-modal-submit-row {
  margin-top: 10px;
}

.ws-inline-switch-label {
  margin: 0;
}

.ws-inline-actions {
  margin-top: 0 !important;
  justify-content: flex-end;
}

/* Campaign Management Page (pages/campaign-management.php) */

.campaign-management-surface {
  display: flex;
  flex-direction: column;
}

.campaign-management-main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.campaign-management-main>.campaign-management-pagination {
  margin-top: auto;
  padding-top: 18px;
}

.campaign-management-header {
  margin-bottom: 2px;
}

.campaign-management-toolbar {
  max-width: 860px;
  grid-template-columns: minmax(260px, 1fr) minmax(210px, 250px);
}

.campaign-management-form {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.campaign-management-form>.campaign-management-pagination {
  order: 2;
  margin-top: auto;
  padding-top: 18px;
}

.campaign-management-panel {
  border: 1px solid #e3dbf2;
  border-radius: 18px;
  background:
    radial-gradient(105% 90% at 100% 0%, rgba(111, 104, 184, 0.08) 0%, rgba(111, 104, 184, 0) 58%),
    #ffffff;
  box-shadow:
    0 12px 28px rgba(58, 45, 95, 0.08),
    0 2px 8px rgba(58, 45, 95, 0.04);
  padding: 18px;
}

.campaign-management-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
}

.campaign-management-panel-head h2 {
  margin: 0;
  color: #21164e;
  font-size: 1.08rem;
  line-height: 1.2;
}

.campaign-management-panel-head p {
  margin: 6px 0 0;
  max-width: 760px;
  color: #5d6684;
  font-size: 0.9rem;
  line-height: 1.45;
}

.campaign-management-composer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 14px;
  align-items: start;
}

.campaign-management-composer-grid label,
.campaign-management-field-wide {
  display: grid;
  gap: 6.5px;
}

.campaign-management-composer-grid label span {
  color: #555c76;
  font-size: 0.79rem;
  font-weight: 700;
}

.campaign-management-composer-grid input,
.campaign-management-composer-grid textarea {
  width: 100%;
  border: 1px solid #d8dff0;
  border-radius: 12px;
  padding: 11px 13px;
  background: #ffffff;
  color: #252a3d;
  font: inherit;
  box-sizing: border-box;
}

.campaign-management-composer-grid textarea {
  min-height: 132px;
  resize: vertical;
}

.campaign-management-field-wide {
  grid-column: 1 / -1;
}

.campaign-management-sample {
  grid-column: 1 / -1;
  border: 1px solid #e4e0f3;
  border-radius: 14px;
  background: #f8f7ff;
  padding: 12px 14px;
  color: #4f5878;
}

.campaign-management-sample strong {
  display: block;
  margin-bottom: 7px;
  color: #6f68b8;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.campaign-management-sample p {
  margin: 5px 0 0;
  font-size: 0.86rem;
  line-height: 1.38;
}

.campaign-management-selection-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  border: 1px solid #e0e7f5;
  border-radius: 16px;
  background: #fbfcff;
  padding: 12px 14px;
}

.campaign-management-check-option {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: #343c59;
  font-size: 0.9rem;
  font-weight: 700;
}

.campaign-management-check-option input,
.campaign-management-user-card input {
  width: 18px;
  height: 18px;
  accent-color: #6f68b8;
}

.campaign-management-selected-count {
  margin-left: auto;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  border-radius: 999px;
  background: #f1effd;
  color: #4b477f;
  padding: 7px 12px;
  font-size: 0.86rem;
}

.campaign-management-selected-count strong {
  color: #6f68b8;
  font-size: 1rem;
}

.campaign-management-user-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 12px;
}

.campaign-management-user-card {
  display: grid;
  grid-template-columns: auto 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid #dfe6f4;
  border-radius: 16px;
  background: #ffffff;
  padding: 12px;
  cursor: pointer;
  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease,
    background-color 0.18s ease;
}

.campaign-management-user-card:hover,
.campaign-management-user-card:focus-within {
  border-color: #c8bdea;
  box-shadow: 0 10px 20px rgba(58, 45, 95, 0.08);
  transform: translateY(-1px);
}

.campaign-management-user-card:has(input:checked) {
  border-color: #857bd0;
  background: #f6f4ff;
  box-shadow: 0 12px 24px rgba(58, 45, 95, 0.11);
}

.campaign-management-user-card img {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  border: 1px solid #d9e0f1;
  object-fit: cover;
  background: #f3f6fc;
}

.campaign-management-user-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.campaign-management-user-copy strong {
  overflow: hidden;
  color: #202742;
  font-size: 0.96rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-management-user-copy small {
  overflow: hidden;
  color: #6f7794;
  font-size: 0.82rem;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-management-token-badge {
  border-radius: 999px;
  background: #fff2e2;
  color: #9a5d10;
  padding: 6px 10px;
  font-size: 0.76rem;
  font-weight: 800;
  white-space: nowrap;
}

.campaign-management-token-badge.has-token {
  background: #dcfce7;
  color: #16803b;
}

.campaign-management-pagination .membership-page-link.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.campaign-management-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.campaign-management-schedule-list {
  display: grid;
  gap: 12px;
}

.campaign-management-schedule-card {
  border: 1px solid #dfe6f4;
  border-radius: 16px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(58, 45, 95, 0.06);
  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    box-shadow 0.16s ease;
}

.campaign-management-schedule-card:hover,
.campaign-management-schedule-card:focus-within {
  transform: translateY(-2px);
  border-color: #c8bdea;
  box-shadow: 0 14px 28px rgba(44, 24, 80, 0.13);
}

.campaign-management-schedule-summary {
  width: 100%;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) minmax(180px, auto) auto;
  align-items: center;
  gap: 14px;
  border: 0;
  padding: 16px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.campaign-management-schedule-summary:hover,
.campaign-management-schedule-summary:focus-visible {
  background: #ece8f8;
}

.campaign-management-schedule-summary>img {
  width: 56px;
  height: 56px;
  border: 1px solid #d9e0f1;
  border-radius: 14px;
  object-fit: cover;
  background: #f3f6fc;
}

.campaign-management-schedule-copy,
.campaign-management-schedule-time {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.campaign-management-schedule-copy strong,
.campaign-management-schedule-time strong {
  color: #202742;
  font-size: 0.96rem;
}

.campaign-management-schedule-copy small,
.campaign-management-schedule-time small {
  color: #737b96;
  font-size: 0.8rem;
}

.campaign-management-schedule-copy>span {
  overflow: hidden;
  color: #525b79;
  font-size: 0.86rem;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-management-schedule-time {
  justify-items: end;
  text-align: right;
}

.campaign-management-schedule-modal .ws-default-modal-dialog {
  max-height: calc(100vh - 44px);
  max-height: calc(100dvh - 44px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.campaign-management-schedule-modal .ws-default-modal-head {
  flex: 0 0 auto;
}

.campaign-management-schedule-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 20px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.campaign-management-schedule-form textarea {
  min-height: 132px;
  resize: vertical;
}

.campaign-management-schedule-form>label.field-full {
  width: 100%;
  display: grid;
  gap: 6.5px;
}

.campaign-management-schedule-form>label.field-full textarea {
  width: 100%;
  max-width: none;
  box-sizing: border-box;
}

.campaign-management-schedule-settings {
  align-items: end;
}

.campaign-management-schedule-note {
  margin: 0;
  border-radius: 12px;
  background: #f5f4ff;
  padding: 11px 13px;
  color: #5d6684;
  font-size: 0.84rem;
  line-height: 1.45;
}

.campaign-management-schedule-actions {
  justify-content: flex-end;
}

.campaign-management-schedule-actions .page-modal-actions {
  margin-left: auto;
}

.campaign-management-account-search {
  position: relative;
}

.campaign-management-account-search-help {
  color: #78809a !important;
  font-size: 0.76rem !important;
  font-weight: 500 !important;
}

.campaign-management-account-results {
  max-height: 250px;
  overflow-y: auto;
  display: grid;
  gap: 6px;
  border: 1px solid #d8dff0;
  border-radius: 12px;
  background: #ffffff;
  padding: 8px;
  box-shadow: 0 16px 30px rgba(35, 42, 70, 0.12);
}

.campaign-management-account-results[hidden],
.campaign-management-selected-account[hidden] {
  display: none !important;
}

.campaign-management-account-result {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 10px;
  background: #f8f9fd;
  padding: 9px 10px;
  text-align: left;
  cursor: pointer;
}

.campaign-management-account-result:hover,
.campaign-management-account-result:focus-visible {
  background: #efedfc;
}

.campaign-management-account-result img {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  object-fit: cover;
}

.campaign-management-account-result>span {
  display: grid;
  gap: 3px;
}

.campaign-management-account-result strong {
  color: #252a3d;
  font-size: 0.86rem;
}

.campaign-management-account-result small {
  color: #737b96;
  font-size: 0.76rem;
}

.campaign-management-account-result-empty,
.campaign-management-selected-account {
  border-radius: 10px;
  padding: 10px 12px;
  color: #626b86 !important;
  background: #f7f8fc;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
}

.campaign-management-selected-account {
  color: #3f397a !important;
  background: #efedfc;
}

.campaign-management-audience-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
  align-items: end;
  gap: 16px 20px;
  border: 1px solid #dedcf1;
  border-radius: 14px;
  background: linear-gradient(135deg, #faf9ff 0%, #f3f1ff 100%);
  padding: 16px;
}

.campaign-management-audience-copy {
  display: grid;
  gap: 6px;
}

.campaign-management-field-label {
  color: #555c76;
  font-size: 0.79rem;
  font-weight: 700;
}

.campaign-management-audience-copy p {
  max-width: 680px;
  margin: 0;
  color: #6d7590;
  font-size: 0.82rem;
  line-height: 1.45;
}

.campaign-management-audience-type {
  display: grid;
  gap: 6.5px;
}

.campaign-management-audience-selection {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 42px;
}

.campaign-management-audience-selection>span {
  color: #555d7a;
  font-size: 0.84rem;
  font-weight: 650;
}

.campaign-management-audience-selection>span.is-error {
  color: #b92f43;
}

.campaign-management-audience-selection.is-all-users>span {
  color: #48417d;
}

.campaign-management-audience-selection .membership-toolbar-btn.is-secondary {
  border: 1px solid #cfc9ef;
  background: #ffffff;
  color: #5e56a8;
  box-shadow: none;
}

.campaign-management-recipient-modal {
  z-index: 2400;
}

.campaign-management-recipient-modal .ws-default-modal-dialog {
  width: min(940px, 100%);
  max-height: calc(100vh - 44px);
  max-height: calc(100dvh - 44px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.campaign-management-recipient-modal .ws-default-modal-head {
  flex: 0 0 auto;
}

.campaign-management-recipient-modal .ws-default-modal-head>div {
  display: grid;
  gap: 3px;
}

.campaign-management-recipient-modal .ws-default-modal-head p {
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.75rem;
}

.campaign-management-recipient-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 20px 18px 22px;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.campaign-management-recipient-search {
  display: grid;
  gap: 6.5px;
}

.campaign-management-recipient-search>span {
  color: #555c76;
  font-size: 0.79rem;
  font-weight: 700;
}

.campaign-management-recipient-search input {
  width: 100%;
  min-height: 44px;
  border: 1px solid #d8dff0;
  border-radius: 11px;
  background: #ffffff;
  padding: 10px 13px;
  color: #282d42;
  font: inherit;
}

.campaign-management-recipient-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  border: 1px solid #e1e4f1;
  border-radius: 12px;
  background: #f8f8fc;
  padding: 11px 13px;
}

.campaign-management-recipient-toolbar>strong {
  margin-left: auto;
  color: #5c54a6;
  font-size: 0.84rem;
}

.campaign-management-recipient-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #4f5772;
  font-size: 0.82rem;
  font-weight: 650;
  cursor: pointer;
}

.campaign-management-recipient-check input,
.campaign-management-recipient-card>input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #6f68b8;
}

.campaign-management-recipient-status {
  border-radius: 10px;
  background: #f3f2fc;
  padding: 11px 13px;
  color: #666e88;
  font-size: 0.82rem;
  text-align: center;
}

.campaign-management-recipient-status[hidden] {
  display: none;
}

.campaign-management-recipient-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  min-height: 156px;
}

.campaign-management-recipient-list.is-loading {
  opacity: 0.55;
  pointer-events: none;
}

.campaign-management-recipient-card {
  min-width: 0;
  display: grid;
  grid-template-columns: 20px 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid #dfe3ef;
  border-radius: 12px;
  background: #ffffff;
  padding: 11px 12px;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.campaign-management-recipient-card:hover {
  border-color: #bdb6e8;
  background: #faf9ff;
  transform: translateY(-1px);
}

.campaign-management-recipient-card>img {
  width: 46px;
  height: 46px;
  border: 1px solid #dce2ef;
  border-radius: 50%;
  object-fit: cover;
  background: #f3f6fc;
}

.campaign-management-recipient-card>span:not(.campaign-management-recipient-token-count) {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.campaign-management-recipient-card strong,
.campaign-management-recipient-card small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campaign-management-recipient-card strong {
  color: #252a3d;
  font-size: 0.86rem;
}

.campaign-management-recipient-card small {
  color: #727b96;
  font-size: 0.76rem;
}

.campaign-management-recipient-token-count {
  border-radius: 999px;
  background: #eeecfb;
  padding: 5px 8px;
  color: #5a529f;
  font-size: 0.7rem;
  font-weight: 700;
  white-space: nowrap;
}

.campaign-management-recipient-empty {
  grid-column: 1 / -1;
  margin: 0;
  border: 1px dashed #d6daea;
  border-radius: 12px;
  padding: 34px 16px;
  color: #767e98;
  text-align: center;
}

.campaign-management-recipient-pagination {
  flex: 0 0 auto;
  width: 100%;
  justify-self: center;
  margin: 0;
  padding: 12px 18px;
  border-top: 1px solid #eef0f7;
  background: #ffffff;
  position: relative;
  z-index: 1;
}

.campaign-management-recipient-pagination button {
  cursor: pointer;
}

.campaign-management-recipient-pagination button:disabled {
  cursor: not-allowed;
}

.campaign-management-recipient-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  border-top: 1px solid #e2e4ef;
  padding: 16px 4px 4px;
}

.campaign-management-recipient-actions .membership-toolbar-reset,
.campaign-management-recipient-actions .application-action-button {
  box-sizing: border-box;
  min-width: 96px;
  width: auto;
  height: 56px !important;
  min-height: 56px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  padding: 0 18px !important;
  font-size: 0.94rem;
  font-weight: 750;
  line-height: 1;
}

.campaign-management-recipient-actions .application-action-button {
  min-width: 154px;
}

@media (max-width: 760px) {

  .campaign-management-schedule-form,
  .campaign-management-audience-panel,
  .campaign-management-recipient-list {
    grid-template-columns: 1fr;
  }

  .campaign-management-audience-selection {
    align-items: stretch;
    flex-direction: column;
  }

  .campaign-management-recipient-toolbar>strong {
    width: 100%;
    margin-left: 0;
  }

  .campaign-management-recipient-card {
    grid-template-columns: 20px 42px minmax(0, 1fr);
  }

  .campaign-management-recipient-token-count {
    grid-column: 3;
    justify-self: start;
  }
}

@media (max-width: 820px) {

  .campaign-management-toolbar,
  .campaign-management-schedule-summary {
    grid-template-columns: 1fr;
  }

  .campaign-management-schedule-time {
    justify-items: start;
    text-align: left;
  }
}

.shop-catalogue-submit-row {
  justify-content: flex-end;
}

.shop-catalogue-submit-row .page-modal-actions {
  margin-left: auto;
}

.masterclass-header-actions .membership-toolbar-btn.is-secondary {
  background: #ffffff;
  color: var(--brand);
  border: 1px solid #cfc7ec;
  box-shadow: none;
}

.masterclass-header-actions .membership-toolbar-btn.is-secondary:hover {
  background: #f6f3ff;
}

.shop-category-manager-dialog {
  width: min(1240px, calc(100vw - 48px));
  max-height: calc(100vh - 44px);
  max-height: calc(100dvh - 44px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.shop-category-manager-form {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
}

.shop-category-manager-content {
  display: grid;
  gap: 16px;
  padding: 20px;
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.shop-category-manager-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border: 1px solid #e1e5f2;
  border-radius: 16px;
  background: linear-gradient(135deg, #fbfbff 0%, #f2efff 100%);
}

.shop-category-manager-toolbar>div {
  min-width: 0;
}

.shop-category-manager-toolbar .membership-toolbar-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.shop-category-manager-toolbar strong {
  display: block;
  color: #2c1850;
  font-size: 1rem;
}

.shop-category-manager-toolbar p {
  margin: 5px 0 0;
  color: #6d748d;
  font-size: 0.88rem;
}

.shop-category-manager-list {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.shop-category-edit-form {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.2fr) minmax(220px, 0.9fr);
  align-items: end;
  gap: 12px;
  padding: 14px;
  min-width: 0;
  border: 1px solid #dfe4f2;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 12px 24px rgba(63, 66, 95, 0.06);
}

.shop-category-edit-form label {
  display: grid;
  gap: 6.5px;
  min-width: 0;
}

.shop-category-edit-form label span,
.shop-category-create-form label span {
  font-size: 0.79rem;
  font-weight: 700;
  color: #555c76;
}

.shop-category-edit-media {
  align-self: center;
}

.shop-category-edit-icon {
  width: 58px;
  height: 58px;
  display: block;
  border-radius: 16px;
  border: 1px solid #d8dff0;
  object-fit: cover;
  background: #f4f6fb;
}

.shop-category-edit-form input[type="text"],
.shop-category-edit-form input[type="file"] {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  border-radius: 10px;
  border: 1px solid #d8dff0;
  padding: 10px 12px;
  background: #ffffff;
  font: inherit;
}

.shop-category-edit-form input[type="file"] {
  min-height: 43px;
}

.shop-category-edit-switches {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 12px;
  min-width: 0;
}

.shop-category-edit-switches .ws-inline-switch-label {
  min-width: 0;
}

.shop-category-manager-actions {
  display: flex;
  flex: 0 0 auto;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 20px 20px;
  border-top: 1px solid #e3e6f1;
  background: #ffffff;
}

.shop-category-manager-actions button {
  min-width: 112px;
  min-height: 44px;
  margin: 0;
}

.shop-category-empty {
  margin-top: 0;
}

@media (max-width: 1120px) {
  .shop-category-edit-form {
    grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1fr);
  }

  .shop-category-edit-switches {
    grid-column: 2 / -1;
  }
}

@media (max-width: 760px) {
  .shop-category-manager-dialog {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
  }

  .shop-category-manager-content {
    padding: 14px;
  }

  .shop-category-manager-toolbar,
  .shop-category-edit-form {
    grid-template-columns: 1fr;
  }

  .shop-category-manager-toolbar {
    align-items: stretch;
    flex-direction: column;
  }

  .shop-category-edit-media,
  .shop-category-edit-switches {
    grid-column: auto;
  }

  .shop-category-edit-switches {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .shop-category-manager-actions {
    padding: 14px;
  }
}

.manage-orders-main .application-summary-meta {
  gap: 8px;
}

.manage-orders-toolbar.is-vouchers-view {
  width: min(100%, 980px);
  max-width: 980px;
  grid-template-columns: minmax(320px, 1fr) minmax(170px, 210px) auto;
  align-items: end;
  gap: 12px;
}

.manage-orders-toolbar.is-vouchers-view .membership-search {
  min-width: 0;
}

.manage-orders-toolbar.is-vouchers-view input,
.manage-orders-toolbar.is-vouchers-view select {
  min-height: 44px;
  border: 1px solid #d4dcf0;
  border-radius: 12px;
  background: #fff;
  color: #22273a;
  font: inherit;
  padding: 10px 12px;
  box-sizing: border-box;
}

.manage-orders-toolbar.is-vouchers-view select {
  width: 100%;
}

.manage-orders-toolbar.is-vouchers-view .membership-toolbar-btn {
  min-height: 44px;
  min-width: 120px;
  flex-shrink: 0;
  white-space: nowrap;
  padding-inline: 18px;
}

.account-voucher-avatar {
  object-fit: cover;
  background: #f1f4fb;
}

.account-voucher-control-row {
  align-items: end;
}

.account-voucher-modal .page-modal-dialog {
  width: min(760px, 100%);
}

.account-voucher-modal .manage-orders-voucher-submit-row {
  margin-top: 18px;
}

.account-voucher-modal .page-modal-actions {
  justify-content: flex-end;
}

.manage-orders-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.manage-orders-preview-panel {
  display: grid;
  gap: 8px;
}

.manage-orders-form {
  gap: 12px;
}

.manage-orders-voucher-modal .page-modal-dialog {
  width: min(920px, 100%);
  padding: 8px 10px 10px;
  height: min(88vh, 860px);
  max-height: calc(100vh - 24px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.manage-orders-voucher-modal .page-modal-head {
  margin: -8px -10px 0;
  padding: 8px 12px;
}

.manage-orders-voucher-modal .page-modal-head h2 {
  font-size: 0.96rem;
}

.manage-orders-voucher-form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  gap: 8px;
  padding-bottom: 4px;
}

.manage-orders-voucher-form .ws-modal-two-col-row,
.manage-orders-voucher-form .ws-modal-three-col-row {
  gap: 8px;
}

.manage-orders-voucher-scroll-area {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: scroll;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  width: 100%;
  align-self: stretch;
  display: grid;
  gap: 8px;
}

.manage-orders-voucher-scroll-area>* {
  width: 100%;
}

.manage-orders-voucher-modal .page-modal-actions {
  margin-top: 0;
}

.manage-orders-form label {
  display: grid;
  gap: 4px;
}

.manage-orders-form label>span {
  color: #5e6682;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.manage-orders-form input,
.manage-orders-form select,
.manage-orders-form textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #d7dded;
  border-radius: 10px;
  padding: 7px 10px;
  color: #222433;
  background: #ffffff;
  font: inherit;
  font-size: 0.82rem;
}

.manage-orders-form textarea {
  min-height: 56px;
  line-height: 1.5;
  resize: vertical;
}

.manage-orders-form input::placeholder,
.manage-orders-form textarea::placeholder {
  color: #99a0b4;
}

.manage-orders-voucher-media-card {
  display: grid;
  gap: 8px;
}

.manage-orders-voucher-media-stage {
  position: relative;
  height: 300px;
  min-height: 300px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #dce2f0;
  background: linear-gradient(180deg, #f3f6fc 0%, #e7ecf8 100%);
}

.manage-orders-voucher-media-stage.is-placeholder {
  background: linear-gradient(180deg, #f5f7fd 0%, #edf1fa 100%);
}

.manage-orders-voucher-banner-image {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
}

.manage-orders-voucher-logo-badge {
  position: absolute;
  left: 10px;
  bottom: 8px;
  width: 30px;
  height: 30px;
  padding: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 6px 12px rgba(58, 74, 114, 0.14);
}

.manage-orders-voucher-logo-image {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  object-fit: cover;
  background: #ffffff;
}

.manage-orders-voucher-media-actions {
  gap: 8px;
}

.manage-orders-voucher-file-card {
  min-height: 40px;
  padding: 6px 9px;
  border-radius: 10px;
  border: 1px solid #dce2f0;
  background: #fbfcff;
}

.manage-orders-voucher-file-card input[type="file"] {
  padding: 4px 0 0;
  border: 0;
  background: transparent;
  border-radius: 0;
}

.manage-orders-voucher-form .ws-modal-submit-row {
  position: sticky;
  bottom: 0;
  z-index: 5;
  margin-top: 0;
  padding-top: 10px;
  padding-bottom: 2px;
  width: 100%;
  justify-content: flex-end;
  align-items: center;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 22%, #ffffff 100%);
}

.manage-orders-voucher-form .ws-modal-submit-row.shop-catalogue-submit-row {
  justify-content: flex-end !important;
}

.manage-orders-voucher-form .ws-modal-submit-row .page-modal-actions {
  width: 100%;
  justify-content: flex-end;
  margin-left: auto !important;
}

.manage-orders-voucher-submit-row {
  justify-content: flex-end !important;
}

.manage-orders-voucher-submit-row .page-modal-actions {
  width: auto !important;
  flex: 0 0 auto;
  justify-content: flex-end !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}

.manage-orders-order-modal .page-modal-dialog {
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.manage-orders-order-modal .page-modal-head {
  flex: 0 0 auto;
}

.manage-orders-order-modal .manage-orders-edit-order-form {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
}

.manage-orders-order-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr));
  gap: 10px;
}

.manage-orders-order-overview-panel {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #dde2f2;
  background: #f7f8fe;
}

.manage-orders-order-overview-panel span,
.manage-orders-order-overview-panel strong {
  display: block;
}

.manage-orders-order-overview-panel span {
  color: #71717a;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.manage-orders-order-overview-panel strong {
  color: #242633;
  font-size: 0.92rem;
  font-weight: 700;
  word-break: break-word;
}

.manage-orders-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.manage-orders-detail-panel {
  display: grid;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid #dce2f0;
  background: #fbfbff;
  min-height: 100%;
}

.manage-orders-detail-panel span {
  color: #71717a;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.manage-orders-detail-panel p {
  margin: 0;
  color: #242633;
  font-size: 0.92rem;
  line-height: 1.6;
  word-break: break-word;
}

.manage-orders-edit-order-form .ws-modal-two-col-row>label,
.manage-orders-edit-order-form .ws-modal-three-col-row>label {
  gap: 8px;
}

.manage-orders-edit-order-form>.field-full+.field-full {
  margin-top: 10px;
}

.manage-orders-edit-order-form .ws-modal-two-col-row input[readonly],
.manage-orders-edit-order-form .ws-modal-three-col-row input[readonly],
.manage-orders-edit-order-form>label input[readonly] {
  min-height: 56px;
  padding: 12px 22px;
}

.manage-orders-edit-order-form .manage-orders-detail-panel {
  padding: 18px 20px;
  gap: 10px;
}

.manage-orders-items-section {
  display: grid;
  gap: 10px;
}

.manage-orders-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #4f5a78;
  font-size: 0.9rem;
  font-weight: 700;
}

.manage-orders-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}

.manage-orders-item-card {
  display: flex;
  gap: 10px;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid #dce2f0;
  background: #ffffff;
}

.manage-orders-item-image {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  border: 1px solid #d8dff0;
  object-fit: cover;
  flex-shrink: 0;
  background: #eef2fb;
}

.manage-orders-item-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.manage-orders-item-copy h3 {
  margin: 0;
  font-size: 0.93rem;
  color: #242633;
}

.manage-orders-item-copy p {
  margin: 0;
  color: #5f6073;
  font-size: 0.82rem;
}

.manage-orders-discount-value-wrap[hidden] {
  display: none !important;
}

.manage-orders-card .application-summary-meta {
  gap: 8px;
}

.manage-orders-card .summary-meta-item {
  font-size: 0.73rem;
}

.manage-orders-toolbar {
  margin-left: auto;
  width: auto;
  max-width: none;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 380px 190px;
  gap: 10px;
  align-items: end;
}

.manage-orders-toolbar.is-orders-view {
  grid-template-columns: 380px 190px;
}

.manage-orders-status-actions-wrap {
  display: grid;
  gap: 10px;
}

.manage-orders-status-actions-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #4f5a78;
  font-size: 0.9rem;
  font-weight: 700;
}



.manage-orders-status-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.manage-orders-status-actions .application-action-note {
  margin: 0;
  width: 100%;
  text-align: left;
}

.manage-orders-status-badge.manage-orders-status-pending {
  background: #fff1d6;
  color: #b86b00;
}

.manage-orders-status-badge.manage-orders-status-confirmed {
  background: #dceaff;
  color: #1e63d6;
}

.manage-orders-status-badge.manage-orders-status-preparing {
  background: #eee2ff;
  color: #7b3fe4;
}

.manage-orders-status-badge.manage-orders-status-ready {
  background: #ddfaf5;
  color: #0b7f76;
}

.manage-orders-status-badge.manage-orders-status-completed {
  background: #ddf6e0;
  color: #14883e;
}

.manage-orders-status-badge.manage-orders-status-cancelled {
  background: #ffe1e1;
  color: #cf3030;
}

.manage-orders-confirm-dialog {
  max-width: 520px;
}

.manage-orders-confirm-body {
  padding: 18px 24px 8px;
}

.manage-orders-confirm-body p {
  margin: 0;
  color: #2f2f3b;
  font-size: 0.98rem;
  line-height: 1.6;
}

.manage-orders-confirm-actions {
  padding: 0 24px 24px;
}

/* Party Booking Page (pages/party-booking.php) */

.party-booking-surface {
  display: flex;
  flex-direction: column;
}

.party-booking-main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.party-booking-toolbar {
  grid-template-columns: minmax(260px, 1fr) minmax(190px, 230px);
}

.party-booking-list {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.party-booking-card {
  background: #fcfcfd;
  border: 0;
  border-radius: 16px;
  box-shadow: var(--soft-shadow);
  overflow: hidden;
  transition:
    transform 0.16s ease,
    box-shadow 0.16s ease;
}

.party-booking-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(44, 24, 80, 0.13);
}

.party-booking-card-button {
  width: 100%;
  border: 0;
  appearance: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.party-booking-card-button:hover {
  background: #ece8f8;
}

.party-booking-card-button .application-summary-copy {
  min-width: 0;
}

.party-booking-summary-avatar {
  object-fit: cover;
  background: #ffffff;
}

.party-booking-summary-meta {
  margin-top: 8px;
}

.party-booking-summary-meta .summary-meta-item {
  max-width: min(100%, 360px);
}

.party-booking-card-button .summary-right {
  flex: 0 0 auto;
}

.party-booking-contact {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.party-booking-contact img {
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid #dbe2f1;
  object-fit: cover;
  background: #eef2fb;
  flex-shrink: 0;
}

.party-booking-contact h2 {
  margin: 0;
  color: #232838;
  font-size: 1.02rem;
  line-height: 1.2;
}

.party-booking-contact p {
  margin: 3px 0 0;
  color: #6b7287;
  font-size: 0.82rem;
}

.party-booking-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.party-booking-meta-grid div,
.party-booking-overview-panel,
.party-booking-timeline-grid div {
  display: grid;
  gap: 5px;
  border-radius: 14px;
  border: 1px solid #e1e6f3;
  background: #f8f9fd;
  padding: 12px;
}

.party-booking-meta-grid span,
.party-booking-overview-panel span,
.party-booking-timeline-grid span {
  color: #788098;
  font-size: 0.73rem;
  font-weight: 700;
}

.party-booking-meta-grid strong,
.party-booking-overview-panel strong,
.party-booking-timeline-grid strong {
  color: #252938;
  font-size: 0.86rem;
  line-height: 1.35;
}

.party-booking-status-badge.party-booking-status-pending {
  background: #fff1d6;
  color: #b86b00;
}

.party-booking-status-badge.party-booking-status-contacted {
  background: #dceaff;
  color: #1e63d6;
}

.party-booking-status-badge.party-booking-status-booked {
  background: #eee2ff;
  color: #7b3fe4;
}

.party-booking-status-badge.party-booking-status-completed {
  background: #ddf6e0;
  color: #14883e;
}

.party-booking-status-badge.party-booking-status-denied {
  background: #ffe1e1;
  color: #cf3030;
}

.party-booking-status-badge.party-booking-status-cancelled {
  background: #eceff6;
  color: #596074;
}

.party-booking-modal .page-modal-dialog {
  width: min(1120px, 100%);
}

.party-booking-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

.party-booking-form>.field-full,
.party-booking-form>label.field-full {
  grid-column: 1 / -1;
}

.party-booking-form label,
.party-booking-form>label.field-full {
  display: grid;
  gap: 6.5px;
}

.party-booking-form input,
.party-booking-form select,
.party-booking-form textarea {
  width: 100%;
  box-sizing: border-box;
}

.party-booking-banner-preview {
  height: 220px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid #dbe2f1;
  background: #f3f5fb;
}

.party-booking-banner-preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #f3f5fb;
}

.party-booking-overview-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.party-booking-form input[readonly] {
  color: #252938;
  background: #fbfcff;
}

.party-booking-admin-row {
  align-items: end;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
}

.party-booking-booked-at-wrap[hidden] {
  display: none !important;
}

.party-booking-form textarea {
  min-height: 116px;
  resize: vertical;
}

.party-booking-timeline {
  display: grid;
  gap: 10px;
}

.party-booking-timeline h3 {
  margin: 0;
  color: #4f5a78;
  font-size: 0.9rem;
}

.party-booking-timeline-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 10px;
}

.party-booking-form .party-booking-submit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 16px;
}

.party-booking-form .party-booking-save-actions {
  width: auto;
  margin-left: auto;
  justify-content: flex-end;
}

.party-booking-chat-open {
  margin-right: 0;
  min-width: 150px;
  background: var(--brand);
  color: #ffffff;
}

.party-booking-chat-shell {
  min-height: 520px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: #f5f7fc;
}

.party-booking-chat-loading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  color: #5e6684;
  font-weight: 700;
}

.party-booking-chat-loading[hidden] {
  display: none !important;
}

.party-booking-chat-loading span {
  width: 16px;
  height: 16px;
  border: 3px solid rgba(111, 104, 184, 0.2);
  border-top-color: #6f68b8;
  border-radius: 999px;
  animation: loginSpinner 0.8s linear infinite;
}

.party-booking-chat-messages {
  min-height: 360px;
  max-height: min(52vh, 520px);
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.party-booking-chat-empty {
  margin: auto;
  color: #77809b;
  text-align: center;
  font-weight: 700;
}

.party-booking-chat-message {
  display: grid;
  gap: 5px;
  max-width: 78%;
}

.party-booking-chat-message.is-admin {
  align-self: flex-end;
  justify-items: end;
}

.party-booking-chat-message.is-customer {
  align-self: flex-start;
}

.party-booking-chat-bubble {
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid #dbe2f1;
  background: #ffffff;
  color: #252938;
  line-height: 1.45;
  box-shadow: 0 10px 24px rgba(50, 56, 84, 0.08);
}

.party-booking-chat-message.is-admin .party-booking-chat-bubble {
  background: #6f68b8;
  border-color: #6f68b8;
  color: #ffffff;
  border-bottom-right-radius: 6px;
}

.party-booking-chat-message.is-customer .party-booking-chat-bubble {
  border-bottom-left-radius: 6px;
}

.party-booking-chat-message p {
  margin: 0;
  color: #6b7390;
  font-size: 0.78rem;
  font-weight: 700;
}

.party-booking-chat-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: end;
  padding: 16px 18px;
  border-top: 1px solid #dfe5f2;
  background: #ffffff;
}

.party-booking-chat-form label {
  display: grid;
  gap: 6.5px;
}

.party-booking-chat-form label span {
  color: #4f5a78;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.78rem;
}

.party-booking-chat-form textarea {
  width: 100%;
  min-height: 52px;
  max-height: 110px;
  resize: vertical;
  border: 1px solid #d2dbed;
  border-radius: 16px;
  padding: 13px 15px;
  color: #252938;
  background: #f8faff;
  box-sizing: border-box;
}

.party-booking-chat-form textarea:focus {
  outline: 3px solid rgba(111, 104, 184, 0.16);
  border-color: #6f68b8;
}

.party-booking-chat-form button {
  min-height: 52px;
}

.party-booking-pagination {
  margin-top: auto;
  padding-top: 18px;
}

@media (max-width: 920px) {

  .party-booking-toolbar,
  .party-booking-overview-grid,
  .party-booking-timeline-grid {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 560px) {
  .party-booking-card-button {
    display: grid;
    gap: 12px;
  }

  .party-booking-banner-preview {
    height: 150px;
  }

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

  .party-booking-chat-message {
    max-width: 92%;
  }
}

/* Membership Packages Page (pages/membership-packages.php) */

.membership-packages-plan-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 12px;
}

.membership-package-card {
  background: #fcfcfd;
  border-radius: 14px;
  border: 1px solid #ebe6f5;
  box-shadow: var(--soft-shadow);
  padding: 14px;
  display: grid;
  gap: 12px;
}

.membership-package-plan-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.membership-package-plan-logo {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  object-fit: cover;
  border: 1px solid #dce3f1;
  background: #ffffff;
}

.membership-package-plan-label {
  margin: 0;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #737a94;
  font-weight: 700;
}

.membership-package-plan-title {
  margin: 2px 0 0;
  color: #2c1850;
  font-size: 1rem;
}

.membership-package-benefits {
  display: grid;
  gap: 8px;
}

.membership-package-benefits-title {
  margin: 0;
  font-size: 0.84rem;
  font-weight: 800;
  color: #433166;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.membership-package-empty {
  margin: 0;
  font-size: 0.85rem;
  color: #6a728c;
}

.membership-package-benefits-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.membership-package-benefit-item {
  position: relative;
  padding-left: 14px;
  color: #2f3448;
}

.membership-package-benefit-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2f3448;
  transform: translateY(-50%);
}

.membership-package-benefit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.membership-package-benefit-logo {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1px solid #d6deef;
  background: #ffffff;
  object-fit: cover;
  flex: 0 0 34px;
}

.membership-package-benefit-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.membership-package-benefit-row .info-block-edit-link {
  cursor: pointer;
  font: inherit;
}

/* Subscription Plans Card Grid (pages/subscription-plans.php) */

.subscription-plans-grid {
  align-items: start;
}

.subscription-plan-card {
  gap: 10px;
}

.subscription-plan-head {
  align-items: flex-start;
}

.subscription-plan-heading-copy {
  min-width: 0;
}

.subscription-plan-head .application-status-badge {
  margin-left: auto;
  white-space: nowrap;
}

.subscription-plan-body {
  display: grid;
  gap: 8px;
}

.subscription-plan-description {
  margin: 0;
}

.subscription-plan-meta-list {
  display: grid;
  gap: 2px;
}

.subscription-plan-meta-list .masterclass-meta {
  margin: 0;
}

.subscription-plan-card .masterclass-card-actions {
  padding-top: 4px;
}

.subscription-plans-grid .subscription-card.is-editing {
  grid-column: 1 / -1;
}

.subscription-card.is-editing .subscription-plan-head {
  flex-wrap: wrap;
}

.subscription-card.is-editing .compact-form-grid>label,
.subscription-card.is-editing .compact-form-grid>.field-full,
.subscription-card.is-editing .compact-form-grid>div {
  min-width: 0;
}

.subscription-card.is-editing .compact-form-grid input,
.subscription-card.is-editing .compact-form-grid select,
.subscription-card.is-editing .compact-form-grid textarea {
  width: 100%;
  max-width: 100%;
}

.subscription-card.is-editing .field-file input[type="file"] {
  width: 100%;
  max-width: 100%;
}

.subscription-plan-card .masterclass-description {
  color: #2d3550;
}

.subscription-plan-card .masterclass-meta {
  color: #3f4763;
}

.subscription-plan-card .ws-default-modal-form label span,
.subscription-plan-card .compact-form-grid label span {
  color: #3a4463;
  font-weight: 700;
}

/* Masterclass Card Grid (pages/masterclass.php) */

.masterclass-grid-list {
  align-items: stretch;
}

.masterclass-grid-card {
  position: relative;
  overflow: hidden;
  border: 1px solid #e3dbf2;
  background:
    radial-gradient(120% 95% at 100% 0%, rgba(111, 104, 184, 0.08) 0%, rgba(111, 104, 184, 0) 55%),
    #ffffff;
  box-shadow:
    0 10px 26px rgba(58, 45, 95, 0.08),
    0 2px 8px rgba(58, 45, 95, 0.04);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}

.masterclass-grid-card:hover {
  transform: translateY(-2px);
  border-color: #cfc3ea;
  box-shadow:
    0 16px 34px rgba(58, 45, 95, 0.14),
    0 4px 10px rgba(58, 45, 95, 0.08);
}

.masterclass-grid-card .subscription-plan-head {
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid #ece6f8;
}

.masterclass-grid-card .membership-package-plan-logo {
  width: 68px;
  height: 68px;
  border-radius: 14px;
  border: 1px solid #d4cdea;
  box-shadow: 0 6px 14px rgba(47, 34, 86, 0.15);
}

.masterclass-grid-card .membership-package-plan-label {
  color: #6f68b8;
}

.masterclass-grid-card .membership-package-plan-title {
  font-size: 1.12rem;
  line-height: 1.2;
}

.masterclass-grid-card .subscription-plan-description {
  margin: 0;
  color: #2f3450;
  line-height: 1.48;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
}

.masterclass-grid-card .subscription-plan-meta-list {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.masterclass-grid-card .subscription-plan-meta-list .masterclass-meta {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f3f5fb;
  color: #4f5979;
  font-size: 0.76rem;
  font-weight: 600;
}

.masterclass-grid-card .masterclass-card-actions {
  padding-top: 6px;
}

.masterclass-grid-card .masterclass-card-actions .info-block-edit-link {
  border-radius: 10px;
  border: 1px solid #6f68b8;
  background: #6f68b8;
  color: #ffffff;
  font-weight: 700;
  padding: 8px 14px;
}

.masterclass-grid-card .masterclass-card-actions .info-block-edit-link:hover,
.masterclass-grid-card .masterclass-card-actions .info-block-edit-link:focus-visible {
  border-color: #5f58ad;
  background: #5f58ad;
  color: #ffffff;
}

.membership-package-card .masterclass-card-actions .info-block-edit-link,
.membership-package-benefit-row .info-block-edit-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  font-size: 0.78rem;
  line-height: 1;
  border-radius: 10px;
  border: 1px solid #6f68b8;
  background: #6f68b8;
  color: #ffffff;
  font-weight: 700;
  padding: 8px 14px;
  cursor: pointer;
}

.membership-package-card .masterclass-card-actions .info-block-edit-link:hover,
.membership-package-card .masterclass-card-actions .info-block-edit-link:focus-visible,
.membership-package-benefit-row .info-block-edit-link:hover,
.membership-package-benefit-row .info-block-edit-link:focus-visible {
  border-color: #5f58ad;
  background: #5f58ad;
  color: #ffffff;
}

/* Credits Inventory Page (pages/credits-inventory.php) */
#creditsInventoryToolbar {
  grid-template-columns: 1fr;
}

.credits-inventory-history {
  border: 1px solid #dde4f2;
  border-radius: 14px;
  background: #f8faff;
  padding: 14px;
  display: grid;
  gap: 10px;
}

.credits-inventory-history h3 {
  margin: 0;
  font-size: 1rem;
  color: #2c3350;
}

.credits-inventory-history-empty {
  margin: 0;
}

.credits-inventory-history-list {
  display: grid;
  gap: 8px;
  max-height: 260px;
  overflow: auto;
  padding-right: 4px;
}

.credits-inventory-history-item {
  border: 1px solid #dbe3f3;
  border-radius: 10px;
  background: #ffffff;
  padding: 9px 10px;
  display: grid;
  gap: 4px;
}

.credits-inventory-history-title {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: #2f3757;
}

.credits-inventory-history-meta {
  margin: 0;
  font-size: 0.8rem;
  color: #647093;
}

.credits-inventory-adjust-form {
  gap: 16px;
}

.credits-inventory-adjust-form .ws-modal-three-col-row,
.credits-inventory-adjust-form .ws-modal-two-col-row {
  align-items: start;
  gap: 16px;
}

.credits-inventory-adjust-form label>span {
  display: inline-block;
  margin-bottom: -5px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #4d5778;
}

.credits-inventory-adjust-form input[type="text"] {
  min-height: 46px;
}

.credits-inventory-account-summary {
  margin-bottom: 16px;
}

.credits-inventory-adjust-form .ws-modal-two-col-row+.credits-inventory-history {
  margin-top: 20px;
}

.credits-inventory-adjust-form .ws-modal-submit-row {
  margin-top: 20px;
  justify-content: flex-end;
}

.credits-inventory-actions {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
  margin-left: auto;
}

.credits-inventory-actions .application-action-button {
  margin: 0;
}

.credits-inventory-pagination {
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.credits-inventory-pagination .membership-page-link {
  min-width: 36px;
  text-align: center;
}

.credits-inventory-pagination .membership-page-link.is-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.credits-inventory-pagination .membership-page-current {
  min-width: 26px;
  text-align: center;
}

.membership-main>.credits-inventory-pagination,
.masterclass-main>.credits-inventory-pagination,
.user-accounts-main>.credits-inventory-pagination {
  margin-top: auto;
  padding-top: 18px;
}

/* Referrals Page (pages/referrals.php) */

.referrals-surface {
  overflow: hidden;
}

.referrals-main {
  gap: 18px;
}

.referrals-toolbar {
  flex: 0 1 980px;
  width: min(100%, 980px);
  max-width: 980px;
  justify-self: end;
  grid-template-columns: minmax(260px, 1fr) minmax(190px, 240px);
}

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

.referrals-stat-card {
  min-height: 128px;
  padding: 18px;
  border: 1px solid #e0e6f5;
  border-radius: 20px;
  background:
    radial-gradient(circle at 85% 15%, rgba(111, 104, 184, 0.16), transparent 34%),
    #fbfbff;
  box-shadow: 0 14px 30px rgba(76, 91, 128, 0.08);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.referrals-stat-card span,
.referrals-person-label {
  color: #59617b;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.referrals-stat-card strong {
  color: #251c54;
  font-size: clamp(1.35rem, 2vw, 2rem);
  line-height: 1.1;
}

.referrals-stat-card small {
  color: #77819c;
  font-weight: 700;
}

.referrals-stat-card.is-featured {
  color: #ffffff;
  border-color: #6f68b8;
  background:
    linear-gradient(135deg, rgba(111, 104, 184, 0.96), rgba(70, 53, 146, 0.94)),
    #6f68b8;
}

.referrals-stat-card.is-featured span,
.referrals-stat-card.is-featured strong,
.referrals-stat-card.is-featured small {
  color: #ffffff;
}

.referrals-list {
  display: grid;
  gap: 14px;
}

.referrals-card {
  padding: 0;
  overflow: hidden;
}

.referrals-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) minmax(220px, 0.62fr);
  gap: 14px;
  align-items: stretch;
  padding: 16px;
}

.referrals-person-card,
.referrals-meta-card {
  border: 1px solid #e3e8f5;
  border-radius: 18px;
  background: #ffffff;
  padding: 14px;
}

.referrals-person-main {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  min-width: 0;
}

.referrals-person-main h2 {
  margin: 0;
  color: #1d2435;
  font-size: 1rem;
  line-height: 1.2;
}

.referrals-person-main p {
  margin: 4px 0 0;
  color: #68738e;
  font-size: 0.86rem;
  overflow-wrap: anywhere;
}

.referrals-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.referrals-chip-row span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid #d5dcf0;
  border-radius: 999px;
  background: #f8f7ff;
  color: #4f5a78;
  font-size: 0.78rem;
  font-weight: 800;
}

.referrals-arrow {
  align-self: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: #6f68b8;
  color: #ffffff;
  display: grid;
  place-items: center;
  font-size: 1.55rem;
  line-height: 1;
  font-weight: 900;
  box-shadow: 0 10px 20px rgba(111, 104, 184, 0.24);
}

.referrals-meta-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #f8f9fd;
}

.referrals-meta-card .application-status-badge {
  align-self: flex-start;
}

.referrals-meta-card dl {
  display: grid;
  gap: 8px;
  margin: 0;
}

.referrals-meta-card dt {
  color: #7a839b;
  font-size: 0.76rem;
  font-weight: 800;
}

.referrals-meta-card dd {
  margin: 0;
  color: #1e2738;
  font-size: 0.88rem;
  font-weight: 800;
}

.referrals-invitation-card {
  background:
    radial-gradient(circle at 4% 12%, rgba(111, 104, 184, 0.1), transparent 28%),
    #ffffff;
}

.referrals-invitation-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(220px, 0.55fr);
  gap: 14px;
  align-items: stretch;
  padding: 16px;
}

.referrals-invitee-card {
  border-color: #d9d2f1;
  background:
    linear-gradient(135deg, rgba(111, 104, 184, 0.08), rgba(255, 255, 255, 0.94)),
    #ffffff;
}

.referrals-inviter-card {
  background: #fcfcff;
}

.referrals-invitation-meta-card {
  justify-content: space-between;
}

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

  .referrals-flow,
  .referrals-invitation-layout {
    grid-template-columns: 1fr;
  }

  .referrals-arrow {
    transform: rotate(90deg);
    justify-self: center;
  }
}

@media (max-width: 680px) {
  .referrals-toolbar {
    grid-template-columns: 1fr;
  }

  .referrals-stat-grid {
    grid-template-columns: 1fr;
  }

  .referrals-flow,
  .referrals-invitation-layout {
    padding: 12px;
  }
}

/* Manage Schedules Page (pages/manage-schedules.php) */

.content-surface:has(.manage-schedules-main) {
  justify-content: flex-start;
}

.manage-schedules-main {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1 1 auto;
  min-height: calc(100vh - 190px);
}

.manage-schedules-section {
  background: #fcfcfd;
  border: 1px solid #ebe6f5;
  border-radius: 14px;
  box-shadow: var(--soft-shadow);
  padding: 14px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.manage-schedules-main>.manage-schedules-section {
  min-height: 0;
}

.manage-schedules-main>.manage-schedules-section:last-of-type {
  flex: 1 1 auto;
}

.manage-schedules-section>.credits-inventory-pagination {
  margin-top: auto;
  padding-top: 18px;
}

.manage-schedules-section-title {
  margin: 0;
  color: #2c1850;
  font-size: 1.03rem;
}

.manage-schedules-section-head,
.manage-schedules-bookings-head {
  display: grid;
  grid-template-columns: minmax(190px, 0.42fr) minmax(0, 1fr);
  align-items: end;
  gap: 18px;
}

.manage-schedules-section-copy {
  display: grid;
  gap: 4px;
}

.manage-schedules-filter-toolbar {
  display: grid;
  grid-template-columns: minmax(150px, 0.32fr) minmax(170px, 0.38fr);
  align-items: end;
  gap: 12px;
  justify-content: end;
}

.manage-schedules-filter-toolbar label {
  display: grid;
  gap: 6px;
}

.manage-schedules-filter-toolbar span {
  color: #555c76;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.manage-schedules-filter-toolbar input,
.manage-schedules-filter-toolbar select {
  width: 100%;
  min-height: 44px;
  border: 1px solid #d4dcf0;
  border-radius: 12px;
  background: #ffffff;
  color: #22273a;
  font: inherit;
  padding: 10px 12px;
  box-sizing: border-box;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.manage-schedules-filter-toolbar input:focus,
.manage-schedules-filter-toolbar select:focus {
  border-color: rgba(112, 102, 190, 0.75);
  box-shadow: 0 0 0 4px rgba(112, 102, 190, 0.12);
  outline: none;
}

.manage-schedules-list {
  margin-top: 12px;
}

.manage-schedules-bookings-wrap {
  margin-top: 0;
}

.manage-schedules-bookings-head p {
  margin: 0;
  color: #6a728c;
  font-size: 0.84rem;
}

.manage-schedules-bookings-table td small {
  color: #6b7390;
}

.manage-schedules-change-button {
  margin: 0;
  background: var(--brand);
  color: #ffffff;
  box-shadow: 0 10px 22px rgba(111, 104, 184, 0.22);
  white-space: nowrap;
}

.manage-schedules-readonly-card {
  display: grid;
  gap: 6px;
  padding: 16px 18px;
  border: 1px solid #d8def0;
  border-radius: 16px;
  background: linear-gradient(135deg, #f8f7ff 0%, #ffffff 100%);
}

.manage-schedules-readonly-card span {
  color: #555c76;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.manage-schedules-readonly-card strong {
  color: #27184f;
  font-size: 1.08rem;
}

.manage-schedules-readonly-card small {
  color: #6b7390;
  line-height: 1.45;
}

.manage-schedules-booking-move-field {
  display: grid !important;
  grid-template-columns: 132px minmax(0, 1fr);
  align-items: center;
  gap: 12px 16px;
  margin-top: 2px;
}

.manage-schedules-booking-move-field>span {
  margin: 0;
  white-space: nowrap;
}

.manage-schedules-booking-move-field select {
  width: 100%;
  min-width: 0;
}

.manage-schedules-booking-move-field+.page-modal-actions {
  margin-top: 22px;
}

.manage-schedules-modal-error {
  margin: 18px 24px 0;
}

.compact-form-grid .manage-schedules-booking-move-actions {
  grid-column: 1 / -1;
  padding-top: 22px;
  margin-top: 0;
  justify-content: flex-end;
}

@media (max-width: 640px) {
  .manage-schedules-booking-move-field {
    grid-template-columns: 1fr;
  }
}

.event-schedules-modal-actions {
  justify-content: space-between !important;
}

.event-schedules-view-attendees-btn {
  background: #f0f4ff !important;
  color: #2a4e97 !important;
  border: 1px solid #cce0ff !important;
}

.event-schedules-view-attendees-btn:hover {
  background: #e0edff !important;
}

.event-schedules-attendees-body {
  padding: 16px var(--modal-form-x) var(--modal-form-bottom);
  max-height: 60vh;
  overflow-y: auto;
}

.event-schedules-attendees-loading,
.event-schedules-attendees-empty,
.event-schedules-attendees-error {
  text-align: center;
  color: #6b7280;
  font-size: 14px;
  padding: 30px 0;
  margin: 0;
}

.event-schedules-attendees-error {
  color: #ef4444;
}

.event-schedules-attendees-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.event-schedules-attendee-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: #ffffff;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
}

.event-schedules-attendee-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background-color: #f3f4f6;
  border: 1px solid #e5e7eb;
}

.event-schedules-attendee-name {
  font-weight: 500;
  color: #111827;
  font-size: 15px;
}


.manage-schedule-summary {
  width: 100%;
  border: 0;
  text-align: left;
  font: inherit;
}

.manage-schedule-summary:focus-visible {
  outline: 2px solid #2a4e97;
  outline-offset: -2px;
}

.summary-meta-item.manage-schedules-capacity-chip {
  font-weight: 800;
}

.summary-meta-item.manage-schedules-capacity-chip.is-open {
  color: #1b5e4b;
}

.summary-meta-item.manage-schedules-capacity-chip.is-full {
  color: #b42318;
  border-color: #fecdca;
  background: #fff1f0;
}

.manage-schedules-form .manage-schedules-form-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(170px, 1fr));
  gap: 10px;
}

.manage-schedules-form .manage-schedules-form-row-2col {
  grid-template-columns: repeat(2, minmax(170px, 1fr));
}

.page-modal-dialog:has(.manage-schedules-form) {
  max-height: calc(100vh - 44px);
  overflow-y: auto;
  overflow-x: hidden;
}

.manage-schedules-form .manage-schedules-form-row-last {
  grid-template-columns: repeat(3, minmax(170px, 1fr));
}

.manage-schedules-form .manage-schedules-form-row-audience {
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.55fr) minmax(0, 0.55fr) minmax(0, 1fr);
  align-items: end;
}

.manage-schedules-form .manage-schedules-form-row-switch-only {
  grid-template-columns: 1fr;
}

.manage-schedules-form .manage-schedules-price-status-row {
  grid-template-columns: max-content max-content minmax(160px, 0.5fr);
  column-gap: 22px;
  align-items: end;
  justify-content: start;
  margin-bottom: 14px;
}

.manage-schedules-form .manage-schedules-price-status-row .manage-schedules-active-switch {
  justify-items: center;
  text-align: center;
}

.manage-schedules-form .manage-schedules-price-status-row [data-schedule-price-field] {
  max-width: 280px;
}

.manage-schedules-form .manage-schedules-price-status-row [data-schedule-price-field][hidden] {
  display: none !important;
}

.manage-schedules-form .manage-schedules-form-row-audience .manage-schedules-age-field {
  min-width: 0;
  width: 100%;
}

.manage-schedules-form .manage-schedules-form-row-audience .manage-schedules-gender-field {
  min-width: 0;
  width: 100%;
}

.manage-schedules-form .manage-schedules-form-row-audience>label {
  min-width: 0;
}

.manage-schedules-form .manage-schedules-form-row label {
  display: grid;
  gap: 6.5px;
}

.manage-schedules-form .manage-schedules-description-field {
  display: grid;
  gap: 6.5px;
  margin-top: 2px;
}

.manage-schedules-form .manage-schedules-description-field>span {
  margin: 0;
  font-size: 0.79rem;
  font-weight: 700;
  color: #555c76;
}

.manage-schedules-form .manage-schedules-form-row input,
.manage-schedules-form .manage-schedules-form-row select,
.manage-schedules-form .manage-schedules-form-row textarea,
.manage-schedules-form .manage-schedules-description-field textarea {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.manage-schedules-form .manage-schedules-description-field textarea {
  min-height: 104px;
  resize: vertical;
}

.manage-schedules-form .manage-schedules-active-switch {
  display: grid !important;
  align-items: center;
  gap: 6px;
  align-self: end;
  min-height: 52px;
}

.manage-schedules-form .manage-schedules-active-switch>span:first-child {
  margin: 0;
  font-size: 0.79rem;
  font-weight: 700;
  color: #555c76;
}

.manage-schedules-switch {
  position: relative;
  display: inline-flex;
  width: 50px;
  height: 28px;
}

.manage-schedules-switch input[type="checkbox"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

.manage-schedules-switch-slider {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #d9deea;
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease;
  box-shadow: inset 0 0 0 1px #cdd5e7;
}

.manage-schedules-switch-slider::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 5px rgba(30, 36, 64, 0.3);
  transition: transform 0.2s ease;
}

.manage-schedules-switch input[type="checkbox"]:checked+.manage-schedules-switch-slider {
  background: var(--brand);
  box-shadow: inset 0 0 0 1px rgba(74, 46, 138, 0.5);
}

.manage-schedules-switch input[type="checkbox"]:checked+.manage-schedules-switch-slider::before {
  transform: translateX(22px);
}

.manage-schedules-switch input[type="checkbox"]:focus-visible+.manage-schedules-switch-slider {
  outline: 2px solid #2a4e97;
  outline-offset: 2px;
}

.manage-schedules-switch input[type="checkbox"]:disabled+.manage-schedules-switch-slider {
  cursor: not-allowed;
  opacity: 0.72;
}

.voucher-switch-pair {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  flex-wrap: wrap;
}

.voucher-switch-pair label {
  display: grid;
  gap: 8px;
  margin: 0;
  width: auto;
  flex: 0 0 auto;
}

.vouchers-registration-reward-row {
  padding-top: 2px;
}

.vouchers-registration-reward-row label {
  display: grid;
  gap: 8px;
  margin: 0;
  width: max-content;
}

@media (max-width: 900px) {

  .manage-schedules-section-head,
  .manage-schedules-bookings-head,
  .manage-schedules-header-toolbar,
  .manage-schedules-filter-toolbar {
    grid-template-columns: 1fr;
  }
}

.membership-package-benefit-copy {
  display: grid;
  gap: 2px;
}

.membership-package-benefit-copy strong {
  font-size: 0.88rem;
  color: #251f3b;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.membership-package-benefit-copy span {
  font-size: 0.81rem;
  color: #616986;
  line-height: 1.45;
}

.membership-benefit-edit-form {
  margin-top: 6px;
  padding: 14px;
  border: 1px solid #ded7ef;
  border-radius: 14px;
  background: #ffffff;
  display: grid;
  gap: 10px;
}

.membership-benefit-field {
  display: grid;
  gap: 6.5px;
}

.membership-benefit-field span {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #576082;
  font-weight: 700;
}

.membership-benefit-field input,
.membership-benefit-field select,
.membership-benefit-field textarea {
  width: 100%;
  border: 1px solid #d4dcf0;
  border-radius: 10px;
  padding: 9px 11px;
  font: inherit;
  color: #22273a;
  background: #ffffff;
}

.membership-benefit-plan-field select {
  max-width: 380px;
}

.membership-benefit-upload-field input[type="file"] {
  max-width: 380px;
}

.membership-benefit-field textarea {
  min-height: 110px;
  resize: vertical;
}

.membership-benefit-field input[readonly] {
  background: #f4f6fb;
  color: #4d5673;
}

.membership-benefit-edit-modal {
  width: min(720px, 100%);
}

.membership-benefit-edit-modal-form {
  gap: 12px;
}

.membership-plan-create-form {
  gap: 16px;
}

.membership-package-create-modal .ws-default-modal-dialog {
  max-height: calc(100vh - 44px);
  max-height: calc(100dvh - 44px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.membership-package-create-modal .ws-default-modal-head {
  flex: 0 0 auto;
}

.membership-package-create-modal .ws-default-modal-form {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.membership-plan-create-logo-row {
  align-items: center;
}

.membership-plan-create-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(170px, 0.7fr);
  align-items: end;
  gap: 14px;
}

.membership-plan-create-active {
  display: grid !important;
  grid-template-columns: 1fr;
  justify-items: start;
  gap: 6.5px;
  min-height: 68px;
  align-content: end;
}

.membership-plan-create-active>span:first-child {
  display: block;
  margin: 0;
  font-size: 0.79rem;
  font-weight: 700;
  color: #555c76;
}

.membership-plan-create-actions {
  justify-content: flex-end;
  margin-top: 20px;
  padding-top: 0;
}

.membership-package-create-modal .ws-default-modal-form .page-modal-actions {
  margin-top: 20px;
  justify-content: flex-end;
}

.membership-package-plan-modal-form {
  gap: 14px;
}

.membership-package-plan-modal-form> :where(label,
  .field-full:not(.ws-modal-submit-row),
  .ws-modal-two-col-row,
  .ws-modal-three-col-row,
  .manage-schedules-active-switch)+ :where(label,
  .field-full:not(.ws-modal-submit-row),
  .ws-modal-two-col-row,
  .ws-modal-three-col-row,
  .manage-schedules-active-switch) {
  padding-top: 0;
}

.membership-package-plan-modal-form .field-full {
  margin-top: 0;
}

.membership-benefit-logo-editor {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid #e3dbf1;
  border-radius: 12px;
  background: #fbf9ff;
}

.membership-benefit-logo-title {
  margin: 0;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #576082;
  font-weight: 700;
}

.membership-benefit-logo-row {
  display: grid;
  grid-template-columns: 72px minmax(200px, 1fr);
  gap: 12px;
  align-items: start;
}

.membership-benefit-logo-preview {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  border: 1px solid #d6deef;
  background: #ffffff;
  object-fit: cover;
}

.membership-benefit-logo-row .membership-benefit-upload-field input[type="file"] {
  max-width: 100%;
}

.membership-benefit-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.membership-benefit-actions .application-action-button {
  margin: 0;
}

.membership-benefit-actions .membership-toolbar-reset {
  padding: 8px 14px;
  background: #ffffff;
  border: 1px solid #ccbce8;
  color: var(--brand);
  border-radius: 10px;
}

.ws-default-modal-dialog,
.membership-packages-modal-dialog {
  width: min(840px, 100%);
  border-radius: 18px;
  padding: 0;
  overflow: hidden;
}

.party-booking-modal .ws-default-modal-dialog {
  width: min(1120px, 100%);
  max-height: calc(100vh - 44px);
  overflow-y: auto;
  overflow-x: hidden;
}

.party-booking-chat-modal .ws-default-modal-dialog {
  width: min(780px, 100%);
  max-height: calc(100vh - 44px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.party-booking-chat-modal .ws-default-modal-head p {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.84rem;
  font-weight: 700;
}

.ws-default-modal-head,
.membership-packages-modal-head {
  margin: 0;
  padding: 16px 20px 14px;
  border-bottom: 1px solid #ded3f2;
}

.ws-default-modal-head h2,
.membership-packages-modal-head h2 {
  font-size: 1.12rem;
}

.ws-default-modal-form,
.membership-packages-modal-form {
  --modal-form-x: 20px;
  --modal-form-bottom: 18px;
  padding: 20px 20px 18px;
  gap: 20px;
}

.ws-default-modal-form label,
.membership-packages-modal-form label {
  gap: 6.5px;
}

.ws-default-modal-form label span,
.membership-packages-modal-form label span {
  font-size: 0.79rem;
  font-weight: 700;
  color: #555c76;
}

.ws-default-modal-form input,
.ws-default-modal-form select,
.ws-default-modal-form textarea,
.membership-packages-modal-form input,
.membership-packages-modal-form select,
.membership-packages-modal-form textarea {
  border-radius: 10px;
  border: 1px solid #d8dff0;
  padding: 10px 12px;
  background: #ffffff;
}

.ws-default-modal-form textarea,
.membership-packages-modal-form textarea {
  min-height: 120px;
}

.ws-default-modal-form>.page-modal-actions,
.membership-packages-modal-form>.page-modal-actions,
.ws-default-modal-form>.ws-modal-submit-row,
.membership-packages-modal-form>.ws-modal-submit-row {
  grid-column: 1 / -1;
  width: auto;
  margin: 4px calc(var(--modal-form-x) * -1) calc(var(--modal-form-bottom) * -1);
  border-top: 1px solid #e1e6f2;
  padding: 16px var(--modal-form-x) var(--modal-form-bottom);
  background: #ffffff;
}

.ws-default-modal-form>.page-modal-actions,
.membership-packages-modal-form>.page-modal-actions {
  justify-content: flex-end;
}

.ws-default-modal-form>.membership-member-modal-actions {
  justify-content: space-between;
}

.ws-default-modal-form>.ws-modal-submit-row .page-modal-actions,
.membership-packages-modal-form>.ws-modal-submit-row .page-modal-actions {
  margin-top: 0 !important;
  border-top: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.campaign-banners-surface {
  display: flex;
  flex-direction: column;
}

.campaign-banners-main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.campaign-banners-main>.credits-inventory-pagination {
  margin-top: auto;
  padding-top: 18px;
}

.campaign-banners-modal .ws-default-modal-dialog {
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.campaign-banners-modal .ws-default-modal-head {
  flex: 0 0 auto;
}

.campaign-banners-modal .campaign-edit-form {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.campaign-banners-modal .campaign-edit-form>.ws-modal-submit-row {
  display: flex;
  justify-content: flex-end;
}

.campaign-banners-modal .campaign-edit-form>.page-modal-actions,
.campaign-banners-modal .campaign-edit-form>.ws-modal-submit-row .page-modal-actions {
  width: auto;
  margin-left: auto;
  margin-right: 0;
  justify-content: flex-end;
}

.campaign-banner-viewer-modal {
  z-index: 2600;
  padding: 22px;
}

.campaign-banner-viewer-body {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  overflow: auto;
}

.campaign-banner-viewer-body img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: calc(100vh - 44px);
  max-height: calc(100dvh - 44px);
  margin: 0 auto;
  border-radius: 12px;
  object-fit: contain;
  box-shadow: 0 24px 60px rgba(5, 10, 25, 0.45);
}

.campaign-banner-viewer-close {
  position: fixed;
  top: 18px;
  right: 22px;
  z-index: 2;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  color: #ffffff;
  background: rgba(15, 23, 42, 0.72);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 14px 30px rgba(5, 10, 25, 0.28);
}

.campaign-banner-viewer-close:hover {
  background: rgba(15, 23, 42, 0.9);
}

.campaign-date-range-row {
  align-items: end;
}

.campaign-date-range-row input[type="datetime-local"]:disabled {
  border-color: #e1e4ed;
  background: #f1f3f8;
  color: #9aa1b4;
  cursor: not-allowed;
}

@media (max-height: 700px) {
  .campaign-banners-modal {
    padding: 12px;
  }

  .campaign-banners-modal .ws-default-modal-dialog {
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
  }
}

.campaign-scope-field[hidden] {
  display: none !important;
}

.missions-directory-modal .ws-default-modal-dialog {
  max-height: calc(100vh - 44px);
  max-height: calc(100dvh - 44px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.missions-directory-modal .ws-default-modal-head {
  flex: 0 0 auto;
}

.missions-directory-modal .missions-directory-confirm-form {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.missions-directory-detail-form textarea[readonly] {
  resize: none;
}

.missions-directory-modal .missions-directory-detail-form {
  padding-top: 20px;
  gap: 20px;
}

.missions-directory-detail-form .ws-modal-banner-preview-wrap {
  gap: 6.5px;
  margin-bottom: 0;
}

.missions-directory-detail-form .ws-modal-section-divider {
  display: none;
}

.missions-directory-detail-form .ws-modal-two-col-row,
.missions-directory-detail-form .ws-modal-three-col-row {
  column-gap: 14px;
  row-gap: 20px;
  margin: 0;
  padding-top: 10px;
}

.missions-directory-detail-form>label.field-full {
  padding-top: 10px;
}

.missions-directory-detail-form label,
.missions-directory-detail-form .ws-modal-two-col-row>label,
.missions-directory-detail-form .ws-modal-three-col-row>label {
  gap: 6.5px;
}

.missions-directory-route-field[hidden] {
  display: none !important;
}

.missions-directory-detail-form label span,
.missions-directory-detail-form .ws-modal-banner-preview-label {
  line-height: 1.2;
}

.missions-directory-detail-form input,
.missions-directory-detail-form select {
  min-height: 46px;
}

.missions-directory-detail-form textarea {
  min-height: 130px;
}

.missions-directory-detail-form>.missions-directory-submission-section {
  margin-top: 10px;
}

.missions-directory-submission-section {
  display: grid;
  gap: 20px;
  border: 1px solid #ded9ee;
  border-radius: 14px;
  background: #f8f7fd;
  padding: 20px;
}

.missions-directory-submission-section .ws-modal-two-col-row,
.missions-directory-submission-section .ws-modal-three-col-row {
  padding-top: 0;
  row-gap: 16px;
}

.missions-directory-submission-section>label {
  gap: 8px;
}

.missions-directory-submission-heading h3 {
  margin: 0;
  color: #332b48;
  font-size: 1rem;
}

.missions-directory-submission-heading p {
  margin: 4px 0 0;
  color: #74788b;
  font-size: 0.82rem;
  line-height: 1.45;
}

.missions-directory-submission-evidence {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(250px, 0.75fr);
  gap: 16px;
  align-items: stretch;
}

.missions-directory-submission-photo,
.missions-directory-submission-link-wrap {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 8px;
}

.missions-directory-submission-photo>span,
.missions-directory-submission-link-wrap>span {
  color: #555c76;
  font-size: 0.79rem;
  font-weight: 700;
}

.missions-directory-submission-photo a {
  display: block;
  overflow: hidden;
  border: 1px solid #d8dff0;
  border-radius: 12px;
  background: #edf0f7;
}

.missions-directory-submission-photo img {
  width: 100%;
  height: clamp(210px, 32vh, 340px);
  display: block;
  object-fit: contain;
}

.missions-directory-submission-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  border: 1px solid #cfc9ef;
  border-radius: 10px;
  background: #ffffff;
  color: #6259ae;
  font-size: 0.86rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.missions-directory-submission-link:hover,
.missions-directory-submission-link:focus-visible {
  border-color: #8c82d1;
  background: #f1effc;
  transform: translateY(-1px);
}

.missions-directory-submission-link-wrap small {
  overflow-wrap: anywhere;
  color: #74788b;
  line-height: 1.45;
}

.missions-directory-submission-empty {
  min-height: 72px;
  display: grid;
  place-items: center;
  border: 1px dashed #cfd5e4;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  padding: 14px;
  color: #858b9d;
  font-size: 0.83rem;
  text-align: center;
}

.missions-directory-detail-form .ws-modal-submit-row {
  margin-top: 8px;
}

.missions-directory-create-form textarea {
  min-height: 132px;
}

.missions-directory-create-form .ws-modal-submit-row .page-modal-actions {
  justify-content: flex-end;
}

.missions-directory-confirm-form .ws-modal-submit-row {
  justify-content: flex-end;
}

.missions-directory-confirm-form .ws-modal-submit-row .page-modal-actions {
  margin-left: auto;
}

.monthly-missions-calendar {
  width: 58px;
  min-width: 58px;
  height: 58px;
  overflow: hidden;
  display: grid;
  grid-template-rows: 22px 1fr;
  border: 1px solid #d6d0ef;
  border-radius: 12px;
  background: #ffffff;
  color: #27203e;
  text-align: center;
}

.monthly-missions-calendar strong {
  display: grid;
  place-items: center;
  background: #756abd;
  color: #ffffff;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.monthly-missions-calendar span {
  display: grid;
  place-items: center;
  font-size: 1.05rem;
  font-weight: 800;
}

.monthly-missions-meta {
  flex-wrap: wrap;
}

.monthly-missions-form.compact-form-grid {
  gap: 18px 16px;
}

.monthly-missions-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 16px;
  align-items: start;
}

.monthly-missions-form-grid>label,
.monthly-missions-picker {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.monthly-missions-picker {
  grid-column: 1 / -1;
}

.monthly-missions-active-switch {
  justify-items: center;
}

.monthly-missions-picker-head {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  color: #555c76;
  font-size: 0.79rem;
  font-weight: 700;
}

.monthly-missions-add-row,
.monthly-missions-remove-row {
  border: 1px solid #cfc9ef;
  background: #ffffff;
  color: #675db2;
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.monthly-missions-add-row {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  font-size: 1rem;
  line-height: 1;
}

.monthly-missions-rows {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px 12px;
}

.monthly-missions-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 36px;
  gap: 8px;
  align-items: center;
}

.monthly-missions-row select {
  width: 100%;
}

.monthly-missions-remove-row {
  width: 36px;
  height: 42px;
  border-radius: 10px;
  font-size: 1.15rem;
  line-height: 1;
}

.monthly-missions-remove-row:disabled {
  opacity: 0.42;
  cursor: not-allowed;
}

.monthly-missions-note {
  width: 100%;
  box-sizing: border-box;
  margin: 6px 0 0;
  border-radius: 10px;
  background: #f5f3fc;
  padding: 11px 13px;
  color: #69657d;
  font-size: 0.82rem;
  line-height: 1.45;
}

.monthly-missions-form>.ws-modal-submit-row {
  margin-top: 6px;
  padding-top: 4px;
}

.monthly-missions-form .ws-modal-submit-row .page-modal-actions {
  gap: 10px;
}

.monthly-missions-form .application-action-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

@media (max-width: 760px) {
  .missions-directory-submission-evidence {
    grid-template-columns: 1fr;
  }

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

  .monthly-missions-rows {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 761px) and (max-width: 980px) {
  .monthly-missions-form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .monthly-missions-active-switch {
    justify-items: start;
  }
}

.ws-default-modal-body {
  padding: 16px 20px 18px;
}

.ws-subscription-pricing-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  gap: 10px;
}

.ws-subscription-pricing-row label {
  display: grid;
  gap: 6px;
}

@media (max-width: 1080px) {
  .membership-packages-plan-grid {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
  }
}

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

  .workshop-header {
    grid-template-columns: 1fr;
  }

  .masterclass-source-toolbar {
    grid-template-columns: 1fr;
  }

  .workshop-toolbar {
    width: 100%;
    max-width: none;
    grid-template-columns: 1fr;
  }

  .workshop-toolbar .membership-toolbar-actions {
    justify-content: flex-start;
  }

  .masterclass-card {
    grid-template-columns: 1fr;
  }

  .masterclass-card-media,
  .masterclass-card-media img {
    min-height: 180px;
  }

  .membership-packages-plan-grid {
    grid-template-columns: 1fr;
  }

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

  .ws-modal-two-col-row,
  .ws-modal-three-col-row,
  .ws-modal-four-col-row {
    grid-template-columns: 1fr;
  }

  .ws-modal-family-active-row {
    gap: 10px;
  }

  .compact-form-grid .field-file input[type="file"] {
    max-width: 100%;
  }

  .ws-subscription-pricing-row {
    grid-template-columns: 1fr;
  }

  .membership-benefit-logo-row {
    grid-template-columns: 1fr;
  }

  .membership-plan-create-details {
    grid-template-columns: 1fr;
  }

  .manage-schedules-form .manage-schedules-form-row,
  .manage-schedules-form .manage-schedules-form-row-last,
  .manage-schedules-form .manage-schedules-form-row-audience,
  .manage-schedules-form .manage-schedules-form-row-switch-only {
    grid-template-columns: 1fr;
  }
}

/* User Accounts Page (pages/user-accounts.php) */

.user-accounts-main {
  padding: 0;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.user-accounts-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px 20px;
  flex-wrap: wrap;
}

.user-accounts-header-copy {
  min-width: 250px;
}

.user-accounts-header-copy h1 {
  margin: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: "Inter", "Manrope", sans-serif;
  font-size: 28px;
  font-style: normal;
  line-height: normal;
}

.user-accounts-header-copy .membership-count {
  margin: 4px 0 0;
  font-family: "Inter", "Manrope", sans-serif;
  font-size: 14px;
  font-style: normal;
  line-height: normal;
}

.user-accounts-header-copy .membership-count-number {
  color: #6f68b8;
  font-weight: 700;
}

.user-accounts-header-copy .membership-count-label {
  color: #71717a;
  font-weight: 400;
}

.user-accounts-header-copy>p:not(.membership-count) {
  margin: 8px 0 0;
  color: #5f6073;
}

.user-accounts-header-actions {
  margin-left: auto;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.user-accounts-header-actions .membership-toolbar-btn {
  margin: 0;
}

.user-accounts-toolbar {
  margin-top: 0;
  margin-left: auto;
  flex: 1 1 600px;
  width: min(100%, 860px);
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(150px, 190px) auto;
  gap: 10px;
  align-items: end;
  max-width: 860px;
}

.user-accounts-search,
.user-accounts-filter {
  display: grid;
  gap: 6px;
}

.user-accounts-search {
  max-width: none;
}

.user-accounts-search span,
.user-accounts-filter span {
  font-size: 0.78rem;
  font-weight: 700;
  color: #5c5d72;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.user-accounts-search input,
.user-accounts-filter select {
  width: 100%;
  border: 1px solid #d4daea;
  border-radius: 10px;
  padding: 9px 11px;
  font: inherit;
  color: #2a2d3d;
  background: #ffffff;
}

.user-accounts-grid {
  margin-top: 16px;
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 12px;
}

.user-accounts-panel,
.user-accounts-role-list,
.user-accounts-table-wrap {
  background: #fcfcfd;
  border-radius: 14px;
  border: 1px solid #ebe6f5;
  box-shadow: var(--soft-shadow);
  padding: 14px;
}

.user-accounts-panel h2,
.user-accounts-section-head h2 {
  margin: 0;
  font-size: 1rem;
  color: #341d5e;
}

.user-accounts-form {
  margin-top: 10px;
  display: grid;
  gap: 8px;
}

.user-accounts-form label {
  display: grid;
  gap: 5px;
}

.user-accounts-form label span {
  font-size: 0.75rem;
  color: #676a7e;
}

.user-accounts-form input,
.user-accounts-form select {
  border: 1px solid #d7dded;
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  font-size: 0.85rem;
  color: #252735;
  background: #ffffff;
}

.user-password-generate-control {
  display: flex;
  align-items: stretch;
  gap: 8px;
}

.user-password-generate-control input {
  min-width: 0;
  flex: 1 1 auto;
}

.user-password-generate-button {
  width: 40px;
  min-height: 38px;
  border: 1px solid #d8d2f0;
  border-radius: 8px;
  color: #6f68b8;
  background: #f8f7ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.user-password-generate-button:hover {
  color: #ffffff;
  background: #6f68b8;
  border-color: #6f68b8;
  box-shadow: 0 8px 18px rgba(111, 104, 184, 0.22);
  transform: translateY(-1px);
}

.user-password-generate-button:focus-visible {
  outline: 3px solid rgba(111, 104, 184, 0.24);
  outline-offset: 2px;
}

.user-create-account-form.compact-form-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}

.user-create-account-form label {
  min-width: 0;
}

.ws-default-modal-form.user-create-account-form>label+label,
.ws-default-modal-form.user-create-account-form>label+.field-full,
.ws-default-modal-form.user-create-account-form>.field-full+.page-modal-actions {
  padding-top: 0;
}

.user-create-account-form input,
.user-create-account-form select {
  width: 100%;
  box-sizing: border-box;
}

.user-create-account-form .user-password-generate-field {
  min-width: 0;
}

.user-create-account-form .user-password-generate-control {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px;
  min-width: 0;
}

.user-create-account-form .user-password-input-shell {
  position: relative;
  display: block;
  min-width: 0;
}

.user-create-account-form .user-password-input-shell input {
  padding-right: 44px;
}

.user-password-reveal-button {
  position: absolute;
  top: 50%;
  right: 8px;
  width: 30px;
  height: 30px;
  transform: translateY(-50%);
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #6f68b8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.user-password-reveal-button:hover,
.user-password-reveal-button:focus-visible {
  background: #f0edfb;
}

.user-create-account-form .user-password-generate-button {
  width: 40px;
  min-width: 40px;
}

.user-accounts-form-actions {
  margin-top: 4px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.user-accounts-form-actions .application-action-button {
  margin: 0;
}

.user-accounts-modules-picker {
  display: grid;
  gap: 8px;
}

.picker-title {
  font-size: 0.79rem;
  font-weight: 700;
  color: #4e5470;
}

.picker-empty {
  margin: 0;
  color: #6b7189;
  font-size: 0.82rem;
}

.modules-check-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 6px 10px;
}

.module-check-item {
  display: flex !important;
  align-items: flex-start;
  gap: 8px;
}

.module-check-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  flex: 0 0 18px;
  margin: 1px 0 0;
  padding: 0;
  box-sizing: border-box;
  accent-color: #147bed;
}

.module-check-item span {
  font-size: 0.83rem !important;
  color: #2f3448 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-weight: 600 !important;
}

.role-list-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

#userAccountsRolesModal .ws-default-modal-dialog {
  max-height: calc(100vh - 44px);
  max-height: calc(100dvh - 44px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#userAccountsRolesModal .ws-default-modal-head {
  flex: 0 0 auto;
}

#userAccountsRolesModal .ws-default-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.role-card {
  border: 1px solid #e7e3f2;
  border-radius: 12px;
  background: #ffffff;
  padding: 16px 18px 18px;
  overflow: hidden;
}

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

.role-card-head h3 {
  margin: 0;
  font-size: 0.95rem;
  color: #2c1850;
}

.role-card-meta {
  margin: 10px 0 0;
  color: #66708c;
  font-size: 0.8rem;
}

.role-module-chips {
  margin-top: 8px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.user-accounts-table-wrap {
  margin-top: 12px;
}

.user-accounts-table-scroll {
  margin-top: 10px;
  overflow: auto;
}

.user-accounts-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 920px;
}

.user-accounts-table th,
.user-accounts-table td {
  border-bottom: 1px solid #e6eaf4;
  text-align: left;
  vertical-align: top;
  padding: 10px 8px;
  font-size: 0.83rem;
}

.user-accounts-table th {
  color: #5b6382;
  font-size: 0.77rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 700;
  background: #f5f7fc;
}

.user-accounts-table td {
  color: #27314f;
}

.user-account-row {
  cursor: pointer;
  transition:
    background-color 0.16s ease,
    box-shadow 0.16s ease;
}

.user-account-row:hover {
  background: #f2f6ff;
}

.user-account-row:focus-visible {
  outline: 2px solid #2a4e97;
  outline-offset: -2px;
  background: #eef4ff;
}

.user-account-row td {
  vertical-align: middle;
}

.role-edit-form {
  margin-top: 10px;
  padding-bottom: 10px;
}

.role-edit-form[hidden] {
  display: none !important;
}

.role-edit-form .page-modal-actions {
  margin-top: 22px;
  padding-top: 4px;
  padding-bottom: 8px;
  padding-right: 8px;
  align-items: center;
  box-sizing: border-box;
}

.role-edit-form .modules-check-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
}

.role-edit-form .module-check-item {
  min-width: 0;
}

.role-edit-form .module-check-item span {
  overflow-wrap: anywhere;
}

.user-update-dialog {
  padding: 0;
  width: min(840px, 100%);
  overflow: hidden;
}

.user-update-head {
  flex: 0 0 auto;
}

.user-update-head h2 {
  font-family: "Inter", "Manrope", sans-serif;
  font-size: 1.12rem;
  font-weight: 700;
}

.user-update-close {
  color: #ffffff;
}

.user-update-form {
  margin: 0;
}

.user-update-body {
  padding: 22px 22px 18px;
  display: grid;
  gap: 16px;
}

.user-update-grid {
  display: grid;
  gap: 16px;
}

.user-update-grid-three {
  grid-template-columns: repeat(3, minmax(180px, 1fr));
}

.user-update-grid-two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.user-update-grid-align-end {
  align-items: end;
}

.user-update-body label {
  display: grid;
  gap: 7px;
}

.user-update-body label span {
  font-size: 0.79rem;
  font-weight: 700;
  color: var(--brand);
}

.user-update-body input,
.user-update-body select {
  border: 1px solid #d3dae4;
  border-radius: 10px;
  padding: 12px 13px;
  font: inherit;
  font-size: 0.95rem;
  color: #23303f;
  background: #ffffff;
}

.user-update-body .account-role-select {
  max-width: none;
}

.user-update-active-switch {
  display: inline-grid !important;
  justify-self: start;
  justify-items: center;
  gap: 8px;
  min-height: auto;
  margin-top: 2px;
}

.user-update-active-switch>span:first-child {
  margin: 0;
  text-align: center;
}

.user-update-footer {
  border-top: 1px solid #dbe2eb;
  padding: 18px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.user-update-footer-split {
  justify-content: space-between;
}

.user-update-footer-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.user-update-reset-button {
  border: 0;
  border-radius: 10px;
  background: #6f68b8;
  color: #ffffff;
  font: inherit;
  font-weight: 700;
  min-height: 42px;
  padding: 10px 18px;
  cursor: pointer;
}

.user-update-close-button {
  border: 1px solid #ccbce8;
  border-radius: 10px;
  background: #ffffff;
  color: var(--brand);
  font: inherit;
  font-weight: 700;
  padding: 10px 18px;
  cursor: pointer;
}

.user-update-submit-button {
  border: 0;
  border-radius: 10px;
  background: var(--brand);
  color: #ffffff;
  font: inherit;
  font-weight: 700;
  min-height: 42px;
  padding: 10px 20px;
  cursor: pointer;
}

.user-update-reset-button:hover,
.user-update-close-button:hover,
.user-update-submit-button:hover {
  filter: brightness(1.03);
}

.account-actions {
  display: grid;
  grid-template-columns: minmax(240px, 280px) auto auto;
  align-items: center;
  column-gap: 10px;
  row-gap: 8px;
  width: 100%;
  justify-content: flex-start;
}

.account-inline-form {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  width: auto;
  max-width: 100%;
}

.account-actions .account-inline-form:first-child {
  width: 100%;
}

.account-role-select {
  min-width: 0;
  width: 100%;
  max-width: 190px;
  border: 1px solid #d7dded;
  border-radius: 8px;
  padding: 7px 9px;
  font: inherit;
  font-size: 0.82rem;
  color: #252735;
  background: #ffffff;
}

.account-inline-form .application-action-button {
  margin: 0;
  padding: 8px 12px;
  font-size: 0.8rem;
  white-space: nowrap;
}

/* Chat Room Page (pages/chat-room.php) */

.chat-room-page {
  height: 100vh;
  overflow: hidden;
  background: #edf1fa;
}

.chat-room-page .app-layout,
.chat-room-page .app-content,
.chat-room-page .content-frame,
.chat-room-page .content-surface,
.chat-room-page .chat-room-main {
  min-height: 0;
}

.chat-room-page .app-layout {
  min-height: 0;
  height: 100vh;
  overflow: hidden;
}

.chat-room-page .app-content {
  min-height: 0;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.chat-room-page .content-frame {
  min-height: 0;
  height: 100%;
  overflow: hidden;
  padding: 20px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.chat-room-page .content-surface {
  min-height: 0;
  height: auto;
  overflow: hidden;
  display: flex;
  padding: 20px;
  flex: 1 1 auto;
  flex-direction: column;
}

.chat-room-main {
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: auto;
  flex: 1 1 auto;
  width: 100%;
}

.chat-room-toolbar {
  grid-template-columns: minmax(280px, 1fr);
}

.chat-room-layout {
  margin-top: 14px;
  display: grid;
  grid-template-columns: minmax(290px, 330px) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
}

.chat-room-sidebar,
.chat-room-conversation {
  border: 1px solid #dbe1f0;
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(76, 91, 128, 0.08);
}

.chat-room-sidebar {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chat-room-sidebar-head {
  padding: 14px 16px;
  border-bottom: 1px solid #e7ecf7;
}

.chat-room-sidebar-head h2 {
  margin: 0;
  color: #2f2f32;
  font-size: 1rem;
  font-weight: 700;
}

.chat-room-users-list {
  padding: 8px;
  display: grid;
  gap: 8px;
  overflow-y: auto;
}

.chat-room-users-loader,
.chat-room-messages-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 8px;
  color: #5f6785;
  font-size: 0.78rem;
  font-weight: 700;
}

.chat-room-users-loader[hidden],
.chat-room-messages-loader[hidden] {
  display: none !important;
}

.chat-room-users-loader::before,
.chat-room-messages-loader::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #c7cee3;
  border-top-color: #6f68b8;
  animation: chat-room-spinner 0.8s linear infinite;
}

.chat-room-user-card {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid #e2e7f3;
  border-radius: 12px;
  background: #ffffff;
  text-decoration: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}

.chat-room-user-card:hover,
.chat-room-user-card:focus-visible {
  border-color: #b8c3e0;
  background: #f8f9ff;
  box-shadow: 0 4px 10px rgba(76, 91, 128, 0.08);
}

.chat-room-user-card.is-selected {
  border-color: #6f68b8;
  background: #f5f3ff;
}

.chat-room-user-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #d8deed;
  background: #f7f8fd;
}

.chat-room-user-copy {
  min-width: 0;
}

.chat-room-user-copy h3 {
  margin: 0;
  color: #2f2f32;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-room-user-copy p {
  margin: 2px 0 0;
  color: #6a728d;
  font-size: 0.78rem;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-room-user-action {
  padding: 6px 10px;
  border-radius: 999px;
  background: #eef1fb;
  color: #42588d;
  font-size: 0.75rem;
  font-weight: 700;
  white-space: nowrap;
}

.chat-room-user-unread-badge {
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  border-radius: 999px;
  background: #6f68b8;
  color: #ffffff;
  font-size: 0.74rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.chat-room-conversation {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.chat-room-conversation-head {
  padding: 14px 16px;
  border-bottom: 1px solid #e7ecf7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.chat-room-conversation-head-copy {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.chat-room-conversation-head-copy h2 {
  margin: 0;
  color: #2f2f32;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
}

.chat-room-conversation-head-copy p {
  margin: 2px 0 0;
  color: #6a728d;
  font-size: 0.82rem;
}

.chat-room-refresh-link {
  text-decoration: none;
}

.chat-room-messages {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 16px;
  background: #f6f8fd;
  display: grid;
  gap: 10px;
  align-content: start;
}

.chat-room-message {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: min(82%, 620px);
}

.chat-room-message.is-admin {
  margin-left: auto;
  align-items: flex-end;
}

.chat-room-message.is-user {
  margin-right: auto;
  align-items: flex-start;
}

.chat-room-message-bubble {
  border-radius: 14px;
  padding: 9px 12px;
  font-size: 0.9rem;
  line-height: 1.45;
  word-break: break-word;
}

.chat-room-message-bubble-media {
  display: grid;
  gap: 8px;
}

.chat-room-media-link {
  display: block;
}

.chat-room-media-image {
  display: block;
  width: 100%;
  max-width: 340px;
  border-radius: 10px;
  border: 1px solid #dce2f2;
  object-fit: cover;
  background: #eef2fb;
}

.chat-room-media-video {
  display: block;
  width: 100%;
  max-width: 360px;
  border-radius: 10px;
  border: 1px solid #dce2f2;
  background: #10152a;
}

.chat-room-file-link {
  display: grid;
  gap: 2px;
  text-decoration: none;
  color: inherit;
}

.chat-room-file-link strong {
  font-size: 0.9rem;
}

.chat-room-file-link span {
  font-size: 0.78rem;
  opacity: 0.88;
}

.chat-room-media-caption {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.4;
}

.chat-room-message.is-admin .chat-room-message-bubble {
  background: #6f68b8;
  color: #ffffff;
  border-top-right-radius: 7px;
}

.chat-room-message.is-user .chat-room-message-bubble {
  background: #ffffff;
  color: #2f2f32;
  border: 1px solid #dde3f2;
  border-top-left-radius: 7px;
}

.chat-room-message-meta {
  margin: 0;
  color: #727a95;
  font-size: 0.74rem;
  font-weight: 600;
}

.chat-room-message-empty {
  margin: 0;
  padding: 14px;
  border: 1px dashed #cad4ea;
  border-radius: 12px;
  color: #667089;
  background: #ffffff;
  font-size: 0.9rem;
}

@keyframes chat-room-spinner {
  to {
    transform: rotate(360deg);
  }
}

.chat-room-compose-form {
  border-top: 1px solid #e7ecf7;
  padding: 12px 14px 14px;
  background: #ffffff;
}

.chat-room-compose-form-inline {
  flex: 0 0 auto;
}

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

.chat-room-attachment-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(620px, 100%);
  margin: 0 0 10px 66px;
  padding: 10px 12px;
  border: 1px solid #d8def0;
  border-radius: 18px;
  background: #f7f8ff;
  box-shadow: 0 10px 24px rgba(31, 46, 92, 0.08);
}

.chat-room-attachment-preview[hidden] {
  display: none;
}

.chat-room-attachment-preview-thumb {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #e9edfb;
  color: #6f68b8;
  display: grid;
  place-items: center;
  flex: 0 0 48px;
  overflow: hidden;
}

.chat-room-attachment-preview-thumb svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.chat-room-attachment-preview-thumb.is-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chat-room-attachment-preview-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
  color: #2a2d3d;
}

.chat-room-attachment-preview-copy strong,
.chat-room-attachment-preview-copy span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-room-attachment-preview-copy strong {
  font-size: 0.92rem;
  font-weight: 800;
}

.chat-room-attachment-preview-copy span {
  color: #68728d;
  font-size: 0.82rem;
}

.chat-room-attachment-preview-remove {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: #ffffff;
  color: #6f68b8;
  font-size: 1.3rem;
  line-height: 1;
  font-weight: 800;
  cursor: pointer;
  margin-left: auto;
  box-shadow: 0 6px 16px rgba(31, 46, 92, 0.1);
}

.chat-room-attachment-preview-remove:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}

.chat-room-compose-inline-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.chat-room-compose-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 56px;
  border: 1px solid #d4daea;
  border-radius: 999px;
  padding: 0 18px;
  font: inherit;
  font-size: 0.95rem;
  color: #2a2d3d;
  background: #f9fbff;
}

.chat-room-compose-input::placeholder {
  color: #8a92a8;
}

.chat-room-compose-input:focus {
  outline: none;
  border-color: #6f68b8;
  box-shadow: 0 0 0 3px rgba(111, 104, 184, 0.12);
}

.chat-room-icon-btn {
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 50%;
  background: #1c2e63;
  color: #a9ffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex: 0 0 56px;
  padding: 0;
  box-shadow: 0 10px 22px rgba(18, 35, 86, 0.18);
}

.chat-room-icon-btn svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.chat-room-attach-trigger {
  position: relative;
}

.chat-room-attach-trigger input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.chat-room-send-trigger {
  color: #a9ffff;
}

.chat-room-send-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid rgba(169, 255, 255, 0.35);
  border-top-color: #a9ffff;
  border-radius: 50%;
  display: none;
  animation: chat-room-spinner 0.75s linear infinite;
}

.chat-room-compose-form.is-sending .chat-room-send-icon {
  display: none;
}

.chat-room-compose-form.is-sending .chat-room-send-spinner {
  display: inline-block;
}

.chat-room-compose-form.is-sending .chat-room-compose-input {
  background: #eef3ff;
  color: #65708f;
  cursor: wait;
}

.chat-room-compose-form.is-sending .chat-room-attach-trigger {
  opacity: 0.65;
  pointer-events: none;
  cursor: wait;
}

.chat-room-compose-form.is-sending .chat-room-send-trigger {
  cursor: wait;
  opacity: 0.95;
}

.chat-room-attach-trigger {
  background: #eef3ff;
  color: #415585;
}

.chat-room-attach-trigger input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.chat-room-empty-state {
  min-height: 620px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  text-align: center;
  padding: 28px;
}

.chat-room-empty-state h2 {
  margin: 0;
  color: #2f2f32;
  font-size: 1.22rem;
  font-weight: 700;
}

.chat-room-empty-state p {
  margin: 0;
  color: #626b86;
  font-size: 0.94rem;
  max-width: 520px;
}

/* Data Analytics Page (pages/data-analytics.php) */

.content-surface-analytics {
  background: #eef1f7;
  box-shadow: none;
}

.data-analytics-main {
  display: grid;
  gap: 26px;
}

.data-analytics-header {
  display: flex;
  justify-content: flex-end;
}

.data-analytics-period-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.data-analytics-date-stepper {
  height: 42px;
  min-width: 146px;
  display: grid;
  grid-template-columns: 38px 1fr 38px;
  align-items: center;
  border: 1px solid #756dc3;
  border-radius: 8px;
  background: #ffffff;
  overflow: hidden;
}

.data-analytics-date-stepper a,
.data-analytics-date-stepper span {
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #6f68b8;
  text-decoration: none;
  font-weight: 700;
}

.data-analytics-date-stepper a {
  color: #756dc3;
  font-size: 28px;
  line-height: 1;
  transition: background-color 0.16s ease, color 0.16s ease;
}

.data-analytics-date-stepper a:hover,
.data-analytics-date-stepper a:focus-visible {
  background: #f1efff;
  color: #514a9b;
}

.data-analytics-period-btn,
.data-analytics-risk-tab {
  min-width: 100px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  border: 1px solid transparent;
  background: #e3e3e4;
  color: #34353a;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.data-analytics-period-btn.is-active,
.data-analytics-risk-tab.is-active {
  background: #6f68b8;
  border-color: #6f68b8;
  color: #ffffff;
}

.data-analytics-grid {
  display: grid;
  grid-template-columns: minmax(0, 2.15fr) minmax(360px, 1fr);
  gap: 18px;
  align-items: stretch;
}

.data-analytics-left-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.data-analytics-card {
  border-radius: 14px;
  background: #ffffff;
  padding: 20px;
  box-shadow: 0 2px 7px rgba(45, 47, 64, 0.08);
}

.data-analytics-card-header,
.data-analytics-centered-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}

.data-analytics-centered-header {
  justify-content: center;
  text-align: center;
}

.data-analytics-card h2,
.data-analytics-centered-header h2 {
  margin: 0;
  color: #303037;
  font-size: 1.2rem;
  font-weight: 900;
  line-height: 1.2;
}

.data-analytics-card-link,
.data-analytics-sort-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #6f68b8;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.data-analytics-card-link span {
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 0.8;
}

.data-analytics-rank-list {
  display: grid;
  gap: 10px;
}

.data-analytics-rank-row,
.data-analytics-risk-row {
  display: grid;
  grid-template-columns: 32px 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 10px 14px;
  border-radius: 8px;
  background: #f7f7f8;
}

.data-analytics-rank-row.is-highlighted {
  background: #f0eefc;
}

.data-analytics-rank-number {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  background: #6f68b8;
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 900;
}

.data-analytics-rank-number.is-muted {
  background: #e3e3e4;
  color: #4a4b50;
}

.data-analytics-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  background: #eef2fb;
  border: 1px solid #dce3f4;
}

.data-analytics-rank-copy,
.data-analytics-rank-meta,
.data-analytics-risk-row>div {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.data-analytics-rank-copy strong,
.data-analytics-risk-row strong {
  color: #303037;
  font-size: 0.98rem;
  font-weight: 900;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.data-analytics-rank-copy span,
.data-analytics-risk-row span:not(.data-analytics-risk-badge):not(.data-analytics-rank-number) {
  color: #3f4354;
  font-size: 0.84rem;
}

.data-analytics-rank-meta {
  justify-items: end;
  text-align: right;
}

.data-analytics-rank-meta strong {
  color: #303037;
  font-size: 0.98rem;
  font-weight: 900;
}

.data-analytics-leadership-card .data-analytics-rank-meta strong {
  color: #6f68b8;
}

.data-analytics-rank-meta span:not(.data-analytics-risk-badge) {
  color: #747b91;
  font-size: 0.7rem;
}

.data-analytics-members-card {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.data-analytics-donut-wrap {
  display: flex;
  justify-content: center;
  margin: 14px 0 22px;
}

.data-analytics-donut {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
}

.data-analytics-donut::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at center, #ffffff 0 48%, transparent 49%),
    var(--donut-bg, conic-gradient(#e0e0e0 0 100%));
  --analytics-draw-percent: 100;
  -webkit-mask: conic-gradient(#000 calc(var(--analytics-draw-percent) * 1%), transparent 0);
  mask: conic-gradient(#000 calc(var(--analytics-draw-percent) * 1%), transparent 0);
  animation: dataAnalyticsDonutFill 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
}

.data-analytics-donut>div {
  display: grid;
  justify-items: center;
  gap: 2px;
  position: relative;
  z-index: 1;
  animation: dataAnalyticsDonutTextFade 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.5s backwards;
}

.data-analytics-donut strong {
  color: #6f68b8;
  font-size: 2.55rem;
  font-weight: 900;
  line-height: 1;
}

.data-analytics-donut span {
  color: #303037;
  font-size: 1rem;
  font-weight: 900;
}

.data-analytics-member-legend {
  display: flex;
  justify-content: center;
  gap: 26px;
  flex-wrap: wrap;
  margin-bottom: 34px;
}

.data-analytics-member-legend span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #303037;
  font-size: 0.92rem;
  font-weight: 900;
}

.data-analytics-member-legend i {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-block;
}

.data-analytics-member-legend i.is-active {
  background: #6f68b8;
}

.data-analytics-member-legend i.is-inactive {
  background: #ee5d61;
}

.data-analytics-risk-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  gap: 12px;
}

.data-analytics-risk-tabs-group {
  display: flex;
  gap: 8px;
  flex: 1;
}

.data-analytics-risk-count-badge {
  background: #f1f2f6;
  color: #5b637b;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
}

.data-analytics-risk-count-badge strong {
  color: #6f68b8;
  font-size: 1.05rem;
}

.data-analytics-risk-tab {
  flex: 1;
  text-align: center;
  height: 40px;
  padding: 0 10px;
}

.data-analytics-risk-basis-form select,
.data-analytics-level-filter select {
  width: 100%;
  min-height: 40px;
  border: 1px solid #d6d9e4;
  border-radius: 7px;
  color: #585b67;
  background: #ffffff;
  padding: 0 12px;
  font: inherit;
}

.data-analytics-churn-list {
  display: grid;
  gap: 10px;
  flex: 1;
}

.data-analytics-risk-row {
  grid-template-columns: 32px 48px minmax(0, 1fr) minmax(80px, auto);
}

.data-analytics-risk-badge {
  justify-self: end;
  min-width: 70px;
  padding: 5px 12px;
  border-radius: 999px;
  background: #eca72c;
  color: #ffffff;
  font-size: 0.64rem;
  font-weight: 900;
  text-align: center;
}

.data-analytics-risk-badge.is-green {
  background: #13bb70;
}

.data-analytics-risk-badge.is-yellow {
  background: #eca72c;
}

.data-analytics-risk-badge.is-orange {
  background: #d97832;
}

.data-analytics-risk-badge.is-red {
  background: #d94659;
}

.data-analytics-kids-card {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
}

.data-analytics-bar-chart {
  position: relative;
  min-height: 360px;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 14px;
}

.data-analytics-chart-grid {
  display: grid;
  grid-template-rows: repeat(6, 1fr);
  color: #777f92;
  font-size: 0.72rem;
}

.data-analytics-chart-grid span {
  display: flex;
  align-items: center;
}

.data-analytics-bars {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(46px, 1fr));
  align-items: end;
  gap: 18px;
  padding-top: 24px;
}

.data-analytics-bars::before {
  content: "";
  position: absolute;
  inset: 24px 0 36px;
  background: repeating-linear-gradient(to bottom,
      rgba(91, 99, 123, 0.16) 0,
      rgba(91, 99, 123, 0.16) 1px,
      transparent 1px,
      transparent 64px);
  pointer-events: none;
}

.data-analytics-bar-item {
  position: relative;
  z-index: 1;
  min-height: 100%;
  display: grid;
  grid-template-rows: 24px 1fr 24px;
  justify-items: center;
  align-items: end;
  gap: 8px;
}

.data-analytics-bar-item strong {
  font-size: 0.88rem;
  font-weight: 900;
}

.data-analytics-bar {
  width: min(64px, 100%);
  height: var(--bar-height, 4%);
  min-height: 8px;
  border-radius: 8px 8px 0 0;
  background: var(--bar-color, #6f68b8);
  box-shadow: 0 8px 18px rgba(62, 66, 90, 0.12);
  transform-origin: bottom;
  animation: dataAnalyticsGrowUp 1.2s cubic-bezier(0.16, 1, 0.3, 1) backwards;
  animation-delay: var(--animation-delay, 0s);
}

.data-analytics-bar-item small {
  color: #686f82;
  font-size: 0.72rem;
}

.data-analytics-top-kids-panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.data-analytics-level-filter {
  width: 140px;
}

.data-analytics-kid-avatar-wrap {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--kid-level-color, #6f68b8), rgba(255, 255, 255, 0.45));
}

.data-analytics-kid-avatar-wrap .data-analytics-avatar {
  width: 44px;
  height: 44px;
  border: 2px solid #ffffff;
}

.data-analytics-kid-level {
  justify-self: start;
  min-width: 70px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--kid-level-color, #6f68b8);
  color: #ffffff !important;
  font-size: 0.66rem !important;
  font-weight: 900;
  text-align: center;
}

.data-analytics-bottom-link {
  justify-self: end;
  align-self: end;
  margin-top: 12px;
}

.data-analytics-empty {
  margin: 0;
  padding: 16px;
  border-radius: 12px;
  background: #f7f7fb;
  color: #68718b;
}

@media (max-width: 1240px) {

  .data-analytics-grid,
  .data-analytics-left-grid,
  .data-analytics-kids-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {

  .data-analytics-header,
  .data-analytics-period-controls,
  .data-analytics-date-stepper {
    width: 100%;
  }

  .data-analytics-period-btn {
    flex: 1 1 30%;
    min-width: 0;
  }

  .data-analytics-risk-toolbar {
    grid-template-columns: 1fr;
  }

  .data-analytics-rank-row,
  .data-analytics-risk-row {
    grid-template-columns: 28px 44px minmax(0, 1fr);
  }

  .data-analytics-rank-meta,
  .data-analytics-risk-badge {
    grid-column: 3;
    justify-self: start;
    text-align: left;
  }

  .data-analytics-bar-chart {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .data-analytics-bars {
    gap: 10px;
  }
}

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

  .membership-detail-hero {
    grid-template-columns: 1fr;
  }

  .membership-detail-summary-card {
    max-width: 100%;
  }

  .membership-family-banner-card,
  .membership-family-banner-image {
    min-height: 240px;
    height: 240px;
  }

  .membership-detail-summary-card {
    min-height: 240px;
    height: auto;
  }

  .membership-detail-summary-stats {
    margin-left: 0;
  }

  .membership-detail-actions {
    margin-left: 0;
  }

  .membership-detail-summary-stats-row {
    flex-wrap: wrap;
    row-gap: 12px;
  }

  .membership-detail-summary-stats-row.is-dates .membership-detail-summary-stat:nth-child(3) {
    margin-left: 0;
  }

  .masterclass-inline-search-toolbar {
    flex: 1 1 100%;
    width: 100%;
    max-width: none;
  }

  .masterclass-week-navigation {
    margin: 12px 0 16px;
    gap: 8px;
  }

  .masterclass-week-nav-label {
    font-size: 0.9rem;
    text-align: center;
  }

  .chat-room-layout {
    grid-template-columns: 1fr;
  }

  .chat-room-sidebar,
  .chat-room-conversation,
  .chat-room-empty-state {
    min-height: 420px;
  }

  .chat-room-users-list {
    max-height: 330px;
  }

  .manage-orders-order-overview-grid,
  .manage-orders-preview-grid,
  .manage-orders-detail-grid {
    grid-template-columns: 1fr;
  }

  .manage-orders-voucher-media-stage {
    min-height: 92px;
  }

  .manage-orders-voucher-logo-badge {
    width: 40px;
    height: 40px;
    left: 10px;
    bottom: 8px;
  }

  .manage-orders-toolbar {
    grid-template-columns: 1fr;
  }

  .manage-orders-toolbar.is-vouchers-view {
    width: 100%;
    max-width: none;
    grid-template-columns: minmax(260px, 1fr) minmax(160px, 190px) auto;
  }
}

@media (max-width: 720px) {
  .manage-orders-toolbar.is-vouchers-view {
    grid-template-columns: 1fr;
  }

  .manage-orders-toolbar.is-vouchers-view .membership-toolbar-btn {
    width: 100%;
  }
}

@media (max-width: 900px) {
  .kids-journey-toolbar {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: none;
  }

  .kids-journey-toolbar .membership-toolbar-actions {
    justify-content: flex-start;
  }

  .modules-check-grid {
    grid-template-columns: 1fr;
  }

  .user-update-grid,
  .user-update-grid-three,
  .user-update-grid-two,
  .user-create-account-form.compact-form-grid {
    grid-template-columns: 1fr;
  }

  .account-actions {
    grid-template-columns: 1fr;
  }

  .membership-detail-summary-stats-row.is-members,
  .membership-detail-summary-stats-row.is-dates {
    gap: 20px;
  }

  .membership-detail-row-grid.is-child-grid {
    grid-template-columns: 1fr;
  }

  .membership-detail-row-card.is-wide {
    grid-template-columns: minmax(0, 1fr) minmax(108px, auto);
    gap: 12px;
  }

  .membership-detail-row-side {
    min-height: 88px;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    justify-self: end;
  }

  .membership-detail-row-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .membership-detail-row-fields.is-wide {
    grid-template-columns: 1fr;
    margin-left: 0;
  }

  .membership-detail-row-fields.is-child-wide {
    grid-template-columns: 1fr;
    margin-left: 0;
    margin-top: 0;
  }

  .membership-detail-row-top {
    grid-template-columns: 1fr;
    align-items: flex-start;
    gap: 10px;
  }

  .membership-detail-actions .application-action-button {
    min-width: 126px;
  }

  .membership-detail-view .content-frame {
    padding: 12px;
  }

  .membership-detail-view .content-surface-membership {
    padding: 14px;
  }

  @media (max-width: 460px) {
    .membership-detail-row-card.is-wide {
      grid-template-columns: 1fr;
    }

    .membership-detail-row-side {
      min-height: 0;
      flex-direction: row;
      justify-self: stretch;
    }
  }

  .membership-modal-row-2,
  .membership-modal-row-3 {
    grid-template-columns: 1fr;
  }

  .chat-room-conversation-head {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .chat-room-refresh-link {
    width: 100%;
    text-align: center;
  }

  .chat-room-message {
    max-width: 94%;
  }

  .chat-room-user-card {
    grid-template-columns: 40px minmax(0, 1fr);
  }

  .chat-room-user-action {
    display: none;
  }

  .chat-room-user-unread-badge {
    display: none;
  }

  .chat-room-compose-inline-wrap {
    gap: 8px;
  }

  .chat-room-attachment-preview {
    width: 100%;
    margin-left: 0;
  }

  .chat-room-attachment-preview-thumb {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }

  .chat-room-compose-input {
    height: 50px;
    padding: 0 14px;
  }

  .chat-room-icon-btn {
    width: 50px;
    height: 50px;
    flex-basis: 50px;
  }

  .manage-orders-items-grid {
    grid-template-columns: 1fr;
  }

  .manage-orders-main .application-summary-meta {
    gap: 6px;
  }

  .manage-orders-card .application-summary {
    gap: 14px;
  }

  .manage-orders-card .application-summary-main {
    gap: 10px;
  }

  .manage-orders-card .summary-meta-item {
    width: 100%;
  }

  .manage-orders-order-overview-grid {
    gap: 8px;
  }

  .manage-orders-voucher-media-actions {
    grid-template-columns: 1fr;
  }

  .manage-orders-voucher-media-stage {
    min-height: 92px;
  }

  .manage-orders-voucher-logo-badge {
    width: 38px;
    height: 38px;
  }
}

/* App Appearance Page (pages/app-appearance.php) */

.app-appearance-surface {
  --appearance-ink: #20233b;
  --appearance-muted: #707891;
  --appearance-line: #dfe3ef;
  --appearance-soft: #f6f5fd;
  min-height: calc(100vh - 150px);
  min-height: calc(100dvh - 150px);
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at 88% 10%, rgba(111, 104, 184, 0.1), transparent 28%),
    linear-gradient(180deg, #ffffff 0%, #fdfdff 100%);
}

.app-appearance-main {
  flex: 1 1 auto;
  min-height: calc(100vh - 190px);
  min-height: calc(100dvh - 190px);
  display: flex;
  flex-direction: column;
}

.app-appearance-header {
  grid-template-columns: minmax(230px, 1fr) auto;
  align-items: end;
  margin-bottom: 22px;
}

.app-appearance-note {
  max-width: 520px;
  margin: 0;
  color: #6d748d;
  font-size: 0.88rem;
  font-weight: 650;
  line-height: 1.45;
}

.app-appearance-header-actions {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 16px;
}

.app-appearance-header-filter {
  display: flex;
  flex-wrap: nowrap;
  align-items: end;
  justify-content: flex-end;
  gap: 10px;
}

.app-appearance-header-filter .membership-search {
  min-width: 280px;
}

.app-appearance-header-filter .membership-filter {
  min-width: 190px;
}

.app-appearance-header-filter :is(input, select) {
  min-height: 42px;
}

.app-appearance-header-actions .membership-toolbar-btn {
  flex: 0 0 auto;
  min-height: 42px;
  white-space: nowrap;
}

.app-appearance-section-picker .membership-filter select {
  min-width: 190px;
}

.support-knowledge-toolbar {
  flex: 0 0 auto;
  width: 100%;
  max-width: none;
  margin-right: 0;
  margin-left: 0;
  grid-template-columns: minmax(260px, 1.8fr) minmax(210px, 1fr) minmax(150px, 0.7fr) auto;
  margin-bottom: 20px;
}

.support-knowledge-toolbar :is(input, select, button, .membership-toolbar-reset) {
  min-height: 42px;
}

.support-knowledge-toolbar .membership-toolbar-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.support-knowledge-primary-row {
  align-items: start;
}

.support-knowledge-primary-row>label {
  padding-top: 0 !important;
}

.support-knowledge-list {
  display: grid;
  gap: 14px;
}

.support-knowledge-card {
  min-width: 0;
  display: grid;
  gap: 12px;
  border: 1px solid #dfe3ef;
  border-radius: 16px;
  background: #ffffff;
  padding: 18px 20px;
  box-shadow: 0 8px 22px rgba(36, 42, 72, 0.07);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.support-knowledge-card:hover {
  border-color: #c9c4e8;
  box-shadow: 0 12px 28px rgba(36, 42, 72, 0.11);
  transform: translateY(-1px);
}

.support-knowledge-card-head,
.support-knowledge-card-actions,
.support-knowledge-card-footer {
  display: flex;
  align-items: center;
}

.support-knowledge-card-head {
  justify-content: space-between;
  gap: 16px;
}

.support-knowledge-category {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.support-knowledge-category span {
  border-radius: 999px;
  background: #f0eefb;
  padding: 5px 10px;
  color: #625bab;
  font-size: 0.72rem;
  font-weight: 800;
}

.support-knowledge-category small {
  color: #747c95;
  font-size: 0.74rem;
  font-weight: 700;
}

.support-knowledge-card-actions {
  flex: 0 0 auto;
  gap: 10px;
}

.support-knowledge-card h2 {
  margin: 0;
  color: #252a40;
  font-size: 1rem;
  line-height: 1.35;
}

.support-knowledge-card>p {
  display: -webkit-box;
  overflow: hidden;
  margin: 0;
  color: #59617a;
  font-size: 0.86rem;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.support-knowledge-card-footer {
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 18px;
  border-top: 1px solid #eceef5;
  padding-top: 11px;
  color: #7b839b;
  font-size: 0.72rem;
  font-weight: 650;
}

.support-knowledge-card .masterclass-card-edit-button {
  min-height: 34px;
  border: 1px solid #6f68b8;
  border-radius: 9px;
  background: #6f68b8;
  padding: 7px 14px;
  color: #ffffff;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 750;
  cursor: pointer;
}

.support-knowledge-card .masterclass-card-edit-button:hover,
.support-knowledge-card .masterclass-card-edit-button:focus-visible {
  border-color: #5d56a8;
  background: #5d56a8;
}

.support-knowledge-form textarea[name="question"] {
  min-height: 92px;
}

.support-knowledge-form textarea[name="answer"] {
  min-height: 180px;
}

.app-video-list {
  display: grid;
  gap: 18px;
}

.app-video-card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 18px;
  border: 1px solid var(--appearance-line);
  border-radius: 22px;
  background:
    radial-gradient(circle at 95% 0%, rgba(111, 104, 184, 0.08), transparent 26%),
    linear-gradient(180deg, #ffffff 0%, #fdfdff 100%);
  padding: 22px;
  box-shadow: 0 16px 38px rgba(36, 42, 72, 0.1);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.app-video-card:hover {
  transform: translateY(-2px);
  border-color: #c9c4e8;
  box-shadow: 0 16px 36px rgba(36, 42, 72, 0.12);
}

.app-video-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 18px;
}

.app-video-card-head>div {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.app-video-code {
  color: #6f68b8;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.app-video-card h2 {
  margin: 0;
  color: var(--appearance-ink);
  font-size: 1.18rem;
  line-height: 1.28;
}

.app-video-card>p {
  max-width: 920px;
  margin: 0;
  color: #59617a;
  font-size: 0.9rem;
  line-height: 1.5;
}

.app-video-card .support-knowledge-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}

.app-video-card .masterclass-card-edit-button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #6f68b8;
  border-radius: 10px;
  background: #6f68b8;
  padding: 7px 16px;
  color: #ffffff;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 16px rgba(111, 104, 184, 0.22);
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}

.app-video-card .masterclass-card-edit-button:hover,
.app-video-card .masterclass-card-edit-button:focus-visible {
  border-color: #5d56a8;
  background: #5d56a8;
  box-shadow: 0 10px 20px rgba(93, 86, 168, 0.26);
  transform: translateY(-1px);
}

.app-video-frame {
  position: relative;
  overflow: hidden;
  border: 1px solid #dfe3ef;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.14), transparent 35%),
    linear-gradient(135deg, #151a2d 0%, #0e1423 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 14px 30px rgba(23, 29, 52, 0.1);
}

.app-video-frame video {
  width: 100%;
  height: clamp(260px, 34vw, 440px);
  display: block;
  object-fit: contain;
  background: #111827;
}

.app-video-placeholder {
  display: grid;
  min-height: 260px;
  place-items: center;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.86rem;
  font-weight: 750;
}

.app-video-modal-summary,
.app-video-modal-top-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 20px;
}

.app-video-current-field {
  margin-bottom: -8px;
}

.app-video-current-field>span:first-child {
  margin: 0;
}

.app-video-modal-preview {
  grid-column: 1 / -1;
}

.app-video-modal .ws-default-modal-dialog {
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
}

.app-video-modal .app-video-form {
  --modal-form-x: 24px;
  --modal-form-bottom: 18px;
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 14px;
  padding: 16px 24px 0;
  padding-bottom: 0;
}

.app-video-modal .app-video-modal-top-row {
  gap: 14px;
}

.app-video-modal .app-video-description-field textarea {
  min-height: 82px;
  max-height: 110px;
}

.app-video-modal .app-video-modal-preview video {
  height: clamp(120px, 22vh, 220px);
}

.app-video-modal .app-video-placeholder {
  min-height: clamp(120px, 22vh, 220px);
}

.app-video-active-field {
  width: fit-content;
  min-width: 190px;
  align-items: flex-start;
  justify-content: flex-start;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

/* Manage Newsletter */
.manage-newsletter-surface {
  display: flex;
  flex-direction: column;
}

.manage-newsletter-main {
  flex: 1 1 auto;
  min-height: calc(100vh - var(--header-height) - 136px);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.manage-newsletter-header {
  margin-bottom: 0;
}

.manage-newsletter-header .masterclass-header-actions {
  align-items: flex-end;
}

.manage-newsletter-toolbar {
  display: grid;
  grid-template-columns: minmax(300px, 440px);
  align-items: end;
}

.manage-newsletter-toolbar label {
  display: grid;
  gap: 7px;
}

.manage-newsletter-toolbar span {
  color: #3f4662;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.manage-newsletter-toolbar input {
  width: 100%;
  min-height: 44px;
  border: 1px solid #cfd8ef;
  border-radius: 10px;
  background: #ffffff;
  padding: 0 14px;
  color: #10122f;
  font: inherit;
}

.manage-newsletter-toolbar input:focus {
  border-color: rgba(112, 102, 190, 0.75);
  box-shadow: 0 0 0 4px rgba(112, 102, 190, 0.12);
  outline: none;
}

.manage-newsletter-pagination {
  margin-top: auto;
  padding-top: 18px;
}

.newsletter-list {
  display: grid;
  gap: 18px;
}

.newsletter-card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 18px;
  border: 1px solid #dfe3ef;
  border-radius: 22px;
  background:
    radial-gradient(circle at 95% 0%, rgba(111, 104, 184, 0.08), transparent 26%),
    linear-gradient(180deg, #ffffff 0%, #fdfdff 100%);
  padding: 22px;
  box-shadow: 0 16px 38px rgba(36, 42, 72, 0.1);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.newsletter-card:hover {
  transform: translateY(-2px);
  border-color: #c9c4e8;
  box-shadow: 0 16px 36px rgba(36, 42, 72, 0.12);
}

.newsletter-card-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 18px;
}

.newsletter-card-head>div {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.newsletter-card h2 {
  margin: 0;
  color: #25233d;
  font-size: 1.18rem;
  line-height: 1.28;
}

.newsletter-card>p {
  max-width: 920px;
  margin: 0;
  color: #59617a;
  font-size: 0.9rem;
  line-height: 1.5;
}

.newsletter-card .support-knowledge-card-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}

.newsletter-card .masterclass-card-edit-button {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #6f68b8;
  border-radius: 10px;
  background: #6f68b8;
  padding: 7px 16px;
  color: #ffffff;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 16px rgba(111, 104, 184, 0.22);
}

.newsletter-preview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.42fr);
  gap: 18px;
  align-items: stretch;
}

.newsletter-banner-frame {
  position: relative;
  overflow: hidden;
  height: clamp(240px, 28vw, 360px);
  min-height: 0;
  border: 1px solid #dfe3ef;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.14), transparent 35%),
    linear-gradient(135deg, #f8f9fe 0%, #eef1f8 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 14px 30px rgba(23, 29, 52, 0.1);
}

.newsletter-banner-frame img {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: block;
  object-fit: contain;
  object-position: center;
}

.newsletter-document-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  border: 1px solid #e1e4f0;
  border-radius: 18px;
  background: linear-gradient(145deg, #fafaff, #f4f3fd);
  padding: 22px;
}

.newsletter-document-panel span {
  color: #6f68b8;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.newsletter-document-panel strong {
  color: #25233d;
  font-size: 1.05rem;
}

.newsletter-document-panel p {
  margin: 0;
  color: #6b7289;
  font-size: 0.88rem;
  line-height: 1.45;
}

.newsletter-pdf-link {
  width: fit-content;
  margin-top: 8px;
}

.newsletter-modal .ws-default-modal-dialog {
  min-height: 0;
  max-height: calc(100vh - 24px);
  max-height: calc(100dvh - 24px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.newsletter-modal .ws-default-modal-head {
  flex: 0 0 auto;
}

.newsletter-form {
  --modal-form-x: 24px;
  --modal-form-bottom: 20px;
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: visible;
  overscroll-behavior: contain;
  scrollbar-gutter: auto;
  grid-template-columns: 1fr;
  align-items: stretch;
  gap: 0;
  padding: 22px 24px 0;
}

@media (max-height: 520px) {
  .newsletter-form {
    overflow-y: auto;
  }
}

.newsletter-modal-file-row,
.newsletter-modal-field-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  align-items: end;
  gap: 16px;
  margin-bottom: 18px;
}

.newsletter-modal-file-row label,
.newsletter-modal-field-row label {
  min-width: 0;
}

.newsletter-modal-file-row input,
.newsletter-modal-field-row input {
  width: 100%;
}

.newsletter-description-field textarea {
  width: 100%;
  min-height: 112px;
  display: block;
}

.newsletter-description-field {
  display: grid !important;
  grid-column: 1 / -1;
  gap: 7px;
  margin-bottom: 20px;
}

.newsletter-control-row {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 18px;
  margin-bottom: 24px;
}

.newsletter-active-field {
  width: fit-content;
  min-width: 190px;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start !important;
  justify-content: flex-end;
  gap: 9px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.newsletter-sort-field {
  width: 180px;
  display: grid !important;
  gap: 7px;
}

.newsletter-sort-field input {
  width: 100%;
}

.newsletter-submit-row .page-modal-actions {
  width: 100%;
  display: flex !important;
  justify-content: flex-end !important;
  margin: 0 !important;
}

.newsletter-form>.newsletter-submit-row {
  margin-bottom: 0 !important;
  padding-top: 20px;
  padding-bottom: 20px;
}

.app-appearance-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 22px;
}

.app-appearance-card {
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--appearance-line);
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 14px 32px rgba(36, 42, 72, 0.09);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.app-appearance-card:hover {
  transform: translateY(-3px);
  border-color: #c9c4e8;
  box-shadow: 0 18px 40px rgba(36, 42, 72, 0.14);
}

.app-appearance-card-media {
  position: relative;
  aspect-ratio: 16 / 6.5;
  overflow: hidden;
  background: #eef1f8;
}

.app-appearance-card-media::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 48%;
  background: linear-gradient(180deg, transparent, rgba(17, 20, 39, 0.28));
  pointer-events: none;
}

.app-appearance-card-media>img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform 0.35s ease;
}

.app-appearance-card:hover .app-appearance-card-media>img {
  transform: scale(1.025);
}

.app-appearance-card-media .application-status-badge {
  position: absolute;
  z-index: 1;
  top: 14px;
  right: 14px;
  box-shadow: 0 5px 14px rgba(21, 26, 49, 0.16);
}

.app-appearance-card-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 18px;
}

.app-appearance-card-head {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 14px;
}

.app-appearance-card-head>div {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.app-appearance-card-head span {
  color: #777f99;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.app-appearance-card-head h2 {
  overflow: hidden;
  margin: 0;
  color: var(--appearance-ink);
  font-size: 1.08rem;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-appearance-card-body>p {
  display: -webkit-box;
  overflow: hidden;
  min-height: 3.85em;
  margin: 0;
  color: #59617a;
  font-size: 0.88rem;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.app-appearance-meta-row {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid #eceef5;
  padding-top: 13px;
  color: #7c849d;
  font-size: 0.74rem;
  font-weight: 650;
}

.app-appearance-card .masterclass-card-edit-button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #6f68b8;
  border-radius: 10px;
  background: #6f68b8;
  padding: 8px 16px;
  color: #ffffff;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 750;
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.app-appearance-card .masterclass-card-edit-button:hover,
.app-appearance-card .masterclass-card-edit-button:focus-visible {
  border-color: #5d56a8;
  background: #5d56a8;
  transform: translateY(-1px);
}

.app-appearance-empty {
  display: grid;
  place-items: center;
  gap: 6px;
  min-height: 340px;
  border: 1px dashed #d8ddea;
  border-radius: 20px;
  background: #fafafe;
  padding: 30px;
  text-align: center;
}

.app-appearance-empty strong {
  color: var(--appearance-ink);
  font-size: 1rem;
}

.app-appearance-empty p {
  max-width: 460px;
  margin: 0;
  color: var(--appearance-muted);
  font-size: 0.86rem;
}

.app-appearance-modal .ws-default-modal-dialog {
  width: min(980px, calc(100vw - 44px));
  max-height: calc(100vh - 44px);
  max-height: calc(100dvh - 44px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.app-appearance-modal .ws-default-modal-head {
  flex: 0 0 auto;
}

.app-appearance-form {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 20px;
  padding: 22px 24px 24px;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

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

.app-appearance-form label {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 6.5px;
}

.app-appearance-form label>span:first-child {
  color: #555c76;
  font-size: 0.79rem;
  font-weight: 750;
  line-height: 1.25;
}

.app-appearance-form input,
.app-appearance-form select,
.app-appearance-form textarea {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.app-appearance-form input[type="file"] {
  min-height: 44px;
  padding: 8px 10px;
}

.app-appearance-form textarea {
  min-height: 145px;
  resize: vertical;
}

.app-appearance-preview {
  flex: 0 0 auto;
  display: block;
  margin: 22px 24px 0;
  overflow: hidden;
  border: 1px solid #dce1ed;
  border-radius: 18px;
  background: #eef1f8;
  box-shadow: 0 12px 30px rgba(37, 43, 72, 0.08);
}

.app-appearance-preview>img {
  width: 100%;
  height: 230px;
  display: block;
  object-fit: cover;
}

.app-appearance-form .ws-modal-two-col-row {
  clear: both;
  align-items: start;
  gap: 20px;
}

.app-appearance-form input[readonly] {
  background: #f5f6fb;
  color: #6d748d;
  cursor: not-allowed;
}

.app-appearance-control-row {
  display: grid;
  grid-template-columns: minmax(180px, 260px);
  align-items: end;
  gap: 20px;
}

.app-appearance-control-row>label {
  display: grid;
  gap: 6.5px;
}

.app-appearance-control-row .manage-schedules-active-switch {
  align-self: stretch;
  justify-content: flex-start;
  border: 1px solid #e0e3ef;
  border-radius: 12px;
  background: #f8f8fc;
  padding: 12px 14px;
}

.app-appearance-submit-row {
  display: flex;
  justify-content: flex-end;
}

.app-appearance-submit-row .page-modal-actions {
  margin-left: auto;
}

.app-appearance-legal-modal .ws-default-modal-dialog {
  width: min(980px, calc(100vw - 44px));
}

.app-appearance-legal-modal .ws-default-modal-head>div {
  min-width: 0;
}

.app-appearance-legal-modal .ws-default-modal-head p {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.78rem;
  line-height: 1.4;
}

.app-appearance-legal-form {
  display: grid;
  gap: 20px;
  flex: 1 1 auto;
  min-height: 0;
  padding: 22px 24px 24px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.app-appearance-legal-field {
  display: grid;
  gap: 6.5px;
  min-width: 0;
}

.app-appearance-legal-field>span {
  color: #353b55;
  font-size: 0.88rem;
  font-weight: 800;
}

.app-appearance-legal-field>small {
  color: #747c95;
  font-size: 0.76rem;
  line-height: 1.45;
}

.app-appearance-legal-field textarea {
  width: 100%;
  min-height: 190px;
  box-sizing: border-box;
  resize: vertical;
  border: 1px solid #d8dff0;
  border-radius: 12px;
  padding: 13px 14px;
  color: #252a3e;
  background: #ffffff;
  font: inherit;
  line-height: 1.55;
}

.app-appearance-legal-field textarea:focus {
  border-color: #7770c2;
  outline: 3px solid rgba(111, 104, 184, 0.14);
}

.app-appearance-legal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 4px;
}

.app-appearance-legal-actions button {
  min-height: 44px;
  margin: 0;
}

@media (max-width: 1080px) {
  .app-appearance-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-height: 650px) {
  .app-video-modal .ws-default-modal-dialog {
    max-height: calc(100vh - 12px);
    max-height: calc(100dvh - 12px);
  }

  .app-video-modal .app-video-form {
    gap: 10px;
    padding: 12px 18px 0;
  }

  .app-video-modal .app-video-modal-top-row {
    gap: 10px;
  }

  .app-video-modal .app-video-description-field textarea {
    min-height: 58px;
    max-height: 76px;
  }

  .app-video-modal .app-video-modal-preview video {
    height: clamp(92px, 18vh, 150px);
  }

  .app-video-modal .app-video-placeholder {
    min-height: clamp(92px, 18vh, 150px);
  }

  .app-video-modal .app-appearance-submit-row {
    margin-right: -18px;
    margin-left: -18px;
    padding: 10px 18px 12px;
  }
}

@media (max-width: 760px) {

  .app-appearance-surface,
  .app-appearance-main {
    min-height: auto;
  }

  .app-appearance-header {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .app-appearance-note {
    max-width: none;
  }

  .app-appearance-header-actions {
    align-items: stretch;
    flex-direction: column;
    flex-wrap: wrap;
  }

  .app-appearance-header-filter,
  .app-video-modal-summary,
  .app-video-modal-top-row {
    flex-wrap: wrap;
    justify-content: stretch;
    grid-template-columns: 1fr;
  }

  .app-appearance-header-filter .membership-search,
  .app-appearance-header-filter .membership-filter {
    min-width: 0;
    width: 100%;
  }

  .app-appearance-section-picker .membership-filter select {
    width: 100%;
  }

  .app-appearance-header-actions .membership-toolbar-btn {
    align-self: flex-end;
  }

  .app-appearance-preview>img {
    height: 190px;
  }

  .app-appearance-control-row,
  .app-appearance-form .ws-modal-two-col-row {
    grid-template-columns: 1fr;
  }

  .support-knowledge-toolbar {
    grid-template-columns: 1fr;
  }

  .support-knowledge-card-head,
  .support-knowledge-card-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .support-knowledge-card-actions {
    width: 100%;
    justify-content: space-between;
  }

  .app-video-card-head {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .app-video-card .support-knowledge-card-actions {
    justify-content: space-between;
  }
}

/* Manage Wonder Habits */
.wonder-habits-surface {
  position: relative;
  min-height: calc(100vh - 142px);
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 8%, rgba(111, 104, 184, 0.12), transparent 25%),
    linear-gradient(180deg, #ffffff 0%, #fcfbff 100%);
}

.wonder-habits-main {
  min-height: calc(100vh - 142px);
  display: flex;
  flex-direction: column;
}

.wonder-habits-toolbar {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(320px, 1fr) 260px;
  gap: 12px;
  align-items: end;
}

.wonder-habits-masterclass-grid {
  margin-top: 16px;
}

.wonder-habit-masterclass-card {
  min-height: 330px;
}

.wonder-habit-masterclass-card .subscription-plan-body {
  height: 100%;
  grid-template-rows: minmax(88px, auto) auto auto;
}

.wonder-habit-masterclass-card .masterclass-card-actions {
  margin-top: auto;
}

.wonder-habit-star-logo {
  display: inline-grid;
  place-items: center;
  flex: 0 0 68px;
  color: #ffffff;
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.3), transparent 28%),
    linear-gradient(145deg, #8178cf, #5d55ab);
}

.wonder-habit-star-logo svg {
  width: 38px;
  height: 38px;
  filter: drop-shadow(0 3px 4px rgba(39, 31, 83, 0.2));
}

.wonder-habits-user-card .application-summary-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.wonder-habits-progress-track {
  width: min(430px, 100%);
  height: 8px;
  display: block;
  margin-top: 13px;
  overflow: hidden;
  border-radius: 999px;
  background: #e5e6ef;
}

.wonder-habits-progress-track>span {
  height: 100%;
  display: block;
  border-radius: inherit;
  background: linear-gradient(90deg, #6f68b8, #8f87da);
}

.wonder-habits-status-stack {
  align-self: center;
}

.wonder-habits-modal .ws-default-modal-dialog {
  width: min(920px, calc(100vw - 42px));
  max-height: calc(100vh - 42px);
  max-height: calc(100dvh - 42px);
  overflow: hidden;
}

.wonder-habits-editor-modal .ws-default-modal-dialog {
  width: min(840px, calc(100vw - 42px));
  display: flex;
  flex-direction: column;
}

/* Biometrics (biometrics/index.php) */
.biometric-surface {
  display: grid;
  gap: 22px;
  padding: 30px;
}

.biometric-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.biometric-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

.biometric-header-actions form {
  margin: 0;
}

.biometric-header h1,
.biometric-panel-heading h2 {
  margin: 0;
  color: #262139;
}

.biometric-header h1 {
  font-size: clamp(1.7rem, 3vw, 2.35rem);
}

.biometric-header h1 span {
  color: #6f68b8;
}

.biometric-header p,
.biometric-panel-heading p {
  margin: 6px 0 0;
  color: #71717a;
  line-height: 1.5;
}

.biometric-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.75fr);
  gap: 20px;
  align-items: start;
}

.biometric-panel {
  min-width: 0;
  border: 1px solid #e0e4ef;
  border-radius: 18px;
  background: #ffffff;
  padding: 22px;
  box-shadow: 0 9px 24px rgba(47, 38, 72, 0.07);
}

.biometric-panel-heading {
  margin-bottom: 18px;
}

.biometric-panel-heading h2 {
  font-size: 1.08rem;
}

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

.biometric-form-grid label {
  min-width: 0;
  display: grid;
  gap: 7px;
}

.biometric-form-grid label>span {
  color: #555c76;
  font-size: 0.79rem;
  font-weight: 700;
}

.biometric-form-grid input,
.biometric-form-grid select {
  width: 100%;
  min-height: 44px;
  box-sizing: border-box;
  border: 1px solid #d8dff0;
  border-radius: 10px;
  background: #ffffff;
  padding: 10px 12px;
  color: #2f2f32;
}

.biometric-file-field,
.biometric-checkbox-field {
  grid-column: 1 / -1;
}

.biometric-face-field {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  gap: 16px;
  align-items: start;
}

.biometric-file-field small {
  color: #7b8298;
}

.biometric-camera-card {
  display: grid;
  gap: 10px;
  border: 1px solid #e0e4ef;
  border-radius: 14px;
  background: linear-gradient(145deg, #f7f5ff 0%, #ffffff 85%);
  padding: 12px;
}

.biometric-camera-preview {
  position: relative;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 1px solid #d8dff0;
  border-radius: 12px;
  background: #eef1f8;
}

.biometric-camera-preview video,
.biometric-camera-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.biometric-camera-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.biometric-camera-actions .membership-toolbar-btn {
  min-height: 36px;
  padding: 0 12px;
  font-size: 0.84rem;
}

.biometric-camera-actions .membership-toolbar-btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.biometric-camera-note {
  margin: 0;
  color: #71717a;
  font-size: 0.83rem;
  line-height: 1.4;
}

.biometric-checkbox-field {
  grid-template-columns: auto 1fr !important;
  align-items: center;
  justify-content: start;
}

.biometric-checkbox-field input {
  width: 18px;
  min-height: 18px;
  accent-color: #6f68b8;
}

.biometric-form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.biometric-readiness-panel {
  background: linear-gradient(145deg, #f7f5ff 0%, #ffffff 78%);
}

.biometric-readiness-list {
  display: grid;
  gap: 0;
  margin: 0;
}

.biometric-readiness-list>div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid #e8e5f3;
  padding: 12px 0;
}

.biometric-readiness-list dt {
  color: #73798e;
}

.biometric-readiness-list dd {
  margin: 0;
  color: #342d4b;
  font-weight: 700;
  text-align: right;
}

.biometric-readiness-list dd.is-ready {
  color: #258a51;
}

.biometric-readiness-list dd.is-blocked {
  color: #c33b4f;
}

.biometric-security-note {
  margin: 18px 0 0;
  border-radius: 12px;
  background: #fff6dc;
  padding: 12px;
  color: #715822;
  font-size: 0.82rem;
  line-height: 1.5;
}

.biometric-table-panel {
  padding-bottom: 12px;
}

.biometric-status {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 5px 10px;
  background: #eceff6;
  color: #596074;
  font-size: 0.75rem;
  font-weight: 700;
}

.biometric-status.is-synced,
.biometric-status.is-success {
  background: #def7e8;
  color: #237b49;
}

.biometric-status.is-pending,
.biometric-status.is-sent {
  background: #fff3d5;
  color: #8a6517;
}

.biometric-status.is-failed {
  background: #ffe3e7;
  color: #b63246;
}

.biometric-status.is-in {
  background: #dcfce7;
  color: #15803d;
}

.biometric-status.is-out {
  background: #e0f2fe;
  color: #0369a1;
}

.biometric-status.is-unknown {
  background: #f1f5f9;
  color: #475569;
}

.biometric-users-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.biometric-header-copy {
  min-width: 0;
}

.biometric-users-surface {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.biometric-users-toolbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: end;
  justify-content: flex-end;
  gap: 14px;
  flex: 1;
  max-width: 900px;
}

.biometric-users-toolbar label {
  flex: 0 1 180px;
  min-width: 0;
}

.biometric-users-toolbar label.membership-search {
  flex: 1 1 240px;
}

.biometric-users-toolbar label.membership-filter {
  flex: 0 1 180px;
}

.biometric-users-toolbar span {
  color: #555c76;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.biometric-users-toolbar input,
.biometric-users-toolbar select {
  width: 100%;
  min-height: 44px;
  border: 1px solid #d4dcf0;
  border-radius: 12px;
  background: #ffffff;
  color: #22273a;
  font: inherit;
  padding: 10px 12px;
  box-sizing: border-box;
  outline: none;
}

.biometric-users-toolbar input:focus,
.biometric-users-toolbar select:focus {
  border-color: rgba(112, 102, 190, 0.75);
  box-shadow: 0 0 0 4px rgba(112, 102, 190, 0.12);
}

.biometric-users-list {
  display: grid;
  gap: 16px;
}

.biometric-user-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid #e0e4ef;
  border-radius: 18px;
  background: linear-gradient(135deg, #fbfaff 0%, #ffffff 78%);
  padding: 18px;
  box-shadow: 0 12px 26px rgba(47, 38, 72, 0.06);
}

.biometric-user-card-main {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 16px;
}

.biometric-user-avatar {
  width: 64px;
  height: 64px;
  flex: 0 0 64px;
  border: 1px solid #dbe2f2;
  border-radius: 18px;
  background: #f4f6fb;
  object-fit: cover;
}

.biometric-user-kicker {
  margin: 0 0 4px;
  color: #6f68b8;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.biometric-user-card h2 {
  margin: 0;
  color: #241c3f;
  font-size: 1.05rem;
}

.biometric-user-meta {
  display: flex;
  gap: 10px 14px;
  flex-wrap: wrap;
  margin-top: 8px;
  color: #697089;
  font-size: 0.86rem;
}

.biometric-user-card-side {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.biometric-empty-state {
  min-height: 220px;
  display: grid;
  place-items: center;
  text-align: center;
}

.biometric-empty-state h2 {
  margin: 0;
  color: #241c3f;
}

.biometric-empty-state p {
  margin: 8px 0 0;
  color: #73798e;
}

.biometric-user-edit-modal .page-modal-dialog {
  width: min(960px, calc(100vw - 36px));
  max-height: calc(100vh - 36px);
  overflow-y: auto;
}

.biometric-user-edit-form {
  padding: 0 0 4px;
}

.biometric-user-edit-hero {
  display: flex;
  align-items: center;
  gap: 16px;
  border: 1px solid #e1def6;
  border-radius: 18px;
  background: linear-gradient(135deg, #f3f0ff 0%, #ffffff 80%);
  padding: 16px;
  margin: 20px 0;
}

.biometric-user-edit-photo {
  width: 88px;
  height: 88px;
  flex: 0 0 88px;
  border: 1px solid #dbe2f2;
  border-radius: 18px;
  background: #f4f6fb;
  object-fit: cover;
}

.biometric-user-edit-hero p {
  margin: 0 0 4px;
  color: #6f68b8;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.biometric-user-edit-hero strong,
.biometric-user-edit-hero span {
  display: block;
}

.biometric-user-edit-hero strong {
  color: #241c3f;
  font-size: 1.15rem;
}

.biometric-user-edit-hero span {
  margin-top: 4px;
  color: #73798e;
  font-size: 0.88rem;
}

@media (max-width: 900px) {

  .biometric-grid,
  .biometric-form-grid,
  .biometric-face-field {
    grid-template-columns: 1fr;
  }

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

  .biometric-users-header,
  .biometric-users-toolbar {
    grid-template-columns: 1fr;
    justify-self: stretch;
  }

  .biometric-header-actions,
  .biometric-header-actions form,
  .biometric-header .membership-toolbar-btn {
    width: 100%;
  }

  .biometric-user-card,
  .biometric-user-card-side {
    align-items: stretch;
    flex-direction: column;
  }

  .biometric-user-card-side .membership-toolbar-btn {
    width: 100%;
  }
}

.biometric-users-surface .membership-pagination {
  margin-top: auto;
}

@media (max-width: 600px) {
  .biometric-surface {
    padding: 20px 14px;
  }

  .biometric-panel {
    padding: 16px;
  }

  .biometric-user-card-main,
  .biometric-user-edit-hero {
    align-items: flex-start;
    flex-direction: column;
  }
}

.wonder-habits-modal .ws-default-modal-form {
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.wonder-habits-editor-modal .wonder-habits-form {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.wonder-habits-editor-modal .ws-default-modal-head {
  flex: 0 0 auto;
}

.wonder-habits-form,
.wonder-habits-detail-form {
  gap: 20px;
}

.wonder-habits-description-field {
  width: 100%;
  min-width: 0;
  display: grid !important;
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 1fr);
  gap: 6.5px !important;
  align-items: stretch;
}

.wonder-habits-description-field>span {
  display: block;
  margin: 0;
}

.wonder-habits-description-field>textarea {
  width: 100%;
  min-width: 0;
  min-height: 132px;
  box-sizing: border-box;
  display: block;
  resize: vertical;
}

.wonder-habits-detail-form .wonder-habits-description-field>textarea[readonly] {
  color: #3f455c;
  background: #f8f9fc;
  resize: none;
}

.wonder-habits-form .ws-modal-submit-row .page-modal-actions,
.wonder-habits-detail-form .ws-modal-submit-row .page-modal-actions {
  width: 100%;
  justify-content: flex-end;
}

.wonder-habits-detail-form>.ws-modal-submit-row {
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid #e4e6ef;
}

.wonder-habits-settings-row {
  align-items: end;
}

.wonder-habits-settings-row .ws-inline-switch-label {
  min-height: 84px;
  justify-content: center;
  padding: 14px 18px;
  border: 1px solid #e0e2ed;
  border-radius: 16px;
  background: #f8f8fc;
}

.wonder-habits-modal-status-row {
  margin-top: 10px;
}

.wonder-habits-modal-status-row>.ws-inline-switch-label {
  width: auto;
  min-width: 180px;
}

.wonder-habits-user-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 18px;
  border: 1px solid #e1e3ee;
  border-radius: 18px;
  background: linear-gradient(135deg, #f8f7ff, #ffffff);
}

.wonder-habits-user-hero img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border: 1px solid #dfe2ed;
  border-radius: 50%;
}

.wonder-habits-user-hero span:not(.application-status-badge) {
  color: #777e98;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wonder-habits-user-hero h3 {
  margin: 4px 0 2px;
  color: #241f4d;
  font-size: 1.2rem;
}

.wonder-habits-user-hero p {
  margin: 0;
  color: #757c94;
}

.wonder-habits-progress-panel {
  display: grid;
  grid-template-columns: auto minmax(160px, 1fr);
  align-items: center;
  gap: 20px;
  padding: 16px 18px;
  border-radius: 16px;
  color: #fff;
  background: linear-gradient(135deg, #6259ad, #8178cc);
}

.wonder-habits-progress-panel span,
.wonder-habits-progress-panel strong {
  display: block;
}

.wonder-habits-progress-panel>div span {
  font-size: 0.76rem;
  opacity: 0.78;
}

.wonder-habits-progress-panel strong {
  margin-top: 2px;
  font-size: 1.3rem;
}

.wonder-habits-progress-panel .wonder-habits-progress-track {
  width: 100%;
  margin: 0;
  background: rgba(255, 255, 255, 0.24);
}

.wonder-habits-progress-panel .wonder-habits-progress-track>span {
  background: #fff;
}

.wonder-habits-empty {
  display: grid;
  place-items: center;
  min-height: 260px;
  margin-top: 20px;
  padding: 36px;
  border: 1px dashed #d7d9e7;
  border-radius: 22px;
  color: #747b93;
  text-align: center;
  background: #fbfbfe;
}

.wonder-habits-empty strong {
  color: #292354;
  font-size: 1.1rem;
}

.wonder-habits-empty p {
  margin: 6px 0 0;
}

.wonder-habits-pagination {
  margin-top: auto;
  padding-top: 26px;
}

@media (max-width: 760px) {
  .wonder-habits-user-hero {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .wonder-habits-user-hero .application-status-badge {
    grid-column: 1 / -1;
    justify-self: start;
  }

  .wonder-habits-progress-panel {
    grid-template-columns: 1fr;
  }
}

/* Manage Visits */
.manage-visits-main {
  min-height: calc(100vh - 190px);
  display: flex;
  flex-direction: column;
}

.manage-visits-header {
  display: grid;
  grid-template-columns: minmax(220px, 0.45fr) minmax(0, 1fr);
  align-items: end;
  gap: 18px;
}

.manage-visits-toolbar {
  display: grid;
  grid-template-columns: minmax(230px, 1fr) minmax(150px, 0.58fr) minmax(150px, 0.58fr) minmax(150px, 0.58fr) auto;
  align-items: end;
  gap: 10px;
  width: 100%;
  max-width: none;
  margin-left: 0;
  min-width: 0;
}

.manage-visits-toolbar label {
  min-width: 0;
}

.manage-visits-toolbar input,
.manage-visits-toolbar select {
  width: 100%;
}

.manage-visits-add-btn {
  align-self: end;
  height: var(--toolbar-control-height);
  min-height: var(--toolbar-control-height);
  margin: 0;
  padding-inline: 16px;
  white-space: nowrap;
  box-sizing: border-box;
}

.manage-visits-date-filter input[type="date"] {
  height: var(--toolbar-control-height);
  min-height: var(--toolbar-control-height);
  padding: 0 12px;
  border: 1px solid #d9def0;
  border-radius: 12px;
  background: #fff;
  color: #343a50;
  font: inherit;
  box-sizing: border-box;
}

.manage-visits-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 22px 0 24px;
}

.manage-visits-stat-card {
  position: relative;
  overflow: hidden;
  min-height: 112px;
  padding: 20px 22px;
  border: 1px solid #e0e3f2;
  border-radius: 20px;
  background:
    radial-gradient(circle at 100% 0, rgba(111, 104, 184, 0.14), transparent 44%),
    #fafaff;
  box-shadow: 0 12px 30px rgba(42, 34, 91, 0.06);
}

.manage-visits-stat-card::after {
  content: "";
  position: absolute;
  right: -24px;
  bottom: -28px;
  width: 88px;
  height: 88px;
  border: 16px solid rgba(111, 104, 184, 0.07);
  border-radius: 50%;
}

.manage-visits-stat-card span {
  display: block;
  color: #737a94;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.manage-visits-stat-card strong {
  display: block;
  margin-top: 10px;
  color: #21164f;
  font-size: clamp(28px, 2.4vw, 40px);
  line-height: 1;
}

.manage-visits-stat-card.is-highlighted {
  border-color: transparent;
  background: linear-gradient(135deg, #756dc2, #51419e);
}

.manage-visits-stat-card.is-highlighted span,
.manage-visits-stat-card.is-highlighted strong {
  color: #fff;
}

.manage-visits-stat-card.is-highlighted::after {
  border-color: rgba(255, 255, 255, 0.1);
}

.manage-visits-list {
  display: grid;
  gap: 14px;
}

.manage-visits-card {
  border: 1px solid #e2e4f1;
  border-radius: 20px;
  background: linear-gradient(115deg, #fff 0%, #fbfaff 55%, #f3f1ff 100%);
  box-shadow: 0 14px 34px rgba(38, 29, 86, 0.07);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.manage-visits-card:hover {
  transform: translateY(-2px);
  border-color: #c9c4ee;
  box-shadow: 0 18px 40px rgba(38, 29, 86, 0.11);
}

.manage-visits-card .application-summary {
  min-height: 126px;
  padding: 20px 24px;
}

.manage-visits-card-image {
  border-radius: 16px;
}

.manage-visits-eyebrow {
  display: block;
  margin-bottom: 4px;
  color: #7169ba;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.manage-visits-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.manage-visits-meta .summary-meta-item {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 5px 11px;
  border: 1px solid #dde1f0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: #566079;
  font-size: 13px;
  font-weight: 650;
}

.manage-visits-empty {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 280px;
  margin-top: 6px;
  border: 1px dashed #d9dced;
  border-radius: 20px;
  background: #fbfbfe;
  text-align: center;
}

.manage-visits-empty strong {
  color: #271b54;
  font-size: 18px;
}

.manage-visits-empty span {
  margin-top: 8px;
  color: #81879c;
}

.manage-visits-pagination {
  margin-top: auto;
  padding-top: 28px;
}

.manage-visits-modal .page-modal-dialog {
  max-height: min(92vh, 920px);
  overflow: hidden;
}

.manage-visits-modal .ws-default-modal-form {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: 22px 24px 24px;
  gap: 0;
}

.manage-visits-modal .ws-default-modal-form label {
  display: grid;
  gap: 7px;
}

.manage-visits-modal .ws-default-modal-form input,
.manage-visits-modal .ws-default-modal-form select,
.manage-visits-modal .ws-default-modal-form textarea {
  width: 100%;
}

.manage-visits-modal .ws-modal-two-col-row,
.manage-visits-modal .ws-modal-three-col-row {
  gap: 14px;
}

.manage-visits-modal .field-full+.field-full {
  padding-top: 14px;
}

.manage-visits-modal .page-modal-actions {
  margin-top: 42px;
  padding-top: 15px;
}

.manage-visits-modal .ws-default-modal-form>.page-modal-actions {
  margin-top: 28px !important;
  padding-top: 18px;
}

.manage-visits-switch-field {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  min-height: 78px;
  text-align: left;
}

.manage-visits-switch-field>span:first-child {
  margin-bottom: 9px;
}

.manage-visits-booking-hero {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.manage-visits-booking-hero>div {
  min-width: 0;
  padding: 17px 18px;
  border: 1px solid #dfe2f1;
  border-radius: 16px;
  background: linear-gradient(145deg, #fafaff, #f4f3fd);
}

.manage-visits-booking-hero span {
  display: block;
  margin-bottom: 7px;
  color: #7c8297;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.manage-visits-booking-hero strong {
  display: block;
  overflow-wrap: anywhere;
  color: #27213d;
  font-size: 15px;
}

.manage-visits-participant-section {
  padding: 18px;
  border: 1px solid #dfe2f1;
  border-radius: 18px;
  background: #fafaff;
}

.manage-visits-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.manage-visits-section-heading h3 {
  margin: 0;
  color: #2b2057;
  font-size: 17px;
}

.manage-visits-section-heading>span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 50%;
  background: #7169ba;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

.manage-visits-participant-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.manage-visits-person-card {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 12px;
  padding: 12px;
  border: 1px solid #e1e4f0;
  border-radius: 14px;
  background: #fff;
}

.manage-visits-person-card img {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border: 1px solid #dfe2ef;
  border-radius: 50%;
  object-fit: cover;
}

.manage-visits-person-card div {
  min-width: 0;
}

.manage-visits-person-card strong,
.manage-visits-person-card span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.manage-visits-person-card strong {
  color: #29233e;
  font-size: 14px;
}

.manage-visits-person-card span {
  margin-top: 4px;
  color: #7c8296;
  font-size: 12px;
}

.manage-visits-no-participants {
  margin: 0;
  color: #80869b;
}

.manage-visits-booking-controls textarea {
  min-height: 104px;
}

@media (max-width: 1380px) {
  .manage-visits-header {
    grid-template-columns: minmax(200px, 0.35fr) minmax(0, 1fr);
    gap: 14px;
  }

  .manage-visits-toolbar {
    grid-template-columns: minmax(210px, 1fr) minmax(140px, 0.58fr) minmax(140px, 0.58fr) minmax(140px, 0.58fr) auto;
    gap: 8px;
  }

  .manage-visits-add-btn {
    padding-inline: 13px;
  }
}

@media (max-width: 1050px) {
  .manage-visits-header {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

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

@media (max-width: 760px) {

  .manage-visits-toolbar,
  .manage-visits-overview,
  .manage-visits-booking-hero,
  .manage-visits-participant-grid {
    grid-template-columns: 1fr;
  }

  .manage-visits-card .application-summary {
    align-items: flex-start;
    padding: 18px;
  }

  .manage-visits-card .application-summary-main {
    align-items: flex-start;
  }

  .manage-visits-card .summary-right {
    margin-top: 10px;
  }
}

/* Profile Update Request */

.profile-update-request-surface {
  display: flex;
  flex-direction: column;
}

.profile-update-request-main {
  min-height: 0;
}

.profile-update-request-header {
  grid-template-columns: minmax(260px, 1fr) minmax(520px, 680px);
}

.profile-update-request-toolbar {
  width: 100%;
  grid-template-columns: minmax(320px, 1fr) minmax(170px, 220px);
}

.profile-update-request-list {
  flex: 0 0 auto;
  margin-top: 22px;
  gap: 14px;
}

.profile-update-request-card {
  background: #ffffff;
  border: 1px solid #e7e7ea;
  border-radius: 10px;
  box-shadow: none;
}

body:not(.membership-detail-view) .profile-update-request-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(47, 47, 50, 0.08);
}

body:not(.membership-detail-view) .profile-update-request-card:hover .profile-update-request-summary {
  background: #f3f3f5;
}

.profile-update-request-summary {
  min-height: 112px;
  padding: 20px 18px;
  gap: 16px;
  align-items: center;
  background: #f8f8f8;
}

.profile-update-request-summary .application-summary-main {
  align-items: center;
  gap: 14px;
}

.profile-update-request-summary .application-summary-avatar {
  width: 50px;
  height: 50px;
  border: 1px solid #d7d7dc;
}

.profile-update-request-summary .application-summary-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.profile-update-request-summary h2 {
  color: #2f2f32;
  font-family: "Inter", "Manrope", sans-serif;
  font-size: 20px;
  font-weight: 600;
}

.profile-update-request-summary .application-summary-meta {
  margin-top: 0;
  display: grid;
  gap: 10px;
}

.profile-update-request-summary .summary-membership-line {
  color: #71717a;
  font-family: "Inter", "Manrope", sans-serif;
  font-size: 12px;
  font-weight: 400;
}

.profile-update-request-summary .summary-membership-line span {
  color: #71717a;
  font-weight: 400;
}

.profile-update-request-summary .summary-stats-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 38px;
}

.profile-update-request-summary .summary-stat-item {
  display: grid;
  gap: 2px;
  min-width: 125px;
}

.profile-update-request-summary .summary-stat-label {
  color: #71717a;
  font-family: "Inter", "Manrope", sans-serif;
  font-size: 12px;
  font-weight: 400;
}

.profile-update-request-summary .summary-stat-value {
  color: #2f2f32;
  font-family: "Inter", "Manrope", sans-serif;
  font-size: 14px;
  font-weight: 400;
  overflow-wrap: anywhere;
}

.profile-update-request-summary-right {
  align-items: center;
}

.profile-update-request-summary-right .application-status-badge {
  display: flex;
  width: 120px;
  padding: 8px;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
  font-family: "Inter", "Manrope", sans-serif;
  font-size: 12px;
  font-weight: 600;
}

.profile-update-request-pagination {
  margin-top: auto;
  padding-top: 18px;
}

.profile-update-request-dialog {
  max-height: calc(100vh - 44px);
  overflow-y: auto;
  overflow-x: hidden;
}

.profile-update-request-confirm-modal {
  z-index: 2400;
}

.profile-update-request-confirm-dialog {
  width: min(480px, 100%);
  overflow: hidden;
}

.profile-update-request-confirm-body {
  padding: 22px 24px 2px;
}

.profile-update-request-confirm-body p {
  margin: 0;
  color: #2d3348;
  font-size: 0.96rem;
  line-height: 1.55;
}

.profile-update-request-confirm-actions {
  margin-top: 0;
  padding: 18px 24px 22px;
}

.profile-update-request-review-form {
  display: flex;
  flex-direction: column;
}

.profile-update-request-modal-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  border-radius: 14px;
  background: #f7f5fd;
  border: 1px solid #e4def4;
  padding: 14px;
}

.profile-update-request-modal-summary img {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  object-fit: cover;
  border: 2px solid #ffffff;
  background: #ffffff;
}

.profile-update-request-modal-summary span:not(.application-status-badge),
.profile-update-request-review-meta span,
.profile-update-request-change-card span {
  display: block;
  color: #68718b;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.profile-update-request-modal-summary h3 {
  margin: 4px 0 2px;
  color: #21183f;
  font-size: 1.05rem;
}

.profile-update-request-modal-summary p {
  margin: 0;
  color: #68718b;
}

.profile-update-request-review-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.profile-update-request-review-meta div {
  min-width: 0;
  border-radius: 12px;
  border: 1px solid #e0e6f3;
  background: #ffffff;
  padding: 12px;
}

.profile-update-request-review-meta strong {
  display: block;
  margin-top: 5px;
  color: #21183f;
  font-size: 0.92rem;
  overflow-wrap: anywhere;
}

.profile-update-request-change-list {
  display: grid;
  gap: 12px;
}

.profile-update-request-change-card {
  border: 1px solid #dfe6f4;
  border-radius: 14px;
  background: #ffffff;
  padding: 14px;
}

.profile-update-request-change-card h3 {
  margin: 0 0 12px;
  color: #21183f;
  font-size: 0.98rem;
}

.profile-update-request-change-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.profile-update-request-change-grid>div {
  min-width: 0;
  border-radius: 12px;
  background: #f8f9fd;
  padding: 12px;
}

.profile-update-request-change-grid strong {
  display: block;
  margin-top: 6px;
  color: #2d3348;
  font-size: 0.92rem;
  overflow-wrap: anywhere;
}

.profile-update-request-change-card.is-image-change img {
  display: block;
  width: 92px;
  height: 92px;
  margin-top: 8px;
  border-radius: 16px;
  border: 1px solid #dfe6f4;
  object-fit: cover;
  background: #ffffff;
}

.profile-update-request-no-changes {
  margin: 0;
}

.family-member-approval-review-notes {
  display: grid;
  gap: 8px;
  width: 100%;
  margin-top: 4px;
}

.family-member-approval-review-notes span {
  display: block;
  color: #555c76;
  font-size: 0.79rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

.family-member-approval-review-notes textarea {
  width: 100%;
  min-height: 96px;
  resize: vertical;
  border: 1px solid #d8dff0;
  border-radius: 12px;
  background: #ffffff;
  color: #2d3348;
  padding: 12px 14px;
  box-sizing: border-box;
}

.family-member-approval-review-notes textarea:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(111, 97, 190, 0.14);
  outline: 0;
}

.profile-update-request-actions-row .page-modal-actions {
  width: 100%;
  margin-top: 6px;
  margin-left: auto;
  justify-content: flex-end;
}

@media (max-width: 1120px) {
  .profile-update-request-header {
    grid-template-columns: 1fr;
  }

  .profile-update-request-toolbar {
    justify-self: stretch;
  }
}

@media (max-width: 760px) {

  .profile-update-request-toolbar,
  .profile-update-request-modal-summary,
  .profile-update-request-review-meta,
  .profile-update-request-change-grid {
    grid-template-columns: 1fr;
  }

  .profile-update-request-modal-summary {
    align-items: start;
  }
}

/* Family Removal Request */

.family-removal-request-surface {
  display: flex;
  flex-direction: column;
}

.family-removal-request-main {
  min-height: 0;
}

.family-removal-request-header {
  grid-template-columns: minmax(260px, 1fr) minmax(520px, 680px);
}

.family-removal-request-toolbar {
  width: 100%;
  grid-template-columns: minmax(320px, 1fr) minmax(170px, 220px);
}

.family-removal-request-list {
  flex: 0 0 auto;
  margin-top: 22px;
  gap: 14px;
}

.family-removal-request-card {
  background: #ffffff;
  border: 1px solid #e7e7ea;
  border-radius: 10px;
  box-shadow: none;
}

body:not(.membership-detail-view) .family-removal-request-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(47, 47, 50, 0.08);
}

body:not(.membership-detail-view) .family-removal-request-card:hover .family-removal-request-summary {
  background: #f3f3f5;
}

.family-removal-request-summary {
  min-height: 112px;
  padding: 20px 18px;
  gap: 16px;
  align-items: center;
  background: #f8f8f8;
}

.family-removal-request-summary .application-summary-main {
  align-items: center;
  gap: 14px;
}

.family-removal-request-summary .application-summary-avatar {
  width: 50px;
  height: 50px;
  border: 1px solid #d7d7dc;
}

.family-removal-request-summary .application-summary-copy {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.family-removal-request-summary h2 {
  color: #2f2f32;
  font-family: "Inter", "Manrope", sans-serif;
  font-size: 20px;
  font-weight: 600;
}

.family-removal-request-summary .application-summary-meta {
  margin-top: 0;
  display: grid;
  gap: 10px;
}

.family-removal-request-summary .summary-membership-line {
  color: #71717a;
  font-family: "Inter", "Manrope", sans-serif;
  font-size: 12px;
  font-weight: 400;
}

.family-removal-request-summary .summary-membership-line span {
  color: #71717a;
  font-weight: 400;
}

.family-removal-request-summary .summary-stats-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 38px;
}

.family-removal-request-summary .summary-stat-item {
  display: grid;
  gap: 2px;
  min-width: 125px;
}

.family-removal-request-summary .summary-stat-label {
  color: #71717a;
  font-family: "Inter", "Manrope", sans-serif;
  font-size: 12px;
  font-weight: 400;
}

.family-removal-request-summary .summary-stat-value {
  color: #2f2f32;
  font-family: "Inter", "Manrope", sans-serif;
  font-size: 14px;
  font-weight: 400;
  overflow-wrap: anywhere;
}

.family-removal-request-summary-right {
  align-items: center;
}

.family-removal-request-summary-right .application-status-badge {
  display: flex;
  width: 120px;
  padding: 8px;
  justify-content: center;
  align-items: center;
  border-radius: 30px;
  font-family: "Inter", "Manrope", sans-serif;
  font-size: 12px;
  font-weight: 600;
}

.family-removal-request-pagination {
  margin-top: auto;
  padding-top: 18px;
}

.family-removal-request-dialog {
  max-height: calc(100vh - 44px);
  overflow-y: auto;
  overflow-x: hidden;
}

.family-removal-request-confirm-modal {
  z-index: 2400;
}

.family-removal-request-confirm-dialog {
  width: min(480px, 100%);
  overflow: hidden;
}

.family-removal-request-confirm-body {
  padding: 22px 24px 2px;
}

.family-removal-request-confirm-body p {
  margin: 0;
  color: #2d3348;
  font-size: 0.96rem;
  line-height: 1.55;
}

.family-removal-request-confirm-actions {
  margin-top: 0;
  padding: 18px 24px 22px;
}

.family-removal-request-review-form {
  display: flex;
  flex-direction: column;
}

.family-removal-request-modal-summary {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  border-radius: 14px;
  background: #f7f5fd;
  border: 1px solid #e4def4;
  padding: 14px;
}

.family-removal-request-modal-summary img,
.family-removal-request-person-row img {
  width: 64px;
  height: 64px;
  border-radius: 999px;
  object-fit: cover;
  border: 2px solid #ffffff;
  background: #ffffff;
}

.family-removal-request-modal-summary span:not(.application-status-badge),
.family-removal-request-review-meta span,
.family-removal-request-detail-card span,
.family-removal-request-remarks span {
  display: block;
  color: #68718b;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.family-removal-request-modal-summary h3 {
  margin: 4px 0 2px;
  color: #21183f;
  font-size: 1.05rem;
}

.family-removal-request-modal-summary p,
.family-removal-request-review-meta small {
  margin: 0;
  color: #68718b;
  overflow-wrap: anywhere;
}

.family-removal-request-review-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.family-removal-request-review-meta div {
  min-width: 0;
  border-radius: 12px;
  border: 1px solid #e0e6f3;
  background: #ffffff;
  padding: 12px;
}

.family-removal-request-review-meta strong {
  display: block;
  margin-top: 5px;
  color: #21183f;
  font-size: 0.92rem;
  overflow-wrap: anywhere;
}

.family-removal-request-detail-list {
  display: grid;
  gap: 12px;
}

.family-removal-request-detail-card {
  border: 1px solid #dfe6f4;
  border-radius: 14px;
  background: #ffffff;
  padding: 14px;
}

.family-removal-request-detail-card h3 {
  margin: 0 0 12px;
  color: #21183f;
  font-size: 0.98rem;
}

.family-removal-request-detail-card p {
  margin: 0;
  color: #2d3348;
  font-size: 0.92rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.family-removal-request-person-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.family-removal-request-person-row img {
  width: 52px;
  height: 52px;
  border-color: #dfe6f4;
}

.family-removal-request-person-row strong {
  display: block;
  color: #21183f;
  font-size: 0.96rem;
  overflow-wrap: anywhere;
}

.family-removal-request-person-row span {
  margin-top: 4px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.84rem;
  font-weight: 500;
  overflow-wrap: anywhere;
}

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

.family-removal-request-detail-grid>div {
  min-width: 0;
  border-radius: 12px;
  background: #f8f9fd;
  padding: 12px;
}

.family-removal-request-detail-grid strong {
  display: block;
  margin-top: 6px;
  color: #2d3348;
  font-size: 0.92rem;
  overflow-wrap: anywhere;
}

.family-removal-request-remarks {
  display: grid;
  gap: 8px;
}

.family-removal-request-remarks textarea {
  width: 100%;
  min-height: 92px;
  border: 1px solid #d4daea;
  border-radius: 14px;
  padding: 12px 14px;
  color: #2a2d3d;
  font: inherit;
  resize: vertical;
  background: #ffffff;
}

.family-removal-request-reviewed-note {
  margin: 0;
  border-radius: 14px;
  background: #f3f1ff;
  color: #4d4f6e;
  padding: 12px 14px;
  line-height: 1.45;
}

.family-removal-request-actions-row .page-modal-actions {
  width: 100%;
  margin-top: 6px;
  margin-left: auto;
  justify-content: flex-end;
}

.family-removal-request-actions-row .application-action-button.is-decline,
.family-removal-request-confirm-actions .application-action-button.is-decline {
  background: #d84a5f;
  color: #ffffff;
}

@media (max-width: 1120px) {
  .family-removal-request-header {
    grid-template-columns: 1fr;
  }

  .family-removal-request-toolbar {
    justify-self: stretch;
  }

  .family-removal-request-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {

  .family-removal-request-toolbar,
  .family-removal-request-modal-summary,
  .family-removal-request-review-meta,
  .family-removal-request-detail-grid {
    grid-template-columns: 1fr;
  }

  .family-removal-request-modal-summary {
    align-items: start;
  }
}

/* Shared header toolbar alignment */
.membership-toolbar :is(input, select),
.masterclass-header-actions>.membership-toolbar-btn,
.manage-schedules-header-toolbar :is(input, select),
.manage-schedules-filter-toolbar :is(input, select),
.manage-newsletter-toolbar input,
.biometric-users-toolbar :is(input, select),
.manage-visits-toolbar :is(input, select),
.manage-visits-add-btn {
  height: var(--toolbar-control-height);
  min-height: var(--toolbar-control-height);
}

.masterclass-header-actions>.membership-toolbar-btn,
.manage-visits-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-top: 0;
  padding-bottom: 0;
  line-height: 1.2;
}

@keyframes dataAnalyticsGrowUp {
  0% {
    transform: scaleY(0);
    opacity: 0;
  }

  100% {
    transform: scaleY(1);
    opacity: 1;
  }
}

@property --analytics-draw-percent {
  syntax: '<number>';
  initial-value: 100;
  inherits: false;
}

@keyframes dataAnalyticsDonutFill {
  0% {
    --analytics-draw-percent: 0;
  }
}

@keyframes dataAnalyticsDonutTextFade {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Modal Styles */
.membership-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.membership-modal[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
}

.membership-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(30, 32, 43, 0.6);
  backdrop-filter: blur(4px);
  cursor: pointer;
}

.membership-modal-container {
  position: relative;
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 16px 48px rgba(30, 32, 43, 0.16);
  display: flex;
  flex-direction: column;
  transform: translateY(20px) scale(0.95);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.membership-modal[aria-hidden="false"] .membership-modal-container {
  transform: translateY(0) scale(1);
}

.membership-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px;
  border-bottom: 1px solid rgba(91, 99, 123, 0.1);
}

.membership-modal-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 900;
  color: #303037;
}

.membership-modal-close-btn {
  background: transparent;
  border: none;
  padding: 8px;
  margin: -8px;
  cursor: pointer;
  color: #686f82;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
}

.membership-modal-close-btn:hover {
  background: #f4f6fb;
  color: #303037;
}

.membership-modal-body {
  padding: 24px;
  overflow-y: auto;
}