/*
 * member.css — feature "member" (spec 07 §3.8, §5.6, §6.1).
 * Owns: #authDropdown (member popover: status card, plan cards, add-room card, room-rank card,
 * referral card, bottom row), #addRoomModal, #roomRankModal, #referralModal, .glow-text.
 *
 * Values are copied verbatim from the original stylesheet and kept in its source order: several
 * effective values depend on the cascade (e.g. `.auth-dropdown button` (0,1,1) beats the single-class
 * rules of 「复制链接」 and 「收起面板」, quirk 16), so do not reorder rules.
 * The global `button` / `input` resets and `section { margin-top: 12px }` live in base.css; the
 * `.auth-menu` wrapper and `#authButton` belong to header.css.
 */

/* ------------------------------------------------------------------ */
/* Popover container (original order: 349 – 404)                      */
/* ------------------------------------------------------------------ */
.auth-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  z-index: 170;
  min-width: 92px;
  overflow: hidden;
  border: 1px solid rgba(245, 216, 142, .5);
  border-radius: 8px;
  background: #0a121ffa;
  box-shadow: 0 12px 28px #0000005c;
}

.auth-dropdown button {
  width: 100%;
  min-height: 32px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #fff7df;
  font-size: 12px;
}

.member-popover {
  width: min(330px, calc(100vw - 20px));
  min-width: min(330px, calc(100vw - 20px));
  padding: 10px;
  overflow: visible;
  border-radius: 12px;
  background: radial-gradient(circle at 92% 0, rgba(245, 216, 142, .16), transparent 96px), linear-gradient(180deg, #0d192bfb, #040a14fd);
  -webkit-backdrop-filter: blur(12px) saturate(.72);
  backdrop-filter: blur(12px) saturate(.72);
  box-shadow: inset 0 0 0 1px #ffffff06, inset 0 1px #ffffff0f, 0 18px 46px #0000008f;
}

/* Small arrow pointing at the account button. */
.member-popover:before {
  content: "";
  position: absolute;
  right: 24px;
  top: -6px;
  width: 10px;
  height: 10px;
  border-left: 1px solid rgba(245, 216, 142, .5);
  border-top: 1px solid rgba(245, 216, 142, .5);
  background: #0d192bfc;
  transform: rotate(45deg);
}

/* Darkening layer under the cards (cards and bottom buttons sit at z-index 1). */
.member-popover:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, #040a1470, #040a149e), #050c1747;
}

/* ------------------------------------------------------------------ */
/* Cards + status card (405 – 474)                                    */
/* ------------------------------------------------------------------ */
.member-card {
  position: relative;
  z-index: 1;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  background: #ffffff09;
}

.member-card + .member-card {
  margin-top: 8px;
}

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

.member-card-head span,
.member-card-title,
.member-info span {
  color: #9fb0c8;
  font-size: 11px;
  font-weight: 800;
}

.member-card-head strong {
  position: static;
  display: block;
  max-width: 190px;
  margin-top: 2px;
  overflow: hidden;
  color: #fff7df;
  font-size: 16px;
  line-height: 1.2;
  text-overflow: ellipsis;
  transform: none;
  white-space: nowrap;
}

/* #memberStatus: green 「会员中」 pill; orange 「未开通」 with .is-expired. */
.member-card-head b {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  background: #71d1902e;
  color: #8cf0a7;
  font-size: 11px;
}

.member-card-head b.is-expired {
  background: #ff9a5429;
  color: #ffc08e;
}

