:root {
  color-scheme: light;
  --black: #050505;
  --ink: #151515;
  --muted: #686868;
  --line: #dedede;
  --field: #f3f4f6;
  --card: rgba(255, 255, 255, 0.94);
  --gold: #b7aa2b;
  --gold-dark: #8f841f;
  --shadow: 0 26px 80px rgba(0, 0, 0, 0.22);
}

* {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
  overflow-y: auto;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow: visible;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 50% 24%, rgba(255, 255, 255, 0.95) 0 16%, transparent 34%),
    radial-gradient(circle at 28% 72%, rgba(183, 170, 43, 0.22), transparent 30%),
    linear-gradient(135deg, #ffffff 0%, #f4f4f4 38%, #d8d8d8 100%);
}

button,
input,
select,
textarea {
  font: inherit;
}

[hidden] {
  display: none !important;
}

.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 18px;
  position: relative;
  min-width: 0;
  overflow: visible;
}

body[data-active-view="login-view"] {
  height: 100vh;
  overflow: hidden;
}

body[data-active-view="login-view"] .login-shell {
  height: 100vh;
  min-height: 0;
  padding-block: 14px;
  overflow: clip;
  background:
    linear-gradient(135deg, transparent 0 49%, #fafafa 50%) top left / 125px 125px no-repeat,
    repeating-linear-gradient(135deg, #d2d2d2 0 6px, transparent 6px 13px) top left / 125px 125px no-repeat,
    linear-gradient(315deg, transparent 0 49%, #fafafa 50%) bottom right / 125px 125px no-repeat,
    repeating-linear-gradient(135deg, #d2d2d2 0 6px, transparent 6px 13px) bottom right / 125px 125px no-repeat,
    #fafafa;
}

body[data-active-view="login-view"] .login-shell::before {
  width:auto;
  height:auto;
  max-width:none;
  max-height:none;
  min-width:0;
  min-height:0;
  inset:0;
  border-radius:0;
  background:url("./assets/brand-library/cai-escudo-clasico.jpeg") 14px 8px / 112px 112px repeat;
  mix-blend-mode:multiply;
  opacity:.075;
}

body[data-active-view="login-view"] .login-shell::after { display:none; }

body[data-active-view="staff-first-access-view"] {
  height: 100vh;
  overflow: hidden;
}

body[data-active-view="staff-first-access-view"] .login-shell {
  height: 100vh;
  min-height: 0;
  padding-block: 14px;
  overflow: clip;
}

.login-shell::before,
.login-shell::after {
  content: "";
  position: absolute;
  inset: auto;
  pointer-events: none;
}

.login-shell::before {
  width: 52vw;
  height: 52vw;
  max-width: 780px;
  max-height: 780px;
  min-width: 360px;
  min-height: 360px;
  left: -15vw;
  bottom: -24vw;
  background: #0b0b0b;
  border-radius: 999px;
  opacity: 0.08;
}

.login-shell::after {
  width: 40vw;
  height: 40vw;
  max-width: 620px;
  max-height: 620px;
  min-width: 320px;
  min-height: 320px;
  right: -16vw;
  top: -18vw;
  background: var(--black);
  border-radius: 999px;
  opacity: 0.09;
}

.login-card {
  width: min(100%, 390px);
  padding: 26px 30px 24px;
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(0,0,0,.04);
  border-radius: 16px;
  box-shadow: var(--shadow);
  position: relative;
  z-index: 1;
}

.brand-mark {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 214px;
  margin-bottom: 18px;
  overflow: visible;
}

.brand-mark img {
  width: 295px;
  height: 295px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

h1 {
  margin: 0 0 18px;
  text-align: center;
  font-size: 1.02rem;
  line-height: 1.32;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--black);
}

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

.field {
  display: grid;
  gap: 7px;
  color: #2d2d2d;
  font-size: 0.93rem;
  font-weight: 500;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 40px;
  border: 1px solid #d9d9d9;
  border-radius: 12px;
  background: var(--field);
  color: var(--black);
  padding: 10px 13px;
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.field textarea {
  resize: vertical;
  min-height: 132px;
  line-height: 1.4;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  background: #fff;
  border-color: var(--black);
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.08);
}

.password-row {
  display: grid;
  grid-template-columns: 1fr 58px;
  gap: 10px;
}

.ghost-button {
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--black);
  font-weight: 700;
  cursor: pointer;
}

.primary-button,
.secondary-button {
  min-height: 42px;
  border: 0;
  border-radius: 999px;
  font-weight: 800;
  cursor: pointer;
}

.primary-button {
  margin-top: 4px;
  background: linear-gradient(135deg, #050505 0%, #2d2d2d 55%, #050505 100%);
  color: #fff;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.2);
}

.secondary-button {
  background: #fff;
  color: var(--black);
  border: 1px solid #cfcfcf;
}

.primary-button:hover,
.secondary-button:hover,
.ghost-button:hover {
  transform: translateY(-1px);
}

.forgot-link {
  justify-self: center;
  margin-top: 0;
  color: var(--muted);
  font-size: 0.88rem;
  text-decoration: none;
}

.forgot-link:hover {
  color: var(--gold-dark);
}

.login-status {
  min-height: 18px;
  margin: 0;
  color: #9d1c1c;
  font-size: 0.8rem;
  text-align: center;
}

.access-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-bottom: 18px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f1f1f1;
}

.access-switch-button {
  min-height: 36px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 900;
  cursor: pointer;
}

.access-switch-button.is-active { background: #fff; color: var(--black); box-shadow: 0 2px 8px rgba(0,0,0,.1); }
.login-context { margin: -10px 0 16px; color: var(--muted); font-size: .8rem; text-align: center; }
.login-product { margin: 0 0 7px; color: var(--gold-dark); font-size: .8rem; font-weight: 900; text-align: center; text-transform: uppercase; }
.access-form-card { width: min(100%, 430px); }
.compact-back { margin-bottom: 8px; }
.compact-brand { display: grid; place-items: center; }
.compact-brand img { width: 112px; height: 112px; object-fit: contain; mix-blend-mode: multiply; }
.access-eyebrow { margin: 4px 0; color: var(--gold-dark); font-size: .76rem; font-weight: 900; text-align: center; text-transform: uppercase; }
.password-requirement { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.4; }
.transfer-attachment { display: grid; gap: 12px; margin-top: 16px; min-width: 0; }
.attachment-upload { display: flex; align-items: center; justify-content: center; padding: 10px 16px; cursor: pointer; }
.transfer-paste-zone { padding: 18px; border: 1px dashed #999; border-radius: 8px; text-align: center; color: #666; }
.transfer-paste-zone:focus { outline: 2px solid var(--gold-dark); outline-offset: 2px; }
#transfer-preview, .saved-transfer-image { display: block; width: auto; max-width: 100%; max-height: 420px; object-fit: contain; }
#transfer-note { margin: 0; font-size: .85rem; }
#saved-payment-attachments details { padding: 10px 0; overflow-wrap: anywhere; }
#saved-payment-attachments summary { cursor: pointer; }
.work-review.panel-block { margin: 0 0 24px; background: #fff; }
.work-review-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.work-review-filters .field { min-width: 0; }
.work-review-totals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin: 18px 0 24px; }
.work-review-totals dt { font-size: .8rem; color: var(--muted); }
.work-review-totals dd { margin: 5px 0 0; font-size: 1.25rem; font-weight: 800; overflow-wrap: anywhere; }
.work-review h3 { margin: 18px 0 10px; font-size: 1rem; }
.work-review .table-wrap { max-height: 320px; overflow: auto; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; }
.work-review table { width: max-content; min-width: 100%; border-collapse: collapse; }
.work-review th, .work-review td { padding: 10px; border-bottom: 1px solid var(--line); text-align: left; font-size: .82rem; }
.work-review th { position: sticky; top: 0; background: #f5f5f5; }
.work-review tr.is-voided { color: #777; }
.work-review tr.is-voided td { background: rgba(5, 5, 5, 0.025); }
.work-review-voided-label { color: #777; font-size: .78rem; font-weight: 850; }
#work-review-note { color: var(--muted); font-size: .8rem; }
#work-review-today { min-height: 40px; padding: 0 20px; }
@media (max-width: 620px) {
  .work-review-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work-review-filters .field:last-child { grid-column: 1 / -1; }
  .work-review-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.mailbox-settings { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; margin: 18px 0 8px; }
.mailbox-settings button { min-height: 44px; padding: 10px 18px; }
.mailbox-settings .field { min-width: 0; }
#mailbox-settings-note { overflow-wrap: anywhere; }
#transfer-pdf-preview, #saved-payment-attachments a { overflow-wrap: anywhere; display: inline-block; padding: 12px 0; }
@media (max-width: 520px) {
  .mailbox-settings { grid-template-columns: minmax(0, 1fr); }
  .transfer-attachment .payment-option-actions { display: flex; flex-wrap: wrap; }
  .transfer-attachment .payment-option-actions > * { flex: 1 1 140px; }
}

.app-login-decor { display: none; }

/* Shared access identity for CAI APP and CAI 360 STAFF. */
body[data-active-view="login-view"] .login-shell {
  padding: 24px 18px;
  isolation: isolate;
  background: #fbfbfb;
}

body[data-active-view="login-view"] .login-shell::before {
  inset: 0;
  z-index: -2;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
  border-radius: 0;
  background: url("./assets/brand-library/cai-escudo-estrellas-doradas.jpeg") 30px 18px / 155px 155px repeat;
  mix-blend-mode: multiply;
  opacity: .045;
}

body[data-active-view="login-view"] .login-shell::after {
  display: block;
  inset: 0;
  z-index: -1;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  max-width: none;
  max-height: none;
  border-radius: 0;
  background:
    linear-gradient(135deg, #050505 0 32px, transparent 33px) top left / 180px 180px no-repeat,
    linear-gradient(135deg, transparent 0 46px, #c39118 47px 48px, transparent 49px 62px, #d4d4d4 63px 67px, transparent 68px) top left / 180px 180px no-repeat,
    linear-gradient(315deg, #050505 0 32px, transparent 33px) bottom right / 180px 180px no-repeat,
    linear-gradient(315deg, transparent 0 46px, #c39118 47px 48px, transparent 49px 62px, #d4d4d4 63px 67px, transparent 68px) bottom right / 180px 180px no-repeat;
  pointer-events: none;
}

#login-view.login-card {
  width: min(100%, 430px);
  padding: 28px 40px 24px;
  border: 1px solid rgba(0, 0, 0, .045);
  border-radius: 18px;
  background: rgba(255, 255, 255, .975);
  box-shadow: 0 22px 55px rgba(0, 0, 0, .16);
}

#login-view .brand-mark {
  height: 142px;
  margin: 0 0 6px;
}

#login-view .brand-mark img {
  width: 150px;
  height: 150px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

#login-view .login-product {
  margin: 0 0 4px;
  color: #bd8c19;
  font-size: 1.5rem;
  line-height: 1.1;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
}

#login-view .login-product strong { color: #bd8c19; }
body[data-access-context="staff"] #login-view .login-product span { color: #050505; }

#login-view h1 {
  margin: 0;
  font-size: 1rem;
  line-height: 1.3;
  font-weight: 650;
}

#login-view .login-context {
  margin: 3px 0 0;
  color: #777;
  font-size: .82rem;
  line-height: 1.35;
}

body[data-access-context="staff"] #login-view .login-context {
  color: #202020;
  font-weight: 750;
}

.login-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
  margin: 14px 0 15px;
  color: #bd8c19;
}

.login-divider::before,
.login-divider::after {
  content: "";
  height: 1px;
  background: #cba451;
}

.login-divider span { font-size: .8rem; line-height: 1; }

#login-view .login-form { gap: 12px; }
#login-view .field { gap: 6px; color: #171717; font-size: .82rem; font-weight: 700; }

.login-input-wrap {
  position: relative;
  display: block;
}

#login-view .login-input-wrap input {
  min-height: 44px;
  padding: 10px 42px;
  border: 1px solid #d5d5d5;
  border-radius: 8px;
  background: #fafafa;
  font-size: .86rem;
}

#login-view .login-input-wrap input::placeholder { color: #9a9a9a; opacity: 1; }

.login-input-icon {
  position: absolute;
  top: 50%;
  left: 12px;
  z-index: 1;
  width: 19px;
  height: 19px;
  color: #8b8b8b;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translateY(-50%);
  pointer-events: none;
}

#login-view .password-row { display: block; }

.password-visibility {
  position: absolute;
  top: 50%;
  right: 7px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #878787;
  transform: translateY(-50%);
  cursor: pointer;
}

.password-visibility:hover { color: #050505; background: #eee; }
.password-visibility svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.password-visibility .eye-slash { display: none; }
.password-visibility.is-visible .eye-slash { display: block; }

#login-view .login-submit,
#login-view .fan-register-action {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  border-radius: 999px;
  text-transform: uppercase;
}

#login-view .fan-register-action:disabled,
#login-view .fan-register-action:disabled:hover {
  cursor: not-allowed;
  color: #8d8d8d;
  opacity: .7;
  transform: none;
}

#login-view .login-submit { margin-top: 2px; }
.button-arrow { position: absolute; right: 17px; color: #c99a1c; font-size: 1.35rem; font-weight: 400; line-height: 1; }

#login-view .fan-register-action {
  border-color: #c99a1c;
  font-size: .8rem;
}

.add-user-icon { position: absolute; right: 17px; color: #c99a1c; font-size: 1.2rem; font-weight: 500; }

#login-view .forgot-link { color: #b28317; font-size: .82rem; }
#login-view .forgot-link[aria-disabled="true"] {
  cursor: not-allowed;
  color: #8d8d8d;
  opacity: .7;
  text-decoration: none;
}
#login-view .login-status:empty { min-height: 0; }

.login-card-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 12px;
  padding-top: 16px;
  border-top: 1px solid #e5e5e5;
  color: #7d7d7d;
  font-size: .76rem;
}

.login-card-footer svg { width: 21px; height: 21px; fill: none; stroke: #c4951c; stroke-width: 1.7; stroke-linejoin: round; }

@media (min-width: 521px) and (min-height: 701px) {
  #login-view.login-card { height: 612px; }

  body[data-access-context="app"] #login-view.login-card {
    padding-top: 22px;
    padding-bottom: 20px;
  }

  body[data-access-context="app"] #login-view .brand-mark { height: 118px; }
  body[data-access-context="app"] #login-view .brand-mark img { width: 128px; height: 128px; }
  body[data-access-context="app"] #login-view .login-divider { margin-top: 10px; margin-bottom: 11px; }
  body[data-access-context="app"] #login-view .login-form { gap: 9px; }
}

@media (max-width: 520px) {
  body[data-active-view="login-view"] .login-shell { padding: 14px; }
  body[data-active-view="login-view"] .login-shell::before { background-size: 120px 120px; }
  body[data-active-view="login-view"] .login-shell::after { opacity: .8; }
  #login-view.login-card { width: 100%; padding: 22px 22px 20px; border-radius: 16px; }
  #login-view .brand-mark { height: 122px; }
  #login-view .brand-mark img { width: 128px; height: 128px; }
  #login-view .login-product { font-size: 1.28rem; }
  #login-view .login-input-wrap input { min-height: 46px; font-size: 1rem; }
  #login-view .login-submit, #login-view .fan-register-action { min-height: 46px; }
}

@media (max-height: 700px) {
  body[data-active-view="login-view"] { height: auto; min-height: 100vh; overflow-y: auto; }
  body[data-active-view="login-view"] .login-shell { height: auto; min-height: 100svh; }
  #login-view .brand-mark { height: 106px; }
  #login-view .brand-mark img { width: 112px; height: 112px; }
  #login-view.login-card { padding-top: 18px; padding-bottom: 18px; }
}

.registration-view,
.fan-portal {
  width: min(100%, 1040px);
  position: relative;
  z-index: 1;
}

.fan-register-form {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  box-shadow: var(--shadow);
}
.fan-photo-field, .fan-register-note { grid-column: span 2; }
.fan-register-note:empty { display: none; }
.fan-register-note--member-duplicate {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid #a52626;
  border-radius: 7px;
  background: #080808;
  color: #ef6b6b;
  font-size: .78rem;
  font-weight: 900;
  line-height: 1.45;
  text-align: center;
  text-transform: uppercase;
}
.fan-register-submit { align-self: end; min-height: 42px; }

.app-nav {
  display: flex;
  gap: 4px;
  margin-bottom: 22px;
  padding: 5px;
  position: sticky;
  top: 8px;
  z-index: 4;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.app-nav-button { flex: 1 0 max-content; min-height: 38px; padding: 0 15px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); font-size: .82rem; font-weight: 800; cursor: pointer; }
.app-nav-button.is-active { background: var(--black); color: #fff; }

.app-home { margin-bottom: 18px; }
.campaign-alert { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 20px; padding: 22px 24px; border-left: 5px solid var(--gold); border-radius: 8px; background: var(--black); color: #fff; box-shadow: 0 16px 36px rgba(0,0,0,.18); }
.campaign-alert span { color: #d8cc54; font-size: .76rem; font-weight: 900; text-transform: uppercase; }
.campaign-alert strong { font-size: 1.25rem; }
.campaign-alert .primary-button { grid-column: 2; grid-row: 1 / span 2; min-width: 180px; padding: 0 18px; background: #fff; color: #050505; }
.app-shortcuts { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 12px; }
.app-shortcuts button { display: grid; gap: 5px; min-height: 86px; padding: 16px; border: 1px solid var(--line); border-radius: 8px; background: #fff; text-align: left; cursor: pointer; }
.app-shortcuts span { color: var(--gold-dark); font-size: .78rem; font-weight: 900; }

.app-feature-panel { margin-bottom: 18px; padding: 24px; border: 1px solid rgba(0,0,0,.08); border-radius: 8px; background: var(--card); box-shadow: 0 16px 42px rgba(0,0,0,.1); }
.annual-progress { height: 16px; overflow: hidden; border: 1px solid #d6d6d6; border-radius: 4px; background: #f3f3f3; }
.annual-progress span { display: block; height: 100%; background: var(--black); }
.fee-months { display: grid; grid-template-columns: repeat(6,1fr); gap: 7px; margin: 16px 0; }
.fee-month { padding: 8px 5px; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); font-size: .72rem; text-align: center; }
.fee-month.is-paid { border-color: var(--black); background: var(--black); color: #fff; }
.detail-toggle, .card-download { min-width: 150px; padding: 0 16px; }
.fee-detail-table { margin-top: 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; }
.fee-detail-table table { width: max-content; min-width: 100%; border-collapse: collapse; }
.fee-detail-table th, .fee-detail-table td { padding: 10px; border-bottom: 1px solid var(--line); font-size: .82rem; text-align: left; }

.digital-card { container-type:inline-size; display:grid; grid-template-rows:30% 54% 16%; width:min(100%,380px); aspect-ratio:1.55/1; margin:0 auto 16px; overflow:hidden; border:1px solid #242424; border-radius:12px; background:#fff; box-shadow:0 10px 24px rgba(0,0,0,.12); }
.digital-card-header { display:flex; align-items:center; justify-content:space-between; gap:3cqw; padding:2.45cqw 5.5cqw 2.1cqw; border-bottom:.5cqw solid #b88a16; background:#050505; color:#fff; }
.digital-card-header > div:first-child { display:grid; line-height:.88; text-transform:uppercase; }
.digital-card-header > div:first-child > span { font-size:2.8cqw; letter-spacing:.32em; }
.digital-card-header strong { margin-top:.9cqw; font-size:7.2cqw; letter-spacing:.02em; }
.digital-card-header small { margin-top:1.1cqw; color:#c9951b; font-size:1.45cqw; font-weight:800; letter-spacing:.34em; }
.digital-card-crest { display:grid; place-items:center; flex:0 0 15.5cqw; width:15.5cqw; height:14cqw; overflow:visible; }
.digital-card-crest img { width:100%; height:14cqw; min-height:0; min-width:0; object-fit:contain; visibility:visible; }
.digital-card-crest img.is-ready { visibility:visible; }
.digital-card-crest img:not(.is-ready), .card-anniversary img:not(.is-ready) { filter:grayscale(1) invert(1); mix-blend-mode:screen; }
.digital-card-body { position:relative; display:grid; grid-template-columns:31cqw 1fr; align-items:center; gap:5cqw; padding:2.35cqw 5.2cqw; overflow:hidden; background:#fff; }
.digital-card-photo-frame { z-index:1; display:grid; place-items:center; width:100%; height:100%; overflow:hidden; border-radius:7%; background:#ededed; color:#9a9a9a; }
.digital-card-photo-frame::before, .digital-card-photo-frame::after { display:none !important; content:none !important; }
.digital-card-photo-frame > * { position:static; }
.digital-card-photo-frame > span { font-size:8cqw; font-weight:800; letter-spacing:.03em; }
.digital-card-photo { width:100%; height:100%; object-fit:cover; background:#ededed; }
.digital-card-data { z-index:1; display:grid; align-content:center; gap:1.35cqw; text-transform:uppercase; }
.digital-card-data > span { color:#bd8b16; font-size:3cqw; font-weight:900; }
.digital-card-data > strong { padding-bottom:1.35cqw; border-bottom:1px solid #caa34e; color:#050505; font-size:5.1cqw; line-height:.94; }
.digital-card-data > div { display:grid; gap:.25cqw; }
.digital-card-data small { color:#777; font-size:1.75cqw; font-weight:800; }
.digital-card-data b { color:#050505; font-size:2.65cqw; }
.digital-card-status { display:flex; align-items:baseline; gap:.75cqw; }
.digital-card-status span { color:#b88918; }
.digital-card-status i { color:#b88918; font-style:normal; font-weight:400; }
.digital-card-status em { color:#050505; font-style:normal; }
.digital-card-status .digital-card-status-infinity {
  font-size: 1.48em;
  font-weight: 500;
  line-height: .8;
}
.digital-card-watermark { position:absolute; right:-10cqw; bottom:-12cqw; width:49cqw; height:49cqw; object-fit:contain; opacity:.05; }
.digital-card-footer { display:flex; align-items:center; gap:4cqw; padding:1.5cqw 5.5cqw; background:#050505; color:#fff; text-transform:uppercase; }
.digital-card-footer > div:first-child { display:grid; flex:1; justify-items:center; gap:.75cqw; }
.digital-card-footer strong { font-size:2.8cqw; letter-spacing:.38em; }
.digital-card-footer span { color:#c9951b; font-size:1.65cqw; font-weight:800; letter-spacing:.3em; }
.card-anniversary { display:flex; align-items:center; width:18cqw; height:9cqw; padding-left:2.7cqw; overflow:hidden; border-left:1px solid #b88918; }
.card-anniversary img { width:100%; height:100%; object-fit:contain; visibility:visible; }
.card-anniversary img.is-ready { visibility:visible; }
.card-download { min-width:190px; }

.campaign-layout { display: grid; grid-template-columns: minmax(240px,.8fr) minmax(260px,1.2fr); gap: 22px; }
.campaign-form { display: grid; align-content: start; gap: 14px; }
.campaign-form .primary-button { min-height: 42px; padding: 0 18px; }
.campaign-preview { min-height: 300px; position: relative; overflow: hidden; border-radius: 8px; background: #080808; }
.campaign-preview img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; opacity: .72; }
.campaign-preview::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(0,0,0,.88),transparent 65%); }
.campaign-preview div { position: absolute; left: 22px; bottom: 36px; z-index: 1; display: grid; color: #fff; }
.campaign-preview::before { content: "CAI APP"; position: absolute; right: 22px; bottom: 10px; z-index: 2; color: #fff; font: 700 11px Arial, sans-serif; text-shadow: 0 1px 4px #000; pointer-events: none; }
.campaign-preview span { color: #d9cd56; font-size: .8rem; font-weight: 900; }
.campaign-preview strong { font-size: 2rem; }
.campaign-preview.is-generated { min-height: 0; height: 460px; max-height: 65dvh; background: #eee; display: grid; place-items: center; }
.campaign-preview.is-generated img { position: static; width: 100%; height: 100%; object-fit: contain; opacity: 1; min-height: 0; }
.campaign-preview.is-generated div, .campaign-preview.is-generated::after, .campaign-preview.is-generated::before { display: none; }
#campaign-image-dialog { width: min(1100px, calc(100% - 24px)); max-height: calc(100dvh - 24px); padding: 16px; border: 1px solid #ddd; border-radius: 8px; background: #fff; }
#campaign-image-dialog::backdrop { background: #000b; }
.campaign-image-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.campaign-image-dialog-header h2 { margin: 0; font-size: 18px; }
.campaign-image-dialog-header .dialog-close { position: static; flex-shrink: 0; }
#campaign-image-full { display: block; width: 100%; height: min(70dvh, 760px); object-fit: contain; background: #eee; margin-bottom: 12px; }
#campaign-image-dialog .primary-button { width: 100%; }

.fan-home-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; }
.fan-match-panel, .fan-membership-panel { min-height: 280px; padding: 28px; border-radius: 8px; box-shadow: var(--shadow); }
.fan-match-panel { display: grid; grid-template-columns: 100px 1fr; align-items: center; gap: 20px; background: var(--black); color:#fff; }
.fan-match-panel img { width:100px; height:100px; border-radius:8px; object-fit:cover; }
.fan-match-panel p, .fan-membership-panel p { margin:0 0 6px; color:var(--gold-dark); font-size:.76rem; font-weight:900; text-transform:uppercase; }
.fan-match-panel h2, .fan-membership-panel h2 { margin:0 0 8px; }
.fan-match-panel span, .fan-membership-panel span { color:#aaa; }
.fan-match-panel button { grid-column:1/-1; min-height:44px; }
.fan-membership-panel { display:grid; align-content:center; gap:22px; background:#fff; border:1px solid var(--line); }
.fan-membership-panel .secondary-button { min-height:44px; }

.admin-area-card { border-color: var(--gold); }
.staff-admin-layout { display:grid; gap:18px; }
.staff-admin-layout > .panel-block { min-width:0; }
.staff-admin-layout fieldset { min-width:0; }
.staff-user-form { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.staff-permissions { grid-column:1 / span 3; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; padding:14px; border:1px solid var(--line); border-radius:8px; }
.staff-permissions legend { padding:0 5px; font-size:.82rem; font-weight:800; }
.staff-permissions label { font-size:.82rem; }
.permission-area { display:grid; align-content:start; gap:9px; min-width:0; padding:12px; border-left:3px solid var(--gold); background:#f6f6f6; }
.permission-area strong { font-size:.84rem; }
.permission-area label { display:grid; grid-template-columns:16px 1fr; align-items:start; gap:7px; line-height:1.35; }
.membership-inbox { padding-bottom:22px; margin-bottom:22px; border-bottom:1px solid var(--line); }
.staff-user-submit { grid-column:1/-1; }
.cloud-staff-access { grid-column:1/-1; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)); gap:14px; }
.cloud-password-field { position:relative; min-width:0; }
.cloud-password-field input { width:100%; padding-right:52px; }
.cloud-password-eye { position:absolute; right:4px; top:50%; transform:translateY(-50%); width:44px; height:44px; display:grid; place-items:center; border:0; background:transparent; color:#666; cursor:pointer; }
.cloud-password-eye svg { width:20px; height:20px; }
.permission-area .cloud-permission-field { display:grid; grid-template-columns:minmax(0,1fr); gap:6px; }
.cloud-permission-field select { width:100%; min-width:0; min-height:44px; padding:8px; border:1px solid var(--line); border-radius:8px; background:#fff; color:#111; }
.staff-mfa-panel { border-color: var(--gold); }
.staff-mfa-panel .secondary-button { min-height:44px; }
.password-reset-alert-panel { border-left: 4px solid var(--gold); }
.password-reset-alert-panel .table-wrap { margin-top: 14px; }
.password-reset-alert-panel table { min-width: 880px; }
.password-reset-alert-panel select { min-height: 36px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--black); font-weight: 750; }
.password-reset-alert-panel .status-pill.has-alerts { background: #2a2110; color: #f2c75d; }
.password-reset-alert-note { min-height: 20px; margin-bottom: 0; color: var(--gold-dark); font-weight: 750; }
.password-reset-action { border-color: var(--gold) !important; }
.mfa-secret-label { margin:16px 0 6px; font-size:.78rem; font-weight:800; text-transform:uppercase; color:#666; }
.mfa-secret { display:block; max-width:100%; overflow:auto; padding:12px; border:1px solid var(--line); border-radius:8px; background:#f5f5f5; color:#111; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.9rem; letter-spacing:.08em; user-select:all; }
.staff-mfa-panel .ghost-button { margin-top:10px; }
.mfa-enrollment-form { display:grid; grid-template-columns:minmax(0,260px) auto; align-items:end; gap:14px; margin-top:16px; }
.mfa-enrollment-form .field { margin:0; }
.mfa-enrollment-form .save-member-button { min-height:44px; }
.app-image-admin .form-note { margin-top: 0; }
.brand-library { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:18px 0; }
.brand-library-item { position:relative; display:grid; grid-template-rows:130px auto; gap:9px; min-width:0; padding:9px; border:2px solid transparent; border-radius:8px; background:#f4f4f4; cursor:pointer; }
.brand-library-item:has(input:checked) { border-color:var(--gold-dark); background:#f1efd7; }
.brand-library-item input { position:absolute; top:14px; left:14px; z-index:1; width:18px; height:18px; accent-color:var(--gold-dark); }
.brand-library-item img { width:100%; height:130px; border-radius:6px; background:#fff; object-fit:contain; }
.brand-library-item--light img { background:#202124; }
.brand-library-item span { overflow-wrap:anywhere; font-size:.78rem; font-weight:800; text-align:center; }
.app-image-save { width:220px; padding:0 18px; }
.app-user-filters { display:grid; grid-template-columns:1.4fr .8fr .8fr; gap:12px; margin:18px 0; }
.app-users-table { min-width:1120px; }
.staff-users-table { min-width:1040px; }
.staff-users-table th:nth-child(5),
.staff-users-table td:nth-child(5) { width:34%; }
.staff-permissions-cell { white-space:normal; }
.staff-permission-summary { display:block; margin-bottom:5px; font-weight:800; }
.staff-permission-details summary { color:var(--gold-dark); cursor:pointer; font-size:.78rem; font-weight:800; }
.staff-permission-groups { display:grid; gap:8px; margin-top:8px; }
.staff-permission-group { padding:8px; border:1px solid var(--line); border-radius:6px; background:#fafafa; }
.staff-permission-group > strong { display:block; margin-bottom:6px; font-size:.78rem; }
.staff-permission-list { display:grid; gap:6px; align-content:start; }
.staff-permission-chip { display:block; width:fit-content; max-width:100%; padding:5px 9px; border-radius:999px; background:#f1efd7; color:#4e4a13; font-size:.78rem; font-weight:800; line-height:1.25; overflow-wrap:anywhere; }
.staff-edit-cancel { grid-column:1/-1; min-height:44px; }
.row-actions { display:flex; flex-wrap:wrap; gap:6px; }
.row-actions button { min-height:34px; padding:0 10px; border:1px solid var(--line); border-radius:6px; background:#fff; font-size:.74rem; font-weight:800; cursor:pointer; }
.row-actions button:hover { border-color:var(--black); }
.status-pill.is-blocked { background:#ececec; color:#555; }
.app-permissions-dialog .status-dialog-card { display:grid; gap:16px; }
.permission-toggle { display:grid; grid-template-columns:20px 1fr; align-items:start; gap:10px; padding:14px; border:1px solid var(--line); border-radius:8px; background:#f7f7f7; }
.permission-toggle input { width:18px; height:18px; accent-color:var(--gold-dark); }
.permission-toggle span { display:grid; gap:4px; }
.permission-toggle small { color:var(--muted); line-height:1.4; }
.permission-toggle.is-fixed { background:#f1efd7; }
.campaign-admin-table { min-width:980px; }
.campaign-admin-table button { min-height:34px; padding:0 10px; border:1px solid var(--line); border-radius:6px; background:#fff; font-size:.74rem; font-weight:800; cursor:pointer; }
.campaign-admin-divider { height:1px; margin:24px 0; background:var(--line); }
.campaign-admin-form { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.sponsor-admin-form { display:grid; gap:16px; margin-top:14px; }
.sponsor-form-section { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:14px; border:1px solid rgba(180,143,48,.22); border-radius:8px; }
.sponsor-form-section > strong, .sponsor-form-section > legend { grid-column:1 / -1; color:#b58b25; }
.sponsor-wide { grid-column:1 / -1; }
.sponsor-agreements { display:flex; flex-wrap:wrap; gap:12px 18px; }
.sponsor-agreements label { display:inline-flex; align-items:center; gap:6px; }
.sub-sponsor-row { display:grid; grid-template-columns:84px minmax(0,1fr) auto; gap:14px; align-items:center; padding:12px 0; border-bottom:1px solid rgba(180,143,48,.2); }
.sub-sponsor-row img { width:76px; height:54px; border-radius:6px; background:#f5f3ee; }
.sub-sponsor-row details, .sub-sponsor-row strong, .sub-sponsor-row span, .sub-sponsor-row small { display:block; }
.sub-sponsor-row span, .sub-sponsor-row small { color:#777; margin-top:3px; }
.sub-sponsor-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
@media (max-width: 760px) { .sponsor-form-section { grid-template-columns:1fr; } .sponsor-wide { grid-column:auto; } .sub-sponsor-row { grid-template-columns:64px minmax(0,1fr); } .sub-sponsor-row img { width:60px; height:44px; } .sub-sponsor-actions { grid-column:1 / -1; justify-content:flex-start; } }
.campaign-active-toggle { display:flex; align-items:center; gap:9px; min-height:44px; padding:10px 12px; border:1px solid var(--line); border-radius:8px; font-size:.82rem; font-weight:700; }
.campaign-active-toggle input { width:18px; height:18px; accent-color:var(--gold-dark); }
.campaign-admin-save { padding:0 18px; }
.campaign-admin-note { grid-column:1/-1; margin:0; }
.digital-content-admin-form { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.digital-content-file-field { grid-column:span 2; }
.digital-content-admin-actions { display:flex; align-items:center; gap:10px; }
.digital-content-admin-actions button { min-height:44px; }
.digital-content-admin-note { grid-column:1/-1; margin:0; }
.digital-content-admin-table { min-width:920px; }
.digital-content-admin-preview { width:100px; }
.digital-content-admin-preview img { display:block; width:76px; height:58px; object-fit:contain; background:#f3f1ed; border-radius:6px; }
.digital-content-published { color:#2a6a3a; font-weight:800; }
.digital-content-hidden { color:#777; font-weight:800; }
.notification-admin-table { min-width:820px; }
.notification-admin-form { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.notification-admin-form .field-wide, .notification-admin-note { grid-column:1/-1; }
.notification-admin-actions { display:flex; align-items:center; }
.notification-admin-actions button { min-height:44px; }
.app-notification-permission-dialog { padding:24px; }
.app-notification-permission-dialog .status-dialog-header { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.app-notification-permission-dialog .status-dialog-header p { margin:0 0 4px; color:var(--gold-dark); font-size:.78rem; font-weight:900; text-transform:uppercase; }
.app-notification-permission-dialog h2 { margin:0; color:var(--black); }
.app-notification-permission-dialog > p { color:var(--muted); line-height:1.5; }

@media (max-width: 780px) {
  .fan-register-form { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .fan-photo-field, .fan-register-note { grid-column: span 1; }
  .app-shortcuts, .fan-home-grid { grid-template-columns:1fr; }
  .fee-months { grid-template-columns:repeat(4,1fr); }
  .campaign-layout { grid-template-columns:1fr; }
  .staff-user-form { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .app-user-filters { grid-template-columns:1fr 1fr; }
  .campaign-admin-form { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .digital-content-admin-form { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .notification-admin-form { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .digital-content-file-field { grid-column:1/-1; }
  .digital-content-items { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .brand-library { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .staff-permissions { grid-column:1/-1; }
  .staff-permissions { grid-template-columns:1fr; }
  .mfa-enrollment-form { grid-template-columns:1fr; }
}

@media (max-width: 520px) {
  .fan-register-form, .staff-user-form { grid-template-columns:1fr; padding:18px; }
  .app-user-filters { grid-template-columns:1fr; }
  .campaign-admin-form { grid-template-columns:1fr; }
  .digital-content-admin-form { grid-template-columns:1fr; }
  .notification-admin-form { grid-template-columns:1fr; }
  .digital-content-file-field { grid-column:auto; }
  .digital-content-admin-actions { flex-wrap:wrap; }
  .brand-library { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .app-image-save { width:100%; }
  .campaign-alert { grid-template-columns:1fr; }
  .campaign-alert .primary-button { grid-column:1; grid-row:auto; margin-top:10px; }
  .fee-months { grid-template-columns:repeat(3,1fr); }
  .digital-content-items { grid-template-columns:1fr; margin-left:0; }
  .digital-card { border-radius:10px; }
  .fan-match-panel { grid-template-columns:70px 1fr; padding:20px; }
  .fan-match-panel img { width:70px; height:70px; }
}

.member-portal {
  width: min(100%, 1580px);
  position: relative;
  z-index: 1;
}

.member-portal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}

.member-identity {
  display: flex;
  align-items: center;
  gap: 20px;
}

.member-identity h1 {
  margin: 3px 0 8px;
  font-size: 2rem;
  text-align: left;
}

.member-identity p,
.section-heading p {
  margin: 0;
  color: var(--gold-dark);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.member-photo-wrap {
  width: 116px;
  flex: 0 0 116px;
  position: relative;
}

.member-photo-wrap img {
  width: 116px;
  height: 116px;
  border: 4px solid #fff;
  border-radius: 50%;
  object-fit: cover;
  background: #080808;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
}

.photo-action {
  display: block;
  width: max-content;
  max-width: 100%;
  margin: -12px auto 0;
  padding: 6px 10px;
  position: relative;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--black);
  font-size: 0.72rem;
  font-weight: 800;
  cursor: pointer;
}

.photo-adjust-action { display:block; width:max-content; margin:5px auto 0; padding:3px 9px; border:0; background:transparent; color:var(--muted); font-size:.68rem; font-weight:800; text-decoration:underline; cursor:pointer; }
.photo-adjust-dialog .status-dialog-card { width:min(92vw,460px); display:grid; gap:16px; }
.member-profile-edit-dialog .status-dialog-card { width:min(92vw,460px); display:grid; gap:16px; }
.photo-adjust-preview { width:240px; aspect-ratio:1/1; margin:0 auto; overflow:hidden; border:1px solid var(--line); border-radius:8px; background:#eee; }
.photo-adjust-preview img { width:100%; height:100%; object-fit:cover; object-position:50% 50%; }
.range-field { display:grid; gap:7px; font-size:.84rem; font-weight:700; }
.range-field input { width:100%; accent-color:var(--gold-dark); }

.member-status-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.member-number { color: var(--muted); font-size: 0.9rem; }
.status-pill, .verified-label {
  padding: 5px 9px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 800;
}
.status-pill.is-current { background: #efedd1; color: var(--gold-dark); }
.verified-label { background: #eeeeee; color: #484848; }
.member-logout { min-width: 132px; padding: 0 18px; }

.member-portal-grid,
.personal-life-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 18px;
  margin-bottom: 18px;
}

.personal-life-grid { grid-template-columns: 0.85fr 1.15fr; margin-bottom: 0; }

.member-summary,
.member-details,
.club-life,
.family-panel {
  min-width: 0;
  padding: 24px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  background: var(--card);
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.1);
}

.member-details { grid-column: 1; align-self: start; }
.member-summary { grid-column: 2; align-self: start; }
.club-life { grid-column: 1; align-self: start; }
.family-panel { grid-column: 2; align-self: start; }

.section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
.section-heading h2 { margin: 4px 0 0; font-size: 1.3rem; }

.member-metrics { display: grid; gap: 14px; }
.member-metrics div { display: flex; justify-content: space-between; gap: 15px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.member-metrics div:last-child { padding-bottom: 0; border-bottom: 0; }
.member-metrics span { color: var(--muted); font-size: 0.84rem; }
.member-metrics strong { text-align: right; }

.member-data-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; margin: 0; }
.member-data-list div { min-width: 0; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.member-data-list dt { margin-bottom: 5px; color: var(--muted); font-size: 0.77rem; }
.member-data-list dd { margin: 0; overflow-wrap: anywhere; font-weight: 700; }

.member-portal-grid .member-data-list {
  width: min(100%, 780px);
  margin: 0 auto;
  gap: 14px 18px;
}

.member-portal-grid .member-data-list div {
  min-height: 108px;
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, .52);
  border-radius: 8px;
  background: rgba(255, 255, 255, .11);
}

.member-portal-grid .member-data-list dt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  margin-bottom: 10px;
  color: #444;
  font-size: .94rem;
  font-weight: 650;
}

.member-portal-grid .member-data-list dt > span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.member-portal-grid .member-data-list dt svg {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  color: #171717;
  stroke-width: 2;
}

.member-data-edit {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #8a6415;
  cursor: pointer;
}

.member-data-edit:hover,
.member-data-edit:focus-visible {
  background: rgba(184, 138, 22, .16);
  outline: none;
}

.member-data-edit svg {
  width: 16px !important;
  height: 16px !important;
  color: currentColor !important;
}

.member-portal-grid .member-data-list dd {
  color: #151515;
  font-size: 1.12rem;
  font-weight: 750;
}

.fan-membership-action {
  display: grid;
  width: min(100%, 780px);
  gap: 8px;
  margin: 22px auto 0;
  padding-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, .14);
}

.fan-membership-action[hidden] { display: none; }

.fan-membership-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  margin: 0;
  font-size: 1rem;
}

.fan-membership-button svg { width: 22px; height: 22px; }
.fan-membership-button:disabled {
  background: #151515;
  color: #fff;
  opacity: .78;
  cursor: default;
  transform: none;
}
.fan-membership-action .form-note { min-height: 20px; margin: 0; text-align: center; }

.club-life-form { display: grid; gap: 13px; }
.club-life-form textarea, .memory-form textarea { min-height: 76px; }
.club-life-save { width: 190px; padding: 0 18px; }
.memory-divider { height: 1px; margin: 24px 0; background: var(--line); }
.memory-heading { margin-bottom: 14px; }
.memory-heading h3 { margin: 4px 0 0; font-size: 1.05rem; }
.club-life-list { display: grid; gap: 12px; }
.club-life-list > div { display: grid; grid-template-columns: 50px 1fr; gap: 14px; }
.club-life-year { color: var(--gold-dark); font-weight: 900; }
.club-life-list p { margin: 4px 0 0; color: var(--muted); font-size: 0.84rem; }
.memory-form { display: grid; grid-template-columns: 120px 1fr; gap: 12px; margin-top: 16px; }
.memory-detail, .memory-add { grid-column: 1 / -1; }
.memory-add { width: 170px; padding: 0 18px; }

.family-list { display: grid; gap: 8px; margin-bottom: 18px; }
.family-empty { padding: 13px; border: 1px dashed #c8c8c8; color: var(--muted); text-align: center; font-size: 0.86rem; }
.family-member { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 7px; }
.family-member span { color: var(--muted); font-size: 0.8rem; }
.family-form { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 12px; }
.family-search-field { min-width: 0; }
.family-results { grid-column: 1 / -1; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.family-result { width: 100%; padding: 11px 13px; border: 0; border-bottom: 1px solid var(--line); background: #fff; text-align: left; cursor: pointer; }
.family-result:last-child { border-bottom: 0; }
.family-result:hover, .family-result.is-selected { background: #f0efd9; }
.family-result small { display: block; margin-top: 3px; color: var(--muted); }
.family-add-button { grid-column: 1 / -1; width: 190px; padding: 0 18px; }
.family-add-button:disabled { opacity: 0.45; cursor: not-allowed; }

.family-circle-switch {
  display: flex;
  gap: 6px;
  margin: 0 0 22px;
  padding-bottom: 2px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.family-circle-tab {
  flex: 0 0 auto;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid #cfcfcf;
  border-radius: 999px;
  background: #fff;
  color: #4b4b4b;
  font: inherit;
  font-size: .82rem;
  font-weight: 800;
  cursor: pointer;
}

.family-circle-tab.is-active {
  border-color: #1a1a1a;
  background: #151515;
  color: #fff;
}

.family-circle-panel {
  display: grid;
  gap: 16px;
  margin-bottom: 18px;
  padding: 20px 0 4px;
  border-top: 1px solid rgba(0, 0, 0, .12);
}

.family-circle-heading {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}

.family-circle-heading p {
  margin: 0 0 6px;
  color: var(--gold-dark);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.family-circle-heading h3 {
  margin: 0;
  color: #151515;
  font-size: 1.35rem;
}

.family-circle-heading > span {
  flex: 0 0 auto;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 800;
}

.family-circle-description { margin: 0; color: var(--muted); font-size: .9rem; }
.family-circle-form { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 12px; }
.family-circle-category-field { min-width: 0; }
.family-circle-search-field { min-width: 0; }
.family-circle-results { grid-column: 1 / -1; max-height: 260px; overflow: auto; border: 1px solid var(--line); border-radius: 7px; }
.family-circle-result { display: block; width: 100%; padding: 11px 13px; border: 0; border-bottom: 1px solid var(--line); background: #fff; color: #151515; text-align: left; cursor: pointer; }
.family-circle-result:last-child { border-bottom: 0; }
.family-circle-result:hover, .family-circle-result.is-selected { background: #f0efd9; }
.family-circle-result small { display: block; margin-top: 3px; color: var(--muted); }
.family-circle-add-button { grid-column: 1 / -1; width: 190px; padding: 0 18px; }
.family-circle-add-button:disabled { opacity: .45; cursor: not-allowed; }
.family-category-join-button { grid-column: 1 / -1; width: 240px; padding: 0 18px; }
.family-circle-list { display: grid; gap: 8px; }
.family-circle-member { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 7px; background: rgba(255, 255, 255, .58); }
.family-circle-member > div { display: grid; gap: 3px; min-width: 0; }
.family-circle-member span { color: var(--muted); font-size: .8rem; }

.family-navigation-actions {
  display: flex;
  width: min(100%, 360px);
  margin: 0 auto 24px;
}

.family-back-button,
.family-next-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 1 1 0;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid rgba(184, 138, 22, .7);
  background: rgba(255, 255, 255, .48);
  color: #76540d;
  font: inherit;
  font-weight: 850;
  cursor: pointer;
}

.family-back-button,
.family-next-button { border-radius: 999px; }
.family-back-button:not([hidden]) + .family-next-button:not([hidden]) {
  border-left-width: 0;
  border-radius: 0 999px 999px 0;
}
.family-navigation-actions:has(.family-back-button:not([hidden]) + .family-next-button:not([hidden])) .family-back-button:not([hidden]) {
  border-radius: 999px 0 0 999px;
}
.family-back-button svg,
.family-next-button svg { width: 18px; height: 18px; }
.family-back-button:hover,
.family-back-button:focus-visible,
.family-next-button:hover,
.family-next-button:focus-visible { background: rgba(255, 255, 255, .8); outline: none; }

.is-honorary-profile .family-panel > .section-heading {
  display: grid;
}

.is-honorary-profile .family-circle-tab[data-family-mode="family"] {
  min-height: 46px;
  padding-inline: 20px;
  font-size: .9rem;
}

.is-honorary-profile .family-navigation-actions {
  margin-top: auto;
}

.family-panel.is-family-mode-changing .family-list,
.family-panel.is-family-mode-changing .family-form,
.family-panel.is-family-mode-changing .family-circle-panel {
  animation: family-card-swap .22s ease both;
}

@keyframes family-card-swap {
  from { opacity: .45; transform: translateX(14px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (max-width: 780px) {
  .member-portal-header { align-items: flex-start; }
  .member-portal-grid, .personal-life-grid { grid-template-columns: 1fr; }
  .member-summary, .member-details, .club-life, .family-panel { grid-column: 1; grid-row: auto; }
}

@media (max-width: 520px) {
  .member-portal-header { display: grid; }
  .member-identity { align-items: flex-start; }
  .member-photo-wrap, .member-photo-wrap img { width: 88px; height: 88px; }
  .member-photo-wrap { flex-basis: 88px; }
  .member-identity h1 { font-size: 1.45rem; }
  .member-logout { width: 100%; }
  .member-data-list, .family-form { grid-template-columns: 1fr; }
  .memory-form { grid-template-columns: 1fr; }
  .memory-detail, .memory-add { grid-column: 1; }
  .club-life-save, .memory-add { width: 100%; }
  .family-results, .family-add-button { grid-column: 1; }
  .family-add-button { width: 100%; }
  .family-circle-heading { display: grid; gap: 4px; }
  .family-circle-form { grid-template-columns: 1fr; }
  .family-circle-results, .family-circle-add-button { grid-column: 1; }
  .family-circle-add-button { width: 100%; }
  .family-category-join-button { grid-column: 1; width: 100%; }
}

body[data-active-view="member-portal-view"] {
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 100dvh;
  color: #f4f4f4;
  background: #050505;
}

body[data-active-view="member-portal-view"] .login-shell {
  height: auto;
  min-height: 100dvh;
  box-sizing: border-box;
  place-items: start center;
  padding: 28px 18px;
  background: #050505;
}

body[data-active-view="member-portal-view"] .login-shell::before,
body[data-active-view="member-portal-view"] .login-shell::after {
  display: none;
}

body[data-active-view="member-portal-view"] .app-feature-panel,
body[data-active-view="member-portal-view"] .member-summary,
body[data-active-view="member-portal-view"] .member-details,
body[data-active-view="member-portal-view"] .club-life,
body[data-active-view="member-portal-view"] .family-panel {
  background: #f8f8f8;
  color: var(--ink);
}

.member-app-shell {
  display: grid;
  grid-template-columns: 304px minmax(0, 900px);
  gap: 8px;
  align-items: start;
  justify-content: center;
  width: min(100%, 1212px);
  height: auto;
  min-height: calc(100dvh - 56px);
  margin-inline: auto;
}

.member-sidebar {
  position: sticky;
  top: 24px;
  display: grid;
  gap: 10px;
  height: calc(100dvh - 56px);
  min-height: 0;
  padding: 14px;
  border: 1px solid transparent;
  border-radius: 8px;
  background:
    linear-gradient(#0d0d0d, #0d0d0d) padding-box,
    linear-gradient(155deg, #171717 0%, #4b3918 48%, #151515 100%) border-box;
  border-right-color: rgba(18, 18, 18, 0.75);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42);
}

.member-sidebar .member-portal-header {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
}

.member-sidebar .member-identity {
  display: grid;
  width: auto;
  min-width: 0;
  justify-self: stretch;
  justify-items: center;
  gap: 5px;
  text-align: center;
}

.member-sidebar .member-photo-wrap,
.member-sidebar .member-photo-wrap img {
  width: 110px;
  height: 110px;
}

.member-sidebar .member-photo-wrap {
  height: 130px;
  margin-inline: auto;
}

.member-sidebar .member-photo-wrap img {
  border: 0;
  box-shadow: none;
}

.member-sidebar .photo-action {
  margin-top: -10px;
  padding: 4px 9px;
  font-size: .65rem;
  white-space: nowrap;
}

.member-sidebar .photo-adjust-action {
  display: none;
}

.is-honorary-profile .member-sidebar .photo-action {
  display: none;
}

.member-sidebar .member-identity h1 {
  color: #fff;
  font-size: 1.25rem;
  text-align: center;
}

.member-sidebar .member-identity-copy {
  width: 100%;
}

.member-sidebar .member-status-line {
  justify-content: center;
  margin-top: 7px;
}

.member-sidebar .member-number {
  color: #cfcfcf;
}

.member-sidebar .honorary-member-label {
  color: #c9951b;
  font-weight: 800;
}

.member-sidebar .photo-action {
  border-color: rgba(255, 255, 255, 0.18);
  background: #fff;
}

.member-sidebar .photo-adjust-action {
  color: #cfcfcf;
}

.member-sidebar .app-nav {
  position: static;
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.member-sidebar .app-nav-button {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 34px;
  padding-block: 0;
  justify-content: flex-start;
  padding: 0 14px;
  border: 1px solid #2b2b2b;
  border-radius: 7px;
  background: #151515;
  color: #dedede;
  text-align: left;
}

.member-sidebar .nav-icon {
  display: inline-grid;
  width: 20px;
  height: 20px;
  place-items: center;
  color: #d0c047;
  line-height: 1;
  stroke-width: 1.8;
}

.member-sidebar .app-nav-button.is-active .nav-icon {
  color: #17120a;
}

.member-sidebar .app-nav-button:hover {
  border-color: rgba(183, 170, 43, 0.65);
  color: #fff;
}

.member-sidebar .app-nav-button.is-active {
  border-color: var(--gold);
  background: #f2edcb;
  color: #050505;
}

.is-honorary-profile .app-nav-button.is-honorary-disabled {
  color: #8b8b8b;
  border-color: #292929;
  background: #101010;
  cursor: not-allowed;
  font-size: 1.62rem;
  font-weight: 400;
  line-height: 1;
}

.is-honorary-profile .app-nav-button.is-honorary-disabled .nav-icon {
  color: #8b742e;
}

.is-fan-profile .app-nav-button.is-fan-disabled {
  border-color: #292929;
  background: #111;
  color: #777;
  cursor: not-allowed;
}

.is-fan-profile .app-nav-button.is-fan-disabled .nav-icon {
  color: #786f2e;
  opacity: .65;
}

.is-fan-profile .app-nav-button.is-fan-disabled:hover {
  border-color: #292929;
  background: #111;
  color: #777;
}

.honorary-infinity {
  display: inline-block;
  font-size: 1.45em;
  font-weight: 750;
  line-height: .75;
  vertical-align: -0.08em;
}

.honorary-date-divider {
  display: inline-block;
  margin-inline: 4px;
  color: currentColor;
  font-weight: 650;
}

.member-status-line .honorary-status-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: auto;
  min-height: auto;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #fff;
  font-size: 1.82rem;
  font-weight: 450;
  line-height: 1;
  text-align: center;
  transform: translateY(-2px);
}

.honorary-original-card {
  display: grid;
  gap: 10px;
  width: min(100%, 430px);
  position: relative;
  z-index: 1;
  clear: both;
  margin: 0 auto;
  padding-top: 0;
}

.honorary-original-card p {
  margin: 0;
  color: var(--gold-dark);
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.honorary-original-card img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(61, 47, 18, .35);
  border-radius: 8px;
  box-shadow: 0 12px 24px rgba(0, 0, 0, .18);
}

.member-sidebar .member-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 34px;
  border: 1px solid #9f7925;
  border-radius: 999px;
  background: #050505;
  color: #fff;
}

.member-sidebar .member-logout svg {
  width: 18px;
  height: 18px;
  margin: 0;
  color: #d5ae3d;
  stroke-width: 1.8;
}

.member-sidebar-footer {
  display: grid;
  gap: 12px;
}

.member-install-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 42px;
  border-color: rgba(215, 177, 43, .78);
  background: rgba(215, 177, 43, .1);
  color: #fff;
}

.member-install-action svg { width: 18px; height: 18px; color: #d7b12b; }

.app-install-banner[hidden],
.member-install-action[hidden] { display: none !important; }

.app-install-banner {
  position: fixed;
  z-index: 1200;
  right: 24px;
  bottom: 24px;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 32px;
  gap: 4px 12px;
  align-items: center;
  width: min(320px, calc(100vw - 32px));
  padding: 14px;
  overflow: hidden;
  border: 1px solid rgba(215, 177, 43, .8);
  border-radius: 8px;
  background: rgba(10, 10, 10, .97);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .42);
  color: #fff;
}

.app-install-banner-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(215, 177, 43, .55);
  border-radius: 50%;
  color: #d7b12b;
}

.app-install-banner-icon svg { width: 21px; height: 21px; }
.app-install-banner-copy { display: grid; gap: 2px; min-width: 0; }
.app-install-banner-copy strong { font-size: .98rem; line-height: 1.2; }
.app-install-banner-copy span { color: #c8c8c8; font-size: .78rem; line-height: 1.35; }
.app-install-banner-close { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; background: transparent; color: #aaa; cursor: pointer; }
.app-install-banner-close svg { width: 18px; height: 18px; }
.app-install-banner-button {
  grid-column: 2 / 4;
  min-height: 38px;
  margin-top: 7px;
  border: 1px solid #d7b12b;
  border-radius: 999px;
  background: #d7b12b;
  color: #090909;
  font: inherit;
  font-size: .84rem;
  font-weight: 900;
  cursor: pointer;
}

.app-install-help-dialog {
  width: min(430px, calc(100vw - 28px));
  padding: 22px;
  border: 1px solid rgba(215, 177, 43, .72);
  border-radius: 8px;
  background: #111;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .55);
  color: #fff;
}

.app-install-help-dialog::backdrop { background: rgba(0, 0, 0, .72); }
.app-install-help-dialog header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.app-install-help-dialog header p { margin: 0 0 3px; color: #d7b12b; font-size: .76rem; font-weight: 900; letter-spacing: .08em; }
.app-install-help-dialog h2 { margin: 0; font-size: 1.35rem; line-height: 1.2; }
.app-install-help-dialog .dialog-close { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; padding: 0; border: 1px solid rgba(255, 255, 255, .24); background: transparent; color: #fff; }
.app-install-help-dialog .dialog-close svg { width: 18px; height: 18px; }
.app-install-help-content { margin: 20px 0; color: #ddd; font-size: .93rem; line-height: 1.55; }
.app-install-help-content p { margin: 0; }
.app-install-help-content ol { display: grid; gap: 10px; margin: 0; padding-left: 22px; }
.app-install-help-dialog > .primary-button { width: 100%; }

@media (max-width: 600px) {
  .app-install-banner {
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    width: calc(100vw - 24px);
    grid-template-columns: 38px minmax(0, 1fr) 30px;
    gap: 3px 10px;
    padding: 11px;
  }

  .app-install-banner-icon { width: 38px; height: 38px; }
  .app-install-banner-copy strong { font-size: .9rem; }
  .app-install-banner-copy span { font-size: .72rem; }
  .app-install-banner-button { min-height: 36px; margin-top: 5px; font-size: .8rem; }
}

.member-brand-footer {
  display: grid;
  gap: 2px;
  transform: translateY(3px);
  color: #b99731;
  text-transform: uppercase;
}

.member-brand-footer strong {
  font-size: .86rem;
  letter-spacing: .24em;
}

.member-brand-footer span {
  color: #bebebe;
  font-size: .66rem;
  letter-spacing: .16em;
}

.member-content {
  display: grid;
  gap: 18px;
  container-type: inline-size;
  min-width: 0;
  min-height: 0;
  height: auto;
  align-self: start;
  width: 100%;
  justify-items: stretch;
}

.member-app-panel {
  margin: 0;
}

.member-content > .member-app-panel {
  width: 100%;
  max-width: none;
  justify-self: stretch;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

/* Shared desktop frame for the member sections beside the fixed sidebar. */
.member-portal-grid,
.member-fees-content,
.digital-card-section,
.family-panel,
.club-life,
.campaign-studio,
.social-panel {
  width: 100%;
  height: auto;
  min-height: min(675px, 75cqw);
  margin-inline: 0;
  box-sizing: border-box;
  overflow: visible;
}

.club-life {
  display: flex;
  flex-direction: column;
  overflow: visible !important;
  position: relative;
  isolation: isolate;
  clip-path: inset(0 round 8px);
  padding: 0;
}

.club-life > .section-heading {
  flex: 0 0 auto;
  margin: 0;
  padding: 96px clamp(32px, 14%, 180px) 22px;
  position: relative;
  z-index: 1;
}

.club-life-scroll {
  min-height: 0;
  flex: 0 0 auto;
  position: relative;
  box-sizing: border-box;
  height: auto;
  max-height: none;
  overflow-y: visible;
  overflow-x: hidden;
  padding: 0 24px 76px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.club-life-scroll::-webkit-scrollbar { display: none; width: 0; height: 0; }
.club-life-scroll .memory-form { margin-bottom: 28px; }

.member-portal-grid {
  background: var(--card);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.1);
}

.member-portal-grid .member-details {
  height: 100%;
  box-sizing: border-box;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.member-portal-grid .member-details > .section-heading {
  padding-top: 72px;
  margin-bottom: 34px;
}

.member-portal-grid .member-details > .section-heading p {
  margin-left: 18px;
  font-size: 1rem;
  font-weight: 850;
  letter-spacing: .04em;
}

.member-portal-grid .member-details > .section-heading h2 {
  margin-left: 18px;
  margin-top: 7px;
  font-size: 1.7rem;
}

.member-portal-grid .member-details > .section-heading .verified-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  padding: 8px 10px 8px 16px;
  border: 1px solid rgba(184, 138, 22, .22);
  border-radius: 999px;
  background: rgba(239, 226, 181, .72);
  color: #8a6415;
  font-size: .82rem;
}

.member-portal-grid .member-details > .section-heading .verified-label::after {
  content: "✓";
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #a77b1c;
  color: #fff;
  font-size: .82rem;
  font-weight: 900;
}

.member-home.app-feature-panel {
  margin-top: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
  box-shadow: none;
}

body[data-active-view="member-portal-view"] .member-home.app-feature-panel {
  display: grid;
  justify-items: center;
  background: #080808;
}

.member-home .section-heading h2 {
  color: #fff;
}

.member-home-hero {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  min-height: 0;
  overflow: hidden;
  border: 1px solid #2b2b2b;
  border-radius: 8px;
  background: #080808;
}

.member-home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.12) 0%, transparent 42%, rgba(0,0,0,.62) 100%);
  pointer-events: none;
}

.member-home-hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.member-home-hero-title,
.member-home-hero-footer {
  position: absolute;
  z-index: 1;
  color: #fff;
  text-transform: uppercase;
}

.member-home-hero-title {
  top: 34px;
  left: 38px;
  display: grid;
  gap: 3px;
  color: #f4f4f4;
  font-size: clamp(1rem, 1.9vw, 1.55rem);
  font-weight: 700;
  letter-spacing: .34em;
  line-height: 1.35;
}

.member-home-hero-title::after {
  content: "";
  width: 44px;
  height: 2px;
  margin-top: 9px;
  background: var(--gold);
}

.member-home-hero-footer {
  right: 34px;
  bottom: 25px;
  max-width: 70%;
  color: #f3f3f3;
  font-size: clamp(.72rem, 1vw, .9rem);
  font-weight: 700;
  letter-spacing: .22em;
}

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

.member-home-grid div {
  display: grid;
  gap: 7px;
  min-height: 92px;
  padding: 16px;
  border: 1px solid #2b2b2b;
  border-radius: 8px;
  background: #080808;
}

.member-home-grid span {
  color: #c4b73e;
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.member-home-grid strong {
  color: #fff;
  font-size: 1.05rem;
}

.member-portal-grid {
  grid-template-columns: 1fr;
  margin-bottom: 0;
}

.member-details,
.member-summary,
.club-life,
.family-panel {
  grid-column: auto;
}

.member-fees-content {
  display: grid;
  gap: 18px;
  padding: 24px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  background: #f8f7f3;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.1);
}

.member-fees-content .member-summary,
.member-fees-content .annual-fees {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.member-fees-content .member-summary {
  padding-bottom: 4px;
  border-bottom: 1px solid #dedbd2;
}

.member-fees-content .section-heading {
  margin-bottom: 14px;
}

.member-fees-content .section-heading h2 {
  color: #151515;
  font-size: 1.45rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.member-fees-content .section-heading p {
  color: #4c4c4c;
  letter-spacing: .08em;
  text-transform: none;
}

.member-fees-content .member-metrics {
  gap: 0;
  padding: 0 10px;
  border: 1px solid #e2dfd7;
  border-radius: 6px;
  background: rgba(255,255,255,.34);
}

.member-fees-content .member-metrics div {
  min-height: 42px;
  align-items: center;
  padding: 8px 4px;
  border-bottom-color: #e2dfd7;
}

.member-fees-content .member-metrics strong {
  color: #222;
}

.member-fees-content .annual-fees {
  position: relative;
  overflow: hidden;
  padding: 4px 10px 18px;
  background:
    linear-gradient(180deg, rgba(248,247,243,.98) 0 38%, rgba(248,247,243,.38) 100%),
    url("./assets/member-home-stadium.png") center bottom / cover no-repeat;
}

.member-fees-content .annual-fees > * {
  position: relative;
  z-index: 1;
}

.member-fees-content .annual-progress {
  height: 12px;
  border: 0;
  border-radius: 999px;
  background: #e3e1dd;
}

.member-fees-content .annual-progress span {
  border-radius: inherit;
  background: linear-gradient(90deg, #9e7318, #c89a3d);
}

.member-fees-content .detail-toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 38px;
  border-color: #c89a3d;
  border-radius: 999px;
  background: #fff;
  color: #1b1b1b;
}

.member-fees-content .detail-toggle svg {
  width: 18px;
  height: 18px;
  color: var(--gold-dark);
}

.fee-summary-view,
.fee-detail-view {
  min-height: 300px;
}

.fee-screen {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.fee-summary-screen {
  animation: fee-detail-enter .24s ease-out;
}

.fee-detail-screen {
  min-height: 100%;
  padding: 72px 24px 28px;
  animation: fee-detail-enter .24s ease-out;
}

.fee-detail-view {
  animation: fee-detail-enter .24s ease-out;
}

.fee-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.fee-detail-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.fee-history-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(184, 138, 22, .48);
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  color: #151515;
  font-weight: 750;
  cursor: pointer;
}

.fee-history-toggle svg {
  width: 17px;
  height: 17px;
  color: var(--gold-dark);
}

.fee-detail-header p {
  margin: 0;
  color: var(--gold-dark);
  font-size: 1rem;
  font-weight: 850;
  letter-spacing: .04em;
}

.fee-detail-header h2 {
  margin: 7px 0 0;
  color: #151515;
  font-size: 1.7rem;
}

.fee-back-button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(184, 138, 22, .5);
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
  color: var(--gold-dark);
  cursor: pointer;
}

.fee-back-button svg {
  width: 19px;
  height: 19px;
}

.fee-detail-table {
  margin-top: 0;
  padding: 0 4px;
}

.fee-detail-screen { overflow: visible; }

.digital-card-section {
  position: relative;
  display: grid;
  align-content: start;
  justify-items: center;
  padding: 96px 24px 26px;
}

.digital-card-section > .section-heading {
  width: 100%;
  margin-bottom: 24px;
}

.digital-card-section > .section-heading p {
  margin-left: 18px;
  color: var(--gold-dark);
  font-size: 1rem;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.digital-card-section > .section-heading h2 {
  margin-top: 7px;
  margin-left: 18px;
  color: #151515;
  font-size: 1.7rem;
  letter-spacing: 0;
  text-transform: none;
}

.digital-card-section .digital-card {
  width: min(100%, 500px);
  margin: 0 auto;
}

.digital-card-section .card-download {
  position: static;
  justify-self: center;
  min-width: 190px;
  margin: 16px auto 0;
  border: 1px solid rgba(184, 138, 22, .8);
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  color: #151515;
}

.is-honorary-profile .digital-card-section {
  padding-top: 96px;
}

.is-honorary-profile .digital-card-section > .section-heading {
  margin-bottom: 24px;
  transform: none;
}

.is-honorary-profile .digital-card-section .digital-card {
  width: min(100%, 500px);
  margin-bottom: 0;
  transform: none;
  order: 1;
}

.is-honorary-profile .digital-card-section .card-download {
  position: static;
  justify-self: center;
  order: 3;
  margin: 16px auto 0;
}

.is-honorary-profile .digital-card-section .honorary-original-card {
  width: min(100%, 500px);
  order: 2;
  margin: 16px auto 0;
}

.is-honorary-profile .digital-card-section .honorary-original-card img {
  width: 100%;
}

.is-honorary-profile .honorary-original-card p {
  display: none;
}

@media (min-width: 861px) {
  .is-honorary-profile .digital-card-section {
    align-content: start;
    padding-top: 96px;
    padding-bottom: 34px;
  }

  .is-honorary-profile .digital-card-section > .section-heading {
    margin-bottom: 16px;
  }

  .is-honorary-profile .digital-card-section .honorary-original-card {
    margin-top: 10px;
  }

  .is-honorary-profile .digital-card-section .digital-card {
    margin-top: -48px;
  }

  .is-honorary-profile .digital-card-section .card-download {
    margin-top: 10px;
  }
}

.family-panel {
  padding-top: 96px;
}

.is-honorary-profile .family-panel {
  display: flex;
  flex-direction: column;
  min-height: min(760px, calc(100dvh - 44px));
}

.family-panel > .section-heading {
  margin-bottom: 30px;
}

.family-panel > .section-heading p {
  margin-left: 18px;
  color: var(--gold-dark);
  font-size: 1rem;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.family-panel > .section-heading h2 {
  margin-top: 7px;
  margin-left: 18px;
  color: #151515;
  font-size: 1.7rem;
  letter-spacing: 0;
  text-transform: none;
}

.campaign-studio {
  padding-top: 96px;
}

.campaign-studio > .section-heading {
  margin-bottom: 30px;
}

.campaign-studio > .section-heading p {
  margin-left: 18px;
  color: var(--gold-dark);
  font-size: 1rem;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.campaign-studio > .section-heading h2 {
  margin-top: 7px;
  margin-left: 18px;
  color: #151515;
  font-size: 1.7rem;
  letter-spacing: 0;
  text-transform: none;
}

.campaign-studio .campaign-form select,
.campaign-studio .campaign-form input[type="file"] {
  border-color: rgba(184, 138, 22, .72);
}

.campaign-studio .campaign-form input[type="file"] {
  background: rgba(255, 255, 255, .12);
}

.social-panel {
  padding: 96px 32px 42px;
}

.social-panel > .section-heading {
  margin-bottom: 28px;
}

.social-panel > .section-heading p {
  margin-left: 18px;
  color: var(--gold-dark);
  font-size: 1rem;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.social-panel > .section-heading h2 {
  margin-top: 7px;
  margin-left: 18px;
  color: #151515;
  font-size: 1.7rem;
  letter-spacing: 0;
  text-transform: none;
}

.social-panel-content {
  display: grid;
  gap: 22px;
  max-width: 720px;
  margin: 0 auto;
}

.social-panel-intro {
  margin: 0;
  color: #454545;
  font-size: 1.05rem;
}

.social-channel-list {
  display: grid;
  gap: 12px;
}

.social-channel {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 14px;
  min-height: 82px;
  padding: 16px 18px;
  border: 1px solid rgba(184, 138, 22, .52);
  border-radius: 8px;
  background: rgba(255, 255, 255, .8);
  color: #171717;
  text-decoration: none;
  transition: border-color .2s, background .2s, transform .2s;
}

.social-channel:hover,
.social-channel:focus-visible {
  border-color: var(--gold-dark);
  background: #fff;
  transform: translateY(-1px);
}

.social-channel > svg:first-child {
  width: 30px;
  height: 30px;
  color: var(--gold-dark);
  stroke-width: 1.7;
}

.social-channel span {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.social-channel strong {
  font-size: 1.05rem;
}

.social-channel small {
  overflow-wrap: anywhere;
  color: #686868;
  font-size: .82rem;
}

.social-channel-arrow {
  width: 19px;
  height: 19px;
  color: var(--gold-dark);
}

.social-updates {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px;
  border-top: 1px solid rgba(0, 0, 0, .15);
  color: #454545;
}

.social-updates > svg {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  color: var(--gold-dark);
}

.social-updates strong {
  display: block;
  color: #171717;
  font-size: .95rem;
}

.social-updates p {
  margin: 5px 0 0;
  font-size: .84rem;
  line-height: 1.45;
}

.fee-detail-table table {
  background: rgba(255, 255, 255, .08);
}

.fee-detail-table th,
.fee-detail-table td {
  color: #151515;
}

.fee-detail-table th {
  font-weight: 850;
}

.fee-self-management {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .58);
}

.fee-self-management p {
  margin: 0;
  color: var(--gold-dark);
  font-size: 1rem;
  font-weight: 850;
  letter-spacing: .04em;
}

.fee-self-management h3 {
  margin: 7px 0 4px;
  color: #151515;
  font-size: 1.25rem;
}

.fee-self-management span {
  color: #444;
  font-size: .88rem;
}

@keyframes fee-detail-enter {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}

.member-fees-content > .member-summary,
.fee-summary-screen > .member-summary {
  padding-top: 72px;
  margin-bottom: 34px;
}

.member-fees-content > .member-summary .section-heading p,
.fee-summary-screen > .member-summary .section-heading p {
  margin-left: 18px;
  color: var(--gold-dark);
  font-size: 1rem;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.member-fees-content > .member-summary .section-heading h2,
.fee-summary-screen > .member-summary .section-heading h2 {
  margin-top: 7px;
  margin-left: 18px;
  color: #151515;
  font-size: 1.7rem;
  letter-spacing: 0;
  text-transform: none;
}

/* Shared institutional background for the member's internal sections. */
body[data-active-view="member-portal-view"] .member-portal-grid,
body[data-active-view="member-portal-view"] .member-fees-content,
body[data-active-view="member-portal-view"] .digital-card-section,
body[data-active-view="member-portal-view"] .family-panel,
body[data-active-view="member-portal-view"] .club-life,
body[data-active-view="member-portal-view"] .campaign-studio,
body[data-active-view="member-portal-view"] .social-panel {
  background-color: #e7e2d9;
  background-image: url("./assets/member-section-background.png");
  background-position: center;
  background-size: 103.3% 106.4%;
  background-repeat: no-repeat;
}

body[data-active-view="member-portal-view"] .member-portal-grid .member-details,
body[data-active-view="member-portal-view"] .member-fees-content .member-summary,
body[data-active-view="member-portal-view"] .member-fees-content .annual-fees {
  background: transparent;
}

.member-fees-content .member-metrics {
  gap: 0;
  padding: 0 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.member-fees-content .member-metrics div {
  min-height: 52px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .58);
}

.member-fees-content .member-metrics div:last-child {
  border-bottom: 0;
}

.member-fees-content .member-metrics span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #444;
  font-size: .94rem;
  font-weight: 700;
}

.member-fees-content .member-metrics span svg {
  width: 20px;
  height: 20px;
  color: #171717;
  stroke-width: 2;
}

.member-fees-content .member-metrics strong {
  color: #151515;
  font-size: 1rem;
  font-weight: 750;
}

.digital-card-section {
  justify-items: center;
}

.digital-card-section .section-heading {
  width: 100%;
}

@media (max-width: 860px) {
  body[data-active-view="member-portal-view"] .login-shell {
    padding: 16px 12px;
  }

  .member-app-shell {
    grid-template-columns: 1fr;
  }

  .member-sidebar {
    position: static;
  }

  .member-sidebar .member-identity {
    grid-template-columns: 88px minmax(0, 1fr);
    align-items: center;
  }

  .member-sidebar .member-photo-wrap,
  .member-sidebar .member-photo-wrap img {
    width: 88px;
    height: 88px;
  }

  .member-sidebar .member-photo-wrap {
    height: 112px;
  }

  .member-sidebar .photo-action {
    margin-top: 0;
  }

  .member-sidebar .app-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .member-sidebar .app-nav-button {
    min-height: 42px;
  }

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

  .member-portal-grid,
  .member-fees-content,
  .digital-card-section,
  .family-panel,
  .club-life,
  .campaign-studio,
  .social-panel {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: auto;
  }

  .is-honorary-profile .digital-card-section > .section-heading {
    transform: none;
  }

  .is-honorary-profile .digital-card-section .card-download {
    position: static;
    justify-self: center;
    margin: 16px auto 4px;
  }

  .is-honorary-profile .digital-card-section .digital-card {
    margin-top: 28px;
  }

  .is-honorary-profile .digital-card-section .honorary-original-card {
    margin-top: 10px;
  }

  .is-honorary-profile .digital-card-section .card-download {
    margin-top: 10px;
  }
}

@media (max-width: 520px) {
  .member-sidebar .member-identity,
  .member-sidebar .app-nav {
    grid-template-columns: 1fr;
  }

  .member-home-hero {
    width: 100%;
    height: 360px;
    aspect-ratio: auto;
  }

  .member-home-hero-title {
    top: 24px;
    left: 24px;
    font-size: .88rem;
    letter-spacing: .24em;
  }

  .member-home-hero-footer {
    right: 22px;
    bottom: 20px;
    max-width: 82%;
    font-size: .65rem;
    letter-spacing: .14em;
  }
}

.areas-view {
  width: min(100%, 1060px);
  position: relative;
  z-index: 1;
}

.areas-header,
.module-header {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 20px;
}

.areas-header img,
.module-header img {
  width: 76px;
  height: 76px;
  object-fit: cover;
  border-radius: 14px;
}

.areas-header p,
.module-header p {
  margin: 0 0 4px;
  color: var(--gold-dark);
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.areas-header h1,
.module-header h1 {
  margin: 0;
  text-align: left;
  font-size: clamp(1.35rem, 3vw, 2rem);
  line-height: 1.15;
}

.areas-logout {
  margin-left: auto;
}

.permission-note {
  width: fit-content;
  max-width: 100%;
  margin-bottom: 22px;
  padding: 10px 14px;
  border: 1px solid rgba(5, 5, 5, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  color: #444;
  font-size: 0.9rem;
  font-weight: 600;
}

.areas-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(146px, 1fr));
  gap: 16px;
}

.area-card {
  min-height: 214px;
  padding: 14px 12px 16px;
  border: 1px solid rgba(5, 5, 5, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.12);
  color: var(--black);
  cursor: pointer;
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 12px;
  align-items: center;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

.area-card img {
  width: 100%;
  max-width: 132px;
  aspect-ratio: 1;
  justify-self: center;
  object-fit: cover;
  border-radius: 14px;
  background: #050505;
}

.area-card span {
  min-height: 44px;
  display: grid;
  place-items: center;
  text-align: center;
  font-size: 0.98rem;
  line-height: 1.18;
  font-weight: 800;
}

.area-card:hover {
  transform: translateY(-3px);
  border-color: rgba(5, 5, 5, 0.32);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.18);
}

.area-card.is-locked {
  opacity: 0.64;
}

.area-card.is-allowed {
  border-color: rgba(183, 170, 43, 0.75);
  box-shadow: 0 22px 56px rgba(143, 132, 31, 0.22);
}

.module-view {
  width: min(100%, 1240px);
  min-width: 0;
  position: relative;
  z-index: 1;
}

.institutional-documents-panel { margin-bottom: 18px; }
.institutional-document-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  align-items: end;
}
.institutional-document-form .institutional-document-observation { grid-column: span 3; }
.institutional-document-form .primary-button { min-height: 44px; }
.institutional-documents-table td:nth-child(4) { min-width: 220px; white-space: normal; }

.work-area-top {
  display: grid;
  grid-template-columns: minmax(360px, 0.9fr) minmax(360px, 1.1fr);
  grid-template-rows: auto auto;
  column-gap: 18px;
  row-gap: 20px;
  align-items: start;
  margin: -18px 0 34px;
}

.work-area-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  grid-column: 1;
  grid-row: 1;
}

.work-area-heading .back-button {
  margin-bottom: 10px;
}

.work-area-heading .module-header {
  margin: 0;
}

.alerts-panel {
  display: grid;
  align-content: center;
  width: min(100%, 760px);
  min-height: 94px;
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  margin-top: 0;
  padding: 14px 22px;
  border: 1px solid rgba(183, 170, 43, 0.72);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.08);
}

.alerts-panel-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.alerts-panel-heading p {
  margin: 0;
  color: var(--gold-dark);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.alerts-panel-heading h2 {
  margin: 0;
  color: #a52424;
  font-size: 1.05rem;
  letter-spacing: 0.08em;
}

.alerts-panel-empty {
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.88rem;
}

.alerts-panel-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 10px;
  padding: 11px 12px;
  border: 1px solid rgba(165, 36, 36, .28);
  border-radius: 7px;
  background: rgba(255, 248, 235, .94);
  color: #171717;
  text-align: left;
  cursor: pointer;
}

.alerts-panel-item:hover { border-color: #a52424; background: #fff5df; }
.alerts-panel-item > span { color: var(--gold-dark); font-size: .75rem; font-weight: 850; text-transform: uppercase; }
.alerts-panel-item > strong { min-width: 0; overflow-wrap: anywhere; }
.alerts-panel-item > em { color: var(--muted); font-size: .8rem; font-style: normal; }
.alerts-panel-item > svg { width: 18px; height: 18px; }

@media (max-width: 620px) {
  .institutional-document-form { grid-template-columns: 1fr; }
  .institutional-document-form .institutional-document-observation { grid-column: auto; }

  .alerts-panel-item { grid-template-columns: auto minmax(0, 1fr) auto; }
  .alerts-panel-item > em { grid-column: 2; }
  .alerts-panel-item > svg { grid-column: 3; grid-row: 1 / span 2; }
}

#contaduria-view,
#contaduria-socios-view,
#balances-view {
  width: min(100%, 1240px);
}

.empty-section {
  min-height: 240px;
  display: grid;
  place-content: center;
  text-align: center;
}

.empty-section p,
.empty-section h2,
.empty-section span {
  margin: 0;
}

.empty-section p {
  color: var(--gold-dark);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.empty-section h2 {
  margin: 7px 0;
}

.empty-section span {
  color: var(--muted);
}

.balances-layout { display: grid; gap: 18px; }

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

.balance-summary > div {
  display: grid;
  gap: 6px;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

.balance-summary span { color: var(--muted); font-size: 0.78rem; font-weight: 750; }
.balance-summary strong { font-size: 1.28rem; }
.balance-summary .balance-net { border-color: rgba(183, 170, 43, 0.65); }

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

.area-selection label {
  min-height: 54px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 9px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #f8f8f8;
  font-size: 0.86rem;
  font-weight: 800;
}

.area-selection input { width: 17px; height: 17px; accent-color: var(--black); }
.area-selection span { grid-column: 2; color: var(--muted); font-size: 0.72rem; font-weight: 700; }

.subarea-review {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 13px 15px;
  border: 1px solid rgba(183, 170, 43, 0.55);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.92);
}

.subarea-review div { display: grid; gap: 3px; }
.subarea-review span { color: var(--muted); font-size: 0.74rem; }
.subarea-review .secondary-button { min-height: 38px; padding: 0 15px; }

.balance-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.balance-filters label { display: grid; gap: 6px; }
.balance-filters span { color: #444; font-size: 0.76rem; font-weight: 800; }
.balance-filters input,
.balance-filters select { min-height: 40px; padding: 8px 10px; border: 1px solid #d5d5d5; border-radius: 9px; background: #fff; }

.balance-search { grid-column: span 2; }

.movement-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}

.voucher-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: end;
}

.voucher-kind {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.voucher-kind label {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 15px;
  border: 1px solid #d4d4d4;
  border-radius: 999px;
  background: #fff;
  font-size: 0.85rem;
  font-weight: 800;
  cursor: pointer;
}

.voucher-kind label:has(input:checked) {
  border-color: var(--black);
  background: var(--black);
  color: #fff;
}

.voucher-kind input { accent-color: var(--gold); }
.voucher-party { grid-column: span 2; }
.voucher-party-controls { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.small-action-button { min-height: 34px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: var(--black); font-size: .72rem; font-weight: 850; cursor: pointer; white-space: nowrap; }
.small-action-button:hover { border-color: var(--black); background: #faf8e7; }
.voucher-detail { grid-column: span 2; }
.voucher-save { min-height: 42px; grid-column: span 2; }

.movement-description { grid-column: span 2; }
.movement-form .save-member-button { min-height: 42px; }
.movement-form-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.concept-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.concept-groups h3 { margin: 0 0 10px; font-size: 0.95rem; }
.concept-list { display: flex; flex-wrap: wrap; gap: 8px; }

.concept-chip {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid #d7d7d7;
  border-radius: 999px;
  background: #f7f7f7;
  font-size: 0.78rem;
  font-weight: 750;
}

.new-concept-form {
  display: grid;
  grid-template-columns: minmax(140px, 0.5fr) minmax(220px, 1.5fr) minmax(150px, 0.5fr);
  gap: 10px;
  align-items: end;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.new-concept-form .secondary-button { min-height: 42px; }

.movement-type-income,
.movement-type-expense {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 0 9px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 850;
}

.movement-type-income { background: rgba(183, 170, 43, 0.18); color: var(--gold-dark); }
.movement-type-expense { background: rgba(5, 5, 5, 0.09); color: #444; }
.movements-table tr.is-voided { color: #777; }
.movements-table tr.is-voided td { background: rgba(5, 5, 5, 0.025); }
.movement-void-note {
  display: inline-block;
  margin-top: 3px;
  color: #777;
  font-size: 0.72rem;
  font-weight: 700;
}

.table-action-button {
  min-height: 34px;
  margin: 2px 4px 2px 0;
  padding: 0 11px;
  border: 1px solid #d7d7d7;
  border-radius: 8px;
  background: #fff;
  color: var(--black);
  font-weight: 850;
  cursor: pointer;
  white-space: nowrap;
}

.table-action-button:hover {
  border-color: var(--gold);
  box-shadow: 0 8px 18px rgba(5, 5, 5, 0.08);
}

.back-button {
  margin-bottom: 18px;
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid rgba(5, 5, 5, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: var(--black);
  font-weight: 800;
  cursor: pointer;
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 18px;
}

.single-module-grid {
  grid-template-columns: minmax(0, 1fr);
  max-width: 430px;
}

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

.module-card {
  min-height: 142px;
  padding: 22px;
  border: 1px solid rgba(5, 5, 5, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.12);
  color: var(--black);
  cursor: pointer;
  display: grid;
  place-items: center;
  text-align: center;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.module-card span {
  font-size: clamp(1.1rem, 3vw, 1.55rem);
  line-height: 1.15;
  font-weight: 900;
}

.module-card:hover,
.back-button:hover {
  transform: translateY(-2px);
  border-color: rgba(5, 5, 5, 0.32);
  box-shadow: 0 22px 52px rgba(0, 0, 0, 0.16);
}

.socios-layout {
  display: grid;
  gap: 18px;
}

.maintenance-layout {
  display: grid;
  gap: 18px;
}

.tasks-layout {
  display: grid;
  gap: 18px;
}

.tasks-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 14px;
}

.tasks-notes {
  grid-column: 1 / -1;
}

.tasks-form .save-member-button,
.tasks-form .secondary-button {
  min-height: 44px;
}

.tasks-filter {
  display: grid;
  gap: 4px;
  min-width: 190px;
}

.tasks-summary {
  color: rgba(40, 40, 40, 0.7);
  font-size: 0.86rem;
  font-weight: 700;
}

.tasks-table .task-title-cell {
  min-width: 220px;
  max-width: 420px;
  white-space: pre-wrap;
}

.tasks-table .task-overdue {
  color: #a23228;
  font-weight: 800;
}

.tasks-table .task-upcoming {
  color: #9b7417;
  font-weight: 800;
}

.tasks-table .task-notes-cell {
  min-width: 260px;
  max-width: 520px;
  white-space: pre-wrap;
}

.task-status-pill {
  white-space: nowrap;
}

.maintenance-form {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.maintenance-notes {
  grid-column: span 5;
}

.maintenance-form .save-member-button,
.maintenance-form .secondary-button {
  grid-column: span 2;
  min-height: 44px;
}

.maintenance-table {
  min-width: 1120px;
}

.maintenance-table th:nth-child(1),
.maintenance-table td:nth-child(1) {
  min-width: 220px;
  font-weight: 800;
}

.maintenance-table th:nth-child(6),
.maintenance-table td:nth-child(6) {
  min-width: 280px;
  max-width: 420px;
  white-space: normal;
}

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

.category-card {
  min-height: 94px;
  padding: 16px;
  border: 1px solid rgba(5, 5, 5, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--black);
  cursor: pointer;
  text-align: left;
  display: grid;
  align-content: center;
  gap: 6px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.1);
}

.category-card strong {
  font-size: 1.08rem;
  line-height: 1.1;
}

.category-card span {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 700;
}

.category-card.is-active {
  border-color: rgba(183, 170, 43, 0.76);
  box-shadow: 0 18px 42px rgba(143, 132, 31, 0.18);
}

.panel-block {
  min-width: 0;
  padding: 20px;
  border: 1px solid rgba(5, 5, 5, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.1);
}

/* STAFF work panels use a warm neutral surface instead of pure white. */
body[data-access-context="staff"]:not([data-active-view="login-view"]) .panel-block {
  border-color: rgba(68, 68, 66, 0.22);
  background: linear-gradient(135deg, #e8e5df 0%, #dedad4 100%);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.12);
}

body[data-access-context="staff"]:not([data-active-view="login-view"]) .work-review.panel-block {
  background: linear-gradient(135deg, #e8e5df 0%, #dedad4 100%);
}

body[data-access-context="staff"]:not([data-active-view="login-view"]) .panel-block .field input,
body[data-access-context="staff"]:not([data-active-view="login-view"]) .panel-block .field select,
body[data-access-context="staff"]:not([data-active-view="login-view"]) .panel-block .field textarea {
  border-color: #c9c8c5;
  background: #eff0f2;
}

body[data-access-context="staff"]:not([data-active-view="login-view"]) .panel-block .field input:focus,
body[data-access-context="staff"]:not([data-active-view="login-view"]) .panel-block .field select:focus,
body[data-access-context="staff"]:not([data-active-view="login-view"]) .panel-block .field textarea:focus {
  background: #f5f5f5;
}

body[data-access-context="staff"]:not([data-active-view="login-view"]) .panel-block .table-wrap th,
body[data-access-context="staff"]:not([data-active-view="login-view"]) .panel-block table th {
  background: #d3d3d1;
}

body[data-access-context="staff"]:not([data-active-view="login-view"]) .panel-block .row-actions button,
body[data-access-context="staff"]:not([data-active-view="login-view"]) .panel-block .secondary-button {
  border-color: #c7c5c0;
  background: #ece9e3;
}

.panel-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.panel-heading p {
  margin: 0 0 3px;
  color: var(--gold-dark);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.panel-heading h2 {
  margin: 0;
  color: var(--black);
  font-size: 1.35rem;
  line-height: 1.15;
}

.member-filters {
  display: grid;
  grid-template-columns: minmax(220px, 1.5fr) repeat(5, minmax(120px, 1fr)) auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f7f7f7;
}

.member-filters label {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.member-filters label > span {
  color: #444;
  font-size: 0.76rem;
  font-weight: 800;
}

.member-filters input,
.member-filters select {
  width: 100%;
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid #d5d5d5;
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
}

.member-filters input:focus,
.member-filters select:focus {
  border-color: var(--black);
  outline: 3px solid rgba(0, 0, 0, 0.07);
}

.clear-filters-button {
  min-height: 40px;
  padding: 0 13px;
  border: 1px solid #cacaca;
  border-radius: 9px;
  background: #fff;
  color: var(--black);
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
}

.member-incomplete-filter-button {
  min-height: 40px;
  padding: 0 13px;
  border: 1px solid rgba(184, 138, 22, .7);
  border-radius: 9px;
  background: #fff;
  color: var(--black);
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
}

.member-incomplete-filter-button:hover,
.member-incomplete-filter-button:focus-visible {
  border-color: var(--black);
  outline: 3px solid rgba(0, 0, 0, .07);
}

.member-incomplete-filter-button.is-active {
  border-color: var(--black);
  background: var(--black);
  color: #fff;
}

.filter-result {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.small-action {
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid rgba(5, 5, 5, 0.16);
  border-radius: 999px;
  background: #050505;
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

.table-wrap {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}

.table-wrap.is-drag-scrollable,
.fee-detail-table.is-drag-scrollable {
  cursor: grab;
}

.table-wrap.is-dragging,
.fee-detail-table.is-dragging {
  cursor: grabbing;
  user-select: none;
}

table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 12px 10px;
  border-bottom: 1px solid rgba(5, 5, 5, 0.1);
  text-align: left;
  font-size: 0.93rem;
}

th {
  color: #454545;
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.status-pill,
.duplicate-alert {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(183, 170, 43, 0.18);
  color: var(--gold-dark);
  font-size: 0.8rem;
  font-weight: 900;
}

.status-button {
  border: 0;
  cursor: pointer;
}

.status-button:hover,
.status-button:focus-visible {
  outline: 2px solid rgba(5, 5, 5, 0.24);
  outline-offset: 2px;
}

.status-pill.pending {
  background: rgba(5, 5, 5, 0.08);
  color: #3f3f3f;
}

.status-pill.inactive {
  background: #ececec;
  color: #666;
}

.payment-action-button {
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--black);
  border-radius: 8px;
  background: #fff;
  color: var(--black);
  font-size: 0.78rem;
  font-weight: 850;
  cursor: pointer;
}

.payment-action-button:hover {
  background: var(--black);
  color: #fff;
}

.member-row-actions .payment-action-button {
  min-width: 104px;
  min-height: 42px;
  padding: 4px 10px;
  line-height: 1.05;
  white-space: normal;
}

.member-row-actions .payment-action-button span {
  display: block;
}

.duplicate-alert {
  background: #050505;
  color: #fff;
}

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

.field-wide {
  grid-column: span 2;
}

.family-editor {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fafafa;
}

.compact-heading {
  margin-bottom: 12px;
}

.compact-heading h3 {
  margin: 0;
  font-size: 1rem;
}

.compact-heading > span {
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 800;
}

.family-editor-table {
  min-width: 680px;
}

.family-editor-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
  margin-top: 14px;
}

.family-editor-wide {
  grid-column: span 2;
}

.family-editor-form .secondary-button {
  grid-column: 1 / -1;
  justify-self: start;
  min-height: 40px;
  padding: 0 14px;
}

.insurance-panel {
  margin-top: 6px;
}

.insurance-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 14px;
}

.insurance-summary div {
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8f8f8;
}

.insurance-summary dt {
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.insurance-summary dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-size: 0.92rem;
  font-weight: 850;
}

.insurance-filters {
  grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(150px, 220px)) auto;
}

.insurance-table {
  min-width: 1080px;
}

.insurance-dialog {
  width: min(calc(100% - 28px), 820px);
}

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

.insurance-form .dialog-heading,
.insurance-wide {
  grid-column: 1 / -1;
}

.insurance-form .dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 0;
}

.ghost-row-button {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: var(--black);
  font-size: 0.76rem;
  font-weight: 800;
  cursor: pointer;
}

.autofill-box {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(5, 5, 5, 0.1);
}

.form-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 220px));
  gap: 12px;
  margin-top: 12px;
}

.save-member-button {
  min-height: 42px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: var(--gold-dark);
  color: #fff;
  font-weight: 800;
  cursor: pointer;
}

.status-dialog {
  width: min(calc(100% - 28px), 620px);
  max-height: min(760px, calc(100vh - 32px));
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.34);
}

.payment-dialog {
  width: min(calc(100% - 28px), 760px);
  max-height: calc(100vh - 28px);
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.34);
}

.payment-dialog::backdrop {
  background: rgba(0, 0, 0, 0.58);
}

.payment-dialog-card {
  display: grid;
  gap: 14px;
  padding: 22px;
}

.fee-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.fee-summary div {
  display: grid;
  gap: 4px;
  padding: 12px;
  border-right: 1px solid var(--line);
}

.fee-summary div:last-child {
  border-right: 0;
}

.fee-summary span {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.fee-summary strong {
  font-size: 0.94rem;
}

.payment-option {
  display: grid;
  gap: 12px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fafafa;
}

.pending-fees {
  display: grid;
  gap: 12px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.pending-fees h3,
.pending-fees p {
  margin: 0;
}

.pending-fees h3 {
  font-size: 1rem;
}

.pending-fees p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.82rem;
}

.pending-fees-list {
  display: grid;
  gap: 8px;
}

.pending-fee-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  min-height: 48px;
  padding: 9px 11px;
  border: 1px solid #dedede;
  border-radius: 8px;
  background: #f7f7f7;
  cursor: pointer;
}

.pending-fee-row:has(input:checked) {
  border-color: var(--gold-dark);
  background: rgba(183, 170, 43, 0.1);
}

.pending-fee-row input {
  width: 18px;
  height: 18px;
  accent-color: var(--black);
}
.select-year-fees { display: flex; align-items: center; gap: 10px; padding: 12px 0; cursor: pointer; }
.select-year-fees input { width: 20px; height: 20px; accent-color: var(--black); }
.pending-fee-row.is-paid:has(input:checked) { background: #edf4ef; border-color: #c7d9cb; color: #42614a; cursor: default; }
.pending-fee-row.is-paid input { accent-color: #567760; }
.pending-fee-row.is-paid small { color: #526958; }

.pending-fee-row span {
  display: grid;
  gap: 2px;
}

.pending-fee-row small {
  color: var(--muted);
  font-size: 0.72rem;
}

.pending-fee-row > strong {
  font-size: 0.88rem;
}

.no-pending-fees {
  margin: 0;
  padding: 14px;
  border-radius: 8px;
  background: #f2f2f2;
  color: var(--muted);
  text-align: center;
  font-size: 0.84rem;
}

.payment-option h3,
.payment-option p {
  margin: 0;
}

.payment-option h3 {
  font-size: 1rem;
}

.payment-option p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.82rem;
}

.payment-option-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.payment-option-actions button,
.full-action {
  padding-inline: 16px;
}

.payment-option button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  transform: none;
}

.generated-link,
.receipt-preview {
  padding: 11px 12px;
  border-left: 3px solid var(--gold);
  background: #fff;
  color: #444;
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}

.accounting-layout {
  display: grid;
  gap: 18px;
}

.accounting-permission {
  margin-bottom: 0;
}

.fee-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  align-items: end;
}

.fee-scope,
.fee-reason {
  grid-column: span 2;
}

.fee-form .save-member-button {
  min-height: 42px;
  grid-column: span 2;
}

.receipt-dialog {
  width: min(calc(100% - 28px), 720px);
  max-height: calc(100vh - 28px);
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: #f2f2f2;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.34);
}

.receipt-dialog::backdrop {
  background: rgba(0, 0, 0, 0.62);
}

.receipt-dialog-card {
  position: relative;
  padding: 22px;
}

.receipt-close {
  position: absolute;
  z-index: 2;
  top: 10px;
  right: 10px;
}

.club-receipt {
  padding: 28px;
  border: 1px solid #cfcfcf;
  background: #fff;
  color: #111;
}

.receipt-header {
  display: grid;
  grid-template-columns: 74px 1fr auto;
  gap: 16px;
  align-items: center;
  padding-bottom: 18px;
  border-bottom: 3px solid #111;
}

.receipt-header img {
  width: 74px;
  height: 74px;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.receipt-header p,
.receipt-header span {
  margin: 0;
}

.receipt-header p {
  font-size: 1.2rem;
  font-weight: 900;
}

.receipt-header span {
  color: #555;
  font-size: 0.82rem;
}

.receipt-number {
  display: grid;
  gap: 3px;
  text-align: right;
}

.receipt-number strong {
  font-size: 0.95rem;
}

.receipt-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 22px 0;
}

.receipt-title h2 {
  margin: 0;
  font-size: 1.2rem;
}

.receipt-title span {
  color: #555;
  font-size: 0.82rem;
}

.receipt-data {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: #d8d8d8;
  border: 1px solid #d8d8d8;
}

.receipt-data div {
  padding: 13px;
  background: #fff;
}

.receipt-data dt {
  margin-bottom: 5px;
  color: #666;
  font-size: 0.72rem;
  font-weight: 750;
  text-transform: uppercase;
}

.receipt-data dd {
  margin: 0;
  font-weight: 750;
}

.receipt-data .receipt-total {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #111;
  color: #fff;
}

.receipt-total dt {
  margin: 0;
  color: #ccc;
}

.receipt-total dd {
  font-size: 1.35rem;
}

.receipt-footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid #ccc;
  color: #555;
  font-size: 0.76rem;
}

.receipt-footer div {
  display: grid;
  gap: 3px;
}

.receipt-footer p {
  margin: 0;
}

.receipt-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.manual-payment-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.receipt-preview {
  border: 1px solid rgba(143, 132, 31, 0.35);
  border-left: 4px solid var(--gold-dark);
  border-radius: 8px;
  background: rgba(183, 170, 43, 0.08);
  color: var(--ink);
  line-height: 1.5;
}

.status-dialog::backdrop {
  background: rgba(0, 0, 0, 0.58);
}

.status-dialog-card {
  display: grid;
  gap: 16px;
  padding: 22px;
}

.dialog-heading,
.audit-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.dialog-heading p {
  margin: 0 0 4px;
  color: var(--gold-dark);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.dialog-heading h2,
.audit-heading h3 {
  margin: 0;
  color: var(--black);
}

.dialog-close {
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: #fff;
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

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

.audit-section {
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.audit-heading {
  align-items: center;
  margin-bottom: 12px;
}

.audit-heading h3 {
  font-size: 1rem;
}

.audit-heading span {
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
}

.audit-list {
  display: grid;
  gap: 10px;
  max-height: 210px;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  list-style: none;
}

.audit-item {
  padding: 11px 12px;
  border-left: 3px solid var(--gold);
  background: #f5f5f5;
  font-size: 0.85rem;
}

.audit-item strong,
.audit-item span {
  display: block;
}

.audit-item span {
  margin-top: 3px;
  color: var(--muted);
}

.form-note {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
}

.inbox-heading {
  align-items: flex-start;
}

.inbox-summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.inbox-summary span {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(5, 5, 5, 0.08);
  color: #3f3f3f;
  font-size: 0.78rem;
  font-weight: 800;
}

.inbox-summary .connection-badge {
  background: rgba(183, 170, 43, 0.18);
  color: var(--gold-dark);
}

.inbox-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f7f7f7;
}

.inbox-toolbar p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 600;
}

.inbox-toolbar .secondary-button {
  min-width: 158px;
  padding: 0 16px;
}

.inbox-layout {
  display: grid;
  grid-template-columns: minmax(250px, 0.8fr) minmax(0, 1.4fr);
  min-height: 330px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.message-list {
  border-right: 1px solid var(--line);
  background: #fafafa;
}

.message-item {
  width: 100%;
  min-height: 94px;
  display: grid;
  gap: 5px;
  padding: 14px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.message-item:hover,
.message-item.is-selected {
  background: #fff;
  box-shadow: inset 3px 0 0 var(--gold);
}

.message-item.is-unread strong::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: var(--gold-dark);
  vertical-align: 1px;
}

.message-item span {
  color: var(--muted);
  font-size: 0.77rem;
}

.message-sender {
  color: var(--black) !important;
  font-weight: 800;
}

.message-preview {
  min-width: 0;
  padding: 20px;
}

.empty-message {
  min-height: 285px;
  display: grid;
  place-items: center;
  color: var(--muted);
  text-align: center;
}

.message-preview-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.message-preview-heading p,
.message-preview-heading h3 {
  margin: 0;
}

.message-preview-heading p,
.message-preview-heading > span {
  color: var(--muted);
  font-size: 0.8rem;
}

.message-preview-heading h3 {
  margin-top: 4px;
  font-size: 1.05rem;
}

#message-body {
  min-height: 160px;
  margin: 0;
  padding: 18px 0;
  overflow-x: auto;
  white-space: pre-wrap;
  font: inherit;
  font-size: 0.88rem;
  line-height: 1.55;
}

.message-actions {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(150px, 0.7fr);
  gap: 10px;
}

@media (max-width: 520px) {
  .login-card {
    padding: 28px 20px 24px;
    border-radius: 16px;
  }

  .brand-mark img {
    width: 228px;
    height: 228px;
  }

  .password-row {
    grid-template-columns: 1fr 54px;
  }
}

@media (max-width: 900px) {
  .institutional-document-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .institutional-document-form .institutional-document-observation { grid-column: span 2; }

  .work-area-top {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .alerts-panel {
    grid-column: 1;
    grid-row: 2;
    min-height: 96px;
    width: 100%;
    justify-self: stretch;
    margin-top: 0;
  }

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

  .member-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tasks-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .insurance-summary,
  .insurance-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .family-editor-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .family-editor-wide {
    grid-column: 1 / -1;
  }

  .family-editor-form .secondary-button {
    grid-column: 1 / -1;
  }

  .category-strip {
    grid-template-columns: 1fr;
  }

  .member-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .search-filter {
    grid-column: 1 / -1;
  }

  .inbox-layout {
    grid-template-columns: 1fr;
  }

  .fee-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tasks-notes {
    grid-column: 1 / -1;
  }

  .maintenance-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .maintenance-notes,
  .maintenance-form .save-member-button,
  .maintenance-form .secondary-button {
    grid-column: 1 / -1;
  }

  .movement-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .voucher-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .message-list {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}

@media (max-width: 520px) {
  .areas-header,
  .module-header {
    align-items: flex-start;
  }

  .areas-header img,
  .module-header img {
    width: 58px;
    height: 58px;
  }

  .permission-note {
    border-radius: 14px;
  }

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

  .module-grid,
  .categories-grid {
    grid-template-columns: 1fr;
  }

  .panel-block {
    padding: 16px;
  }

  .panel-heading,
  .form-actions {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .inbox-toolbar,
  .message-preview-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .inbox-summary {
    justify-content: flex-start;
  }

  .inbox-toolbar .secondary-button {
    width: 100%;
  }

  .message-actions {
    grid-template-columns: 1fr;
  }

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

  .family-editor-wide {
    grid-column: auto;
  }

  .fee-summary,
  .payment-option-actions,
  .manual-payment-grid {
    grid-template-columns: 1fr;
  }

  .fee-form,
  .tasks-form,
  .maintenance-form,
  .receipt-data,
  .receipt-actions {
    grid-template-columns: 1fr;
  }

  .fee-scope,
  .fee-reason,
  .tasks-notes,
  .maintenance-notes,
  .maintenance-form .save-member-button,
  .maintenance-form .secondary-button,
  .fee-form .save-member-button,
  .receipt-data .receipt-total {
    grid-column: auto;
  }

  .receipt-header {
    grid-template-columns: 58px 1fr;
  }

  .receipt-header img {
    width: 58px;
    height: 58px;
  }

  .receipt-number {
    grid-column: 1 / -1;
    text-align: left;
  }

  .receipt-title,
  .receipt-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .club-receipt {
    padding: 20px;
  }

  .fee-summary div {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .fee-summary div:last-child {
    border-bottom: 0;
  }

  .panel-heading {
    display: grid;
  }

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

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

  .member-filters {
    grid-template-columns: 1fr;
  }

  .balance-summary,
  .balance-filters,
  .movement-form,
  .concept-groups,
  .new-concept-form,
  .area-selection {
    grid-template-columns: 1fr;
  }

  .balance-search { grid-column: auto; }
  .subarea-review { align-items: stretch; flex-direction: column; }

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

  .voucher-party,
  .voucher-detail,
  .voucher-save {
    grid-column: auto;
  }

  .movement-description {
    grid-column: auto;
  }

  .search-filter {
    grid-column: auto;
  }

  .field-wide {
    grid-column: auto;
  }
}

#staff-chat[hidden], #staff-chat [hidden] { display: none !important; }
#staff-chat { position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 40; }
.staff-chat-launcher { width: 54px; height: 54px; border-radius: 50%; border: 1px solid #a99137; background: #101010; color: white; display: grid; place-items: center; margin-left: auto; cursor: pointer; box-shadow: 0 4px 16px #0002; position: relative; }
#staff-chat svg { width: 22px; height: 22px; flex-shrink: 0; }
#staff-chat-badge { position: absolute; right: -3px; top: -5px; background: #b29435; color: #080808; border-radius: 12px; min-width: 22px; padding: 2px 5px; font-size: 12px; font-weight: 700; }
.staff-chat-panel { width: min(380px, calc(100vw - 32px)); height: min(560px, calc(100dvh - 110px)); margin-bottom: 12px; border: 1px solid #ddd; border-radius: 8px; background: white; color: #151515; box-shadow: 0 8px 30px #0002; display: flex; flex-direction: column; overflow: hidden; }
.staff-chat-header { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: #151515; color: white; border-bottom: 2px solid #b29435; }
.staff-chat-header h2 { font-size: 16px; line-height: 1.3; margin: 0; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.staff-chat-header button { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; }
.staff-chat-content { display: flex; flex-direction: column; padding: 12px; min-height: 0; flex: 1; gap: 10px; }
#staff-chat-search { width: 100%; min-height: 44px; padding: 10px; border: 1px solid #ddd; border-radius: 6px; }
.staff-chat-users { overflow: auto; flex: 1; min-height: 0; }
.staff-chat-person { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 48px; padding: 12px 6px; border: 0; border-bottom: 1px solid #eee; background: white; text-align: left; cursor: pointer; color: #151515; }
.staff-chat-person span { overflow-wrap: anywhere; min-width: 0; }
.staff-chat-person small { color: #796119; flex-shrink: 0; }
.staff-chat-person:hover { background: #f3f3f3; }
.staff-chat-conversation { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 8px; }
.staff-chat-messages { overflow-y: auto; flex: 1; min-height: 0; }
.staff-chat-message { max-width: 88%; width: fit-content; padding: 10px; margin: 0 0 10px; border-radius: 6px; background: #f0f0f0; }
.staff-chat-message.is-mine { margin-left: auto; background: #faf6e8; border: 1px solid #e8deb9; }
.staff-chat-message p { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 5px; font-size: 14px; }
.staff-chat-message small { color: #666; font-size: 11px; }
.staff-chat-form { display: flex; gap: 8px; align-items: end; }
#staff-chat-text { width: 100%; min-width: 0; max-height: 120px; resize: vertical; padding: 10px; border: 1px solid #ccc; border-radius: 6px; font: inherit; font-size: 16px; }
.staff-chat-form button { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; background: #151515; color: white; border: 0; border-radius: 6px; cursor: pointer; }
#staff-chat button:disabled { opacity: .5; cursor: not-allowed; }
.staff-chat-status { font-size: 13px; color: #666; margin: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) { #staff-chat { right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); } }
@media print { #staff-chat { display: none !important; } }

.receipt-export-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: end;
  gap: 16px;
}
.receipt-export-form input { min-width: 0; }
@media (max-width: 600px) {
  .receipt-export-form { grid-template-columns: minmax(0, 1fr); }
  .receipt-export-form button { width: 100%; }
}

@media print {
  @page { size: A4 portrait; margin: 12mm; }

  html:has(#receipt-dialog[open]),
  body:has(#receipt-dialog[open]),
  body:has(#receipt-dialog[open]) > main {
    display: block !important;
    position: static !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: white !important;
  }

  /* Remove the rest of the page from pagination, not just from view. */
  body:has(#receipt-dialog[open]) > :not(main),
  body:has(#receipt-dialog[open]) > main > :not(#receipt-dialog),
  body:has(#receipt-dialog[open])::before,
  body:has(#receipt-dialog[open])::after,
  body:has(#receipt-dialog[open]) > main::before,
  body:has(#receipt-dialog[open]) > main::after,
  #receipt-dialog .receipt-close,
  #receipt-dialog .receipt-actions,
  #receipt-dialog::backdrop {
    display: none !important;
  }

  #receipt-dialog[open],
  #receipt-dialog .receipt-dialog-card,
  #club-receipt {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: white !important;
  }

  #receipt-dialog[open],
  #receipt-dialog .receipt-dialog-card { padding: 0 !important; }
  #club-receipt {
    padding: 6mm !important;
    break-inside: avoid;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
    overflow-wrap: anywhere;
  }
  #club-receipt .receipt-header { grid-template-columns: 60px 1fr auto; }
  #club-receipt .receipt-header img { width: 60px; height: 60px; }
  #club-receipt .receipt-number { grid-column: auto; text-align: right; }
  #club-receipt .receipt-data { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #club-receipt .receipt-title,
  #club-receipt .receipt-footer { flex-direction: row; }
}

/* Interactive portal frame: visually connect the sidebar and member panel on desktop. */
@media (min-width: 861px) {
  body[data-active-view="member-portal-view"] .member-app-shell {
    gap: 0;
    border-radius: 8px;
    background: #0d0d0d;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .42);
  }

  body[data-active-view="member-portal-view"] .member-sidebar {
    border-radius: 8px 0 0 8px;
    box-shadow: none;
  }

  body[data-active-view="member-portal-view"] .member-content {
    gap: 0;
    border-radius: 0 8px 8px 0;
    background: #050505;
  }

  body[data-active-view="member-portal-view"] .member-content > .member-app-panel {
    border-radius: 0 8px 8px 0;
    box-shadow: none;
    min-height: calc(100dvh - 56px);
  }

  body[data-active-view="member-portal-view"] .member-home-hero {
    border-radius: 0 8px 8px 0;
    height: calc(100dvh - 56px);
    aspect-ratio: auto;
  }
}

/* Public promotion of the approved member-portal experiment. */
@media (min-width: 861px) {
  body[data-active-view="member-portal-view"] .member-app-shell {
    gap: 0;
    width: min(100%, 1292px);
    grid-template-columns: minmax(260px, 304px) minmax(0, 1fr);
    border-radius: 8px;
    background: #0d0d0d;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .42);
  }

  body[data-active-view="member-portal-view"] .member-sidebar {
    border-radius: 8px 0 0 8px;
    border-right: 0;
    box-shadow: none;
    background:
      url("./assets/sidebar-marble-graphite.png") center / cover no-repeat padding-box,
      linear-gradient(155deg, #171717 0%, #4b3918 48%, #151515 100%) border-box;
  }

  body[data-active-view="member-portal-view"] .member-content {
    gap: 0;
    border-radius: 0 8px 8px 0;
    background: #050505;
  }

  body[data-active-view="member-portal-view"] .member-content > .member-app-panel {
    min-height: calc(100dvh - 56px);
    border-left: 0;
    border-radius: 0 8px 8px 0;
    box-shadow: none;
  }

  body[data-active-view="member-portal-view"] .member-home-hero {
    height: calc(100dvh - 56px);
    aspect-ratio: auto;
    border-radius: 0 8px 8px 0;
  }

  body[data-active-view="member-portal-view"] .member-sidebar .app-nav { gap: 2px; }
  body[data-active-view="member-portal-view"] .member-sidebar .app-nav-button {
    position: relative;
    width: calc(100% + 14px);
    min-height: 38px;
    margin-right: -14px;
    padding: 0 14px;
    border: 1px solid #2b2b2b;
    border-right: 0;
    border-radius: 7px 0 0 7px;
    background: #151515;
    color: #dedede;
    font-size: .82rem;
    white-space: nowrap;
    box-sizing: border-box;
  }

  body[data-active-view="member-portal-view"] .member-sidebar .app-nav-button::after {
    content: "\203A";
    margin-left: auto;
    flex: 0 0 auto;
    color: #9f9f9f;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1;
  }

  body[data-active-view="member-portal-view"] .member-sidebar .app-nav-button:hover {
    border-color: rgba(183, 170, 43, .65);
    border-right-color: transparent;
    background: #1b1b1b;
    color: #fff;
  }

  body[data-active-view="member-portal-view"] .member-sidebar .app-nav-button:hover::after,
  body[data-active-view="member-portal-view"] .member-sidebar .app-nav-button.is-active::after {
    color: var(--gold);
    transform: translateX(2px);
  }

  body[data-active-view="member-portal-view"] .member-sidebar .app-nav-button.is-active {
    border-color: var(--gold);
    border-right-color: transparent;
    background: #f2edcb;
    color: #050505;
  }

  body[data-active-view="member-portal-view"] .member-sidebar .app-nav-button.is-active .nav-icon { color: #17120a; }

  body[data-active-view="member-portal-view"].is-honorary-profile .member-sidebar .app-nav-button[data-app-target="member-fees-content"].is-honorary-disabled {
    font-size: 1.62rem;
    line-height: 1;
  }

  body[data-active-view="member-portal-view"].is-honorary-profile .digital-card-section > .section-heading {
    transform: translateY(-40px);
  }

  body[data-active-view="member-portal-view"].is-honorary-profile .digital-card-section .digital-card {
    margin-top: -152px;
  }

  body[data-active-view="member-portal-view"].is-honorary-single-card .digital-card-section .digital-card {
    margin-top: 0;
  }

  body[data-active-view="member-portal-view"].is-honorary-profile .club-life > .section-heading {
    padding: 96px 32px 22px;
  }

  body[data-active-view="member-portal-view"].is-honorary-profile .club-life > .section-heading p {
    margin-left: 36px;
    font-size: 1rem;
    font-weight: 850;
    letter-spacing: .04em;
  }

  body[data-active-view="member-portal-view"].is-honorary-profile .club-life > .section-heading h2 {
    margin: 7px 0 0 36px;
    font-size: 1.7rem;
    line-height: 1.15;
  }
}

/* Mobile app navigation: the sidebar and the selected section are two horizontal screens. */
@media (max-width: 860px) {
  body[data-active-view="member-portal-view"] {
    overflow-x: hidden;
  }

  body[data-active-view="member-portal-view"][data-mobile-app-route="content"] .login-shell {
    padding-left: 0;
    padding-right: 0;
  }

  body[data-active-view="member-portal-view"] .member-app-shell {
    display: grid;
    grid-template-columns: 100vw 100vw;
    grid-template-rows: minmax(100dvh, auto);
    gap: 0;
    width: 200vw;
    max-width: none;
    min-height: 100dvh;
    margin: 0;
    overflow: visible;
    transform: translateX(0);
    transition: transform .34s cubic-bezier(.22, .61, .36, 1);
  }

  body[data-active-view="member-portal-view"][data-mobile-app-route="content"] .member-app-shell {
    transform: translateX(-100vw);
  }

  body[data-active-view="member-portal-view"] .member-sidebar,
  body[data-active-view="member-portal-view"] .member-content {
    grid-row: 1;
    width: 100vw;
    min-width: 100vw;
    box-sizing: border-box;
  }

  body[data-active-view="member-portal-view"] .member-sidebar {
    grid-column: 1;
    position: relative;
    top: auto;
    align-self: start;
    min-height: 100dvh;
    height: auto;
    padding: 18px 16px 22px;
    border-radius: 0;
    border-color: rgba(183, 170, 43, .3);
    background:
      url("./assets/sidebar-marble-graphite.png") center / cover no-repeat padding-box,
      linear-gradient(155deg, #171717 0%, #4b3918 48%, #151515 100%) border-box;
    box-shadow: none;
  }

  body[data-active-view="member-portal-view"] .member-sidebar .app-nav {
    gap: 0;
  }

  body[data-active-view="member-portal-view"] .member-sidebar .app-nav-button {
    position: relative;
    width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid #2b2b2b;
    border-bottom-width: 0;
    border-radius: 0;
    background: rgba(21, 21, 21, .92);
    color: #dedede;
    box-sizing: border-box;
  }

  body[data-active-view="member-portal-view"] .member-sidebar .app-nav-button:first-child {
    border-radius: 7px 7px 0 0;
  }

  body[data-active-view="member-portal-view"] .member-sidebar .app-nav-button:last-child {
    border-bottom-width: 1px;
    border-radius: 0 0 7px 7px;
  }

  body[data-active-view="member-portal-view"] .member-sidebar .app-nav-button::after {
    content: "\203A";
    margin-left: auto;
    flex: 0 0 auto;
    color: #9f9f9f;
    font-size: 1.45rem;
    font-weight: 400;
    line-height: 1;
  }

  body[data-active-view="member-portal-view"] .member-sidebar .app-nav-button:hover,
  body[data-active-view="member-portal-view"] .member-sidebar .app-nav-button:focus-visible {
    border-color: rgba(183, 170, 43, .65);
    background: rgba(27, 27, 27, .96);
    color: #fff;
  }

  body[data-active-view="member-portal-view"] .member-sidebar .app-nav-button:hover::after,
  body[data-active-view="member-portal-view"] .member-sidebar .app-nav-button:focus-visible::after,
  body[data-active-view="member-portal-view"] .member-sidebar .app-nav-button.is-active::after {
    color: var(--gold);
    transform: translateX(2px);
  }

  body[data-active-view="member-portal-view"] .member-sidebar .app-nav-button.is-active {
    border-color: var(--gold);
    background: #f2edcb;
    color: #050505;
  }

  body[data-active-view="member-portal-view"] .member-sidebar .app-nav-button.is-active .nav-icon {
    color: #17120a;
  }

  body[data-active-view="member-portal-view"] .member-content {
    grid-column: 2;
    position: relative;
    display: block;
    min-height: 100dvh;
    height: auto;
    overflow: visible;
    background: #050505;
  }

  body[data-active-view="member-portal-view"] .member-content > .member-app-panel {
    width: 100vw;
    min-height: 100dvh;
    height: auto;
    border-radius: 0;
    box-shadow: none;
  }

  body[data-active-view="member-portal-view"] .member-mobile-back {
    position: absolute;
    z-index: 5;
    top: 14px;
    left: 14px;
    display: inline-grid;
    width: 40px;
    height: 40px;
    padding: 0;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .72);
    color: #171717;
    cursor: pointer;
  }

  body[data-active-view="member-portal-view"] .member-mobile-back svg {
    width: 20px;
    height: 20px;
  }

  body[data-active-view="member-portal-view"] .member-home-hero {
    height: 100dvh;
    min-height: 100dvh;
    border-radius: 0;
  }
}

@media (min-width: 861px) {
  body[data-active-view="member-portal-view"] .member-portal-grid .member-data-list div {
    min-height: 128px;
    padding: 22px 24px;
  }

  body[data-active-view="member-portal-view"] .member-portal-grid .member-data-list dt {
    margin-bottom: 12px;
    font-size: 1rem;
  }

  body[data-active-view="member-portal-view"] .member-portal-grid .member-data-list dt svg {
    width: 24px;
    height: 24px;
    flex-basis: 24px;
  }

  body[data-active-view="member-portal-view"] .member-portal-grid .member-data-list dd {
    font-size: 1.2rem;
  }

  .member-mobile-back { display: none; }
}

body[data-active-view="member-portal-view"] .member-portal-grid,
body[data-active-view="member-portal-view"] .member-fees-content,
body[data-active-view="member-portal-view"] .digital-card-section,
body[data-active-view="member-portal-view"] .family-panel,
body[data-active-view="member-portal-view"] .club-life,
body[data-active-view="member-portal-view"] .campaign-studio,
body[data-active-view="member-portal-view"] .social-panel,
body[data-active-view="member-portal-view"] .digital-content-panel {
  background-color: #e7e2d9;
  background-image: url("./assets/member-section-background-clean.png");
  background-position: center;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

body[data-active-view="member-portal-view"] .club-life {
  height: calc(100dvh - 56px);
  min-height: calc(100dvh - 56px);
  max-height: calc(100dvh - 56px);
  overflow: hidden !important;
}

body[data-active-view="member-portal-view"] .club-life-scroll {
  flex: 1 1 auto;
  height: auto;
  max-height: none;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(116, 86, 20, .55) transparent;
}

body[data-active-view="member-portal-view"] .club-life-scroll::-webkit-scrollbar { display: block; width: 7px; }
body[data-active-view="member-portal-view"] .club-life-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(116, 86, 20, .55);
}

/* Digital content: the approved download hub, ready for future admin uploads. */
.digital-content-panel {
  display: flex;
  flex-direction: column;
  min-height: min(675px, 75cqw);
  padding: 96px 32px 32px;
  box-sizing: border-box;
  color: #151515;
  background-color: #e7e2d9;
  background-image: url("./assets/digital-content-background.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.digital-content-panel > * { position: relative; z-index: 1; }
.digital-content-panel > .section-heading { margin-bottom: 18px; }
.digital-content-panel > .section-heading p {
  margin-left: 18px;
  color: var(--gold-dark);
  font-size: 1rem;
  font-weight: 850;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.digital-content-panel > .section-heading h2 {
  margin: 7px 0 0 18px;
  color: #151515;
  font-size: 1.7rem;
  line-height: 1.15;
  letter-spacing: 0;
  text-transform: none;
}
.digital-content-intro {
  max-width: 720px;
  margin: 0 0 22px 18px;
  color: #454545;
  font-size: 1.05rem;
  line-height: 1.45;
}
.digital-content-categories {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  width: 100%;
}
.digital-content-category {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 12px;
  min-height: 116px;
  padding: 16px;
  border: 1px solid rgba(184, 138, 22, .5);
  border-radius: 8px;
  background: rgba(255, 255, 255, .68);
  color: #171717;
  text-align: left;
  cursor: pointer;
  transition: border-color .2s, background .2s, transform .2s;
}
.digital-content-category:hover,
.digital-content-category:focus-visible,
.digital-content-category.is-active {
  border-color: var(--gold-dark);
  background: rgba(255, 255, 255, .9);
  outline: none;
  transform: translateY(-1px);
}
.digital-content-category > svg:first-child { width: 28px; height: 28px; color: var(--gold-dark); stroke-width: 1.7; }
.digital-content-category span { font-size: .92rem; font-weight: 800; line-height: 1.2; }
.digital-content-category .digital-content-arrow { width: 18px; height: 18px; color: #171717; }
.digital-content-items {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 24px 0 0 18px;
}
.digital-content-item {
  display: grid;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(184, 138, 22, .34);
  border-radius: 8px;
  background: rgba(255, 255, 255, .74);
  box-shadow: 0 8px 18px rgba(51, 44, 30, .08);
}
.digital-content-item-image { display: grid; place-items: center; min-height: 150px; background: rgba(255,255,255,.45); }
.digital-content-item-image img { display: block; width: 100%; height: auto; max-height: 260px; object-fit: contain; }
.digital-content-item-body { display: grid; gap: 6px; padding: 12px; }
.digital-content-item-body span { color: var(--gold-dark); font-size: .68rem; font-weight: 850; text-transform: uppercase; }
.digital-content-item-body strong { min-height: 2.4em; font-size: .9rem; line-height: 1.2; }
.digital-content-download { width: fit-content; color: #171717; font-size: .78rem; font-weight: 850; text-decoration: underline; text-underline-offset: 3px; }
.digital-content-empty {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 720px;
  margin: 26px 0 0 18px;
  padding: 20px;
  border: 1px dashed rgba(89, 79, 60, .38);
  border-radius: 8px;
  background: rgba(255, 255, 255, .28);
  color: #56524b;
}
.digital-content-empty > svg { width: 26px; height: 26px; flex: 0 0 auto; color: var(--gold-dark); }
.digital-content-empty strong, .digital-content-empty p { margin: 0; }
.digital-content-empty p { margin-top: 4px; font-size: .88rem; }
.digital-content-signoff {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: auto 0 0 18px;
  padding-top: 30px;
  color: #4e4b45;
  text-transform: uppercase;
}
.digital-content-signoff span { font-size: .78rem; font-weight: 800; letter-spacing: .26em; }
.digital-content-signoff strong { color: #171717; font-size: .82rem; letter-spacing: .16em; }

@media (min-width: 861px) {
  body[data-active-view="member-portal-view"] .digital-content-panel {
    background-color: #e7e2d9;
    background-image: url("./assets/digital-content-background.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  body[data-active-view="member-portal-view"] .digital-content-signoff span {
    font-size: .95rem;
  }

  body[data-active-view="member-portal-view"] .digital-content-signoff strong {
    font-size: 1rem;
  }
}

@media (min-width: 861px) {
  body[data-active-view="member-portal-view"] .digital-content-panel { border-left: 0; border-radius: 0 8px 8px 0; }
  body[data-active-view="member-portal-view"] .digital-content-panel > .section-heading { transform: translateY(-40px); }
  body[data-active-view="member-portal-view"] .digital-content-panel > .section-heading p,
  body[data-active-view="member-portal-view"] .digital-content-panel > .section-heading h2,
  body[data-active-view="member-portal-view"] .digital-content-intro,
  body[data-active-view="member-portal-view"] .digital-content-empty,
  body[data-active-view="member-portal-view"] .digital-content-signoff { margin-left: 36px; }
}

/* Match every portal heading and badge to the approved verified-member model. */
@media (min-width: 861px) {
  body[data-active-view="member-portal-view"] .member-portal-grid .member-details > .section-heading,
  body[data-active-view="member-portal-view"] .fee-summary-screen > .member-summary > .section-heading,
  body[data-active-view="member-portal-view"] .digital-card-section > .section-heading,
  body[data-active-view="member-portal-view"] .family-panel > .section-heading,
  body[data-active-view="member-portal-view"] .club-life > .section-heading,
  body[data-active-view="member-portal-view"] .campaign-studio > .section-heading,
  body[data-active-view="member-portal-view"] .digital-content-panel > .section-heading,
  body[data-active-view="member-portal-view"] .social-panel > .section-heading { transform: translateY(-40px); }

  body[data-active-view="member-portal-view"] .member-portal-grid .member-details > .section-heading p,
  body[data-active-view="member-portal-view"] .fee-summary-screen > .member-summary > .section-heading p,
  body[data-active-view="member-portal-view"] .digital-card-section > .section-heading p,
  body[data-active-view="member-portal-view"] .family-panel > .section-heading p,
  body[data-active-view="member-portal-view"] .club-life > .section-heading p,
  body[data-active-view="member-portal-view"] .campaign-studio > .section-heading p,
  body[data-active-view="member-portal-view"] .digital-content-panel > .section-heading p,
  body[data-active-view="member-portal-view"] .social-panel > .section-heading p,
  body[data-active-view="member-portal-view"] .member-portal-grid .member-details > .section-heading h2,
  body[data-active-view="member-portal-view"] .fee-summary-screen > .member-summary > .section-heading h2,
  body[data-active-view="member-portal-view"] .digital-card-section > .section-heading h2,
  body[data-active-view="member-portal-view"] .family-panel > .section-heading h2,
  body[data-active-view="member-portal-view"] .club-life > .section-heading h2,
  body[data-active-view="member-portal-view"] .campaign-studio > .section-heading h2,
  body[data-active-view="member-portal-view"] .digital-content-panel > .section-heading h2,
  body[data-active-view="member-portal-view"] .social-panel > .section-heading h2 { margin-left: 36px; }
}

body[data-active-view="member-portal-view"] .cai-unified-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 9px 16px;
  border: 1px solid rgba(184, 138, 22, .22);
  border-radius: 999px;
  background: rgba(239, 226, 181, .72);
  color: #8a6415;
  font-size: .88rem;
  font-weight: 850;
  white-space: nowrap;
}
body[data-active-view="member-portal-view"] .cai-unified-pill:hover {
  border-color: rgba(184, 138, 22, .5);
  background: rgba(239, 226, 181, .88);
  color: #76540d;
}
body[data-active-view="member-portal-view"] .member-portal-grid .member-details > .section-heading .cai-unified-pill {
  gap: 10px;
  padding: 8px 10px 8px 16px;
  font-size: .82rem;
}
body[data-active-view="member-portal-view"] .cai-unified-pill svg { width: 18px; height: 18px; color: #8a6415; }
body[data-active-view="member-portal-view"] .member-portal-grid .member-details > .section-heading .cai-unified-pill::after { background: #a77b1c; color: #fff; }

@media (max-width: 860px) {
  body[data-active-view="member-portal-view"] .member-portal-grid,
  body[data-active-view="member-portal-view"] .member-fees-content,
  body[data-active-view="member-portal-view"] .digital-card-section,
  body[data-active-view="member-portal-view"] .family-panel,
  body[data-active-view="member-portal-view"] .club-life,
  body[data-active-view="member-portal-view"] .campaign-studio,
  body[data-active-view="member-portal-view"] .social-panel,
  body[data-active-view="member-portal-view"] .digital-content-panel { background-size: cover; }
  body[data-active-view="member-portal-view"] .club-life {
    height: calc(100svh - 32px);
    min-height: calc(100svh - 32px);
    max-height: calc(100svh - 32px);
  }
  .digital-content-panel { min-height: 0; padding: 96px 24px 28px; }
  .digital-content-categories { grid-template-columns: 1fr; }
  body[data-active-view="member-portal-view"] .club-life > .section-heading { padding-inline: 24px; }
  body[data-active-view="member-portal-view"] .club-life > .section-heading p,
  body[data-active-view="member-portal-view"] .club-life > .section-heading h2 { margin-left: 18px; }
}

/* Mobile section headers: keep the back arrow clear and place the title stack in the top row. */
@media (max-width: 860px) {
  body[data-active-view="member-portal-view"] .member-portal-grid,
  body[data-active-view="member-portal-view"] .member-fees-content,
  body[data-active-view="member-portal-view"] .digital-card-section,
  body[data-active-view="member-portal-view"] .family-panel,
  body[data-active-view="member-portal-view"] .club-life,
  body[data-active-view="member-portal-view"] .campaign-studio,
  body[data-active-view="member-portal-view"] .social-panel,
  body[data-active-view="member-portal-view"] .digital-content-panel {
    background-color: #e7e2d9;
    background-image: url("./assets/member-section-background-clean.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  body[data-active-view="member-portal-view"] .member-portal-grid .member-details > .section-heading,
  body[data-active-view="member-portal-view"] .fee-summary-screen > .member-summary > .section-heading,
  body[data-active-view="member-portal-view"] .digital-card-section > .section-heading,
  body[data-active-view="member-portal-view"] .family-panel > .section-heading,
  body[data-active-view="member-portal-view"] .club-life > .section-heading,
  body[data-active-view="member-portal-view"] .campaign-studio > .section-heading,
  body[data-active-view="member-portal-view"] .digital-content-panel > .section-heading,
  body[data-active-view="member-portal-view"] .social-panel > .section-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
    min-width: 0;
    margin: 0 0 22px;
    padding: 28px 18px 0 60px;
    transform: none;
    text-align: left;
  }

  body[data-active-view="member-portal-view"] .digital-card-section {
    justify-items: stretch;
  }

  body[data-active-view="member-portal-view"] .member-portal-grid .member-details > .section-heading > div,
  body[data-active-view="member-portal-view"] .fee-summary-screen > .member-summary > .section-heading > div,
  body[data-active-view="member-portal-view"] .digital-card-section > .section-heading > div,
  body[data-active-view="member-portal-view"] .family-panel > .section-heading > div,
  body[data-active-view="member-portal-view"] .club-life > .section-heading > div,
  body[data-active-view="member-portal-view"] .campaign-studio > .section-heading > div,
  body[data-active-view="member-portal-view"] .digital-content-panel > .section-heading > div,
  body[data-active-view="member-portal-view"] .social-panel > .section-heading > div {
    min-width: 0;
    text-align: left;
  }

  body[data-active-view="member-portal-view"] .member-portal-grid .member-details > .section-heading p,
  body[data-active-view="member-portal-view"] .fee-summary-screen > .member-summary > .section-heading p,
  body[data-active-view="member-portal-view"] .digital-card-section > .section-heading p,
  body[data-active-view="member-portal-view"] .family-panel > .section-heading p,
  body[data-active-view="member-portal-view"] .club-life > .section-heading p,
  body[data-active-view="member-portal-view"] .campaign-studio > .section-heading p,
  body[data-active-view="member-portal-view"] .digital-content-panel > .section-heading p,
  body[data-active-view="member-portal-view"] .social-panel > .section-heading p {
    margin: 0;
    font-size: .92rem;
    line-height: 1.2;
  }

  body[data-active-view="member-portal-view"] .member-portal-grid .member-details > .section-heading h2,
  body[data-active-view="member-portal-view"] .fee-summary-screen > .member-summary > .section-heading h2,
  body[data-active-view="member-portal-view"] .digital-card-section > .section-heading h2,
  body[data-active-view="member-portal-view"] .family-panel > .section-heading h2,
  body[data-active-view="member-portal-view"] .club-life > .section-heading h2,
  body[data-active-view="member-portal-view"] .campaign-studio > .section-heading h2,
  body[data-active-view="member-portal-view"] .digital-content-panel > .section-heading h2,
  body[data-active-view="member-portal-view"] .social-panel > .section-heading h2 {
    margin: 7px 0 0;
    font-size: 1.7rem;
    line-height: 1.08;
  }

  body[data-active-view="member-portal-view"] .member-portal-grid .member-details > .section-heading .cai-unified-pill,
  body[data-active-view="member-portal-view"] .fee-summary-screen > .member-summary > .section-heading .cai-unified-pill,
  body[data-active-view="member-portal-view"] .digital-card-section > .section-heading .cai-unified-pill,
  body[data-active-view="member-portal-view"] .family-panel > .section-heading .cai-unified-pill,
  body[data-active-view="member-portal-view"] .club-life > .section-heading .cai-unified-pill,
  body[data-active-view="member-portal-view"] .campaign-studio > .section-heading .cai-unified-pill,
  body[data-active-view="member-portal-view"] .digital-content-panel > .section-heading .cai-unified-pill,
  body[data-active-view="member-portal-view"] .social-panel > .section-heading .cai-unified-pill {
    align-self: start;
    margin-top: 20px;
  }

  body[data-active-view="member-portal-view"] .member-portal-grid .member-details,
  body[data-active-view="member-portal-view"] .member-fees-content,
  body[data-active-view="member-portal-view"] .digital-card-section,
  body[data-active-view="member-portal-view"] .family-panel,
  body[data-active-view="member-portal-view"] .club-life,
  body[data-active-view="member-portal-view"] .campaign-studio,
  body[data-active-view="member-portal-view"] .social-panel,
  body[data-active-view="member-portal-view"] .digital-content-panel {
    box-sizing: border-box;
  }

  body[data-active-view="member-portal-view"] .member-fees-content,
  body[data-active-view="member-portal-view"] .digital-card-section,
  body[data-active-view="member-portal-view"] .family-panel,
  body[data-active-view="member-portal-view"] .club-life,
  body[data-active-view="member-portal-view"] .campaign-studio,
  body[data-active-view="member-portal-view"] .social-panel,
  body[data-active-view="member-portal-view"] .digital-content-panel {
    padding-top: 0;
  }

  body[data-active-view="member-portal-view"] .member-portal-grid .member-details > .section-heading {
    margin-bottom: 28px;
  }

  body[data-active-view="member-portal-view"] .fee-summary-screen > .member-summary {
    padding-top: 0;
    margin-bottom: 26px;
  }

  body[data-active-view="member-portal-view"] .member-fees-content .member-metrics {
    margin-top: 48px;
  }

  body[data-active-view="member-portal-view"] .digital-content-intro,
  body[data-active-view="member-portal-view"] .digital-content-items,
  body[data-active-view="member-portal-view"] .digital-content-empty,
  body[data-active-view="member-portal-view"] .digital-content-signoff,
  body[data-active-view="member-portal-view"] .social-panel-content {
    margin-left: 40px;
  }

  body[data-active-view="member-portal-view"] .social-panel-content {
    margin-left: 18px;
  }

  body[data-active-view="member-portal-view"] .digital-content-items,
  body[data-active-view="member-portal-view"] .digital-content-empty,
  body[data-active-view="member-portal-view"] .social-panel-content {
    width: calc(100% - 40px);
    max-width: none;
  }

  body[data-active-view="member-portal-view"] .social-panel-content {
    width: calc(100% - 18px);
  }

  body[data-active-view="member-portal-view"] .family-panel {
    touch-action: pan-y;
  }

  body[data-active-view="member-portal-view"] .family-navigation-actions {
    width: calc(100% - 36px);
    margin: auto 18px 24px;
  }

  body[data-active-view="member-portal-view"] .family-back-button,
  body[data-active-view="member-portal-view"] .family-next-button {
    width: auto;
    margin: 0;
  }
}

@media (max-width: 520px) {
  body[data-active-view="member-portal-view"] .member-portal-grid .member-details > .section-heading,
  body[data-active-view="member-portal-view"] .fee-summary-screen > .member-summary > .section-heading,
  body[data-active-view="member-portal-view"] .digital-card-section > .section-heading,
  body[data-active-view="member-portal-view"] .family-panel > .section-heading,
  body[data-active-view="member-portal-view"] .club-life > .section-heading,
  body[data-active-view="member-portal-view"] .campaign-studio > .section-heading,
  body[data-active-view="member-portal-view"] .digital-content-panel > .section-heading,
  body[data-active-view="member-portal-view"] .social-panel > .section-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  body[data-active-view="member-portal-view"] .member-portal-grid .member-details > .section-heading .cai-unified-pill,
  body[data-active-view="member-portal-view"] .fee-summary-screen > .member-summary > .section-heading .cai-unified-pill,
  body[data-active-view="member-portal-view"] .digital-card-section > .section-heading .cai-unified-pill,
  body[data-active-view="member-portal-view"] .family-panel > .section-heading .cai-unified-pill,
  body[data-active-view="member-portal-view"] .club-life > .section-heading .cai-unified-pill,
  body[data-active-view="member-portal-view"] .campaign-studio > .section-heading .cai-unified-pill,
  body[data-active-view="member-portal-view"] .digital-content-panel > .section-heading .cai-unified-pill,
  body[data-active-view="member-portal-view"] .social-panel > .section-heading .cai-unified-pill {
    justify-self: end;
    margin-top: 16px;
  }
}

@media (max-width: 860px) {
  body[data-active-view="member-portal-view"] .fee-detail-screen {
    padding: 0 0 28px;
  }

  body[data-active-view="member-portal-view"] .fee-detail-header {
    display: grid;
    gap: 18px;
    margin: 0 0 24px;
    padding: 28px 18px 0 60px;
  }

  body[data-active-view="member-portal-view"] .fee-detail-copy p {
    margin: 0;
  }

  body[data-active-view="member-portal-view"] .fee-detail-copy h2 {
    margin: 7px 0 0;
    font-size: 1.7rem;
    line-height: 1.08;
    white-space: nowrap;
  }

  body[data-active-view="member-portal-view"] .fee-detail-actions {
    display: block;
    margin-left: -46px;
  }

  body[data-active-view="member-portal-view"] .fee-history-toggle {
    display: flex;
    justify-content: space-between;
    width: calc(100% + 46px);
    min-height: 48px;
    margin: 0;
  }

  body[data-active-view="member-portal-view"] .fee-back-button {
    display: none;
  }

  body[data-active-view="member-portal-view"] .fee-detail-table {
    margin-inline: 12px;
  }

  body[data-active-view="member-portal-view"] .fee-detail-table table {
    width: 100%;
    min-width: 420px;
    table-layout: fixed;
  }

  body[data-active-view="member-portal-view"] .fee-detail-table th,
  body[data-active-view="member-portal-view"] .fee-detail-table td {
    padding: 9px 7px;
    font-size: .76rem;
    overflow-wrap: anywhere;
  }

  body[data-active-view="member-portal-view"] .fee-detail-table th:nth-child(1),
  body[data-active-view="member-portal-view"] .fee-detail-table td:nth-child(1) { width: 22%; }
  body[data-active-view="member-portal-view"] .fee-detail-table th:nth-child(2),
  body[data-active-view="member-portal-view"] .fee-detail-table td:nth-child(2) { width: 22%; }
  body[data-active-view="member-portal-view"] .fee-detail-table th:nth-child(3),
  body[data-active-view="member-portal-view"] .fee-detail-table td:nth-child(3) { width: 22%; }
  body[data-active-view="member-portal-view"] .fee-detail-table th:nth-child(4),
  body[data-active-view="member-portal-view"] .fee-detail-table td:nth-child(4) { width: 24%; }
  body[data-active-view="member-portal-view"] .fee-detail-table th:nth-child(5),
  body[data-active-view="member-portal-view"] .fee-detail-table td:nth-child(5) { width: 10%; }

  body[data-active-view="member-portal-view"] .fee-detail-table th {
    white-space: normal;
  }

  body[data-active-view="member-portal-view"] .digital-card-section .digital-card {
    margin-top: 128px;
  }

  body[data-active-view="member-portal-view"].is-honorary-profile .digital-card-section .digital-card {
    margin-top: 28px;
  }

  body[data-active-view="member-portal-view"] .member-portal-grid .member-details {
    padding-top: 0;
  }

  body[data-active-view="member-portal-view"] .club-life > .section-heading {
    padding-left: 96px;
  }

  body[data-active-view="member-portal-view"] .member-home-hero-title {
    top: 28px;
    left: 108px;
  }
}

/* Hinchas keep the member navigation visible, with member-only areas clearly inactive. */
body[data-active-view="member-portal-view"].is-fan-profile .member-sidebar .app-nav-button.is-fan-disabled,
body[data-active-view="member-portal-view"].is-fan-profile .member-sidebar .app-nav-button.is-fan-disabled:hover {
  border-color: #292929;
  background: #111;
  color: #777;
  cursor: not-allowed;
}

body[data-active-view="member-portal-view"].is-fan-profile .member-sidebar .app-nav-button.is-fan-disabled .nav-icon,
body[data-active-view="member-portal-view"].is-fan-profile .member-sidebar .app-nav-button.is-fan-disabled::after {
  color: #786f2e;
  opacity: .65;
  transform: none;
}

.history-layout { display: grid; grid-template-columns: minmax(320px, .8fr) minmax(480px, 1.2fr); gap: 18px; margin-top: 18px; }
.history-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.history-form .history-wide { grid-column: 1 / -1; }
.history-authorities-panel { margin-top: 18px; }
.history-actions { display: flex; gap: 10px; align-items: center; }
.history-actions button { margin: 0; }
.history-layout .table-wrap, .historical-authorities-panel .table-wrap { overflow-x: auto; }
.history-layout table, .historical-authorities-panel table { min-width: 720px; }
@media (max-width: 900px) {
  .history-layout { grid-template-columns: 1fr; }
  .history-form { grid-template-columns: 1fr; }
  .history-form .history-wide { grid-column: auto; }
}

/* Use the approved standalone artwork for the digital-content panel in every layout. */
body[data-active-view="member-portal-view"] .digital-content-panel {
  background-image: url("./assets/digital-content-background.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Give every member portal section the same proportion-safe artwork. */
body[data-active-view="member-portal-view"] .member-portal-grid,
body[data-active-view="member-portal-view"] .member-fees-content,
body[data-active-view="member-portal-view"] .digital-card-section,
body[data-active-view="member-portal-view"] .family-panel,
body[data-active-view="member-portal-view"] .club-life,
body[data-active-view="member-portal-view"] .campaign-studio,
body[data-active-view="member-portal-view"] .social-panel,
body[data-active-view="member-portal-view"] .digital-content-panel {
  background-image: url("./assets/digital-content-background-honorary.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Keep honorary headings in one readable column, clear of the artwork's dark corner. */
@media (min-width: 861px) {
  body[data-active-view="member-portal-view"].is-honorary-profile .member-portal-grid .member-details > .section-heading p,
  body[data-active-view="member-portal-view"].is-honorary-profile .member-portal-grid .member-details > .section-heading h2,
  body[data-active-view="member-portal-view"].is-honorary-profile .fee-summary-screen > .member-summary > .section-heading p,
  body[data-active-view="member-portal-view"].is-honorary-profile .fee-summary-screen > .member-summary > .section-heading h2,
  body[data-active-view="member-portal-view"].is-honorary-profile .digital-card-section > .section-heading p,
  body[data-active-view="member-portal-view"].is-honorary-profile .digital-card-section > .section-heading h2,
  body[data-active-view="member-portal-view"].is-honorary-profile .family-panel > .section-heading p,
  body[data-active-view="member-portal-view"].is-honorary-profile .family-panel > .section-heading h2,
  body[data-active-view="member-portal-view"].is-honorary-profile .campaign-studio > .section-heading p,
  body[data-active-view="member-portal-view"].is-honorary-profile .campaign-studio > .section-heading h2 {
    margin-left: 72px;
  }

  body[data-active-view="member-portal-view"].is-honorary-profile .digital-content-panel > .section-heading p,
  body[data-active-view="member-portal-view"].is-honorary-profile .digital-content-panel > .section-heading h2,
  body[data-active-view="member-portal-view"].is-honorary-profile .social-panel > .section-heading p,
  body[data-active-view="member-portal-view"].is-honorary-profile .social-panel > .section-heading h2 {
    margin-left: 64px;
  }

  body[data-active-view="member-portal-view"].is-honorary-profile .club-life > .section-heading {
    padding: 96px 32px 22px 60px;
  }

  body[data-active-view="member-portal-view"].is-honorary-profile .club-life > .section-heading p,
  body[data-active-view="member-portal-view"].is-honorary-profile .club-life > .section-heading h2 {
    margin-left: 36px;
  }
}

@media (max-width: 860px) {
  body[data-active-view="member-portal-view"].is-honorary-profile .member-portal-grid .member-details > .section-heading,
  body[data-active-view="member-portal-view"].is-honorary-profile .fee-summary-screen > .member-summary > .section-heading,
  body[data-active-view="member-portal-view"].is-honorary-profile .digital-card-section > .section-heading,
  body[data-active-view="member-portal-view"].is-honorary-profile .family-panel > .section-heading,
  body[data-active-view="member-portal-view"].is-honorary-profile .club-life > .section-heading,
  body[data-active-view="member-portal-view"].is-honorary-profile .campaign-studio > .section-heading,
  body[data-active-view="member-portal-view"].is-honorary-profile .digital-content-panel > .section-heading,
  body[data-active-view="member-portal-view"].is-honorary-profile .social-panel > .section-heading {
    padding-left: 72px;
  }

  body[data-active-view="member-portal-view"].is-honorary-profile .member-portal-grid .member-details > .section-heading p,
  body[data-active-view="member-portal-view"].is-honorary-profile .member-portal-grid .member-details > .section-heading h2,
  body[data-active-view="member-portal-view"].is-honorary-profile .fee-summary-screen > .member-summary > .section-heading p,
  body[data-active-view="member-portal-view"].is-honorary-profile .fee-summary-screen > .member-summary > .section-heading h2,
  body[data-active-view="member-portal-view"].is-honorary-profile .digital-card-section > .section-heading p,
  body[data-active-view="member-portal-view"].is-honorary-profile .digital-card-section > .section-heading h2,
  body[data-active-view="member-portal-view"].is-honorary-profile .family-panel > .section-heading p,
  body[data-active-view="member-portal-view"].is-honorary-profile .family-panel > .section-heading h2,
  body[data-active-view="member-portal-view"].is-honorary-profile .club-life > .section-heading p,
  body[data-active-view="member-portal-view"].is-honorary-profile .club-life > .section-heading h2,
  body[data-active-view="member-portal-view"].is-honorary-profile .campaign-studio > .section-heading p,
  body[data-active-view="member-portal-view"].is-honorary-profile .campaign-studio > .section-heading h2,
  body[data-active-view="member-portal-view"].is-honorary-profile .digital-content-panel > .section-heading p,
  body[data-active-view="member-portal-view"].is-honorary-profile .digital-content-panel > .section-heading h2,
  body[data-active-view="member-portal-view"].is-honorary-profile .social-panel > .section-heading p,
  body[data-active-view="member-portal-view"].is-honorary-profile .social-panel > .section-heading h2 {
    margin-left: 0;
  }
}

/* Apply the honorary heading reference to regular members and fans. */
@media (min-width: 861px) {
  body[data-active-view="member-portal-view"]:not(.is-honorary-profile) .member-portal-grid .member-details > .section-heading p,
  body[data-active-view="member-portal-view"]:not(.is-honorary-profile) .fee-summary-screen > .member-summary > .section-heading p,
  body[data-active-view="member-portal-view"]:not(.is-honorary-profile) .digital-card-section > .section-heading p,
  body[data-active-view="member-portal-view"]:not(.is-honorary-profile) .family-panel > .section-heading p,
  body[data-active-view="member-portal-view"]:not(.is-honorary-profile) .club-life > .section-heading p,
  body[data-active-view="member-portal-view"]:not(.is-honorary-profile) .campaign-studio > .section-heading p,
  body[data-active-view="member-portal-view"]:not(.is-honorary-profile) .digital-content-panel > .section-heading p,
  body[data-active-view="member-portal-view"]:not(.is-honorary-profile) .social-panel > .section-heading p {
    margin-left: 72px;
    font-size: 1rem;
    font-weight: 850;
    letter-spacing: .04em;
  }

  body[data-active-view="member-portal-view"]:not(.is-honorary-profile) .member-portal-grid .member-details > .section-heading h2,
  body[data-active-view="member-portal-view"]:not(.is-honorary-profile) .fee-summary-screen > .member-summary > .section-heading h2,
  body[data-active-view="member-portal-view"]:not(.is-honorary-profile) .digital-card-section > .section-heading h2,
  body[data-active-view="member-portal-view"]:not(.is-honorary-profile) .family-panel > .section-heading h2,
  body[data-active-view="member-portal-view"]:not(.is-honorary-profile) .club-life > .section-heading h2,
  body[data-active-view="member-portal-view"]:not(.is-honorary-profile) .campaign-studio > .section-heading h2,
  body[data-active-view="member-portal-view"]:not(.is-honorary-profile) .digital-content-panel > .section-heading h2,
  body[data-active-view="member-portal-view"]:not(.is-honorary-profile) .social-panel > .section-heading h2 {
    margin-left: 72px;
    font-size: 1.7rem;
    line-height: 1.15;
  }

  body[data-active-view="member-portal-view"]:not(.is-honorary-profile) .digital-content-panel > .section-heading p,
  body[data-active-view="member-portal-view"]:not(.is-honorary-profile) .digital-content-panel > .section-heading h2,
  body[data-active-view="member-portal-view"]:not(.is-honorary-profile) .social-panel > .section-heading p,
  body[data-active-view="member-portal-view"]:not(.is-honorary-profile) .social-panel > .section-heading h2 {
    margin-left: 64px;
  }

  body[data-active-view="member-portal-view"]:not(.is-honorary-profile) .club-life > .section-heading {
    padding: 96px 32px 22px 60px;
  }

  body[data-active-view="member-portal-view"]:not(.is-honorary-profile) .club-life > .section-heading p,
  body[data-active-view="member-portal-view"]:not(.is-honorary-profile) .club-life > .section-heading h2 {
    margin-left: 36px;
  }
}

@media (max-width: 860px) {
  body[data-active-view="member-portal-view"]:not(.is-honorary-profile) .member-portal-grid .member-details > .section-heading,
  body[data-active-view="member-portal-view"]:not(.is-honorary-profile) .fee-summary-screen > .member-summary > .section-heading,
  body[data-active-view="member-portal-view"]:not(.is-honorary-profile) .digital-card-section > .section-heading,
  body[data-active-view="member-portal-view"]:not(.is-honorary-profile) .family-panel > .section-heading,
  body[data-active-view="member-portal-view"]:not(.is-honorary-profile) .club-life > .section-heading,
  body[data-active-view="member-portal-view"]:not(.is-honorary-profile) .campaign-studio > .section-heading,
  body[data-active-view="member-portal-view"]:not(.is-honorary-profile) .digital-content-panel > .section-heading,
  body[data-active-view="member-portal-view"]:not(.is-honorary-profile) .social-panel > .section-heading {
    padding-left: 72px;
  }

  body[data-active-view="member-portal-view"]:not(.is-honorary-profile) .member-portal-grid .member-details > .section-heading p,
  body[data-active-view="member-portal-view"]:not(.is-honorary-profile) .fee-summary-screen > .member-summary > .section-heading p,
  body[data-active-view="member-portal-view"]:not(.is-honorary-profile) .digital-card-section > .section-heading p,
  body[data-active-view="member-portal-view"]:not(.is-honorary-profile) .family-panel > .section-heading p,
  body[data-active-view="member-portal-view"]:not(.is-honorary-profile) .club-life > .section-heading p,
  body[data-active-view="member-portal-view"]:not(.is-honorary-profile) .campaign-studio > .section-heading p,
  body[data-active-view="member-portal-view"]:not(.is-honorary-profile) .digital-content-panel > .section-heading p,
  body[data-active-view="member-portal-view"]:not(.is-honorary-profile) .social-panel > .section-heading p {
    margin-left: 0;
    font-size: .92rem;
  }

  body[data-active-view="member-portal-view"]:not(.is-honorary-profile) .member-portal-grid .member-details > .section-heading h2,
  body[data-active-view="member-portal-view"]:not(.is-honorary-profile) .fee-summary-screen > .member-summary > .section-heading h2,
  body[data-active-view="member-portal-view"]:not(.is-honorary-profile) .digital-card-section > .section-heading h2,
  body[data-active-view="member-portal-view"]:not(.is-honorary-profile) .family-panel > .section-heading h2,
  body[data-active-view="member-portal-view"]:not(.is-honorary-profile) .club-life > .section-heading h2,
  body[data-active-view="member-portal-view"]:not(.is-honorary-profile) .campaign-studio > .section-heading h2,
  body[data-active-view="member-portal-view"]:not(.is-honorary-profile) .digital-content-panel > .section-heading h2,
  body[data-active-view="member-portal-view"]:not(.is-honorary-profile) .social-panel > .section-heading h2 {
    margin-left: 0;
    font-size: 1.7rem;
    line-height: 1.08;
  }
}

/* Give regular members and fans a more readable desktop fee summary. */
@media (min-width: 861px) {
  body[data-active-view="member-portal-view"]:not(.is-honorary-profile) .fee-summary-screen > .member-summary .member-metrics {
    padding-inline: 18px;
  }

  body[data-active-view="member-portal-view"]:not(.is-honorary-profile) .fee-summary-screen > .member-summary .member-metrics div {
    min-height: 66px;
    padding-block: 12px;
  }

  body[data-active-view="member-portal-view"]:not(.is-honorary-profile) .fee-summary-screen > .member-summary .member-metrics span {
    gap: 12px;
    font-size: 1.12rem;
  }

  body[data-active-view="member-portal-view"]:not(.is-honorary-profile) .fee-summary-screen > .member-summary .member-metrics span svg {
    width: 24px;
    height: 24px;
  }

  body[data-active-view="member-portal-view"]:not(.is-honorary-profile) .fee-summary-screen > .member-summary .member-metrics strong {
    font-size: 1.2rem;
    font-weight: 800;
  }

  body[data-active-view="member-portal-view"]:not(.is-honorary-profile) .fee-summary-screen .annual-fees > .fee-summary-view > .section-heading p {
    font-size: 1.08rem;
  }

  body[data-active-view="member-portal-view"]:not(.is-honorary-profile) .fee-summary-screen .annual-fees > .fee-summary-view > .section-heading h2 {
    font-size: 2rem;
  }

  body[data-active-view="member-portal-view"]:not(.is-honorary-profile) .fee-summary-screen .annual-fees > .fee-summary-view > .section-heading > strong {
    font-size: 1.25rem;
  }

  body[data-active-view="member-portal-view"]:not(.is-honorary-profile) .fee-summary-screen .annual-progress {
    height: 18px;
  }
}

/* Use the honorary family navigation model for regular members and fans. */
@media (min-width: 861px) {
  body[data-active-view="member-portal-view"]:not(.is-honorary-profile) .family-panel {
    display: flex;
    flex-direction: column;
    min-height: min(760px, calc(100dvh - 44px));
  }

  body[data-active-view="member-portal-view"]:not(.is-honorary-profile) .family-circle-switch {
    margin: -52px 32px 22px 72px;
  }

  body[data-active-view="member-portal-view"]:not(.is-honorary-profile) .family-circle-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 132px;
    min-height: 54px;
    width: max-content;
    padding-inline: 20px;
    font-size: 1rem;
  }

  body[data-active-view="member-portal-view"]:not(.is-honorary-profile) .family-navigation-actions {
    margin-top: auto;
  }
}

@media (max-width: 860px) {
  body[data-active-view="member-portal-view"]:not(.is-honorary-profile) .family-panel {
    display: flex;
    flex-direction: column;
    min-height: min(760px, calc(100dvh - 44px));
  }

  body[data-active-view="member-portal-view"]:not(.is-honorary-profile) .family-circle-tab {
    min-width: 132px;
    min-height: 46px;
    padding-inline: 20px;
    font-size: .9rem;
  }

  body[data-active-view="member-portal-view"]:not(.is-honorary-profile) .family-navigation-actions {
    margin-top: auto;
  }
}

/* Match the honorary family/category tabs on the desktop layout. */
@media (min-width: 861px) {
  body[data-active-view="member-portal-view"].is-honorary-profile .family-circle-switch {
    margin: -52px 32px 22px 72px;
  }

  body[data-active-view="member-portal-view"].is-honorary-profile .family-circle-tab[data-family-mode="family"],
  body[data-active-view="member-portal-view"].is-honorary-profile .family-circle-tab[data-family-mode="category"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 132px;
    min-height: 54px;
    padding-inline: 20px;
    font-size: 1rem;
  }
}

/* Keep the honorary category card focused on its actionable content. */
body[data-active-view="member-portal-view"].is-honorary-profile .family-circle-panel .family-circle-description,
body[data-active-view="member-portal-view"].is-honorary-profile .family-circle-panel #family-circle-note,
body[data-active-view="member-portal-view"].is-honorary-profile .family-circle-panel .family-circle-heading > span,
body[data-active-view="member-portal-view"].is-honorary-profile .family-circle-panel .family-circle-list .family-empty {
  display: none !important;
}

body[data-active-view="member-portal-view"].is-honorary-profile #family-circle-note {
  color: #000;
}

/* Keep regular member and fan category groups focused on the controls. */
body[data-active-view="member-portal-view"]:not(.is-honorary-profile) .family-circle-panel .family-circle-description,
body[data-active-view="member-portal-view"]:not(.is-honorary-profile) .family-circle-panel #family-circle-note,
body[data-active-view="member-portal-view"]:not(.is-honorary-profile) .family-circle-panel .family-circle-heading > span,
body[data-active-view="member-portal-view"]:not(.is-honorary-profile) .family-circle-panel .family-circle-list .family-empty {
  display: none !important;
}

/* These helper messages are intentionally omitted from every family-group stage. */
body[data-active-view="member-portal-view"] .family-circle-panel .family-circle-description,
body[data-active-view="member-portal-view"] .family-circle-panel #family-circle-note,
body[data-active-view="member-portal-view"] .family-circle-panel .family-circle-heading > span,
body[data-active-view="member-portal-view"] .family-circle-panel .family-circle-list .family-empty {
  display: none !important;
}

/* Keep team and band members inside a bounded, two-column desktop list. */
@media (min-width: 861px) {
  body[data-active-view="member-portal-view"] .family-circle-panel[data-family-mode="category"] .family-circle-form,
  body[data-active-view="member-portal-view"] .family-circle-panel[data-family-mode="mayor"] .family-circle-form,
  body[data-active-view="member-portal-view"] .family-circle-panel[data-family-mode="band"] .family-circle-form {
    grid-template-columns: minmax(0, 1fr) 190px;
    align-items: end;
  }

  body[data-active-view="member-portal-view"] .family-circle-panel[data-family-mode="category"] .family-circle-category-field,
  body[data-active-view="member-portal-view"] .family-circle-panel[data-family-mode="mayor"] .family-circle-search-field,
  body[data-active-view="member-portal-view"] .family-circle-panel[data-family-mode="band"] .family-circle-search-field {
    grid-column: 1;
  }

  body[data-active-view="member-portal-view"] .family-circle-panel[data-family-mode="category"] .family-category-join-button,
  body[data-active-view="member-portal-view"] .family-circle-panel[data-family-mode="mayor"] .family-circle-add-button,
  body[data-active-view="member-portal-view"] .family-circle-panel[data-family-mode="band"] .family-circle-add-button {
    grid-column: 2;
    width: 190px;
    margin: 0;
  }

  body[data-active-view="member-portal-view"] .family-circle-panel[data-family-mode="category"] .family-circle-list,
  body[data-active-view="member-portal-view"] .family-circle-panel[data-family-mode="mayor"] .family-circle-list,
  body[data-active-view="member-portal-view"] .family-circle-panel[data-family-mode="band"] .family-circle-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-height: 128px;
    max-height: 280px;
    overflow-y: auto;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, .58);
    background: transparent;
    scrollbar-color: rgba(118, 84, 13, .6) transparent;
  }
}

@media (max-width: 860px) {
  body[data-active-view="member-portal-view"] .family-circle-panel[data-family-mode="category"] .family-circle-list,
  body[data-active-view="member-portal-view"] .family-circle-panel[data-family-mode="mayor"] .family-circle-list,
  body[data-active-view="member-portal-view"] .family-circle-panel[data-family-mode="band"] .family-circle-list {
    grid-template-columns: 1fr;
    min-height: 96px;
    max-height: 240px;
    overflow-y: auto;
    padding: 10px;
    border: 1px solid rgba(255, 255, 255, .58);
    background: transparent;
    scrollbar-color: rgba(118, 84, 13, .6) transparent;
  }
}

@media (min-width: 861px) {
  body[data-active-view="member-portal-view"].is-honorary-profile .family-circle-panel {
    padding-top: 10px;
  }
}

/* Digital content uses a menu card followed by a separate category card. */
.digital-content-categories[hidden],
.digital-content-items[hidden],
.digital-content-empty[hidden],
.digital-content-category-title[hidden],
.digital-content-pagination[hidden],
.digital-content-back[hidden],
.digital-content-next[hidden] {
  display: none !important;
}

.digital-content-categories {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  width: min(100%, 620px);
  margin-left: 36px;
}

.digital-content-category {
  min-height: 76px;
  padding: 13px 18px;
}

.digital-content-category-title {
  margin: 10px 0 0 64px;
  color: #4b463d;
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.2;
}

.digital-content-panel.is-category-view .digital-content-items {
  flex: 1 1 auto;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-content: start;
  width: calc(100% - 72px);
  max-height: min(54vh, 500px);
  margin: 0 36px;
  padding: 2px 8px 8px 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(118, 84, 13, .58) transparent;
  animation: digital-content-slide-in .26s ease both;
}

.digital-content-panel.is-category-view .digital-content-item-image {
  height: 250px;
  min-height: 0;
  padding: 8px;
  box-sizing: border-box;
}

.digital-content-panel.is-category-view .digital-content-item-image img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
}

.digital-content-download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  margin-top: 4px;
  padding: 0 14px;
  border: 1px solid rgba(184, 138, 22, .58);
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  text-decoration: none;
}

.digital-content-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: auto 36px 0;
  padding-top: 26px;
}

.digital-content-footer .digital-content-signoff {
  margin: 0;
  padding: 0;
}

.digital-content-pagination {
  display: inline-flex;
  align-items: stretch;
  width: 228px;
  margin-right: 64px;
  overflow: hidden;
  border: 1px solid rgba(184, 138, 22, .62);
  border-radius: 999px;
  background: rgba(255, 255, 255, .58);
}

.digital-content-back,
.digital-content-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  min-width: 0;
  padding: 0 15px;
  border: 0;
  background: transparent;
  color: #76540d;
  font: inherit;
  font-size: .82rem;
  font-weight: 850;
  cursor: pointer;
}

.digital-content-pagination:not(.is-single) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.digital-content-pagination.is-single {
  width: auto;
}

.digital-content-next { border-left: 1px solid rgba(184, 138, 22, .5); }
.digital-content-pagination.is-single .digital-content-next { display: none; }
.digital-content-back:hover,
.digital-content-next:hover { background: rgba(255, 255, 255, .82); }
.digital-content-back svg,
.digital-content-next svg { width: 16px; height: 16px; }

.digital-content-panel:not(.is-category-view) .digital-content-categories {
  animation: digital-content-slide-in .26s ease both;
}

@keyframes digital-content-slide-in {
  from { opacity: .35; transform: translateX(22px); }
  to { opacity: 1; transform: translateX(0); }
}

@media (max-width: 860px) {
  .digital-content-categories {
    width: calc(100% - 36px);
    margin-inline: 18px;
  }

  .digital-content-category-title {
    margin: 8px 0 0;
    font-size: .94rem;
  }

  .digital-content-panel.is-category-view .digital-content-items {
    grid-template-columns: minmax(0, 1fr);
    width: calc(100% - 36px);
    max-height: calc(100svh - 250px);
    margin-inline: 18px;
    padding-right: 5px;
  }

  .digital-content-panel.is-category-view .digital-content-item-image {
    height: 300px;
  }

  .digital-content-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 168px;
    align-items: end;
    gap: 8px;
    margin: auto 12px 0 18px;
  }

  .digital-content-pagination {
    width: 168px;
    margin-right: 0;
    justify-self: end;
  }

  .digital-content-pagination:not(.is-single) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .digital-content-back,
  .digital-content-next {
    gap: 5px;
    min-height: 36px;
    padding-inline: 5px;
    font-size: .76rem;
    white-space: nowrap;
  }

  .digital-content-back svg,
  .digital-content-next svg {
    width: 15px;
    height: 15px;
  }

  .digital-content-footer .digital-content-signoff {
    display: grid;
    gap: 3px;
    margin-left: 0 !important;
    min-width: 0;
    justify-self: start;
  }

  .digital-content-footer .digital-content-signoff span {
    font-size: .7rem;
    letter-spacing: .2em;
    line-height: 1.2;
  }

  .digital-content-footer .digital-content-signoff strong {
    font-size: .72rem;
    letter-spacing: .1em;
    line-height: 1.2;
    white-space: nowrap;
  }
}

@media (max-width: 350px) {
  .digital-content-footer {
    grid-template-columns: minmax(0, 1fr) 150px;
    gap: 5px;
    margin-left: 12px;
  }

  .digital-content-pagination {
    width: 150px;
  }

  .digital-content-back,
  .digital-content-next {
    gap: 4px;
    padding-inline: 4px;
    font-size: .72rem;
  }

  .digital-content-back svg,
  .digital-content-next svg {
    width: 14px;
    height: 14px;
  }
}