.customer-membership-manager-overlay { z-index: 88; padding: 24px; }
.customer-membership-manager { width: min(620px, 100%); padding: 0; overflow: hidden; }
.customer-membership-manager > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 25px 27px 20px; border-bottom: 1px solid var(--line); }
.customer-membership-manager > header span { color: #8b9587; font-size: 12px; }
.customer-membership-manager > header h2 { margin: 5px 0 0; color: #33472f; font-family: "Noto Serif SC", serif; font-size: 22px; }
.customer-membership-manager > header p { margin: 7px 0 0; color: #7b8678; font-size: 12px; line-height: 1.65; }
.customer-membership-current { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin: 22px 27px 0; padding: 16px; border: 1px solid #e5e1d8; border-left: 3px solid #8ca97f; border-radius: 10px; background: #fafbf7; }
.customer-membership-current.is-inactive { border-left-color: #b78c7c; background: #fcf8f5; }
.customer-membership-current div { display: grid; gap: 5px; }
.customer-membership-current span { color: #8a9386; font-size: 11px; }
.customer-membership-current strong { color: #34452f; font-size: 13px; }
.customer-membership-current p { grid-column: 1 / -1; margin: 0; color: #8f756b; font-size: 11px; line-height: 1.6; }
.customer-membership-fields { display: grid; gap: 17px; padding: 22px 27px 25px; }
.customer-membership-fields label { display: grid; gap: 7px; color: #475b43; font-size: 12px; font-weight: 750; }
.customer-membership-duration-row { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 14px; align-items: stretch; }
.customer-membership-duration-input { position: relative; display: block; }
.customer-membership-duration-input input { padding-right: 43px; }
.customer-membership-duration-input em { position: absolute; top: 50%; right: 14px; color: #6f7d6d; font-size: 12px; font-style: normal; font-weight: 650; transform: translateY(-50%); pointer-events: none; }
.customer-membership-expiry-preview { display: grid; align-content: center; gap: 6px; min-height: 84px; padding: 13px 15px; border: 1px solid #dce4d8; border-radius: 9px; background: #f5f9f2; }
.customer-membership-expiry-preview > span { color: #83907e; font-size: 11px; }
.customer-membership-expiry-preview strong { color: #34512f; font-size: 15px; line-height: 1.4; }
.customer-membership-expiry-preview strong.is-error { color: #b24d3d; font-size: 12px; }
.customer-membership-expiry-preview small { color: #849080; font-size: 11px; line-height: 1.45; }
.customer-membership-fields input, .customer-membership-fields textarea { width: 100%; border: 1px solid #d9ded4; border-radius: 9px; background: #fffdf8; color: #2f4130; font: inherit; }
.customer-membership-fields input { min-height: 43px; padding: 0 12px; }
.customer-membership-fields textarea { min-height: 78px; padding: 11px 12px; resize: vertical; }
.customer-membership-fields input:focus, .customer-membership-fields textarea:focus { outline: 0; border-color: #7fa174; box-shadow: 0 0 0 3px rgba(127, 161, 116, .13); }
.customer-membership-fields small { color: #92998e; font-size: 11px; font-weight: 500; line-height: 1.55; }
.customer-membership-manager > footer { display: flex; align-items: center; gap: 9px; padding: 16px 27px; border-top: 1px solid var(--line); background: #fffcf7; }
.customer-membership-manager > footer span { flex: 1; }
.customer-membership-manager > footer button { min-height: 39px; }
@media (max-width: 620px) {
  .customer-membership-manager-overlay { padding: 12px; }
  .customer-membership-current { grid-template-columns: 1fr; }
  .customer-membership-current p { grid-column: auto; }
  .customer-membership-duration-row { grid-template-columns: 1fr; }
  .customer-membership-manager > footer { flex-wrap: wrap; }
  .customer-membership-manager > footer span { display: none; }
  .customer-membership-manager > footer button { flex: 1 1 44%; }
}