/* Legacy rules of the original (not used by the current DOM). */
.member-info {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.member-info strong {
  color: #dbe7f6;
  font-size: 12px;
  font-weight: 850;
  text-align: right;
}

.member-remaining-row strong {
  color: #ffe38c;
  font-size: 13px;
}

.member-card-title {
  margin-bottom: 8px;
  color: #fff7df;
  font-size: 13px;
}

/* ------------------------------------------------------------------ */
/* Plan cards + add-room card (475 – 590)                             */
/* ------------------------------------------------------------------ */
.member-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.member-plan {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 6px;
  min-height: 86px;
  padding: 9px 7px 8px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 9px;
  background: #081220b8;
  text-align: center;
}

.member-plan-room {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  cursor: pointer;
  min-height: 42px;
  padding: 7px 9px;
  text-align: left;
  border-color: #f5d88e6b;
  background: linear-gradient(180deg, #19263aeb, #081220f2);
  position: relative;
  overflow: hidden;
}

/* Light sweep (positioned, painted above the text). */
.member-plan-room:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(105deg, transparent 20%, rgba(245, 216, 142, .15) 35%, rgba(255, 255, 255, .18) 42%, rgba(245, 216, 142, .15) 49%, transparent 64%);
  transform: translate(-120%);
  animation: memberRoomSweep 2.8s ease-in-out infinite;
}

.member-plan-room:active {
  background: #f5d88e14;
}

@keyframes memberRoomSweep {
  0% {
    transform: translate(-120%);
  }
  60%,
  to {
    transform: translate(120%);
  }
}

.member-plan strong {
  position: static;
  overflow: hidden;
  color: #fff7df;
  font-size: 12px;
  line-height: 1.2;
  text-overflow: ellipsis;
  transform: none;
  white-space: nowrap;
}

/* Also hits every span of the add-room card (glow text, meta). */
.member-plan span {
  color: #f5d88e;
  font-size: 17px;
  font-weight: 900;
}

.member-plan-room .member-plan-room-gift {
  color: #9fb0c8;
  font-size: 10px;
  font-weight: 700;
}

.member-plan-room strong {
  overflow: visible;
  font-size: 13px;
  text-overflow: clip;
  white-space: nowrap;
}

.member-plan-room .glow-text {
  color: #7ee8ef;
  font-size: 13px;
}

.member-plan-room-meta {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 5px;
  white-space: nowrap;
}

.member-plan-room-meta small {
  color: #9fb0c8;
  font-size: 10px;
  font-weight: 700;
}

.member-plan-room-meta b {
  color: #f5d88e;
  font-size: 15px;
  font-weight: 900;
}

.member-plan button {
  width: 100%;
  min-height: 25px;
  padding: 0 4px;
  border: 1px solid rgba(105, 199, 255, .26);
  border-radius: 999px;
  background: #69c7ff21;
  color: #dff4ff;
  font-size: 10px;
  box-shadow: none;
}

.member-plan button:disabled {
  opacity: .58;
}

/* ------------------------------------------------------------------ */
/* Room-rank card (591 – 695)                                         */
/* ------------------------------------------------------------------ */
.member-plan-rank {
  grid-column: 1 / -1;
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "art title price" "art note button";
  align-items: center;
  column-gap: 9px;
  row-gap: 0;
  min-height: 48px;
  overflow: hidden;
  padding: 5px 9px;
  border: 1px solid rgba(245, 216, 142, .76);
  border-radius: 10px;
  background: radial-gradient(circle at 92% 0%, rgba(255, 230, 136, .16), transparent 58px), linear-gradient(135deg, #2d241394, #081220f5 48%, #111d30f0);
  box-shadow: inset 0 1px #fff4c624, 0 4px 12px #0000002e;
  cursor: pointer;
}

/* Gold top line. */
.member-plan-rank:before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent 12%, rgba(255, 226, 130, .35) 54%, #fff3b3 100%);
  box-shadow: 0 0 9px #ffe282b3;
}

.member-plan-rank-art {
  grid-area: art;
  position: static;
  z-index: 1;
  width: 26px;
  height: 38px;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .42));
}

