.ana-logo img {
  display: block;
  width: 94px;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 5px #0b1b321f);
}

.ana-logo.compact img {
  width: 205px;
}

/* Cabeçalho uniforme em todos os ecrãs */
.topbar{align-items:flex-start}.topbar-brand{display:flex;min-width:0;flex:1;flex-direction:column;align-items:center;text-align:center}.topbar-brand .ana-logo img{width:94px}.topbar-brand .ana-logo small{display:block;margin-top:5px;font-size:7px;font-weight:850;letter-spacing:.06em;white-space:nowrap}.topbar-brand .page-title{margin:9px 0 5px;font-size:24px;line-height:1.1}.topbar>.icon-button,.topbar>.notification{flex:0 0 48px;margin-top:8px}
body.dark-mode .topbar-brand .ana-logo small{color:#e8edf5}
@media(max-width:390px){.topbar-brand .page-title{font-size:21px}.topbar-brand .ana-logo img{width:84px}.topbar-brand .ana-logo small{font-size:6px}}

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.app-shell {
  width: 100%;
  max-width: 520px;
  min-width: 0;
}

.login-shell {
  display: flex;
  align-items: center;
  justify-content: center;
}

img,
input,
button {
  max-width: 100%;
}

.login-card,
.login-card form,
.field {
  width: 100%;
  min-width: 0;
  overflow: hidden;
}

.field input {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  flex: 1 1 0%;
  text-overflow: ellipsis;
}

.field > span,
.field > button {
  flex: 0 0 auto;
}

.forgot {
  display: block;
  width: 100%;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: right;
}

.register,
.demo-note {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.login-version {
  margin: 10px 0 0;
  color: #7b8492;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  text-align: center;
}

.primary-button {
  padding-right: 12px;
  padding-left: 12px;
  font-size: clamp(15px, 4.7vw, 18px);
  white-space: normal;
}

.share-card {
  padding: 22px;
  border-radius: 22px;
  color: #fff;
  background:
    radial-gradient(circle at 80% 15%, #174b9538, transparent 35%),
    linear-gradient(145deg, #080d14, #142234);
  box-shadow: 0 14px 28px #10172228;
}

.share-card-heading,
.share-member {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.share-card-heading {
  padding-bottom: 18px;
  border-bottom: 1px solid #ffffff1f;
}

.share-card-heading .ana-logo img {
  width: 105px;
}

.share-card-heading > span {
  color: #b7c0ce;
  font-size: 10px;
  text-align: right;
}

.share-card-heading > span b {
  display: block;
  margin-bottom: 4px;
  color: #58a0ff;
  font-size: 14px;
}

.share-member {
  padding: 20px 0 6px;
}

.share-member > div:first-child {
  display: grid;
  gap: 4px;
}

.share-member .share-member-details {
  display: flex;
  align-items: center;
  gap: 12px;
}

.share-member-details > div:last-child {
  display: grid;
  gap: 4px;
}

.member-photo {
  position: relative;
  display: grid;
  float: right;
  width: 82px;
  height: 82px;
  margin: 0 0 12px 14px;
  place-items: center;
  overflow: hidden;
  border: 3px solid #fff;
  border-radius: 10px;
  color: #fff;
  background:
    radial-gradient(circle at 50% 35%, #8290a2 0 13%, transparent 14%),
    radial-gradient(ellipse at 50% 88%, #697789 0 30%, transparent 31%),
    linear-gradient(145deg, #24384e, #101a27);
  box-shadow: 0 7px 16px #0007;
}

.member-photo span {
  position: absolute;
  opacity: 0;
}

.member-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
}

.member-photo-small {
  float: none;
  flex: 0 0 auto;
  width: 62px;
  height: 62px;
  margin: 0;
  border-width: 2px;
  box-shadow: 0 5px 12px #0006;
}

.digital-card {
  position: relative;
  width: 100%;
  aspect-ratio: 1.586 / 1;
  min-height: 0;
  padding: 15px;
  overflow: hidden;
}

.digital-card > .ana-logo {
  position: absolute;
  top: 7%;
  left: 4%;
  width: 30%;
}

.digital-card > .ana-logo img {
  width: 100%;
}

.digital-card > strong {
  position: absolute;
  top: 8%;
  right: 4%;
  float: none;
  font-size: clamp(10px, 3.2vw, 16px);
  line-height: 1.05;
}

.digital-card > p {
  position: absolute;
  top: 41%;
  left: 4%;
  margin: 0;
  font-size: clamp(7px, 2.1vw, 11px);
  letter-spacing: .2px;
}

.digital-card > .member-photo {
  position: absolute;
  top: 39%;
  right: 4%;
  float: none;
  width: 23%;
  height: auto;
  aspect-ratio: 1 / 1;
  margin: 0;
  border-width: 2px;
}

.digital-card > h2 {
  position: absolute;
  top: 57%;
  bottom: auto;
  left: 4%;
  margin: 0;
  max-width: 62%;
  font-size: clamp(11px, 3.3vw, 17px);
  line-height: 1.05;
}

.digital-card > h2::before {
  content: "NOME";
  display: block;
  margin-bottom: 3px;
  color: #aeb4bd;
  font-size: .52em;
  font-weight: 500;
  letter-spacing: .5px;
}

.member-name {
  overflow: hidden;
  overflow-wrap: anywhere;
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.digital-card .member-name-medium {
  font-size: clamp(10px, 2.9vw, 15px);
}

.digital-card .member-name-long {
  font-size: clamp(9px, 2.5vw, 13px);
  letter-spacing: -.15px;
  line-height: 1;
}

.share-card .member-name-medium {
  font-size: 8px;
}

.share-card .member-name-long {
  max-width: 108px;
  font-size: 7px;
  letter-spacing: -.1px;
  line-height: 1;
}

.digital-card > div:last-child {
  position: absolute;
  right: 4%;
  bottom: 6%;
  left: 4%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.digital-card > div:last-child span {
  min-width: 0;
  font-size: clamp(6px, 1.8vw, 9px);
}

.digital-card > div:last-child b {
  margin-top: 3px;
  overflow: hidden;
  font-size: clamp(9px, 2.7vw, 14px);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.share-member small {
  margin-top: 8px;
  color: #9ca7b7;
  font-size: 9px;
}

.share-member strong {
  font-size: 18px;
}

.demo-qr {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  grid-template-columns: repeat(9, 1fr);
  gap: 1px;
  width: 112px;
  height: 112px;
  padding: 8px;
  overflow: hidden;
  border: 5px solid #fff;
  border-radius: 9px;
  background: #fff;
}

.demo-qr b {
  background: #fff;
}

.demo-qr b.on {
  background: #071425;
}

.demo-qr i {
  position: absolute;
  z-index: 2;
  width: 28px;
  height: 28px;
  border: 6px solid #071425;
  background: #fff;
  box-shadow: inset 0 0 0 5px #fff, inset 0 0 0 9px #071425;
}

.demo-qr i:nth-child(1) { top: 7px; left: 7px; }
.demo-qr i:nth-child(2) { top: 7px; right: 7px; }
.demo-qr i:nth-child(3) { bottom: 7px; left: 7px; }

.verification-note {
  margin: 15px 0 0;
  color: #c6ced9;
  font-size: 11px;
}

.verification-note span {
  display: inline-grid;
  width: 18px;
  height: 18px;
  margin-right: 5px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #1e9b5d;
}

.share-actions {
  display: grid;
  gap: 11px;
  margin-top: 18px;
}

.share-actions button {
  display: grid;
  grid-template-columns: 42px 1fr;
  width: 100%;
  padding: 15px;
  border: 1px solid #e4e7eb;
  border-radius: 15px;
  color: #111a2b;
  text-align: left;
  background: #fff;
}

.share-actions button > span {
  grid-row: 1 / 3;
  align-self: center;
  color: #0b3e8b;
  font-size: 28px;
}

.share-actions button small {
  margin-top: 3px;
  color: #707783;
}

.share-actions .share-primary {
  border-color: #0b3e8b;
  color: #fff;
  background: #0b3e8b;
}

.share-actions .share-primary span,
.share-actions .share-primary small {
  color: #fff;
}

.share-feedback {
  min-height: 22px;
  margin: 12px 0 0;
  color: #147948;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.share-privacy {
  margin: 5px auto 0;
  max-width: 320px;
  color: #747b86;
  font-size: 11px;
  line-height: 1.45;
  text-align: center;
}

.card-validation-panel {
  display: grid;
  gap: 16px;
  margin-top: 18px;
  padding: 20px;
  border: 1px solid #dfe5ee;
  border-radius: 18px;
  text-align: center;
  background: #f8fbff;
}

.card-validation-panel small {
  color: #df171e;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .1em;
}

.card-validation-panel h2 {
  margin: 4px 0 6px;
  font-size: 20px;
}

.card-validation-panel p {
  margin: 0;
  color: #667085;
  font-size: 12px;
  line-height: 1.5;
}

.card-validation-panel img,
.card-validation-panel canvas {
  width: 220px;
  height: 220px;
  max-width: 100%;
  margin: 0 auto;
  border: 10px solid #fff;
  border-radius: 18px;
  box-shadow: 0 10px 24px #14243b18;
}

.card-validation-panel .card-validation-qr {
  display: grid;
  place-items: center;
}

.card-validation-panel code {
  display: block;
  padding: 10px;
  border-radius: 10px;
  overflow-wrap: anywhere;
  color: #0b3e8b;
  font-size: 10px;
  background: #edf5ff;
}

.card-validation-panel .qr-feedback {
  margin-top: -6px;
  color: #b42318;
  font-size: 11px;
  font-weight: 800;
}

.share-card {
  position: relative;
  width: 100%;
  aspect-ratio: 1.586 / 1;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

.share-card .share-card-heading {
  position: absolute;
  top: 11px;
  right: 14px;
  left: 14px;
  padding-bottom: 8px;
}

.share-card .share-card-heading .ana-logo img {
  width: 72px;
}

.share-card .share-card-heading > span {
  font-size: 8px;
}

.share-card .share-card-heading > span b {
  margin-bottom: 2px;
  font-size: 11px;
}

.share-card .share-member {
  position: absolute;
  top: 64px;
  right: 14px;
  left: 14px;
  padding: 0;
}

.share-card .member-photo-small {
  width: 56px;
  height: 56px;
}

.share-card .share-member small {
  margin-top: 2px;
  font-size: 6px;
}

.share-card .share-member strong {
  display: block;
  max-width: 105px;
  font-size: 9px;
  line-height: 1.05;
}

.share-card .demo-qr {
  width: 76px;
  height: 76px;
  padding: 5px;
  border-width: 4px;
  border-radius: 7px;
}

.share-card .demo-qr i {
  width: 20px;
  height: 20px;
  border-width: 4px;
  box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 6px #071425;
}

.share-card .demo-qr i:nth-child(1) { top: 4px; left: 4px; }
.share-card .demo-qr i:nth-child(2) { top: 4px; right: 4px; }
.share-card .demo-qr i:nth-child(3) { bottom: 4px; left: 4px; }

.share-card .verification-note {
  position: absolute;
  bottom: 8px;
  left: 14px;
  margin: 0;
  font-size: 8px;
}

.share-card .verification-note span {
  width: 14px;
  height: 14px;
}

.news-section {
  margin-top: 18px;
}

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

.news-card {
  position: relative;
  display: grid;
  grid-template-columns: 38% minmax(0, 1fr) 25px;
  min-height: 150px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 7px 17px #17233a10;
}

.news-visual {
  position: relative;
  display: grid;
  min-width: 0;
  place-items: center;
  overflow: hidden;
  color: #fff;
  isolation: isolate;
}

.news-visual::before,
.news-visual::after {
  content: "";
  position: absolute;
  z-index: -1;
}

.news-visual img {
  width: 72%;
  height: auto;
  filter: drop-shadow(0 6px 7px #0006);
}

.news-visual span {
  font-size: 22px;
  font-weight: 900;
}

.news-assembly {
  background: linear-gradient(145deg, #8b745d, #302c29);
}

.news-assembly::after {
  inset: 58% 0 0;
  background: repeating-linear-gradient(90deg, #171a1f 0 13px, #39414b 14px 25px);
}

.news-event {
  background: radial-gradient(circle at 50% 40%, #465347, transparent 20%), linear-gradient(145deg, #1b2922, #65715c);
}

.news-event span {
  padding: 8px;
  border: 2px solid #ffffff9c;
  font-size: 13px;
  letter-spacing: 2px;
}

.news-member {
  background: repeating-linear-gradient(130deg, #504b3d 0 8px, #272a25 9px 17px);
}

.news-insurance {
  background: radial-gradient(circle, #1e477e, #08182c);
}

.news-insurance span {
  display: grid;
  width: 70px;
  height: 80px;
  place-items: center;
  border: 6px solid #b9c3cf;
  border-radius: 45% 45% 55% 55%;
  font-size: 43px;
}

.news-journal {
  background: linear-gradient(145deg, #9c7048, #473222);
}

.news-journal span {
  rotate: -8deg;
  padding: 20px 10px;
  color: #fff;
  background: linear-gradient(145deg, #203a50, #07141f);
  box-shadow: 7px 9px 9px #0006;
}

.news-copy {
  min-width: 0;
  padding: 14px 8px 12px 16px;
}

.news-copy small {
  display: inline-block;
  padding: 4px 7px;
  border-radius: 7px;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  background: #0b4a9f;
}

.news-copy small.red {
  background: #df171e;
}

.news-copy h3 {
  margin: 8px 0 6px;
  font-size: 16px;
  line-height: 1.14;
}

.news-copy p {
  margin: 0 0 9px;
  color: #626975;
  font-size: 11px;
  line-height: 1.35;
}

.news-copy time {
  color: #6f7580;
  font-size: 10px;
}

.news-open {
  align-self: stretch;
  border: 0;
  color: #0b4a9f;
  font-size: 28px;
  font-weight: 700;
  background: transparent;
}

.empty-news {
  padding: 35px 20px;
  border: 1px dashed #cbd0d8;
  border-radius: 15px;
  color: #777f8a;
  text-align: center;
}

.submit-news {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto 15px;
  align-items: center;
  gap: 11px;
  width: 100%;
  margin-top: 18px;
  padding: 14px;
  border: 1px solid #e3e6ea;
  border-left: 5px solid #df171e;
  border-radius: 15px;
  color: #0b1428;
  text-align: left;
  background: linear-gradient(100deg, #edf4ff, #fff 35%);
}

.submit-news > span:first-child {
  color: #0b4a9f;
  font-size: 30px;
}

.submit-news > span:nth-child(2) {
  color: #656c77;
  font-size: 10px;
}

.submit-news b {
  display: block;
  margin-bottom: 3px;
  color: #0b1428;
  font-size: 13px;
}

.submit-news strong {
  padding: 11px 9px;
  border-radius: 8px;
  color: #fff;
  font-size: 9px;
  white-space: nowrap;
  background: #df171e;
}

.submit-news i {
  font-size: 24px;
  font-style: normal;
}

.clubs-hero {
  padding: 20px;
  border-radius: 18px;
  color: #fff;
  background:
    radial-gradient(circle at 86% 30%, #2d69b76b, transparent 32%),
    linear-gradient(135deg, #0b3e8b, #08275a);
  box-shadow: 0 12px 24px #0b3e8b28;
}

.clubs-hero > div:first-child {
  display: flex;
  align-items: center;
  gap: 15px;
}

.clubs-hero > div:first-child > span {
  display: grid;
  width: 50px;
  height: 50px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #ffffff80;
  border-radius: 13px;
  font-size: 29px;
}

.clubs-hero h2 {
  margin: 0 0 4px;
  font-size: 21px;
}

.clubs-hero p {
  margin: 0;
  color: #d5e3f6;
  font-size: 12px;
}

.club-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 22px;
  border-top: 1px solid #ffffff2e;
}

.club-stats span {
  padding: 14px 5px 0;
  color: #dce8f7;
  font-size: 9px;
  text-align: center;
}

.club-stats span + span {
  border-left: 1px solid #ffffff2e;
}

.club-stats b {
  display: block;
  margin-bottom: 3px;
  color: #fff;
  font-size: 19px;
}

.location-match {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 16px 0;
  padding: 14px;
  border: 1px solid #dbe5f3;
  border-radius: 15px;
  background: #f4f8fe;
}

.location-match > span {
  color: #df171e;
  font-size: 27px;
}

.location-match > div {
  min-width: 0;
  flex: 1;
}

.location-match small,
.location-match b,
.location-match p {
  display: block;
}

.location-match small {
  color: #0b3e8b;
  font-size: 8px;
  font-weight: 800;
}

.location-match b {
  margin: 2px 0;
  font-size: 14px;
}

.location-match p {
  margin: 0;
  color: #717985;
  font-size: 9px;
}

.location-match button {
  border: 0;
  color: #0b3e8b;
  font-size: 11px;
  font-weight: 700;
  background: transparent;
}

.club-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 88px;
  gap: 9px;
}

.club-search-row select {
  min-width: 0;
  padding: 0 9px;
  border: 1px solid #ccd8e8;
  border-radius: 14px;
  color: #0b3e8b;
  font-size: 12px;
  font-weight: 700;
  background: #fff;
}

.nearby-clubs,
.all-clubs {
  margin-top: 23px;
}

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

.nearby-card {
  position: relative;
  min-width: 0;
  padding: 15px 10px;
  overflow: hidden;
  border: 1px solid #e2e5e9;
  border-radius: 15px;
  background: linear-gradient(160deg, #172638 0 42%, #fff 43%);
  box-shadow: 0 7px 15px #17233a0e;
  cursor: pointer;
}

.nearby-card:hover, .nearby-card:focus-visible { transform: translateY(-2px); border-color: rgba(215, 25, 32, 0.38); box-shadow: 0 12px 24px #17233a1a; outline: none; }
.nearby-copy { min-width: 0; }

.club-badge {
  display: grid;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  place-items: center;
  overflow: hidden;
  border: 3px solid #fff;
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  background: #0b3e8b;
  box-shadow: 0 5px 9px #0004;
}

.nearby-card h3 {
  margin: 19px 0 5px;
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nearby-card p {
  margin: 0;
  color: #6f7580;
  font-size: 9px;
}

.nearby-card > strong {
  display: block;
  margin-top: 7px;
  color: #0b3e8b;
  font-size: 11px;
}

.club-save {
  position: absolute;
  top: 9px;
  right: 8px;
  border: 0;
  color: #fff;
  font-size: 22px;
  background: transparent;
}

.club-save.saved {
  color: #df171e;
}

.club-row {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) auto 20px;
  align-items: center;
  gap: 11px;
  margin-bottom: 9px;
  padding: 11px;
  border: 1px solid #e3e6ea;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 5px 12px #17233a0b;
}

.club-row[role="link"] {
  cursor: pointer;
}

.event-card[role="link"],
.news-card[role="link"],
.benefit-card[role="link"],
.partner-card[role="link"],
.document-card[role="link"] {
  cursor: pointer;
}

.club-row[role="link"]:hover,
.club-row[role="link"]:focus-visible {
  border-color: rgba(11, 62, 139, 0.35);
  box-shadow: 0 10px 22px #17233a17;
  outline: none;
}

.event-card[role="link"]:hover,
.event-card[role="link"]:focus-visible,
.news-card[role="link"]:hover,
.news-card[role="link"]:focus-visible,
.benefit-card[role="link"]:hover,
.benefit-card[role="link"]:focus-visible,
.partner-card[role="link"]:hover,
.partner-card[role="link"]:focus-visible,
.document-card[role="link"]:hover,
.document-card[role="link"]:focus-visible {
  border-color: rgba(11, 62, 139, 0.35);
  outline: none;
  box-shadow: 0 10px 22px #17233a17;
}

.club-row .club-badge {
  width: 48px;
  height: 48px;
}

.club-row h3,
.club-row p {
  margin: 0;
}

.club-row h3 {
  font-size: 13px;
}

.club-row p {
  margin-top: 4px;
  color: #737a85;
  font-size: 10px;
}

.club-row > span {
  color: #747b85;
  font-size: 9px;
  text-align: right;
}

.club-row > span b {
  display: block;
  margin-bottom: 3px;
  color: #0b3e8b;
  font-size: 11px;
}

.club-row > button {
  border: 0;
  color: #0b3e8b;
  font-size: 24px;
  background: transparent;
}

.club-empty,
.club-apply {
  margin-top: 26px;
  padding: 30px 23px;
  border: 1px solid #e1e5ea;
  border-radius: 19px;
  text-align: center;
  background: #fff;
}

.club-empty > span,
.club-apply > span {
  color: #0b3e8b;
  font-size: 52px;
}

.club-empty h2,
.club-apply h2 {
  margin: 12px 0 8px;
}

.club-empty p,
.club-apply > p {
  color: #6e7580;
  font-size: 13px;
  line-height: 1.5;
}

.club-empty button,
.club-apply > button {
  width: 100%;
  margin-top: 14px;
  padding: 15px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  font-weight: 800;
  background: #df171e;
}

.club-apply label {
  display: block;
  margin-top: 14px;
  color: #303744;
  font-size: 11px;
  font-weight: 700;
  text-align: left;
}

.club-apply input {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 13px;
  border: 1px solid #dfe3e8;
  border-radius: 11px;
  outline: 0;
}

.benefit-search-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
}

.benefit-search-row > button {
  padding: 0 14px;
  border: 1px solid #ccd8e8;
  border-radius: 14px;
  color: #0b3e8b;
  font-size: 12px;
  font-weight: 700;
  background: #fff;
}

.benefit-categories {
  display: grid;
  grid-template-columns: repeat(7, minmax(65px, 1fr));
  gap: 5px;
  margin: 15px 0 18px;
  overflow-x: auto;
  scrollbar-width: none;
}

.benefit-categories::-webkit-scrollbar {
  display: none;
}

.benefit-categories button {
  padding: 8px 3px 10px;
  border: 0;
  border-bottom: 2px solid transparent;
  color: #565d69;
  font-size: 9px;
  background: transparent;
}

.benefit-categories button span {
  display: block;
  margin-bottom: 6px;
  font-size: 24px;
}

.benefit-categories button.selected {
  border-bottom-color: #df171e;
  color: #df171e;
  font-weight: 700;
}

.benefit-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32%;
  min-height: 180px;
  overflow: hidden;
  padding: 22px;
  border-radius: 18px;
  color: #fff;
  background:
    linear-gradient(120deg, transparent 60%, #df171e80 61% 72%, #0b3e8ba8 73%),
    radial-gradient(circle at 85% 35%, #33485d, transparent 30%),
    linear-gradient(135deg, #07121f, #12283b);
}

.benefit-hero h2 {
  margin: 0;
  font-size: 27px;
  line-height: 1.05;
}

.benefit-hero h2 em {
  color: #ef262d;
  font-style: normal;
}

.benefit-hero p {
  max-width: 220px;
  margin: 12px 0;
  color: #e0e6ed;
  font-size: 12px;
  line-height: 1.45;
}

.benefit-hero .ana-logo {
  width: 75px;
}

.benefit-hero .ana-logo img {
  width: 75px;
  margin: 0;
}

.benefit-hero > span {
  display: grid;
  place-items: center;
  color: #263d51;
  font-size: 100px;
  filter: drop-shadow(0 10px 13px #0007);
}

.benefits-section {
  margin-top: 22px;
}

.benefit-card {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) 82px 18px;
  align-items: center;
  gap: 11px;
  margin-bottom: 10px;
  padding: 12px;
  border: 1px solid #e2e5e9;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 6px 14px #17233a0d;
}

.benefit-logo {
  display: grid;
  width: 62px;
  height: 62px;
  place-items: center;
  border-radius: 10px;
  color: #fff;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 1px;
  background: linear-gradient(145deg, #101822, #020406);
}

.benefit-copy {
  min-width: 0;
}

.benefit-copy h3 {
  margin: 0 0 4px;
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.benefit-copy p {
  margin: 0 0 6px;
  color: #606773;
  font-size: 9px;
  line-height: 1.3;
}

.benefit-copy > span {
  display: inline-block;
  padding: 3px 6px;
  border: 1px solid #8bb0e7;
  border-radius: 6px;
  color: #0b4a9f;
  font-size: 8px;
}

.benefit-copy > small {
  margin-left: 6px;
  color: #68707b;
  font-size: 8px;
}

.benefit-discount {
  min-width: 0;
  text-align: center;
}

.benefit-discount strong {
  display: block;
  color: #df171e;
  font-size: 22px;
}

.benefit-discount b {
  display: block;
  color: #df171e;
  font-size: 8px;
}

.benefit-discount small {
  display: block;
  margin-top: 6px;
  color: #666e79;
  font-size: 8px;
  line-height: 1.25;
}

.benefit-open {
  border: 0;
  color: #404a58;
  font-size: 25px;
  background: transparent;
}

.benefit-card-cta {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 16px;
  padding: 15px;
  border: 1px solid #dce3ed;
  border-left: 5px solid #0b3e8b;
  border-radius: 15px;
  color: #111a2b;
  text-align: left;
  background: #f7faff;
}

.benefit-card-cta > span:first-child {
  color: #0b3e8b;
  font-size: 29px;
}

.benefit-card-cta > span:nth-child(2) {
  color: #666e79;
  font-size: 10px;
}

.benefit-card-cta b {
  display: block;
  margin-bottom: 3px;
  color: #101929;
  font-size: 13px;
}

.benefit-card-cta strong {
  padding: 11px 14px;
  border-radius: 8px;
  color: #fff;
  font-size: 10px;
  white-space: nowrap;
  background: #0b3e8b;
}

.change-banner {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 16px;
  padding: 15px;
  border: 1px solid #dce3ed;
  border-left: 5px solid #df171e;
  border-radius: 15px;
  color: #111a2b;
  text-align: left;
  text-decoration: none;
  background: #fff8f8;
}

.change-banner > span:first-child {
  color: #df171e;
  font-size: 28px;
}

.change-banner > span:nth-child(2) {
  color: #555f6d;
  font-size: 10px;
  line-height: 1.35;
}

.change-banner strong {
  display: block;
  margin-bottom: 4px;
  color: #101929;
  font-size: 13px;
  line-height: 1.2;
}

.change-banner > b {
  color: #df171e;
  font-size: 20px;
}

.theme-toggle {
  align-items: center;
}

.theme-toggle > span {
  min-width: 0;
  flex: 1;
}

.theme-toggle > span b,
.theme-toggle > span small {
  display: block;
}

.theme-toggle > span small {
  margin-top: 3px;
  color: #747b86;
  font-size: 9px;
  font-weight: 400;
}

.theme-toggle > i {
  position: relative;
  width: 45px;
  height: 25px;
  flex: 0 0 auto;
  border-radius: 20px;
  background: #c9ced5;
  transition: background .2s ease;
}

.theme-toggle > i em {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 6px #0003;
  transition: transform .2s ease;
}

.theme-toggle > i.on {
  background: #315fa5;
}

.theme-toggle > i.on em {
  transform: translateX(20px);
}

.payment-section {
  margin-top: 18px;
  padding: 19px;
  border: 1px solid #dde3eb;
  border-radius: 17px;
  background: linear-gradient(145deg, #fff, #f8fafc);
  box-shadow: 0 7px 17px #17233a0d;
}

.payment-heading {
  display: grid;
  grid-template-columns: 35px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.payment-heading > span {
  color: #0b3e8b;
  font-size: 27px;
}

.payment-heading small {
  color: #68717f;
  font-size: 8px;
  font-weight: 800;
}

.payment-heading h2 {
  margin: 3px 0 0;
  font-size: 15px;
}

.payment-heading > b {
  padding: 5px 7px;
  border-radius: 7px;
  color: #9a6100;
  font-size: 8px;
  background: #fff1cc;
}

.mb-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 20px 0;
  color: #1d2737;
}

.mb-brand strong {
  padding: 4px 7px;
  border-top: 4px solid #2477e8;
  border-bottom: 4px solid #2477e8;
  border-radius: 7px;
  font-size: 28px;
  letter-spacing: -3px;
}

.mb-brand span {
  font-size: 18px;
  font-weight: 900;
}

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

.payment-details > div {
  padding: 11px 12px;
  border: 1px solid #e2e6ec;
  border-radius: 11px;
  background: #fff;
}

.payment-details dt {
  margin-bottom: 4px;
  color: #737b87;
  font-size: 9px;
}

.payment-details dd {
  margin: 0;
  color: #172234;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .4px;
}

.payment-warning {
  margin: 13px 0 0;
  padding: 10px;
  border-radius: 9px;
  color: #735100;
  font-size: 9px;
  line-height: 1.4;
  background: #fff8df;
}

.payment-warning b {
  margin-right: 4px;
  color: #b0181d;
}

body.dark-mode {
  color: #edf2f8;
  background: #050911;
}

body.dark-mode .app-shell,
body.dark-mode .home-shell,
body.dark-mode .login-shell {
  color: #edf2f8;
  background: #0a111c;
}

body.dark-mode .login-shell {
  background: linear-gradient(180deg, #0a111c 0 68%, #0d1623);
}

body.dark-mode .watermark {
  color: #111c2a;
}

body.dark-mode .welcome p,
body.dark-mode .register,
body.dark-mode .demo-note,
body.dark-mode .hello-row p,
body.dark-mode .section-heading small {
  color: #9aa6b6;
}

body.dark-mode .field,
body.dark-mode .shortcut-grid button,
body.dark-mode .event-card,
body.dark-mode .partner-card,
body.dark-mode .profile-card,
body.dark-mode .menu-list,
body.dark-mode .menu-list button,
body.dark-mode .news-card,
body.dark-mode .club-row,
body.dark-mode .nearby-card,
body.dark-mode .club-empty,
body.dark-mode .club-apply,
body.dark-mode .benefit-card,
body.dark-mode .share-actions button,
body.dark-mode .tabs,
body.dark-mode .tabs button,
body.dark-mode .search,
body.dark-mode .club-search-row select,
body.dark-mode .benefit-search-row > button {
  border-color: #263344;
  color: #edf2f8;
  background-color: #101a27;
}

body.dark-mode .field input,
body.dark-mode .search input,
body.dark-mode .club-apply input {
  color: #edf2f8;
  background: transparent;
}

body.dark-mode input::placeholder {
  color: #7f8b9a;
}

body.dark-mode .member-mini,
body.dark-mode .location-match,
body.dark-mode .benefit-card-cta,
body.dark-mode .change-banner,
body.dark-mode .renew {
  border-color: #263344;
  color: #edf2f8;
  background: #101a27;
}

body.dark-mode .shortcut-grid button,
body.dark-mode .news-copy h3,
body.dark-mode .club-row h3,
body.dark-mode .nearby-card h3,
body.dark-mode .benefit-copy h3,
body.dark-mode .benefit-card-cta b,
body.dark-mode .change-banner strong,
body.dark-mode .renew b {
  color: #edf2f8;
}

body.dark-mode .news-copy p,
body.dark-mode .news-copy time,
body.dark-mode .club-row p,
body.dark-mode .nearby-card p,
body.dark-mode .benefit-copy p,
body.dark-mode .benefit-copy small,
body.dark-mode .benefit-discount small,
body.dark-mode .location-match p,
body.dark-mode .club-empty p,
body.dark-mode .club-apply > p,
body.dark-mode .theme-toggle small {
  color: #9aa6b6;
}

body.dark-mode .bottom-nav {
  border-color: #263344;
  background: #0d1623f2;
}

body.dark-mode .bottom-nav button {
  color: #9ca7b6;
}

body.dark-mode .bottom-nav button.active {
  color: #ff343b;
}

body.dark-mode .tabs button.selected,
body.dark-mode .categories .selected {
  color: #fff;
  background: #df171e;
}

body.dark-mode .share-card,
body.dark-mode .digital-card,
body.dark-mode .clubs-hero,
body.dark-mode .benefit-hero,
body.dark-mode .hero {
  box-shadow: 0 12px 24px #0007;
}

body.dark-mode .logout {
  border-color: #55272b;
  background: #101a27;
}

body.dark-mode .payment-section,
body.dark-mode .payment-details > div {
  border-color: #263344;
  background: #101a27;
}

body.dark-mode .payment-heading h2,
body.dark-mode .payment-details dd,
body.dark-mode .mb-brand {
  color: #edf2f8;
}

body.dark-mode .payment-warning {
  color: #e3ca85;
  background: #342c17;
}

.hello-row > *,
.shortcut-grid > *,
.event-card > *,
.partner-card > * {
  min-width: 0;
}

@media (max-width: 360px) {
  .login-shell {
    padding-right: 20px;
    padding-left: 20px;
  }

  .ana-logo.compact img {
    width: 165px;
  }

  .welcome h1 {
    font-size: 30px;
  }

  .welcome p,
  .field input {
    font-size: 16px;
  }

  .home-shell {
    padding-right: 15px;
    padding-left: 15px;
  }

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

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

  .member-mini {
    width: 100%;
  }

  .digital-card > .ana-logo img {
    width: 100%;
  }

  .digital-card > strong {
    font-size: 10px;
  }

  .digital-card > p {
    top: 41%;
    font-size: 7px;
  }

  .digital-card > .member-photo {
    top: 39%;
    width: 23%;
    height: auto;
  }

  .digital-card > h2 {
    top: 57%;
    bottom: auto;
    max-width: 62%;
    font-size: 12px;
  }

  .digital-card .member-name-medium {
    font-size: 10px;
  }

  .digital-card .member-name-long {
    font-size: 9px;
  }

  .digital-card > div:last-child {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .share-card {
    padding: 0;
  }

  .share-member {
    align-items: flex-start;
  }

  .share-member .share-member-details {
    align-items: center;
    flex-direction: row;
  }

  .digital-card .member-photo {
    width: 23%;
    height: auto;
  }

  .share-card .member-photo-small {
    width: 50px;
    height: 50px;
  }

  .share-card .demo-qr {
    width: 68px;
    height: 68px;
  }

  .news-card {
    grid-template-columns: 34% minmax(0, 1fr) 20px;
    min-height: 138px;
  }

  .news-copy {
    padding-left: 11px;
  }

  .news-copy h3 {
    font-size: 14px;
  }

  .news-copy p {
    font-size: 10px;
  }

  .submit-news {
    grid-template-columns: 34px minmax(0, 1fr) 12px;
  }

  .submit-news strong {
    display: none;
  }

  .club-tabs button {
    padding-right: 4px;
    padding-left: 4px;
    font-size: 10px;
  }

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

  .nearby-card {
    display: grid;
    grid-template-columns: 55px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    background: linear-gradient(90deg, #172638 0 72px, #fff 73px);
  }

  .nearby-card h3 {
    margin: 0;
  }

  .nearby-card .nearby-copy {
    grid-column: 2;
    min-width: 0;
  }

  .nearby-card p {
    grid-column: 2;
  }

  .nearby-card > strong {
    grid-column: 3;
    grid-row: 1;
  }

  .club-save {
    display: none;
  }

  .club-row {
    grid-template-columns: 48px minmax(0, 1fr) 20px;
  }

  .club-row > span {
    display: none;
  }

  .benefit-categories {
    grid-template-columns: repeat(7, 70px);
  }

  .benefit-hero {
    min-height: 155px;
    padding: 18px;
  }

  .benefit-hero h2 {
    font-size: 22px;
  }

  .benefit-hero p {
    max-width: 175px;
    font-size: 10px;
  }

  .benefit-card {
    grid-template-columns: 48px minmax(0, 1fr) 55px 14px;
    gap: 8px;
    padding: 9px;
  }

  .benefit-logo {
    width: 48px;
    height: 48px;
    font-size: 13px;
  }

  .benefit-copy h3 {
    font-size: 11px;
  }

  .benefit-copy p {
    font-size: 8px;
  }

  .benefit-copy > small {
    display: block;
    margin: 4px 0 0;
  }

  .benefit-discount strong {
    font-size: 17px;
  }

  .benefit-discount small {
    display: none;
  }

  .benefit-card-cta {
    grid-template-columns: 33px minmax(0, 1fr);
  }

  .benefit-card-cta strong {
    grid-column: 1 / 3;
    text-align: center;
  }

  .payment-section {
    padding: 15px;
  }

  .payment-heading {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .payment-heading > b {
    grid-column: 2;
    justify-self: start;
  }

  .mb-brand {
    margin: 16px 0;
  }

  .payment-details {
    grid-template-columns: 1fr;
  }
}
.fee-history {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid #e4e8ef;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(11, 35, 72, 0.08);
}

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

.fee-history-heading h2 {
  margin: 0;
  color: #07152d;
  font-size: 1.12rem;
}

.fee-history-heading span {
  color: #687386;
  font-size: 0.82rem;
}

.fee-list {
  display: grid;
  gap: 9px;
}

.current-quota-documents {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.current-quota-documents .fee-row {
  width: 100%;
  min-height: 52px;
  grid-template-columns: 32px minmax(0, 1fr);
  align-content: center;
  text-align: left;
  padding: 8px 12px;
}

.current-quota-documents .fee-row em {
  display: none;
}

.current-quota-documents .fee-check {
  width: 25px;
  height: 25px;
  font-size: 0.66rem;
}

.current-quota-documents .fee-row small {
  font-size: 8px;
  font-weight: 500;
}

.current-quota-documents .fee-row b {
  margin-top: 1px;
  font-size: 13px;
  white-space: nowrap;
}

.fee-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 11px;
  padding: 12px;
  border: 1px solid #e7eaf0;
  border-radius: 14px;
  background: #f8fafc;
}

.fee-check {
  display: grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: #159447;
  font-weight: 900;
}

.fee-row span {
  min-width: 0;
}

.fee-row b,
.fee-row small {
  display: block;
}

.fee-row b {
  color: #111b2f;
  font-size: 0.94rem;
}

.fee-row small,
.fee-row time {
  color: #687386;
  font-size: 0.76rem;
}

.fee-row em {
  color: #111b2f;
  font-size: 0.88rem;
  font-style: normal;
  font-weight: 800;
}

.fee-row button {
  border: 0;
  background: transparent;
  color: #0b4b9d;
  cursor: pointer;
  font-size: 0.77rem;
  font-weight: 900;
}

#receipt-feedback {
  min-height: 20px;
  margin: 12px 2px 0;
  color: #0b4b9d;
  font-size: 0.82rem;
}

body.dark-mode .fee-history {
  border-color: #25334a;
  background: #111b2d;
}

body.dark-mode .fee-history-heading h2,
body.dark-mode .fee-row b,
body.dark-mode .fee-row em {
  color: #f4f7fb;
}

body.dark-mode .fee-history-heading span,
body.dark-mode .fee-row small,
body.dark-mode .fee-row time {
  color: #aeb8c8;
}

body.dark-mode .fee-row {
  border-color: #2a3951;
  background: #18243a;
}

body.dark-mode .fee-row button,
body.dark-mode #receipt-feedback {
  color: #7db5ff;
}

@media (max-width: 520px) {
  .fee-history {
    padding: 14px;
  }

  .fee-history-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 3px;
  }

  .fee-row {
    grid-template-columns: 30px minmax(0, 1fr) auto;
    gap: 8px;
  }

  .fee-row time {
    grid-column: 2;
  }

  .fee-row button {
    grid-column: 3;
    grid-row: 1 / span 2;
  }

  .current-quota-documents {
    gap: 8px;
  }

  .current-quota-documents .fee-row {
    min-height: 52px;
    grid-template-columns: 28px minmax(0, 1fr);
    padding: 8px 10px;
  }

  .current-quota-documents .fee-row b {
    font-size: 12px;
  }
}

.club-badge img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.club-detail-card {
  padding: 20px;
  border: 1px solid #e1e6ed;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 28px #17233a12;
}

.club-detail-heading {
  display: flex;
  align-items: center;
  gap: 15px;
}

.club-detail-heading .club-badge {
  width: 72px;
  height: 72px;
}

.club-detail-heading small,
.club-detail-heading h2,
.club-detail-heading p {
  margin: 0;
}

.club-detail-heading small { color: #df171e; font-size: 9px; font-weight: 900; }
.club-detail-heading h2 { margin: 4px 0; font-size: 21px; }
.club-detail-heading p { color: #6f7580; font-size: 12px; }
.club-detail-card > p { color: #4f5867; line-height: 1.6; }

.club-detail-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 20px 0;
}

.club-detail-card dl div {
  padding: 12px;
  border-radius: 12px;
  background: #f4f7fb;
}

.club-detail-card dt { color: #6f7580; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.club-detail-card dd { margin: 4px 0 0; font-size: 13px; font-weight: 800; }
.club-detail-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.club-detail-actions button { padding: 10px 14px; border: 0; border-radius: 9px; color: #fff; font-weight: 800; background: #0b3e8b; }
.club-contact-button { border: 1px solid rgba(215, 25, 32, 0.3); border-radius: 10px; background: rgba(215, 25, 32, 0.08); color: #d71920; cursor: pointer; font: inherit; font-weight: 800; padding: 8px 12px; }
.club-contact-button:hover, .club-contact-button:focus-visible { background: #d71920; color: #fff; }
.club-load-more { display: block; width: 100%; margin-top: 12px; padding: 12px; border: 1px solid rgba(215, 25, 32, 0.3); border-radius: 12px; background: #fff; color: #d71920; cursor: pointer; font-weight: 900; }
.club-load-more:hover, .club-load-more:focus-visible { background: #d71920; color: #fff; }
[data-club-card][hidden], .club-load-more[hidden], #no-clubs[hidden] { display: none !important; }
.club-is-recruiting { border-color: rgba(215, 25, 32, 0.42); box-shadow: 0 10px 24px rgba(215, 25, 32, 0.1); }
.club-recruiting { display: inline-block; margin: 4px 0; color: #d71920; font-size: 9px; font-style: normal; font-weight: 900; letter-spacing: 0.04em; }
.recruiting-clubs-intro { display: flex; align-items: center; gap: 14px; padding: 18px; border: 1px solid rgba(215, 25, 32, 0.22); border-radius: 18px; background: linear-gradient(135deg, #fff5f5, #fff); }
.recruiting-clubs-intro > span { display: grid; width: 46px; height: 46px; flex: 0 0 46px; place-items: center; border-radius: 50%; color: #fff; background: #d71920; box-shadow: 0 8px 18px rgba(215, 25, 32, 0.22); }
.recruiting-clubs-intro small { color: #d71920; font-size: 9px; font-weight: 900; letter-spacing: 0.08em; }
.recruiting-clubs-intro h2 { margin: 3px 0; }
.recruiting-clubs-intro p { margin: 0; color: #6f7580; font-size: 12px; }
.recruiting-clubs-list { margin-top: 18px; }
.nearby-card .club-recruiting { margin-top: 16px; }
.nearby-card .club-recruiting + h3 { margin-top: 3px; }
.shortcut-grid .shortcut-coming-soon { position: relative; overflow: hidden; cursor: default; opacity: 1; background: linear-gradient(155deg, #fff 55%, #f3f6fb); }
.shortcut-grid .coming-soon-badge { position: absolute; top: 50%; left: 50%; z-index: 2; width: 150%; padding: 7px 0; border-top: 1px solid rgba(11, 62, 139, 0.38); border-bottom: 1px solid rgba(11, 62, 139, 0.38); color: rgba(11, 62, 139, 0.84); font-size: 11px; font-weight: 900; letter-spacing: 0.09em; line-height: 1; text-align: center; text-transform: uppercase; background: transparent; box-shadow: none; transform: translate(-50%, -50%) rotate(-34deg); transform-origin: center; }
body.dark-mode .shortcut-grid .shortcut-coming-soon { border-color: #263344; color: #edf2f8; background: linear-gradient(155deg, #101a27 55%, #152235); }
body.dark-mode .shortcut-grid .shortcut-coming-soon .coming-soon-badge { border-color: #5f83b8; color: #9fc5ff; }

.wallet-section {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid #dfe5ed;
  border-radius: 18px;
  background: linear-gradient(145deg, #fff, #f7f9fc);
  box-shadow: 0 8px 20px #17233a0d;
}

.wallet-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.wallet-heading small {
  color: #687386;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .8px;
}

.wallet-heading h2 {
  margin: 4px 0 0;
  color: #101a2d;
  font-size: 16px;
}

.wallet-heading > span {
  padding: 5px 7px;
  border-radius: 7px;
  color: #7b5700;
  font-size: 8px;
  font-weight: 900;
  background: #fff1c7;
}

.wallet-section > p {
  margin: 10px 0 14px;
  color: #687386;
  font-size: 10px;
  line-height: 1.45;
}

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

.wallet-button {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 8px 12px;
  border: 1px solid #111;
  border-radius: 10px;
  color: #fff;
  text-align: left;
  background: #050505;
  cursor: pointer;
}

.wallet-button > span:first-child {
  font-size: 23px;
  line-height: 1;
}

.wallet-button small,
.wallet-button b {
  display: block;
  color: inherit;
}

.wallet-button small {
  font-size: 8px;
  font-weight: 500;
}

.wallet-button b {
  margin-top: 1px;
  font-size: 13px;
  white-space: nowrap;
}

.wallet-button .google-wallet-mark {
  display: grid;
  width: 25px;
  height: 25px;
  place-items: center;
  border-radius: 50%;
  color: #4285f4;
  font-size: 18px;
  font-weight: 900;
  background: #fff;
}

.wallet-section #wallet-feedback {
  min-height: 18px;
  margin: 11px 0 0;
}

.payment-brand-logo {
  display: block;
  width: min(220px, 78%);
  max-height: 86px;
  margin: 16px auto 0;
  object-fit: contain;
  border-radius: 12px;
  background: #fff;
}

.receipt-download-link {
  display: block;
  margin: 10px 0 6px;
  padding: 13px 14px;
  border-radius: 13px;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .05em;
  text-align: center;
  text-decoration: none;
  background: #0b3e8b;
}

.receipt-download-link + small {
  display: block;
  color: #667085;
  font-size: 10px;
  line-height: 1.35;
  text-align: center;
}

body.dark-mode .wallet-section {
  border-color: #263344;
  background: #101a27;
}

body.dark-mode .wallet-heading h2 {
  color: #edf2f8;
}

body.dark-mode .wallet-section > p {
  color: #9aa6b6;
}

@media (max-width: 360px) {
  .wallet-actions {
    gap: 6px;
  }

  .wallet-button {
    min-height: 48px;
    gap: 5px;
    padding: 7px 5px;
  }

  .wallet-button > span:first-child {
    font-size: 18px;
  }

  .wallet-button b {
    font-size: 10px;
  }

  .wallet-button small {
    font-size: 7px;
  }

  .wallet-button .google-wallet-mark {
    width: 21px;
    height: 21px;
    font-size: 14px;
  }
}

.event-source-tabs {
  margin-bottom: 16px;
}

.event-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 15px 0 4px;
}

.event-filters label {
  min-width: 0;
}

.event-filters label > span {
  display: block;
  margin: 0 0 5px 3px;
  color: #687386;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
}

.event-filters select {
  width: 100%;
  padding: 12px;
  border: 1px solid #dfe4eb;
  border-radius: 12px;
  color: #142038;
  background: #fff;
  outline: 0;
}

.external-events-intro {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 13px;
  border: 1px solid #d7e4f5;
  border-radius: 14px;
  background: #f4f8fe;
}

.external-events-intro > span {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-weight: 900;
  background: #315fa5;
}

.external-events-intro b,
.external-events-intro p {
  display: block;
  margin: 0;
}

.external-events-intro b {
  color: #15233b;
  font-size: 12px;
}

.external-events-intro p {
  margin-top: 3px;
  color: #657083;
  font-size: 9px;
  line-height: 1.4;
}

.events-section {
  margin-top: 22px;
}

.events-section .section-heading {
  align-items: flex-end;
}

.events-section .section-heading small {
  color: #687386;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .7px;
}

.events-section .section-heading h2 {
  margin: 3px 0 14px;
}

.events-section .section-heading > span {
  margin-bottom: 16px;
  color: #687386;
  font-size: 10px;
}

.event-card {
  position: relative;
  overflow: hidden;
  background: #fff;
}

.event-card::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  content: "";
  background: #df171e;
}

.event-card-external::before {
  background: #315fa5;
}

.event-card .date-box {
  display: grid;
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  place-items: center;
  align-content: center;
  gap: 1px;
  padding: 5px;
}

.event-card-external .date-box {
  background: #315fa5;
}

.event-card .date-box b,
.event-card .date-box span {
  display: block;
  color: #fff;
  line-height: 1;
}

.event-card .date-box b {
  font-size: 20px;
}

.event-card .date-box span {
  font-size: 9px;
  letter-spacing: .7px;
}

.event-card > div:nth-child(2) {
  min-width: 0;
}

.event-card h3 {
  overflow: hidden;
  font-size: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event-card em {
  display: block;
  margin-top: 5px;
  color: #798290;
  font-size: 9px;
  font-style: normal;
}

.event-card > button {
  border: 0;
  color: #344054;
  font-size: 25px;
  background: transparent;
}

.event-empty {
  padding: 35px 20px;
  border: 1px dashed #ccd4df;
  border-radius: 16px;
  color: #6e7785;
  text-align: center;
}

.event-empty > span {
  color: #315fa5;
  font-size: 34px;
}

.event-empty h3 {
  margin: 9px 0 5px;
  color: #18243a;
}

.event-empty p {
  margin: 0;
  font-size: 11px;
}

.submit-event {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto 12px;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin-top: 18px;
  padding: 14px;
  border: 1px solid #dce3ed;
  border-left: 5px solid #315fa5;
  border-radius: 15px;
  color: #111a2b;
  text-align: left;
  background: #f7faff;
}

.submit-event > span:first-child {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-size: 22px;
  background: #315fa5;
}

.submit-event b {
  display: block;
  margin-bottom: 3px;
  font-size: 12px;
}

.submit-event > span:nth-child(2) {
  color: #687386;
  font-size: 9px;
}

.submit-event strong {
  padding: 9px 11px;
  border-radius: 8px;
  color: #fff;
  font-size: 9px;
  white-space: nowrap;
  background: #315fa5;
}

.submit-event i {
  font-size: 20px;
  font-style: normal;
}

.event-back {
  margin: 2px 0 15px;
  padding: 0;
  border: 0;
  color: #315fa5;
  font-size: 12px;
  font-weight: 800;
  background: transparent;
}

.event-detail {
  overflow: hidden;
  border: 1px solid #dfe4eb;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 10px 25px #17233a0f;
}

.event-detail-hero {
  position: relative;
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  align-items: end;
  gap: 15px;
  min-height: 210px;
  padding: 72px 20px 22px;
  color: #fff;
  background:
    radial-gradient(circle at 85% 20%, #2d4962, transparent 30%),
    linear-gradient(135deg, #07111d, #14283a);
}

.event-detail.external .event-detail-hero {
  background:
    radial-gradient(circle at 85% 20%, #315fa5, transparent 35%),
    linear-gradient(135deg, #07111d, #183252);
}

.event-origin {
  position: absolute;
  top: 18px;
  left: 18px;
  padding: 6px 8px;
  border-radius: 7px;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .7px;
  background: #df171e;
}

.event-detail.external .event-origin {
  background: #315fa5;
}

.event-detail-date {
  display: grid;
  height: 64px;
  place-items: center;
  align-content: center;
  border: 1px solid #ffffff4a;
  border-radius: 13px;
  background: #ffffff12;
}

.event-detail-date b {
  font-size: 25px;
  line-height: 1;
}

.event-detail-date span {
  margin-top: 4px;
  font-size: 9px;
}

.event-detail-hero h2 {
  margin: 0;
  font-size: 24px;
  line-height: 1.05;
}

.event-detail-hero p {
  margin: 7px 0 0;
  color: #dbe4ef;
  font-size: 11px;
}

.external-event-warning {
  display: flex;
  gap: 5px;
  margin: 14px;
  padding: 12px;
  border: 0;
  border-left: 4px solid #d49200;
  border-radius: 8px;
  color: #684c0d;
  flex-direction: column;
  background: #fff7dc;
}

.external-event-warning b {
  font-size: 11px;
}

.external-event-warning span {
  font-size: 9px;
  line-height: 1.45;
}

.event-detail-info {
  display: grid;
  gap: 9px;
  padding: 18px;
}

.event-detail-info > div {
  padding: 12px;
  border: 1px solid #e4e8ee;
  border-radius: 12px;
  background: #f9fafc;
}

.event-detail-info small,
.event-detail-info b,
.event-detail-info span {
  display: block;
}

.event-detail-info small {
  margin-bottom: 5px;
  color: #315fa5;
  font-size: 8px;
  font-weight: 900;
}

.event-detail-info b {
  color: #152139;
  font-size: 12px;
}

.event-detail-info span {
  margin-top: 3px;
  color: #697486;
  font-size: 9px;
}

.event-detail-copy {
  padding: 0 18px 16px;
}

.event-detail-copy h3 {
  margin: 0 0 7px;
  font-size: 15px;
}

.event-detail-copy p {
  margin: 0;
  color: #5f6978;
  font-size: 11px;
  line-height: 1.55;
}

.event-register,
.event-facebook {
  display: flex;
  width: calc(100% - 36px);
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 18px;
  padding: 12px;
  border: 0;
  border-radius: 11px;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  background: #df171e;
}

.event-register span {
  font-size: 20px;
}

.event-facebook {
  background: #315fa5;
}

.event-facebook span {
  display: grid;
  width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 50%;
  color: #315fa5;
  font-size: 15px;
  background: #fff;
}

.event-detail #event-detail-feedback {
  margin: 12px 18px 0;
}

.demo-event-note {
  margin: 12px 18px 18px;
  color: #7a8390;
  font-size: 8px;
  text-align: center;
}

body.dark-mode .event-filters select,
body.dark-mode .event-card,
body.dark-mode .event-detail,
body.dark-mode .event-detail-info > div,
body.dark-mode .external-events-intro,
body.dark-mode .submit-event {
  border-color: #263344;
  color: #edf2f8;
  background: #101a27;
}

body.dark-mode .event-card h3,
body.dark-mode .event-empty h3,
body.dark-mode .external-events-intro b,
body.dark-mode .submit-event b,
body.dark-mode .event-detail-info b,
body.dark-mode .event-detail-copy h3 {
  color: #edf2f8;
}

body.dark-mode .event-card em,
body.dark-mode .event-filters label > span,
body.dark-mode .events-section .section-heading small,
body.dark-mode .events-section .section-heading > span,
body.dark-mode .external-events-intro p,
body.dark-mode .submit-event > span:nth-child(2),
body.dark-mode .event-detail-info span,
body.dark-mode .event-detail-copy p,
body.dark-mode .demo-event-note {
  color: #9aa6b6;
}

body.dark-mode .event-empty {
  border-color: #344258;
}

@media (max-width: 400px) {
  .submit-event {
    grid-template-columns: 34px minmax(0, 1fr) 12px;
  }

  .submit-event strong {
    display: none;
  }

  .event-detail-hero {
    min-height: 190px;
  }
}

.external-detail-page {
  overflow: hidden;
  border: 1px solid #e0e5ec;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 10px 25px #17233a0f;
}

.external-event-hero {
  position: relative;
  min-height: 285px;
  overflow: hidden;
  padding: 18px;
  color: #fff;
  background:
    linear-gradient(180deg, #0002, #020813e8),
    radial-gradient(circle at 72% 38%, #768493 0 5%, #334252 6% 13%, transparent 14%),
    radial-gradient(ellipse at 70% 55%, #202d39 0 15%, transparent 16%),
    linear-gradient(120deg, #17281d, #59636b 55%, #17261d);
}

.quick-customizer-backdrop{position:fixed;inset:0;z-index:3000;display:flex;align-items:flex-end;justify-content:center;padding:18px;background:rgba(5,12,22,.62);backdrop-filter:blur(4px)}
.quick-customizer{width:min(100%,500px);max-height:min(88svh,760px);overflow:auto;border-radius:24px 24px 18px 18px;background:#fff;box-shadow:0 28px 70px rgba(0,0,0,.3)}
.quick-customizer>header{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;gap:16px;padding:22px 22px 16px;border-bottom:1px solid #e5e7eb;background:#fff}
.quick-customizer>header small{color:#df171e;font-size:10px;font-weight:900;letter-spacing:.08em}.quick-customizer>header h2{margin:3px 0;font-size:23px}.quick-customizer>header p{margin:0;color:#687181;font-size:13px}.quick-customizer>header button{width:38px;height:38px;border:0;border-radius:50%;font-size:26px;background:#f0f2f5}
.quick-customizer-list{padding:10px 18px}.quick-list-label{margin:9px 8px 5px;color:#667085;font-size:9px;font-weight:900;letter-spacing:.08em}.quick-list-label.available{margin-top:20px}.quick-customizer-list article{display:flex;align-items:center;justify-content:space-between;min-height:60px;padding:8px 10px;border-bottom:1px solid #edf0f3;transition:transform .15s,box-shadow .15s,opacity .15s}.quick-customizer-list article.selected{background:#f8fafc}.quick-customizer-list article.dragging{z-index:3;opacity:.82;transform:scale(1.02);box-shadow:0 10px 25px rgba(20,35,58,.2)}.quick-customizer-list label{display:flex;align-items:center;gap:11px;min-width:0;cursor:pointer}.quick-customizer-list input{width:19px;height:19px;accent-color:#df171e}.quick-customizer-list label>span{display:grid;width:34px;height:34px;place-items:center;border-radius:10px;color:#df171e;background:#fff1f2;font-size:20px}.quick-customizer-list label>b{font-size:14px}.quick-customizer-list label small{display:block;margin-top:2px;color:#7a8492;font-size:9px;text-transform:uppercase}.quick-drag-handle{width:42px;height:42px;flex:0 0 42px;border:0;border-radius:11px;color:#6d7787;font-size:22px;line-height:1;touch-action:none;cursor:grab;background:#eef1f5}.quick-drag-handle:active{cursor:grabbing;background:#dfe5ec}
.quick-customizer-feedback{margin:0;padding:0 22px;color:#667085;font-size:12px}.quick-customizer>footer{position:sticky;bottom:0;display:flex;justify-content:flex-end;gap:10px;padding:16px 22px calc(16px + env(safe-area-inset-bottom));border-top:1px solid #e5e7eb;background:#fff}.quick-customizer>footer button{padding:12px 18px;border:1px solid #d9dee5;border-radius:11px;font-weight:800;background:#fff}.quick-customizer>footer .primary{border-color:#df171e;color:#fff;background:#df171e}
body.dark-mode .quick-customizer,body.dark-mode .quick-customizer>header,body.dark-mode .quick-customizer>footer{color:#f4f6f8;background:#111b28}body.dark-mode .quick-customizer>header,body.dark-mode .quick-customizer>footer,body.dark-mode .quick-customizer-list article{border-color:#2a3544}body.dark-mode .quick-customizer-list article.selected{background:#172332}body.dark-mode .quick-customizer>header button,body.dark-mode .quick-drag-handle,body.dark-mode .quick-customizer>footer button{color:#f4f6f8;border-color:#344254;background:#1d2a39}body.dark-mode .quick-customizer>footer .primary{border-color:#df171e;background:#df171e}
@media(min-width:700px){.quick-customizer-backdrop{align-items:center}.quick-customizer{border-radius:24px}}

.side-menu-layer{position:fixed;inset:0;z-index:2900;visibility:hidden;pointer-events:none}.side-menu-layer.open{visibility:visible;pointer-events:auto}.side-menu-backdrop{position:absolute;inset:0;border:0;opacity:0;background:rgba(5,12,22,.62);backdrop-filter:blur(3px);transition:opacity .22s}.side-menu-layer.open .side-menu-backdrop{opacity:1}.side-menu-panel{position:absolute;top:0;bottom:0;left:0;width:min(86vw,360px);overflow-y:auto;color:#172238;background:#fff;box-shadow:18px 0 55px rgba(0,0,0,.25);transform:translateX(-104%);transition:transform .25s ease}.side-menu-layer.open .side-menu-panel{transform:translateX(0)}
.side-menu-panel>header{position:relative;padding:24px 22px 18px;color:#fff;text-align:center;background:linear-gradient(145deg,#071426,#0b3e8b)}.side-menu-panel>header .ana-logo img{width:74px;filter:drop-shadow(0 5px 7px #0004)}.side-menu-panel>header .ana-logo small{color:#fff}.side-menu-panel>header>small{display:block;margin-top:8px;color:#b8cff0;font-size:9px;font-weight:900;letter-spacing:.12em}.side-menu-panel>header>button{position:absolute;top:16px;right:16px;width:38px;height:38px;border:0;border-radius:50%;color:#fff;font-size:25px;background:#ffffff1c}
.side-member{display:flex;align-items:center;gap:12px;margin:18px;padding:15px;border-radius:16px;background:#f2f6fb}.side-member-avatar{display:grid;width:48px;height:48px;flex:0 0 48px;place-items:center;overflow:hidden;border-radius:50%;color:#fff;font-weight:900;background:#0b3e8b}.side-member>div:last-child{min-width:0}.side-member b,.side-member span{display:block}.side-member b{overflow:hidden;font-size:14px;text-overflow:ellipsis;white-space:nowrap}.side-member span{margin-top:3px;color:#667085;font-size:10px}
.side-menu-panel nav{padding:0 14px}.side-menu-panel nav>button,.side-theme{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:11px;width:100%;padding:13px 10px;border:0;border-bottom:1px solid #edf0f4;color:inherit;text-align:left;background:transparent}.side-menu-panel nav>button>span,.side-theme>span{display:grid;width:40px;height:40px;place-items:center;border-radius:11px;color:#df171e;font-size:20px;background:#fff0f1}.side-menu-panel nav b,.side-menu-panel nav small,.side-theme b,.side-theme small{display:block}.side-menu-panel nav b,.side-theme b{font-size:13px}.side-menu-panel nav small,.side-theme small{margin-top:3px;color:#737d8d;font-size:9px}.side-menu-panel nav strong{color:#0b3e8b;font-size:20px}.side-menu-panel nav em{display:grid;width:24px;height:24px;place-items:center;border-radius:50%;color:#fff;font-size:10px;font-style:normal;background:#df171e}
.side-theme{margin:10px 14px;width:calc(100% - 28px);border-radius:13px;background:#f7f9fb}.side-theme i{position:relative;width:40px;height:23px;border-radius:99px;background:#c7cdd5}.side-theme i em{position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;background:#fff;transition:left .2s}.side-theme i.on{background:#0b3e8b}.side-theme i.on em{left:20px}.side-menu-panel>footer{padding:20px 18px;text-align:center}.side-menu-panel>footer button{width:100%;padding:13px;border:1px solid #ffd2d5;border-radius:12px;color:#c71923;font-weight:850;background:#fff}.side-menu-panel>footer small{display:block;margin-top:14px;color:#8a929f;font-size:9px}
body.dark-mode .side-menu-panel{color:#f3f6fa;background:#111b28}body.dark-mode .side-member,body.dark-mode .side-theme{background:#182535}body.dark-mode .side-member span,body.dark-mode .side-menu-panel nav small,body.dark-mode .side-theme small{color:#aeb7c4}body.dark-mode .side-menu-panel nav>button{border-color:#2b3746}body.dark-mode .side-menu-panel>footer button{color:#ff949a;border-color:#603239;background:#1a2432}

.version-hero{display:flex;align-items:center;gap:17px;margin-top:8px;padding:23px;border-radius:21px;color:#fff;background:linear-gradient(140deg,#071426,#0b3e8b)}.version-hero>span{display:grid;width:74px;height:74px;flex:0 0 74px;place-items:center;border:2px solid #ffffff45;border-radius:20px;font-size:23px;font-weight:900;background:#ffffff12}.version-hero small{color:#8fbcf5;font-size:9px;font-weight:900;letter-spacing:.1em}.version-hero h1{margin:5px 0;font-size:23px}.version-hero p{margin:0;color:#c6d3e4;font-size:11px;line-height:1.45}.version-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:15px}.version-summary>div{padding:14px 8px;border:1px solid var(--line);border-radius:14px;text-align:center;background:#fff}.version-summary small,.version-summary b{display:block}.version-summary small{color:#707a8a;font-size:8px;font-weight:850}.version-summary b{margin-top:6px;color:#0b3e8b;font-size:12px}.version-diagnostics,.version-services{margin-top:17px;padding:18px;border:1px solid var(--line);border-radius:17px;background:#fff}.version-diagnostics dl{margin:0}.version-diagnostics dl>div{display:grid;grid-template-columns:35% minmax(0,1fr);gap:12px;padding:10px 0;border-top:1px solid #edf0f4}.version-diagnostics dt{color:#717b8b;font-size:10px}.version-diagnostics dd{min-width:0;margin:0;overflow-wrap:anywhere;font-size:10px;font-weight:750;text-align:right}.version-services h2{margin:0 0 10px;font-size:18px}.version-services p{display:grid;grid-template-columns:12px minmax(0,1fr);gap:2px 9px;margin:0;padding:10px 0;border-top:1px solid #edf0f4}.version-services p>span{grid-row:1/3;width:10px;height:10px;margin-top:3px;border-radius:50%;background:#16854b}.version-services p>span.pending{background:#d49a1b}.version-services b,.version-services small{display:block}.version-services b{font-size:12px}.version-services small{color:#707a89;font-size:9px}.version-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:15px}.version-actions button{padding:13px 8px;border:1px solid #0b3e8b;border-radius:11px;color:#0b3e8b;font-size:10px;font-weight:900;background:#fff}.version-actions button:first-child{color:#fff;background:#0b3e8b}.version-actions+.share-feedback{min-height:18px;text-align:center}.dark-mode .version-summary>div,.dark-mode .version-diagnostics,.dark-mode .version-services{color:#f3f6fa;border-color:#2c3949;background:#151f2d}.dark-mode .version-diagnostics dl>div,.dark-mode .version-services p{border-color:#2c3949}.dark-mode .version-diagnostics dt,.dark-mode .version-services small{color:#aeb7c4}
@media(max-width:390px){.version-summary{grid-template-columns:1fr}.version-summary>div{display:flex;justify-content:space-between;text-align:left}.version-summary b{margin:0}.version-actions{grid-template-columns:1fr}}
.version-summary{grid-template-columns:repeat(2,1fr)}
.version-actions{grid-template-columns:1fr}
.version-signature{margin:24px 0 8px;color:#7a8492;font-size:11px;font-weight:800;letter-spacing:.06em;text-align:center}
.dark-mode .version-signature{color:#9ca7b5}
@media(max-width:390px){.version-summary{grid-template-columns:1fr}}

.home-banner-carousel {
  position: relative;
  overflow: hidden;
  min-height: 0;
  padding: 0;
}

.home-banner-slide {
  display: none;
}

.home-banner-slide.active {
  display: block;
}

.home-banner-slide a {
  display: block;
}

.home-banner-slide img {
  display: block;
  width: 100%;
}

.home-banner-dots {
  position: absolute;
  right: 0;
  bottom: 10px;
  left: 0;
  display: flex;
  justify-content: center;
  gap: 6px;
  pointer-events: none;
}

.home-banner-dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  opacity: 0.55;
  pointer-events: auto;
  background: #fff;
  box-shadow: 0 1px 4px #0007;
}

.home-banner-dots button.active {
  width: 18px;
  opacity: 1;
}
.side-member-avatar img{display:block;width:100%;height:100%;border-radius:inherit;object-fit:cover}.profile-demo-note.imported{border-color:#0b3e8b;background:#edf5ff}.member-card-live{margin:18px 0;padding:20px;border-radius:22px;color:#fff;background:linear-gradient(145deg,#081525,#0c315d);box-shadow:0 16px 34px #07142630}.member-card-live header{display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1px solid #ffffff25}.member-card-live header img{width:55px;height:42px;object-fit:contain;filter:drop-shadow(0 2px 3px #0005)}.member-card-live header small,.member-card-live header b{display:block}.member-card-live header small{font-size:7px;letter-spacing:.08em}.member-card-live header b{margin-top:3px;font-size:11px}.member-card-live>section{display:grid;grid-template-columns:92px 1fr;align-items:center;gap:17px;padding:20px 0}.member-card-live-photo{display:grid;width:92px;height:108px;place-items:center;overflow:hidden;border:2px solid #fff;border-radius:13px;background:#d8e0ea}.member-card-live-photo img{width:100%;height:100%;object-fit:cover}.member-card-live-photo>b{color:#0b3e8b;font-size:27px}.member-card-live section small,.member-card-live section h2,.member-card-live section strong{display:block}.member-card-live section small{margin-bottom:4px;color:#9fb5cf;font-size:7px}.member-card-live section h2{margin:0 0 14px;font-size:17px;line-height:1.2}.member-card-live section strong{font-size:22px;letter-spacing:.08em}.member-card-live footer{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-top:12px;border-top:1px solid #ffffff25}.member-card-live footer small,.member-card-live footer b{display:block}.member-card-live footer small{color:#9fb5cf;font-size:7px}.member-card-live footer b{margin-top:3px;font-size:11px}@media(max-width:390px){.member-card-live{padding:16px}.member-card-live>section{grid-template-columns:78px 1fr}.member-card-live-photo{width:78px;height:94px}.member-card-live section h2{font-size:15px}}
.profile-rgpd .profile-section-title button{padding:7px 9px;border:1px solid #0b3e8b;border-radius:8px;color:#0b3e8b;font-size:9px;font-weight:800;background:#fff}.profile-rgpd>p{margin:12px 0 0;color:#687385;font-size:10px}.consent-status{display:inline-block;padding:4px 7px;border-radius:999px;font-size:9px;font-weight:850}.consent-status.yes{color:#176b3a;background:#dff5e7}.consent-status.no{color:#9b2228;background:#ffe5e6}.consent-status.unknown{color:#6d7480;background:#edf0f3}.member-card-live{display:grid;grid-template-columns:minmax(0,2.25fr) minmax(105px,.9fr);overflow:hidden;padding:0;border:1px solid #d7dce3;border-radius:20px;color:#101318;background:#fff;box-shadow:0 14px 32px #07142624}.member-card-live-main{padding:18px 16px 15px;background:linear-gradient(115deg,#fff 0 88%,#eceff2 88%)}.member-card-live-brand{display:flex;align-items:center;gap:12px}.member-card-live-brand img{width:78px;height:58px;object-fit:contain}.member-card-live-brand>b{font-size:17px;line-height:1.05}.member-card-live-data{display:grid;grid-template-columns:92px minmax(0,1fr);align-items:end;gap:14px;margin-top:12px}.member-card-live-data h2{margin:0 0 8px;font-size:16px;line-height:1.1;text-transform:uppercase}.member-card-live-data small,.member-card-live-data strong,.member-card-live-data b{display:block}.member-card-live-data small{font-size:7px}.member-card-live-data strong{font-size:21px}.member-card-live-data b{overflow:hidden;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.member-card-live-data i{display:block;height:2px;margin:5px 0;background:#d51f27}.member-card-live-photo{width:92px;height:117px;border-color:#d6d9de}.member-card-live>aside{display:flex;align-items:center;flex-direction:column;padding:0 10px 14px;color:#fff;text-align:center;background:radial-gradient(circle at 30% 20%,#282828,#090909)}.member-card-live>aside em{align-self:stretch;margin:0 -10px 9px;padding:8px 4px;font-size:9px;font-style:normal;font-weight:900;background:#d51f27}.member-card-live>aside>strong{font-size:36px}.member-card-live-qr{display:grid;width:62px;height:62px;margin:7px 0 12px;place-items:center;border:5px solid #fff;border-radius:8px;color:#050505;font-size:53px;line-height:1;background:#fff}.member-card-live>aside small{font-size:7px}.member-card-live>aside b{margin-top:2px;font-size:11px}.member-card-live footer{grid-column:1/-1;display:flex;justify-content:space-between;padding:8px 14px;border:0;color:#fff;font-size:9px;letter-spacing:.03em;background:linear-gradient(90deg,#08713d 0 40%,#db2027 40%)}.member-card-live footer span,.member-card-live footer b{display:block}@media(max-width:390px){.member-card-live-main{padding:13px 10px}.member-card-live-brand img{width:58px;height:43px}.member-card-live-brand>b{font-size:12px}.member-card-live-data{grid-template-columns:72px minmax(0,1fr);gap:9px}.member-card-live-photo{width:72px;height:91px}.member-card-live-data h2{font-size:12px}.member-card-live-data strong{font-size:17px}.member-card-live>aside>strong{font-size:28px}.member-card-live-qr{width:52px;height:52px;font-size:43px}.member-card-live footer{font-size:7px}}

.external-event-hero.has-event-image {
  background-position: center;
  background-size: cover;
}

.external-event-hero.has-event-image::before,
.external-event-hero.has-event-image::after {
  display: none;
}

.submission-intro,
.submission-warning {
  display: flex;
  gap: 14px;
  margin: 16px 0;
  padding: 18px;
  border-radius: 18px;
}
.submission-intro { color: #fff; background: linear-gradient(135deg, #0b3e8b, #10233d); }
.submission-intro > span { font-size: 34px; }
.submission-intro h2, .submission-intro p { margin: 0 0 5px; }
.submission-warning { border: 1px solid #f0c86a; color: #624300; background: #fff8df; }
.submission-warning b, .submission-warning span { display: block; }
.submission-warning span { margin-top: 3px; font-size: 12px; }
.submission-honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.member-event-form fieldset { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0; padding: 16px; border: 1px solid #e0e5ec; border-radius: 18px; }
.member-event-form legend { padding: 0 8px; font-weight: 800; }
.member-event-form legend span { display: inline-grid; width: 25px; height: 25px; margin-right: 5px; place-items: center; border-radius: 50%; color: #fff; background: #df171e; }
.member-event-form label { display: grid; gap: 6px; color: #3e4757; font-size: 12px; font-weight: 700; }
.member-event-form .field-hint { color: #7a8492; font-size: 10px; font-weight: 500; }
.member-event-form label.full { grid-column: 1 / -1; }
.member-event-form input:not([type="checkbox"]), .member-event-form textarea, .member-event-form select { width: 100%; padding: 12px; border: 1px solid #d9dee6; border-radius: 11px; color: #0a1428; background: #fff; }
.member-event-form textarea { min-height: 90px; resize: vertical; }
.submission-consent { display: flex !important; grid-template-columns: auto 1fr; align-items: start; padding: 14px; border-radius: 12px; background: #f4f6f9; }
.submission-send { width: 100%; padding: 16px; border: 0; border-radius: 14px; color: #fff; font-weight: 900; background: #df171e; }
body.dark-mode .member-event-form fieldset { border-color: #344252; }
body.dark-mode .member-event-form label { color: #dfe6ef; }
body.dark-mode .submission-consent { background: #182330; }
@media (max-width: 390px) { .member-event-form fieldset { grid-template-columns: 1fr; } .member-event-form label.full { grid-column: auto; } }
.submission-status-list article { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; padding: 15px; border: 1px solid #e0e5ec; border-radius: 14px; }
.submission-status-list article.unread { border-color: #df171e; background: #fff7f7; box-shadow: 0 7px 18px #df171e14; }
.submission-status-list article.unread small b { color: #df171e; }
.submission-status-list article > div { min-width: 0; flex: 1; }
.submission-status-list h3, .submission-status-list p { margin: 3px 0; }
.submission-status-list p, .submission-status-list small, .submission-status-list time { color: #667085; font-size: 11px; }
.submission-status-dot { width: 12px; height: 12px; flex: 0 0 12px; border-radius: 50%; background: #d19a20; }
.submission-status-dot.status-approved, .submission-status-dot.status-published, .submission-status-dot.status-accepted, .submission-status-dot.status-completed { background: #16854b; }
.submission-status-dot.status-rejected, .submission-status-dot.status-deleted { background: #c42830; }
body.dark-mode .submission-status-list article { border-color: #344252; }
body.dark-mode .submission-status-list article.unread { border-color: #ef4349; background: #2b1b20; }
.documents-hero { display:flex; gap:16px; margin:14px 0 22px; padding:22px; border-radius:20px; color:#fff; background:linear-gradient(135deg,#0b3e8b,#142235); }
.documents-hero > span { font-size:38px; }.documents-hero h2,.documents-hero p{margin:0 0 5px}
.document-card { display:flex; align-items:center; gap:13px; margin-bottom:10px; padding:15px; border:1px solid #e0e5ec; border-radius:15px; }
.document-card > span { padding:9px 6px; border-radius:7px; color:#fff; font-size:10px; font-weight:900; background:#df171e; }
.document-card > div { min-width:0; flex:1; }.document-card h3,.document-card p{margin:3px 0}.document-card p{color:#667085;font-size:12px}
.document-card button { padding:9px; border:0; border-radius:9px; color:#fff; font-size:10px; font-weight:850; background:#0b3e8b; }
.document-card.featured { border-color:#df171e; }.personal-archive-preview{display:flex;align-items:flex-start;gap:16px;margin-top:22px;padding:24px;border:1px dashed #aeb7c4;border-radius:15px}.personal-archive-preview>span{font-size:32px}.personal-archive-preview b,.personal-archive-preview small{display:block}.personal-archive-preview p{margin:6px 0}.personal-archive-preview small{color:#667085;font-size:12px}
body.dark-mode .document-card{border-color:#344252} @media(max-width:390px){.document-card{align-items:flex-start;flex-wrap:wrap}.document-card button{width:100%}}
.archive-upload-card{margin:16px 0;padding:18px;border:1px solid #e0e5ec;border-radius:16px}.archive-upload-card label{display:grid;gap:8px;font-weight:800}.archive-upload-card p{color:#667085;font-size:11px}.archive-upload-card button{width:100%;padding:13px;border:0;border-radius:11px;color:#fff;font-weight:850;background:#df171e}.archive-document-list article{display:flex;align-items:center;gap:10px;margin-bottom:10px;padding:13px;border:1px solid #e0e5ec;border-radius:14px}.archive-document-list article>span{padding:8px 5px;border-radius:6px;color:#fff;font-size:9px;font-weight:900;background:#0b3e8b}.archive-document-list article>div{min-width:0;flex:1}.archive-document-list h3,.archive-document-list p{margin:2px 0}.archive-document-list p,.archive-document-list small{color:#667085;font-size:10px}.archive-document-list button{padding:7px;border:0;border-radius:7px}.archive-document-list button:last-child{color:#df171e;background:transparent;font-size:18px}body.dark-mode .archive-upload-card,body.dark-mode .archive-document-list article{border-color:#344252}
.archive-upload-card .archive-file-selection{margin:10px 0;padding:10px;border-radius:9px;color:#697386;background:#f3f5f8}.archive-upload-card .archive-file-selection.selected{color:#176b3a;font-weight:800;background:#eaf8ef}body.dark-mode .archive-upload-card .archive-file-selection{color:#aeb7c4;background:#1a2635}body.dark-mode .archive-upload-card .archive-file-selection.selected{color:#9ee0b5;background:#153020}

.external-event-hero::before,
.external-event-hero::after {
  position: absolute;
  bottom: 52px;
  width: 74px;
  height: 145px;
  border-radius: 45% 45% 15% 15%;
  content: "";
  background: linear-gradient(90deg, #0a0d0f, #283038, #080a0c);
  box-shadow: 0 -28px 0 -15px #11171c;
}

.external-event-hero::before {
  right: 74px;
  rotate: -5deg;
}

.external-event-hero::after {
  right: 15px;
  height: 165px;
  rotate: 7deg;
}

.external-hero-toolbar {
  position: relative;
  display: flex;
  align-items: center;
  z-index: 2;
}

.external-hero-toolbar > span {
  margin-right: auto;
  padding: 7px 9px;
  border-radius: 7px;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .5px;
  background: #df171e;
}

.external-hero-toolbar i {
  display: grid;
  width: 34px;
  height: 34px;
  margin-left: 6px;
  place-items: center;
  border-radius: 9px;
  font-size: 18px;
  font-style: normal;
  background: #05090db8;
}

.external-hero-art {
  position: absolute;
  top: 75px;
  left: 22px;
  display: grid;
  width: 92px;
  height: 102px;
  z-index: 2;
  place-items: center;
  align-content: center;
  border: 4px solid #df171e;
  border-radius: 12px 12px 46% 46%;
  background: #080b0fdd;
  box-shadow: inset 0 0 0 3px #fff2;
}

.external-hero-art b {
  font-size: 30px;
  line-height: 1;
}

.external-hero-art span {
  margin-top: 7px;
  color: #ef3037;
  font-size: 8px;
  font-weight: 900;
}

.external-hero-copy {
  position: absolute;
  right: 112px;
  bottom: 22px;
  left: 20px;
  z-index: 2;
}

.external-hero-copy h2 {
  margin: 0;
  font-size: 26px;
  line-height: 1.05;
}

.external-hero-copy p {
  margin: 7px 0 0;
  color: #e3e8ee;
  font-size: 10px;
}

.external-hero-date {
  position: absolute;
  right: 16px;
  bottom: 17px;
  display: grid;
  width: 86px;
  overflow: hidden;
  z-index: 2;
  border-radius: 9px;
  color: #111827;
  text-align: center;
  background: #fff;
}

.external-hero-date small {
  padding: 7px 4px;
  color: #fff;
  font-size: 8px;
  font-weight: 900;
  background: #df171e;
}

.external-hero-date b {
  padding-top: 8px;
  font-size: 27px;
  line-height: 1;
}

.external-hero-date span {
  padding: 5px 0 8px;
  font-size: 9px;
  font-weight: 800;
}

.external-detail-tabs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-bottom: 1px solid #e2e6ec;
}

.external-detail-tabs button {
  min-width: 0;
  padding: 12px 2px 10px;
  border: 0;
  border-bottom: 2px solid transparent;
  color: #4d5869;
  font-size: 8px;
  background: transparent;
}

.external-detail-tabs button span {
  display: block;
  margin-bottom: 5px;
  font-size: 19px;
}

.external-detail-tabs button.selected {
  border-bottom-color: #df171e;
  color: #df171e;
  font-weight: 800;
}

.external-tab-content {
  padding: 4px 16px 16px;
}

.external-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
  padding: 15px;
  border: 1px solid #e3e7ed;
  border-radius: 15px;
  background: #fbfcfd;
}

.external-facts > div {
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr);
  align-items: start;
  gap: 7px;
  min-width: 0;
  padding: 7px 0;
}

.external-facts > div > span {
  color: #df171e;
  font-size: 22px;
}

.external-facts p,
.external-facts small,
.external-facts b,
.external-facts em {
  display: block;
  min-width: 0;
  margin: 0;
}

.external-facts small {
  color: #606b7b;
  font-size: 7px;
  font-weight: 800;
}

.external-facts b {
  margin-top: 3px;
  color: #111b2f;
  font-size: 10px;
}

.external-facts em {
  margin-top: 3px;
  overflow: hidden;
  color: #748092;
  font-size: 8px;
  font-style: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.external-tags {
  display: flex;
  gap: 6px;
  margin: 13px 0 18px;
  overflow-x: auto;
  scrollbar-width: none;
}

.external-tags span {
  min-width: 64px;
  padding: 7px 10px;
  border: 1px solid #c8d7ee;
  border-radius: 7px;
  color: #315fa5;
  font-size: 8px;
  font-weight: 900;
  text-align: center;
  white-space: nowrap;
}

.external-copy {
  margin-top: 16px;
}

.external-copy h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 9px;
  font-size: 15px;
}

.external-copy h3 span {
  color: #df171e;
}

.external-copy > p {
  margin: 0;
  color: #596475;
  font-size: 10px;
  line-height: 1.55;
}

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

.external-highlights > div {
  min-width: 0;
  padding: 12px 5px;
  border: 1px solid #e2e6ec;
  border-radius: 11px;
  text-align: center;
}

.external-highlights b,
.external-highlights strong,
.external-highlights small {
  display: block;
}

.external-highlights b {
  color: #df171e;
  font-size: 22px;
}

.external-highlights strong {
  margin: 7px 0 4px;
  font-size: 9px;
}

.external-highlights small {
  color: #6d7786;
  font-size: 7px;
  line-height: 1.35;
}

.external-tab-panel {
  min-height: 290px;
  padding: 25px 8px 10px;
}

.external-tab-panel > span {
  color: #df171e;
  font-size: 34px;
}

.external-tab-panel h3 {
  margin: 9px 0;
  font-size: 18px;
}

.external-tab-panel > p,
.external-tab-panel > small,
.external-tab-panel li {
  color: #647083;
  font-size: 10px;
  line-height: 1.55;
}

.event-timeline {
  margin: 17px 0;
  padding-left: 15px;
  border-left: 2px solid #df171e;
}

.event-timeline p {
  margin: 0;
  padding: 8px 0;
  color: #4e596a;
  font-size: 10px;
}

.event-timeline b {
  display: inline-block;
  width: 48px;
  color: #df171e;
}

.demo-map {
  display: grid;
  min-height: 165px;
  margin-top: 17px;
  place-items: center;
  align-content: center;
  border: 1px solid #dce3ed;
  border-radius: 14px;
  color: #315fa5;
  background:
    linear-gradient(35deg, transparent 45%, #dfe8f5 46% 48%, transparent 49%),
    linear-gradient(145deg, transparent 45%, #dfe8f5 46% 48%, transparent 49%),
    #f5f8fc;
}

.demo-map i {
  font-size: 36px;
  font-style: normal;
}

.demo-map b,
.demo-map small {
  display: block;
  margin-top: 6px;
}

.demo-map small {
  max-width: 210px;
  color: #7a8493;
  font-size: 8px;
  text-align: center;
}

.registration-panel .event-facebook {
  width: 100%;
  margin: 20px 0 0;
}

.event-registration-button {
  display: flex;
  width: 100%;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
  padding: 12px;
  border: 0;
  border-radius: 11px;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  background: #df171e;
}

.event-registration-button span {
  color: #fff;
  font-size: 18px;
}

.external-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin: 0 16px 12px;
  padding: 14px;
  border: 1px solid #e2e6ec;
  border-radius: 14px;
}

.external-cta b,
.external-cta span {
  display: block;
}

.external-cta b {
  font-size: 12px;
}

.external-cta div > span {
  margin-top: 3px;
  color: #707b8b;
  font-size: 8px;
}

.external-cta .event-facebook {
  width: auto;
  min-height: 42px;
  margin: 0;
  padding: 9px 12px;
  font-size: 8px;
}

body.dark-mode .external-detail-page,
body.dark-mode .external-facts,
body.dark-mode .external-highlights > div,
body.dark-mode .external-cta,
body.dark-mode .demo-map {
  border-color: #263344;
  background-color: #101a27;
}

body.dark-mode .external-detail-tabs {
  border-color: #263344;
}

body.dark-mode .external-detail-tabs button,
body.dark-mode .external-facts small,
body.dark-mode .external-facts em,
body.dark-mode .external-copy > p,
body.dark-mode .external-highlights small,
body.dark-mode .external-tab-panel > p,
body.dark-mode .external-tab-panel > small,
body.dark-mode .external-tab-panel li,
body.dark-mode .event-timeline p,
body.dark-mode .external-cta div > span {
  color: #9aa6b6;
}

body.dark-mode .external-facts b,
body.dark-mode .external-copy h3,
body.dark-mode .external-highlights strong,
body.dark-mode .external-tab-panel h3,
body.dark-mode .external-cta b {
  color: #edf2f8;
}

@media (max-width: 360px) {
  .external-event-hero {
    min-height: 245px;
  }

  .external-hero-art {
    top: 65px;
    width: 76px;
    height: 87px;
  }

  .external-hero-copy h2 {
    font-size: 21px;
  }

  .external-hero-date {
    width: 72px;
  }

  .external-hero-copy {
    right: 94px;
  }

  .external-detail-tabs button {
    font-size: 7px;
  }

  .external-detail-tabs button span {
    font-size: 17px;
  }

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

  .external-cta {
    grid-template-columns: 1fr;
  }

  .external-cta .event-facebook {
    width: 100%;
  }
}
.menu-list > button > span small {
  display: block;
  margin-top: 3px;
  color: #7a8391;
  font-size: 0.72rem;
  font-weight: 500;
}

/* Cartão claro de demonstração — versão 2026 */
.member-id-card {
  position: relative;
  width: 100%;
  aspect-ratio: 1.586 / 1;
  overflow: hidden;
  border: 1px solid #d9dce1;
  border-radius: clamp(14px, 4vw, 24px);
  color: #101114;
  background:
    linear-gradient(118deg, transparent 0 58%, #f2f2f2 58% 59%, transparent 59% 100%),
    radial-gradient(circle at 57% 48%, #f4f4f4 0 18%, transparent 18.5%),
    #fff;
  box-shadow: 0 10px 24px #0b142526;
}

.member-id-card::after {
  content: "Ana";
  position: absolute;
  z-index: 0;
  top: 23%;
  left: 42%;
  color: #0c142408;
  font: italic 900 clamp(42px, 18vw, 118px)/1 Georgia, serif;
  transform: rotate(-8deg);
}

.member-id-brand {
  position: absolute;
  z-index: 2;
  top: 5%;
  left: 4%;
  display: flex;
  align-items: flex-start;
  gap: 4%;
  width: 62%;
}

.member-id-brand .ana-logo {
  flex: 0 0 31%;
}

.member-id-brand .ana-logo img {
  width: 100%;
  filter: drop-shadow(0 2px 2px #0002);
}

.member-id-brand > div {
  display: grid;
  padding-top: 2%;
  font-size: clamp(5px, 1.7vw, 11px);
  line-height: 1.13;
}

.member-id-brand > div b {
  font-size: 1.38em;
  letter-spacing: -.02em;
}

.member-id-brand > div strong {
  margin: 2% 0 6%;
  color: #c60008;
  font-size: 1.25em;
}

.member-id-brand > div small,
.member-id-card footer b {
  font-weight: 800;
  white-space: nowrap;
}

.member-id-brand i,
.member-id-card footer i {
  color: #09672b;
  font-style: normal;
}

.member-id-brand em,
.member-id-card footer em {
  color: #c60008;
  font-style: normal;
}

.member-id-photo {
  position: absolute;
  z-index: 2;
  top: 35%;
  bottom: 15%;
  left: 4%;
  width: 24%;
  margin: 0;
  overflow: hidden;
  border: 1px solid #202124;
  border-radius: clamp(5px, 1.6vw, 11px);
  background: #eee;
}

.member-id-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
}

.member-id-details {
  position: absolute;
  z-index: 2;
  top: 35%;
  left: 32%;
  width: 39%;
}

.member-id-details h2 {
  min-height: 2.1em;
  margin: 0 0 4%;
  color: #111318;
  font-size: clamp(9px, 3vw, 20px);
  line-height: 1.02;
  text-transform: uppercase;
}

.member-id-details h2.member-name-medium { font-size: clamp(8px, 2.5vw, 17px); }
.member-id-details h2.member-name-long { font-size: clamp(7px, 2.15vw, 14px); }

.member-id-details dl,
.member-id-details dl div {
  margin: 0;
}

.member-id-details dl {
  display: grid;
  gap: 3%;
}

.member-id-details dl div {
  padding-bottom: 2%;
  border-bottom: 1px solid #d30911;
}

.member-id-details dt {
  font-size: clamp(5px, 1.35vw, 9px);
}

.member-id-details dd {
  margin: 0;
  overflow: hidden;
  font-size: clamp(7px, 2.15vw, 14px);
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-id-validity {
  position: absolute;
  z-index: 2;
  top: 6%;
  right: 3%;
  bottom: 16%;
  display: flex;
  align-items: center;
  flex-direction: column;
  width: 22%;
  padding-left: 3%;
  border-left: 1px solid #303236;
  text-align: center;
}

.member-id-validity > b {
  font-size: clamp(6px, 1.8vw, 12px);
}

.member-id-validity > strong {
  color: #c60008;
  font-size: clamp(17px, 6.2vw, 41px);
  line-height: 1;
}

.member-id-validity .demo-qr {
  width: 54%;
  height: auto;
  aspect-ratio: 1;
  margin: 7% auto 5%;
  padding: 3px;
  gap: 0;
  border: 1px solid #111;
  border-radius: 4px;
  box-shadow: none;
}

.member-id-validity .demo-qr i {
  width: 26%;
  height: 26%;
  border-width: 2px;
  box-shadow: inset 0 0 0 2px #fff, inset 0 0 0 4px #071425;
}

.member-id-validity .demo-qr i:nth-child(1) { top: 3px; left: 3px; }
.member-id-validity .demo-qr i:nth-child(2) { top: 3px; right: 3px; }
.member-id-validity .demo-qr i:nth-child(3) { bottom: 3px; left: 3px; }

.member-id-validity > span {
  margin-top: auto;
  font-size: clamp(5px, 1.3vw, 9px);
}

.member-id-validity > span em {
  display: block;
  margin-top: 2%;
  font-size: 1.35em;
  font-style: normal;
  font-weight: 800;
}

.member-id-card footer {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 13%;
  padding: 0 4%;
  color: #fff;
  background: linear-gradient(110deg, #063d1c 0 45%, #bd0008 55% 100%);
  font-size: clamp(5px, 1.45vw, 10px);
  letter-spacing: .04em;
}

.member-id-card footer i { color: #44be5d; }
.member-id-card footer em { color: #fff; }

.dark-mode .member-id-card {
  border-color: #59606a;
  box-shadow: 0 12px 28px #0007;
}

.member-card-static {
  width: 100%;
  aspect-ratio: 1.6 / 1;
  margin: 0;
  overflow: hidden;
  border: 1px solid #d9dce1;
  border-radius: clamp(14px, 4vw, 24px);
  background: #fff;
  box-shadow: 0 10px 24px #0b142526;
}

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

body.dark-mode .member-card-static {
  border-color: #59606a;
  box-shadow: 0 12px 28px #0007;
}

.ana-member-card-new {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 2048 / 1280;
  margin: 18px 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #d7dce3;
  border-radius: 20px;
  color: #071426;
  background: #fff url("member-card-ana.png") center / cover no-repeat;
  box-shadow: 0 14px 32px #07142624;
}

.ana-member-card-template {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ana-member-card-new figcaption,
.ana-member-card-new figcaption b {
  position: absolute;
  display: block;
}

.ana-member-card-new figcaption {
  inset: 0;
  z-index: 2;
}

.ana-member-card-new figcaption b {
  overflow: hidden;
  color: #071426;
  font-weight: 850;
  line-height: 1.05;
  text-transform: uppercase;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ana-card-photo {
  position: absolute;
  left: 71.8%;
  top: 19.4%;
  display: grid;
  width: 19.4%;
  aspect-ratio: 3 / 4;
  place-items: center;
  overflow: hidden;
  border: 2px solid #071426;
  border-radius: 8px;
  color: #071426;
  font-size: clamp(10px, 3.2vw, 18px);
  font-weight: 900;
  background: #eef2f7;
  box-shadow: 0 3px 8px #07142618;
}

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

.ana-card-name {
  left: 2.1%;
  top: 33.6%;
  width: 57.8%;
  font-size: clamp(8px, 2.55vw, 15px);
  letter-spacing: .01em;
}

.ana-card-name.member-name-medium {
  font-size: clamp(7.5px, 2.35vw, 13.5px);
}

.ana-card-name.member-name-long {
  top: 31%;
  display: -webkit-box;
  max-height: 2.15em;
  font-size: clamp(6.6px, 1.85vw, 10.8px);
  letter-spacing: 0;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.ana-card-name.member-name-longer {
  top: 30.7%;
  display: -webkit-box;
  max-height: 2.15em;
  font-size: clamp(5.8px, 1.55vw, 9.2px);
  letter-spacing: -.015em;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.ana-card-name.member-name-xlong {
  top: 30.5%;
  display: -webkit-box;
  max-height: 2.2em;
  font-size: clamp(5.2px, 1.35vw, 8.1px);
  letter-spacing: -.01em;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.ana-card-club {
  left: 2.1%;
  top: 47.9%;
  width: 55%;
  font-size: clamp(7px, 2.1vw, 12.5px);
  font-weight: 750;
}

.ana-card-club.member-club-medium {
  font-size: clamp(6.4px, 1.8vw, 10.6px);
}

.ana-card-club.member-club-long {
  top: 47.1%;
  display: -webkit-box;
  max-height: 2.15em;
  font-size: clamp(6.2px, 1.7vw, 9.8px);
  letter-spacing: -.01em;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.ana-card-club.member-club-longer {
  top: 47%;
  display: -webkit-box;
  max-height: 2.15em;
  font-size: clamp(5.8px, 1.55vw, 9px);
  letter-spacing: -.015em;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.ana-card-club.member-club-xlong {
  top: 47%;
  display: -webkit-box;
  max-height: 2.2em;
  font-size: clamp(5.3px, 1.35vw, 8px);
  letter-spacing: -.02em;
  white-space: normal;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.ana-card-number,
.ana-card-issued,
.ana-card-valid {
  top: 62.4%;
  font-size: clamp(6px, 1.6vw, 9.5px);
  font-weight: 800;
}

.ana-card-number {
  left: 1.1%;
  width: 11.5%;
  text-align: center;
}

.ana-card-issued {
  left: 22%;
  width: 16.5%;
  text-align: center;
}

.ana-card-valid {
  left: 44.2%;
  width: 16.3%;
  font-size: clamp(5px, 1.35vw, 8.1px);
  text-align: center;
}

body.dark-mode .ana-member-card-new {
  border-color: #59606a;
  background: #fff;
  box-shadow: 0 12px 28px #0007;
}

.profile-back {
  margin: 0 0 14px;
  padding: 7px 0;
  border: 0;
  color: var(--blue);
  font-size: 0.84rem;
  font-weight: 800;
  background: transparent;
}

.profile-identity {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  align-items: center;
  gap: 20px;
  padding: 20px;
  overflow: hidden;
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(135deg, #07172f, #0b428c);
  box-shadow: 0 14px 30px rgba(7, 36, 79, 0.22);
}

.profile-photo {
  width: 108px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 3px solid rgba(255,255,255,.88);
  border-radius: 15px;
  background: #dce3ec;
}

.profile-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
}

.profile-photo-locked {
  display: grid;
  place-items: center;
  border-color: rgba(255,255,255,.45);
  color: #fff;
  font-size: 1.55rem;
  background: rgba(255,255,255,.12);
}

.profile-locked-panel {
  margin-top: 17px;
  padding: 25px 20px;
  border: 1px solid #dce4ef;
  border-radius: 20px;
  text-align: center;
  background: linear-gradient(180deg, #f8fbff, #fff);
  box-shadow: 0 9px 24px rgba(20, 42, 77, .07);
}

.profile-lock-icon {
  display: grid;
  width: 58px;
  height: 58px;
  margin: 0 auto 13px;
  place-items: center;
  border-radius: 17px;
  color: #fff;
  font-size: 1.6rem;
  background: linear-gradient(135deg, #0b3e8b, #1766c3);
}

.profile-locked-panel > small {
  color: var(--blue);
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .1em;
}

.profile-locked-panel h2 {
  margin: 7px 0 10px;
  font-size: 1.2rem;
}

.profile-locked-panel > p {
  margin: 0 auto 18px;
  max-width: 390px;
  color: #687386;
  font-size: .78rem;
  line-height: 1.5;
}

.profile-unlock-button,
.profile-resend-button {
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  font-size: .8rem;
  font-weight: 900;
  background: var(--blue);
}

.profile-unlock-button:disabled,
.profile-resend-button:disabled {
  cursor: wait;
  opacity: .65;
}

.profile-resend-button {
  min-height: 39px;
  margin-top: 7px;
  color: var(--blue);
  background: transparent;
}

.profile-otp-sent {
  margin: 15px 0 12px;
  padding: 10px;
  border-radius: 10px;
  color: #176b3a;
  font-size: .75rem;
  background: #eaf8ef;
}

.profile-code-field {
  display: block;
  margin-bottom: 12px;
  text-align: left;
}

.profile-code-field span {
  display: block;
  margin: 0 0 6px 2px;
  color: #596476;
  font-size: .7rem;
  font-weight: 800;
}

.profile-code-field input {
  width: 100%;
  height: 56px;
  border: 1px solid #cbd5e3;
  border-radius: 12px;
  outline: 0;
  color: #101a2d;
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: .35em;
  text-align: center;
  background: #fff;
}

.profile-code-field input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(11, 62, 139, .12);
}

.profile-locked-panel .profile-privacy-note {
  margin: 10px 0 0;
  color: #8891a0;
  font-size: .65rem;
}

.profile-feedback.error {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid #f0b4b8;
  border-radius: 10px;
  color: #9b1c22;
  font-weight: 800;
  background: #fff0f1;
}

.profile-access-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  padding: 11px 13px;
  border: 1px solid #bde4cb;
  border-radius: 12px;
  color: #176b3a;
  font-size: .72rem;
  font-weight: 850;
  background: #edf9f1;
}

.profile-access-status button {
  padding: 6px 9px;
  border: 1px solid #87c69e;
  border-radius: 8px;
  color: #176b3a;
  font-size: .67rem;
  font-weight: 850;
  background: #fff;
}

.profile-admin-note {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 12px;
  margin-top: 14px;
  padding: 15px;
  border: 1px solid #d9e2ee;
  border-radius: 15px;
  background: #f7f9fc;
}

.profile-admin-note > span {
  display: grid;
  height: 42px;
  place-items: center;
  border-radius: 11px;
  color: var(--blue);
  background: #e7f0fb;
}

.profile-admin-note b {
  color: #172238;
  font-size: .79rem;
}

.profile-admin-note p {
  margin: 4px 0 0;
  color: #6d7685;
  font-size: .7rem;
  line-height: 1.45;
}

body.dark-mode .profile-locked-panel,
body.dark-mode .profile-admin-note {
  border-color: #29364a;
  color: #f2f5fa;
  background: #131d2d;
}

body.dark-mode .profile-locked-panel h2,
body.dark-mode .profile-admin-note b {
  color: #f2f5fa;
}

body.dark-mode .profile-code-field input {
  border-color: #3a4a62;
  color: #fff;
  background: #0d1624;
}

body.dark-mode .profile-otp-sent,
body.dark-mode .profile-access-status {
  border-color: #275d3c;
  color: #9ee0b5;
  background: #152a1d;
}

body.dark-mode .profile-feedback.error {
  border-color: #7f2d35;
  color: #ffb8bf;
  background: #32161b;
}

body.dark-mode .profile-access-status button {
  border-color: #397751;
  color: #9ee0b5;
  background: #17261d;
}

.profile-identity small {
  color: #9fc5fa;
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .08em;
}

.profile-identity h2 {
  margin: 5px 0 9px;
  font-size: clamp(1.1rem, 5vw, 1.42rem);
  line-height: 1.08;
}

.profile-identity span {
  display: inline-block;
  padding: 5px 9px;
  border-radius: 999px;
  color: #dff9e8;
  font-size: .7rem;
  font-weight: 900;
  background: rgba(23, 151, 72, .32);
}

.profile-identity p {
  margin: 9px 0 0;
  color: #d8e5f8;
  font-size: .76rem;
}

.profile-demo-note {
  margin: 13px 0 18px;
  padding: 11px 13px;
  border: 1px solid #f3d38a;
  border-radius: 12px;
  color: #66501d;
  font-size: .73rem;
  line-height: 1.45;
  background: #fff9e9;
}

.profile-demo-note b {
  color: #9b6410;
}

.profile-completeness,
.profile-details,
.profile-membership {
  margin-top: 14px;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 7px 18px rgba(20, 41, 72, .05);
}

.profile-completeness > div,
.profile-section-title,
.profile-membership > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.profile-completeness > div {
  font-weight: 800;
}

.profile-completeness > div b {
  color: var(--blue);
}

.profile-completeness > i {
  display: block;
  height: 7px;
  margin: 10px 0;
  overflow: hidden;
  border-radius: 99px;
  background: #e5eaf1;
}

.profile-completeness > i em {
  display: block;
  width: 85%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--blue), #2783e7);
}

.profile-completeness p {
  margin: 0;
  color: #697386;
  font-size: .76rem;
  line-height: 1.4;
}

.profile-section-title small,
.profile-membership small {
  color: var(--blue);
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .08em;
}

.profile-section-title h3,
.profile-membership h3 {
  margin: 3px 0 0;
  font-size: 1rem;
}

.profile-edit {
  padding: 7px 11px;
  border: 1px solid #bed0ea;
  border-radius: 9px;
  color: var(--blue);
  font-size: .72rem;
  font-weight: 800;
  background: #f7faff;
}

.profile-details dl {
  margin: 13px 0 0;
}

.profile-details dl > div {
  display: grid;
  grid-template-columns: 38% minmax(0, 1fr);
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid #edf0f4;
}

.profile-details dt {
  color: #788192;
  font-size: .74rem;
}

.profile-details dd {
  min-width: 0;
  margin: 0;
  overflow-wrap: anywhere;
  color: #182238;
  font-size: .78rem;
  font-weight: 750;
  text-align: right;
}

.profile-verified,
.profile-pending {
  display: block;
  margin-top: 4px;
  color: #168346;
  font-size: .62rem;
  font-weight: 850;
}

.profile-pending {
  color: #ae6e0e;
}

.profile-membership > div > span {
  display: grid;
  flex: 0 0 43px;
  height: 43px;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  font-size: 1.25rem;
  background: var(--blue);
}

.profile-membership > div > div {
  flex: 1;
}

.profile-membership p {
  margin: 4px 0 0;
  color: #697386;
  font-size: .72rem;
}

.profile-membership > div > b {
  padding: 5px 8px;
  border-radius: 99px;
  color: #117c40;
  font-size: .66rem;
  background: #e8f7ed;
}

.profile-membership > button {
  width: 100%;
  margin-top: 14px;
  padding: 11px;
  border: 0;
  border-radius: 10px;
  color: #fff;
  font-size: .77rem;
  font-weight: 850;
  background: var(--blue);
}

.profile-data-request {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  width: 100%;
  margin-top: 14px;
  padding: 15px;
  border: 1px solid var(--line);
  border-radius: 15px;
  color: #172238;
  text-align: left;
  background: #fff;
}

.profile-data-request > span:first-child {
  display: grid;
  height: 38px;
  place-items: center;
  border-radius: 10px;
  color: var(--blue);
  background: #edf5ff;
}

.profile-data-request b,
.profile-data-request small {
  display: block;
}

.profile-data-request b {
  font-size: .8rem;
}

.profile-data-request small {
  margin-top: 3px;
  color: #70798a;
  font-size: .68rem;
}

.profile-data-request strong {
  color: var(--blue);
  font-size: 1.2rem;
}

.profile-change-modal {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  place-items: end center;
  padding: 18px 18px calc(96px + env(safe-area-inset-bottom));
  background: rgba(4, 12, 24, .55);
}

body.profile-change-open .bottom-nav {
  display: none;
}

.profile-change-card {
  width: min(560px, 100%);
  max-height: min(calc(100svh - 128px - env(safe-area-inset-bottom)), 760px);
  overflow: auto;
  padding: 20px;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 22px 60px rgba(0,0,0,.24);
}

.profile-change-card header {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
}

.profile-change-card header small {
  color: var(--blue);
  font-size: .64rem;
  font-weight: 900;
}

.profile-change-card h2 {
  margin: 4px 0 6px;
}

.profile-change-card p {
  margin: 0;
  color: #667085;
  font-size: .75rem;
  line-height: 1.45;
}

.profile-change-card header button {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  border: 0;
  border-radius: 12px;
  font-size: 23px;
  background: #eef2f7;
}

.profile-change-card label {
  display: block;
  margin-top: 12px;
  color: #344054;
  font-size: .72rem;
  font-weight: 800;
}

.profile-change-card input,
.profile-change-card textarea {
  width: 100%;
  margin-top: 6px;
  padding: 12px;
  border: 1px solid #cfd8e5;
  border-radius: 12px;
  font: inherit;
  background: #fff;
}

.profile-change-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.profile-photo-guidance {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #dce3ee;
  border-radius: 14px;
  background: #f8fafc;
}

.profile-photo-guidance>button {
  width: 100%;
  border: 0;
  border-radius: 11px;
  padding: 11px 12px;
  color: #fff;
  font-size: 12px;
  font-weight: 850;
  background: #0b3e8b;
}

.profile-photo-guidance img {
  display: block;
  width: 100%;
  border: 1px solid #e1e7f0;
  border-radius: 12px;
  cursor: zoom-in;
}

.profile-photo-guidance img[hidden],
.profile-photo-guidance label[hidden] {
  display: none;
}

.profile-photo-confirm {
  display: flex !important;
  align-items: flex-start;
  flex-direction: row !important;
  gap: 8px;
  padding: 10px;
  border-radius: 10px;
  color: #0a1428;
  font-size: 12px;
  font-weight: 800;
  background: #fff;
}

.profile-photo-confirm input {
  width: auto !important;
  margin-top: 2px;
}

.profile-photo-guidance small {
  display: block;
  margin-top: 6px;
  color: #687385;
  font-size: 11px;
  line-height: 1.35;
}

.profile-photo-rules-viewer {
  position: fixed;
  inset: 0;
  z-index: 7000;
  display: grid;
  place-items: center;
  padding: 16px;
  background: #071426d9;
}

.profile-photo-rules-viewer img {
  max-width: min(1100px, 96vw);
  max-height: 88vh;
  border-radius: 14px;
  box-shadow: 0 22px 60px #0008;
}

.profile-photo-rules-viewer button {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top));
  right: 14px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  color: #071426;
  font-size: 28px;
  background: #fff;
}

.profile-change-note {
  margin-top: 12px !important;
  padding: 10px;
  border-radius: 10px;
  color: #73510b !important;
  background: #fff7df;
}

.profile-change-card footer {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  padding-bottom: calc(4px + env(safe-area-inset-bottom));
  background: inherit;
}

.profile-change-card footer button {
  flex: 1;
  min-height: 44px;
  border: 1px solid #d0d8e4;
  border-radius: 12px;
  font-weight: 900;
  background: #fff;
}

.profile-change-card footer .primary-button {
  color: #fff;
  border-color: var(--red);
  background: var(--red);
}

body.dark-mode .profile-completeness,
body.dark-mode .profile-details,
body.dark-mode .profile-membership,
body.dark-mode .profile-data-request {
  border-color: #29364a;
  color: #f2f5fa;
  background: #131d2d;
}

body.dark-mode .profile-change-card {
  color: #f2f5fa;
  background: #131d2d;
}

body.dark-mode .profile-change-card input,
body.dark-mode .profile-change-card textarea,
body.dark-mode .profile-change-card header button,
body.dark-mode .profile-change-card footer button {
  color: #f2f5fa;
  border-color: #35465d;
  background: #0d1624;
}

body.dark-mode .profile-change-note {
  color: #ead9ae !important;
  background: #2a2417;
}

body.dark-mode .profile-photo-guidance {
  border-color: #24344c;
  background: #0f1b2d;
}

body.dark-mode .profile-details dd,
body.dark-mode .profile-section-title h3,
body.dark-mode .profile-membership h3,
body.dark-mode .profile-data-request {
  color: #f2f5fa;
}

body.dark-mode .profile-details dl > div {
  border-color: #29364a;
}

body.dark-mode .profile-demo-note {
  border-color: #695321;
  color: #ead9ae;
  background: #2a2417;
}

body.dark-mode .menu-list > button > span small {
  color: #9fa9b8;
}

@media (max-width: 390px) {
  .profile-change-grid {
    grid-template-columns: 1fr;
  }

  .profile-change-card {
    padding: 16px;
  }

  .profile-identity {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 14px;
    padding: 16px;
  }

  .profile-photo {
    width: 88px;
  }

  .profile-details dl > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .profile-details dd {
    text-align: left;
  }
}

/* Sobre a ANA — ecrã institucional */
.about-hero{position:relative;display:grid;grid-template-columns:34% 1fr;align-items:center;gap:18px;min-height:230px;margin-top:8px;padding:28px 22px;overflow:hidden;border-radius:24px;color:#fff;background:linear-gradient(135deg,#071426 0 62%,#a40e18 62% 66%,#e51c25 66%);box-shadow:0 18px 35px #08172a26}
.about-hero::after{content:"ANA";position:absolute;right:-22px;bottom:-28px;color:#ffffff10;font-size:110px;font-weight:900;font-style:italic}.about-hero img{position:relative;z-index:1;width:100%;filter:drop-shadow(0 10px 12px #0005)}.about-hero div{position:relative;z-index:1}.about-hero small,.about-intro small,.about-section-title small,.about-contact small{font-size:10px;font-weight:850;letter-spacing:.1em}.about-hero h1{margin:10px 0 8px;font-size:29px;line-height:1.02;text-transform:uppercase}.about-hero h1 em{color:#ff3139;font-style:normal}.about-hero p{margin:0;color:#d8e0ec;font-size:12px;line-height:1.5}
.about-intro{position:relative;margin-top:24px;padding:26px 22px;border:1px solid var(--line);border-radius:20px;background:#fff}.about-year{position:absolute;top:22px;right:22px;color:#77808d;font-size:9px;font-weight:800;letter-spacing:.08em}.about-year b{display:block;color:var(--red);font-size:24px;letter-spacing:0}.about-intro small,.about-section-title small,.about-contact small{color:var(--red)}.about-intro h2,.about-section-title h2,.about-contact h2{margin:5px 0 16px;font-size:24px}.about-intro p{margin:10px 0;color:var(--muted);font-size:14px;line-height:1.65}
.about-mission{display:grid;gap:11px;margin-top:18px}.about-mission article{display:flex;gap:15px;padding:18px;border:1px solid var(--line);border-radius:18px;background:#fff}.about-mission article>span{display:grid;flex:0 0 46px;height:46px;place-items:center;border-radius:14px;color:#fff;font-size:21px;background:linear-gradient(145deg,var(--blue),#08285d)}.about-mission h3{margin:1px 0 5px;font-size:16px}.about-mission p{margin:0;color:var(--muted);font-size:12px;line-height:1.5}
.about-organs{margin-top:28px}.about-section-title p{margin:-8px 0 18px;color:var(--muted);font-size:13px}.about-organs details{margin-bottom:10px;border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden}.about-organs summary{display:flex;align-items:center;gap:12px;padding:16px;list-style:none;font-weight:800;cursor:pointer}.about-organs summary::-webkit-details-marker{display:none}.about-organs summary span{color:var(--red);font-size:12px}.about-organs summary b{margin-left:auto;color:var(--blue)}.about-organs details[open] summary b{transform:rotate(45deg)}.about-organs details div{padding:0 16px 14px 40px}.about-organs details p{margin:7px 0;color:var(--muted);font-size:12px;line-height:1.45}
.about-contact{margin:28px 0 10px;padding:24px;border-radius:20px;color:#fff;background:linear-gradient(140deg,#082d66,#0b1830)}.about-contact h2{color:#fff}.about-contact a{display:flex;justify-content:space-between;margin-top:10px;padding:13px 14px;border:1px solid #ffffff25;border-radius:12px;color:#fff;text-decoration:none;background:#ffffff0c}.about-contact a:last-child{margin-top:16px;color:#fff;font-weight:800;background:var(--red);border-color:var(--red)}
body.dark-mode .about-intro,body.dark-mode .about-mission article,body.dark-mode .about-organs details{border-color:#334052;background:#182231}body.dark-mode .about-intro p,body.dark-mode .about-mission p,body.dark-mode .about-section-title p,body.dark-mode .about-organs details p{color:#b7c0cc}
@media(max-width:390px){.about-hero{grid-template-columns:31% 1fr;padding:23px 16px}.about-hero h1{font-size:24px}.about-year{position:static;display:block;margin-bottom:12px}.about-year b{display:inline;margin-left:5px}}

/* Contactos úteis */
.contacts-hero{margin-top:8px;padding:28px 24px;border-radius:22px;color:#fff;background:linear-gradient(140deg,#082d66,#0b1830)}.contacts-hero>span{display:grid;width:52px;height:52px;place-items:center;margin-bottom:18px;border-radius:15px;font-size:25px;background:var(--red)}.contacts-hero small{font-size:10px;font-weight:850;letter-spacing:.12em;color:#ff6e74}.contacts-hero h1{margin:7px 0;font-size:28px}.contacts-hero p{margin:0;color:#c8d2e1;font-size:13px;line-height:1.5}
.contact-options{display:grid;gap:12px;margin-top:20px}.contact-options a{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:14px;padding:17px;border:1px solid var(--line);border-radius:18px;color:var(--ink);text-decoration:none;background:#fff}.contact-options a>span{display:grid;width:48px;height:48px;place-items:center;border-radius:14px;color:#fff;font-size:21px;background:var(--blue)}.contact-options small{display:block;margin-bottom:4px;color:var(--red);font-size:9px;font-weight:850;letter-spacing:.08em}.contact-options b{font-size:15px}.contact-options p{margin:4px 0 0;color:var(--muted);font-size:11px}.contact-options strong{color:var(--blue);font-size:24px}.contacts-note{display:flex;gap:12px;margin-top:18px;padding:16px;border:1px solid #d9e6fb;border-radius:16px;color:#23446f;background:#f2f7ff}.contacts-note p{margin:0;font-size:11px;line-height:1.55}
.contact-options .contact-facebook>span{font-family:Arial,sans-serif;font-size:31px;font-weight:900;background:#1877f2}.contact-options .contact-instagram>span{font-size:25px;background:linear-gradient(135deg,#feda75,#d62976 48%,#4f5bd5)}.contact-options .contact-youtube>span{font-size:19px;background:#ff0000}.contact-options .contact-facebook small{color:#1877f2}.contact-options .contact-instagram small{color:#d62976}.contact-options .contact-youtube small{color:#e00000}
body.dark-mode .contact-options a{border-color:#334052;color:#f4f7fb;background:#182231}body.dark-mode .contact-options p{color:#b7c0cc}body.dark-mode .contacts-note{border-color:#314763;color:#c9d7eb;background:#14243a}

/* Barra inferior mais baixa e com fundo opaco para o conteúdo não passar visível por baixo */
.home-shell {
  padding-bottom: calc(108px + env(safe-area-inset-bottom));
}

.bottom-nav {
  right: auto;
  bottom: 0;
  left: 50%;
  width: min(100%, 520px);
  padding: 9px 8px calc(9px + env(safe-area-inset-bottom));
  overflow: visible;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: #fff;
  box-shadow: 0 -10px 28px #15243b1a;
  transform: translateX(-50%);
}

.bottom-nav::before {
  content: "";
  position: absolute;
  inset: -18px 0 0;
  z-index: -1;
  background: linear-gradient(180deg, #ffffff00, #fff 18px, #fff);
}

body.dark-mode .bottom-nav::before {
  background: linear-gradient(180deg, #0d162300, #0d1623 18px, #0d1623);
}

@media (min-width: 720px) {
  .bottom-nav {
    bottom: 24px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 18px;
  }
}

/* Versão integrada na navegação, sem sobrepor a barra flutuante */
.bottom-nav .nav-version{display:block;margin-top:2px;color:#8b919b;font-size:8px;font-weight:700;line-height:1;letter-spacing:.03em}.bottom-nav button.active .nav-version{color:currentColor}body.dark-mode .bottom-nav .nav-version{color:#929dac}body.dark-mode .bottom-nav button.active .nav-version{color:currentColor}

/* Alinhamento uniforme dos atalhos e do painel flutuante de personalização */
.shortcut-grid button{display:grid;grid-template-rows:38px 32px;align-content:center;justify-items:center;row-gap:7px;line-height:1.15}
.shortcut-grid button>span{display:grid;width:100%;height:38px;margin:0;place-items:center}
.shortcut-grid .shortcut-label{display:grid;min-height:32px;place-items:center;font-size:inherit;font-weight:400;text-align:center}
.quick-customizer-list label>b{display:flex;min-height:32px;flex-direction:column;justify-content:center;line-height:1.2}
.side-menu-panel nav>button>div{display:flex;min-height:34px;flex-direction:column;justify-content:center}

/* Estados do arquivo documental */
.archive-document-list .archive-status-badge{display:inline-block;margin:4px 0;padding:4px 8px;border-radius:999px;font-size:10px;font-weight:850}.archive-status-badge.accepted{color:#11663a;background:#dcf7e8}.archive-status-badge.pending{color:#805b00;background:#fff0bd}.archive-status-badge.rejected{color:#a51921;background:#ffe0e2}body.dark-mode .archive-status-badge.accepted{color:#9ce4bc;background:#123c2a}body.dark-mode .archive-status-badge.pending{color:#ffe08a;background:#493b13}body.dark-mode .archive-status-badge.rejected{color:#ffadb1;background:#491d22}