.loyalty-tabs {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 24px 0;
  flex-wrap: wrap;
}
.loyalty-tabs a {
  padding: 12px 20px;
  border: 1px solid #6f3030;
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
}
.loyalty-tabs a:hover {
  background: #8c1d18;
  color: white;
}
.loyalty-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.loyalty-value {
  display: block;
  font-size: clamp(32px, 6vw, 54px);
  line-height: 1.3;
}
.member-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid #76413f;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 650;
  background: #181a1c;
  color: #fff;
}
.member-badge svg,
.loyalty-priority svg {
  width: 20px;
  height: 20px;
}
.member-one {
  border-color: #8c1d18;
}
.member-black {
  background: #050505;
  border-color: #666;
  box-shadow: inset 0 0 18px #ffffff0b;
}
.member-ultra {
  background: linear-gradient(110deg, #080809, #45110f);
  border-color: #b6605b;
}
.loyalty-grid progress {
  display: block;
  width: 100%;
  height: 10px;
  margin: 24px 0;
  accent-color: #8c1d18;
  border: 0;
  border-radius: 10px;
  overflow: hidden;
}
.loyalty-grid progress::-webkit-progress-bar {
  background: #333;
}
.loyalty-grid progress::-webkit-progress-value {
  background: #8c1d18;
  transition: width var(--loyalty-duration, 900ms);
}
.grade-road {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.grade-stop {
  padding: 18px;
  border: 1px solid #444;
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.grade-stop.unlocked {
  border-color: #8c1d18;
  background: #8c1d181c;
}
.grade-stop small {
  color: #aaa;
}
.grade-stop.locked {
  opacity: 0.7;
}
.points-history article {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid #444;
}
.points-history small {
  display: block;
  color: #aaa;
  margin-top: 6px;
}
.benefit {
  padding: 18px 0;
  border-bottom: 1px solid #444;
}
.benefit summary {
  cursor: pointer;
}
.benefit summary small {
  display: block;
  margin-top: 7px;
  color: #aaa;
}
.benefit-rules {
  font-size: 14px;
  line-height: 1.7;
}
.benefit.locked summary {
  opacity: 0.7;
}
.reward-card {
  padding: 22px;
  margin: 15px 0;
  border: 1px solid #643330;
  border-radius: 16px;
}
.loyalty-priority {
  padding: 16px;
  border-left: 3px solid #8c1d18;
  background: #8c1d181a;
  display: flex;
  gap: 12px;
  align-items: center;
}
.loyalty-unlock {
  padding: 28px;
  border: 1px solid #8c1d18;
  border-radius: 18px;
  background: radial-gradient(ellipse at top, #611713, #131416 70%);
  color: white;
  margin-bottom: 24px;
  animation: loyalty-reveal var(--loyalty-duration, 900ms) ease-out;
}
.loyalty-unlock h2 {
  color: #fff;
}
.ultra-max {
  font-size: 22px;
  font-weight: 650;
}
.loyalty-admin-grid {
  display: grid;
  gap: 24px;
}
.loyalty-admin-grid details {
  padding: 15px;
  border-bottom: 1px solid #ddd;
}
.loyalty-admin-grid details label {
  margin-top: 12px;
}
.loyalty-admin-grid summary {
  cursor: pointer;
  font-weight: 600;
}
.loyalty-admin-grid textarea {
  width: 100%;
  min-height: 100px;
}
.loyalty-admin-grid form {
  display: grid;
  gap: 14px;
}
.loyalty-admin-grid .row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.loyalty-admin-grid select[multiple] {
  min-height: 120px;
}
.loyalty-grid section,
[id^='loyalty-'] {
  scroll-margin-top: 24px;
}
@keyframes loyalty-reveal {
  from {
    opacity: 0;
    transform: translateY(10px);
    box-shadow: 0 0 40px #8c1d1866;
  }
  to {
    opacity: 1;
    transform: translateY(0);
    box-shadow: none;
  }
}
@media (max-width: 700px) {
  .loyalty-grid,
  .loyalty-admin-grid .row {
    grid-template-columns: 1fr;
  }
  .grade-road {
    grid-template-columns: repeat(2, 1fr);
  }
  .loyalty-tabs {
    gap: 6px;
  }
  .loyalty-tabs a {
    padding: 10px 12px;
  }
  .points-history article {
    align-items: flex-start;
  }
}
@media (prefers-reduced-motion: reduce) {
  .loyalty-unlock {
    animation: none;
  }
  .loyalty-grid progress::-webkit-progress-value {
    transition: none;
  }
}
.library-selectors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.library-picker {
  display: flex;
  gap: 10px;
  align-items: end;
  margin: 20px 0;
}
.library-picker label {
  flex: 1;
  min-width: 0;
}
.library-picker select {
  width: 100%;
  text-overflow: ellipsis;
}
.library-picker button {
  min-width: 48px;
  font-size: 24px;
}
.library-editor {
  padding: 24px;
  border: 1px solid #8c1d18;
  border-radius: 16px;
  margin-top: 20px;
}
.library-selectors select {
  width: 100%;
}
@media (max-width: 700px) {
  .library-selectors {
    grid-template-columns: 1fr;
  }
  .library-editor {
    padding: 16px;
  }
}
.loyalty-tabs .birthday-control {
  margin: 0;
  padding: 0;
  border: 0;
  position: relative;
  color: inherit;
}
.loyalty-tabs a,
.loyalty-tabs .birthday-control > summary {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  font: inherit;
  line-height: 1.5;
  padding: 12px 20px;
  border: 1px solid #6f3030;
  border-radius: 12px;
  color: inherit;
  background: transparent;
  cursor: pointer;
  list-style: none;
}
.birthday-control > summary::-webkit-details-marker {
  display: none;
}
.loyalty-tabs .birthday-control > summary:hover {
  background: #8c1d18;
  color: white;
}
.birthday-control .panel {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 5;
  width: min(420px, 80vw);
  margin: 12px 0;
  box-shadow: 0 12px 32px #0008;
}
@media (max-width: 700px) {
  .loyalty-tabs a,
  .loyalty-tabs .birthday-control > summary {
    padding: 10px 12px;
  }
}
.loyalty-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.loyalty-grid section {
  min-width: 0;
}
@media (max-width: 500px) {
  .loyalty-grid {
    gap: 10px;
  }
  .loyalty-grid .panel {
    padding: 14px;
  }
  .loyalty-grid h2 {
    font-size: 22px;
  }
  .loyalty-grid .secondary {
    font-size: 13px;
    padding: 10px;
    white-space: normal;
  }
  .birthday-control {
    margin-left: 0;
  }
}

.loyalty-tabs .birthday-button {
  font: inherit;
  line-height: 1.5;
  padding: 12px 20px;
  border: 1px solid #6f3030;
  border-radius: 12px;
  color: inherit;
  background: transparent;
}
.birthday-dialog .panel {
  border: 0;
  padding: 0;
}
.benefit.unlocked {
  border: 1px solid #8c1d18;
  background: #8c1d181c;
  border-radius: 14px;
  padding: 18px;
  margin-bottom: 12px;
}
#main:has(.loyalty-tabs) > section.panel,
#main:has(.loyalty-tabs) > .loyalty-grid {
  margin-bottom: 24px;
}
#main:has(.loyalty-tabs) > section.panel {
  margin-top: 0;
}
@media (max-width: 700px) {
  .loyalty-tabs .birthday-button {
    padding: 10px 12px;
  }
  .loyalty-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.loyalty-unlock p {
  text-align: justify;
  hyphens: auto;
}