.member-plan-rank-title {
  grid-area: title;
  position: relative;
  z-index: 1;
  min-width: 0;
  overflow: hidden;
  color: #fff6dd;
  font-size: 13px;
  line-height: 1.15;
  letter-spacing: .02em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.member-plan-rank-price {
  grid-area: price;
  position: relative;
  z-index: 1;
  justify-self: end;
  color: #ffe087;
  font-size: 15px;
  line-height: 1.1;
  white-space: nowrap;
}

.member-plan-rank-price b {
  color: #ffe087;
  font-size: 15px;
  font-weight: 900;
}

.member-plan-rank-price span {
  margin: 0;
  color: #afbdd1;
  font-size: 11px;
  font-weight: 700;
}

/* Same specificity as `.auth-dropdown button` and later → wins. No disabled style (quirk 9). */
.member-plan-rank button {
  grid-area: button;
  justify-self: end;
  width: auto;
  min-height: 24px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid rgba(255, 234, 155, .94);
  border-radius: 999px;
  background: linear-gradient(180deg, #fff0ae, #deb34c 52%, #b97b1f);
  color: #17120a;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: inset 0 1px #ffffff8f, 0 3px 8px #0000003d;
}

.member-plan-rank-note {
  grid-area: note;
  margin: 0;
  overflow: hidden;
  color: #e2d2a2c7;
  font-size: 10px;
  font-weight: 650;
  line-height: 1.2;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 340px) {
  .member-plan-rank-note {
    display: none;
  }
}

/* Loading / failure texts (only take the first grid column – quirk 3). */
.member-loading,
.member-empty {
  display: block;
  padding: 10px;
  border-radius: 9px;
  background: #ffffff0b;
  color: #afbdd1;
  font-size: 12px;
  text-align: center;
}

.member-pay-message {
  min-height: 0;
  margin: 4px 0 0;
  color: #f5d88e;
  font-size: 11px;
  line-height: 1.35;
}

.member-pay-message:empty {
  display: none;
}

.member-pay-message.is-error {
  color: #ff9f9f;
}

.auth-dropdown .member-logout {
  position: relative;
  z-index: 1;
  margin-top: 8px;
  border-radius: 9px;
  background: #ffffff0f;
  color: #c9d5e5;
}

/* ------------------------------------------------------------------ */
/* Add-room / room-rank modals (726 – 805)                            */
/* ------------------------------------------------------------------ */
.room-add-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 600;
  display: grid;
  place-items: center;
  padding: 18px;
  background: #030810b8;
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.room-add-modal[hidden] {
  display: none;
}

.room-add-dialog {
  position: relative;
  width: min(100%, 360px);
  padding: 20px;
  border: 1px solid rgba(245, 216, 142, .5);
  border-radius: 14px;
  background: radial-gradient(circle at 50% 0, rgba(97, 196, 255, .18), transparent 150px), linear-gradient(180deg, #16263cfa, #070f1cfa);
  box-shadow: inset 0 1px #ffffff0f, 0 22px 70px #00000085;
}

.room-add-dialog h2 {
  margin: 0 0 8px;
  color: #fff7df;
  font-size: 20px;
}

.room-add-dialog p {
  color: #c7d4e6;
  font-size: 13px;
  line-height: 1.5;
}

.room-add-close {
  position: absolute;
  right: 12px;
  top: 12px;
  width: 30px;
  min-height: 30px;
  padding: 0;
  border-radius: 50%;
  border-color: #ffffff29;
  background: #ffffff14;
}

.room-add-form {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.room-add-form input {
  width: 100%;
  min-height: 42px;
  border-color: #64c7ff38;
  background: #050d19b3;
  color: #fff7df;
}

.room-add-form input::placeholder {
  color: #d9e3f194;
}

.room-add-form button {
  min-height: 42px;
}

.room-rank-note {
  margin: 12px 0 0 !important;
  color: #d7c281 !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
}

.room-add-message {
  min-height: 20px;
  margin-top: 10px !important;
  color: #ffe39d !important;
  text-align: center;
}

.room-add-message.is-error {
  color: #ff9f9f !important;
}

/* ------------------------------------------------------------------ */
/* Bottom row + referral card (2871 – 3079)                           */
/* ------------------------------------------------------------------ */

/* Effective look is decided by `.auth-dropdown button` (transparent, 12px, #fff7df) – quirk 16. */
.member-close-panel-btn {
  position: relative;
  z-index: 1;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 9px;
  border: 0;
  background: transparent;
  color: #f5d88e;
  font-size: 13px;
  font-weight: 800;
}

.member-close-panel-btn:hover {
  color: #fff4ce;
}

.member-bottom-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.member-bottom-row .member-logout {
  flex: 0 0 auto;
  width: auto;
  margin-top: 0;
  padding: 0 14px;
  min-height: 34px;
  font-size: 12px;
}

.referral-panel {
  font-size: 12px;
}

.referral-link-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
  margin-bottom: 8px;
}

.referral-link {
  flex: 1;
  min-width: 0;
  padding: 5px 8px;
  border: 1px solid rgba(100, 199, 255, .22);
  border-radius: 6px;
  background: #050d1980;
  color: #dff4ff;
  font-size: 10px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Effective look is decided by `.auth-dropdown button` (transparent, 12px, #fff7df) – quirk 16. */
.referral-copy-btn {
  flex: 0 0 auto;
  min-height: 26px;
  padding: 0 8px;
  border: 1px solid rgba(245, 216, 142, .5);
  border-radius: 6px;
  background: linear-gradient(180deg, #f5d88e2e, #78511e38);
  color: #fff4ce;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}

.referral-copy-btn:active {
  transform: scale(.96);
}

.referral-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 6px;
}

.referral-stat {
  padding: 6px;
  border-radius: 6px;
  background: #ffffff0a;
  text-align: center;
  cursor: pointer;
  border: 1px solid transparent;
  transition: border-color .15s;
}

.referral-stat:hover {
  border-color: #f5d88e4d;
}

.referral-stat.is-active {
  border-color: #f5d88e99;
  background: #f5d88e0f;
}

.referral-stat-value {
  display: block;
  color: #ffe38c;
  font-size: 14px;
  font-weight: 900;
}

.referral-stat-label {
  display: block;
  color: #9fb0c8;
  font-size: 9px;
  font-weight: 700;
  margin-top: 2px;
}

/* 「查看明细」 – always hidden (dead code of the original). */
.referral-detail-btn {
  width: 100%;
  min-height: 26px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 6px;
  background: #ffffff0a;
  color: #b8c4d6;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

/* Toggled by JS through inline style.display ("block" / "none"). */
.referral-detail {
  display: none;
  max-height: 160px;
  overflow-y: auto;
  margin-top: 6px;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 6px;
  background: #0003;
}

/* 「推广明细」 modal – never opened by the original (dead code, kept). */
.referral-modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 700;
  display: grid;
  place-items: center;
  padding: 18px;
  background: #030810b8;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.referral-modal[hidden] {
  display: none;
}

.referral-modal-dialog {
  width: min(92%, 360px);
  max-height: min(480px, calc(100vh - 80px));
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(245, 216, 142, .4);
  border-radius: 14px;
  background: linear-gradient(180deg, #16263cfa, #070f1cfa);
  box-shadow: 0 22px 70px #00000085;
  overflow: hidden;
}

.referral-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.referral-modal-head strong {
  color: #fff7df;
  font-size: 15px;
}

.referral-modal-close {
  width: 28px;
  min-height: 28px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  background: #ffffff14;
  color: #fff7dfd1;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.referral-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px 14px;
}

.referral-detail-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 8px;
  border-bottom: 1px solid rgba(255, 255, 255, .04);
  font-size: 11px;
}

.referral-detail-item:last-child {
  border-bottom: 0;
}

.referral-detail-name {
  color: #e8f0ff;
  font-weight: 700;
}

.referral-detail-info {
  color: #9fb0c8;
  font-size: 10px;
}

.referral-detail-commission {
  color: #ffe38c;
  font-weight: 800;
}

.referral-tip {
  margin: 0 0 6px;
  color: #f5d88eb8;
  font-size: 10px;
  font-weight: 700;
}

/* ------------------------------------------------------------------ */
/* Backdrop-filter removal (4685 / 4715 – member's part)              */
/* ------------------------------------------------------------------ */
@media (max-width: 767px) {
  .member-popover {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: radial-gradient(circle at 92% 0, rgba(245, 216, 142, .16), transparent 96px), linear-gradient(180deg, #0d192bfc, #040a14fe);
  }

  .room-add-modal {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: #030810e0;
  }
}

@media (display-mode: standalone) {
  .member-popover,
  .room-add-modal {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* ------------------------------------------------------------------ */
/* Rainbow text 「（永久采集）」 (4744, 6226)                            */
/* ------------------------------------------------------------------ */
.glow-text {
  background: linear-gradient(90deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3, #ff6b6b);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: glowFlow 2.5s linear infinite;
  font-weight: 700;
  font-size: .85em;
}

@keyframes glowFlow {
  0% {
    background-position: 0% 50%;
  }
  to {
    background-position: 200% 50%;
  }
}

/* ------------------------------------------------------------------ */
/* Modal profile preview (6234 – 6258)                                */
/* No [hidden] rule: display:flex keeps the preview visible even when hidden (quirk 4). */
/* ------------------------------------------------------------------ */
.room-add-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #ffffff0d;
  border-radius: 8px;
  margin-top: 8px;
}

.room-add-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  background: #ffffff1a;
}

.room-add-nickname {
  font-size: 14px;
  color: #e8e8e8;
  font-weight: 500;
}

.room-add-form button[disabled] {
  opacity: .4;
  cursor: not-allowed;
}