/* Compact room cards after removing live, support value and host fields. */
header {
  position: relative;
}
.actions {
  position: absolute;
  right: max(24px, calc((100vw - 1280px) / 2 + 24px));
  bottom: 22px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  gap: 10px;
}
.actions button {
  min-width: 112px;
  padding: 10px 18px;
  white-space: nowrap;
}
.room-top { min-height: 435px; }
.room-top.rank-1 { min-height: 463px; margin-top: -28px; }
.room-fans { display: block; }
.room-fans label { display: block; margin-bottom: 6px; text-align: left; }
.room-fan-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  max-height: 134px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(250, 204, 21, .45) rgba(255, 255, 255, .04);
}
.room-fan-list::-webkit-scrollbar { width: 5px; }
.room-fan-list::-webkit-scrollbar-thumb { background: rgba(250, 204, 21, .45); border-radius: 9px; }
.room-fan-list span {
  width: min(100%, 280px);
  flex: 0 0 41px;
  display: grid;
  grid-template-columns: 32px 100px;
  align-items: center;
  justify-content: center;
  column-gap: 8px;
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  padding: 4px 8px;
}
.room-fans span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 9px 4px 5px;
}
.room-fans span img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(250, 204, 21, .55);
}
.room-fans .room-fan-list span {
  display: grid;
  grid-template-columns: 32px 100px;
  align-items: center;
  justify-content: center;
  column-gap: 8px;
}
.room-list {
  min-height: 128px;
  position: relative;
  display: grid;
  grid-template-columns: 74px minmax(0, 340px);
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding-right: 132px;
  text-align: left;
}
.room-list > .list-rank { position: absolute; left: 28px; }
.room-list > img { margin-left: 0; }
.room-list > div { width: 100%; }
.room-list-fans { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.room-list-fans label { color: #9298a8; font-size: 10px; }
.room-list-fans span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(234, 179, 8, .18);
  border-radius: 50%;
  background: rgba(96, 72, 16, .18);
  overflow: hidden;
  font-size: 0;
}
.room-list-fans img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

.room-name-marquee {
  display: block;
  width: 8em;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
}
.room-name-track {
  display: inline-flex;
  gap: 34px;
  min-width: max-content;
  animation: room-name-marquee 9s linear infinite;
}
.candidates .room-name-marquee {
  display: block;
  width: 8em;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
}
.candidates .room-name-track {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 34px;
  min-width: max-content;
  white-space: nowrap;
}
.candidates .room-name-track > span {
  display: inline-block;
  flex: 0 0 auto;
  white-space: nowrap;
}
@keyframes room-name-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - 17px)); }
}

.recommenders div { min-height: 39px; height: auto; font-size: 13px; padding: 5px 10px; }
.recommenders img { width: 29px; height: 29px; }
.recommenders label { display: block; text-align: left; margin-bottom: 6px; }
.recommenders div {
  display: grid;
  grid-template-columns: 29px 100px;
  align-items: center;
  justify-content: center;
  column-gap: 8px;
}
.recommenders div b { text-align: left; }
.list-fans { flex-direction: row; justify-content: flex-start; align-items: center; flex-wrap: wrap; }
.list-fans > span { min-width: auto; text-align: left; }
.list-meta .list-fans strong {
  display: grid;
  grid-template-columns: 29px 100px;
  align-items: center;
  justify-content: center;
  column-gap: 8px;
  width: 160px;
  font-size: 12px;
  padding: 5px 10px;
  text-align: left;
}
.list-fans strong img { width: 29px; height: 29px; }

.profile p { justify-content: flex-start; }
.profile b,
.profile em { margin-left: 0; }

.find-btn {
  border: 1px solid rgba(250, 204, 21, .5);
  border-radius: 9px;
  background: linear-gradient(90deg, rgba(126, 34, 206, .62), rgba(217, 119, 6, .76));
  color: #fff7c2;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 5px 16px rgba(0, 0, 0, .3);
  transition: transform .2s ease, filter .2s ease;
}
.find-btn:hover { transform: translateY(-1px); filter: brightness(1.14); }
.top-find { display: block; width: 76px; margin: 9px 0 0; padding: 5px 7px; font-size: 11px; }
.list-find { position: absolute; right: 24px; top: 24px; padding: 5px 10px; font-size: 11px; z-index: 2; }
.room-enter { min-width: 76px; }

/* Top three use the same vertical ranking rhythm as the remaining entries. */
.podium,
.room-podium {
  display: flex;
  flex-direction: column;
  max-width: 760px;
  gap: 14px;
  margin: 0 auto;
}
.top-card.flat-top,
.room-top.flat-room,
.top-card.flat-top.rank-1,
.room-top.flat-room.rank-1 {
  width: 100%;
  min-height: 0;
  margin: 0;
  padding: 20px 24px;
}
.flat-top.rank-1,.flat-room.rank-1 { order: 1; }
.flat-top.rank-2,.flat-room.rank-2 { order: 2; }
.flat-top.rank-3,.flat-room.rank-3 { order: 3; }
.flat-body {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  align-items: center;
  gap: 26px;
  width: min(100%, 620px);
  margin: 4px auto 0;
}
.flat-content { min-width: 0; }
.top-card.flat-top h3,
.room-top.flat-room h3 { text-align: left; margin: 4px 0 10px; }
.flat-top .portrait-wrap,
.flat-room .room-cover { margin: 22px auto 8px; }
.flat-top .recommenders,
.flat-room .room-fans { margin-top: 12px; }
.flat-top .recommenders div,
.flat-room .room-fan-list span { justify-content: start; }
.crown-wings {
  position: absolute;
  right: 22px;
  top: 18px;
  color: #d1d5db;
  font-size: 22px;
  letter-spacing: 5px;
  text-shadow: 0 0 12px currentColor;
}
.rank-1 .crown-wings { color: #facc15; }
.rank-3 .crown-wings { color: #fb923c; }

@media(max-width:760px){
  .flat-body { grid-template-columns: 92px minmax(0,1fr); gap: 14px; }
  .flat-top .portrait-wrap { transform: scale(.78); margin: 2px -10px; }
  .flat-room .room-cover { transform: scale(.78); margin: 2px -10px; }
  .top-card.flat-top,.room-top.flat-room { padding: 18px 14px; }
  .list-find { right: 12px; top: 14px; }
}

/* Top three now share the exact same card system as all remaining ranks. */
.podium,.room-podium { max-width: 760px; gap: 12px; }
.podium .list-card,.room-podium .room-list { width: 100%; margin: 0; }
.elite-card,.elite-room { position: relative; overflow: visible; }
.elite-card.rank-1,.elite-room.rank-1 { border-color: #d9a816; background: radial-gradient(circle at 28% 50%,rgba(120,98,13,.28),#050412 55%); box-shadow: 0 0 22px rgba(234,179,8,.15); }
.elite-card.rank-2,.elite-room.rank-2 { border-color: #64748b; background: radial-gradient(circle at 28% 50%,rgba(100,116,139,.22),#050412 55%); }
.elite-card.rank-3,.elite-room.rank-3 { border-color: #9a4c16; background: radial-gradient(circle at 28% 50%,rgba(154,76,22,.24),#050412 55%); }
.elite-card .list-rank,.elite-room .list-rank { font-weight: 900; border: 1px solid currentColor; background: rgba(5,4,12,.72); }
.elite-card.rank-1 .list-rank,.elite-room.rank-1 .list-rank { color:#facc15; }
.elite-card.rank-2 .list-rank,.elite-room.rank-2 .list-rank { color:#dbeafe; }
.elite-card.rank-3 .list-rank,.elite-room.rank-3 .list-rank { color:#fdba74; }
.elite-card .list-rank,
.elite-room .list-rank {
  width: 52px;
  font-size: 11px;
  letter-spacing: 0;
}
.elite-avatar { position: relative; }
.room-list-avatar { position:relative; width:74px; height:58px; }
.room-list-avatar>img { width:74px; height:58px; border-radius:9px; object-fit:cover; }
.room-list-avatar.elite-avatar>img { border:2px solid currentColor; }
.room-list-avatar.image-missing {
  border: 1px solid rgba(103, 232, 249, .42);
  border-radius: 9px;
  background:
    linear-gradient(135deg, rgba(103, 232, 249, .22), transparent 44%),
    linear-gradient(225deg, rgba(167, 139, 250, .24), transparent 56%),
    rgba(15, 23, 42, .82);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 18px rgba(96, 165, 250, .18);
}
.room-list-avatar.image-missing::after {
  content: "";
  position: absolute;
  inset: 16px 25px;
  border: 1px solid rgba(224, 242, 254, .72);
  border-radius: 2px;
  transform: rotate(45deg);
  box-shadow: 0 0 12px rgba(103, 232, 249, .45);
}
@media(max-width:760px){.room-list-avatar,.room-list-avatar>img{width:58px;height:52px}}

/* Multiple recommenders stack vertically beside a fixed label. */
.list-fans,
.room-list-fans {
  display: grid;
  grid-template-columns: auto 160px;
  align-items: center;
  justify-content: start;
  gap: 6px 8px;
}
.list-fans > span,
.room-list-fans > label { grid-column: 1; grid-row: 1; align-self: center; }
.list-fans > strong,
.room-list-fans > span { grid-column: 2; }

/* Recommenders: avatar and nickname only, without outer capsules. */
.recommenders div,
.list-meta .list-fans strong,
.room-fans .room-fan-list span,
.room-list-fans span {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* Ranked stars 4–30: centered content with the rank pinned left. */
.list-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.list-card .person-line,
.list-card .list-meta {
  width: min(100%, 480px);
}
.list-card .person-line .list-rank {
  position: absolute;
  left: 28px;
  top: 28px;
}

.live-wave {
  position: absolute;
  left: 50%;
  bottom: -12px;
  transform: translateX(-50%);
  width: 38px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border: 3px solid #ffe6c6;
  border-radius: 13px;
  background: linear-gradient(180deg, #ef4444, #c81e3a);
  box-shadow: 0 0 12px rgba(239, 68, 68, .65);
  z-index: 3;
}
.live-wave i {
  position: static;
  width: 3px;
  height: 11px;
  border: 0;
  border-radius: 3px;
  background: #fff;
  animation: sound-wave .75s ease-in-out infinite alternate;
}
.live-wave i:nth-child(2) { animation-delay: -.45s; }
.live-wave i:nth-child(3) { animation-delay: -.2s; }
.live-wave i:nth-child(4) { animation-delay: -.6s; }
@keyframes sound-wave { from { height: 4px; opacity: .65; } to { height: 15px; opacity: 1; } }

.list-avatar { position: relative; width: 44px; height: 44px; flex: 0 0 44px; }
.list-avatar > img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.list-avatar .live-wave { width: 29px; height: 18px; bottom: -7px; border-width: 2px; gap: 2px; }
.list-avatar .live-wave i { width: 2px; max-height: 10px; }
.list-fans { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.list-meta .list-fans strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 4px 9px 4px 5px;
}
.list-fans strong img { width: 23px; height: 23px; border-radius: 50%; object-fit: cover; }
.room-list-fans {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}
.room-list-fans > label {
  grid-column: auto;
  grid-row: auto;
  align-self: center;
  color: #778096;
  font-size: 12px;
}
.room-list-fans > span {
  grid-column: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  overflow: hidden;
  color: #facc15;
  font-size: 0;
  font-weight: 700;
}
.room-list-fans > span img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}
.candidate-id {
  width: fit-content;
  margin-top: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid rgba(250, 204, 21, .22);
  background: rgba(124, 93, 23, .16);
  color: #facc15;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0;
}
.role-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 6px;
  margin: 16px 0 12px;
  padding: 7px;
  border: 1px dashed rgba(250, 204, 21, .28);
  border-radius: 10px;
  background: rgba(21, 18, 31, .72);
}
.role-switch-note {
  grid-column: 1 / -1;
  padding: 0 4px 3px;
  color: #d9b85a;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}
.role-switch button {
  min-height: 34px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #858696;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}
.role-switch button.active {
  color: #f8d568;
  background: linear-gradient(90deg, #5d452b, #62371e);
  box-shadow: inset 0 0 0 1px #ba732555;
}
.candidate-empty {
  min-height: 108px;
  justify-content: center;
  border: 1px dashed rgba(250, 204, 21, .24);
  background: rgba(23, 19, 31, .62);
  color: #cbd5e1;
  font-size: 14px;
  font-weight: 800;
  text-align: center;
}
.candidate-recommended {
  opacity: .78;
}
.candidate-recommended button,
.candidate-recommended button:disabled,
.candidates button:disabled {
  border: 1px solid rgba(148, 163, 184, .32);
  background: linear-gradient(135deg, rgba(71, 85, 105, .72), rgba(51, 65, 85, .78));
  color: #cbd5e1;
  cursor: default;
  box-shadow: none;
}
.anchor-form {
  max-height: 70vh;
  overflow-y: auto;
  padding-right: 4px;
  padding-bottom: 8px;
}
.modal-card.form-mode {
  width: min(640px, 95vw);
  max-height: 90vh;
  overflow: hidden;
}
.modal-card.form-mode .candidates {
  max-height: none;
  overflow: visible;
  padding-right: 0;
}
.modal-card.form-mode .anchor-form {
  max-height: min(620px, calc(90vh - 172px));
  overflow-y: auto;
  padding-right: 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(56, 189, 248, .78) rgba(15, 23, 42, .24);
}
.modal-card.form-mode .anchor-form::-webkit-scrollbar {
  width: 6px;
}
.modal-card.form-mode .anchor-form::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(15, 23, 42, .24);
}
.modal-card.form-mode .anchor-form::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(180deg, #67e8f9, #3b82f6, #8b5cf6);
}
.form-target {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0 16px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #17131f;
}
.form-target img {
  width: 43px;
  height: 43px;
  border-radius: 50%;
  object-fit: cover;
}
.form-target span {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.form-target em {
  color: #facc15;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}
.anchor-form fieldset {
  margin: 14px 0;
  padding: 0;
  border: 0;
}
.anchor-form legend,
.work-field > span {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  gap: 8px;
  margin-bottom: 8px;
  color: #eef0f8;
  font-size: 13px;
  font-weight: 800;
  text-align: left;
  flex: 0 0 auto;
}
.anchor-form legend small {
  color: #8f96aa;
  font-size: 11px;
  font-weight: 600;
}
.work-field > span small {
  color: #facc15;
  font-size: 11px;
  font-weight: 700;
}
.choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.choice-grid label {
  position: relative;
  display: flex;
  min-height: 36px;
  align-items: center;
}
.choice-grid input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.choice-grid span {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid rgba(168, 85, 247, .22);
  border-radius: 9px;
  background: rgba(23, 19, 31, .86);
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}
.choice-grid input:checked + span {
  border-color: rgba(250, 204, 21, .55);
  background: linear-gradient(90deg, rgba(93, 69, 43, .92), rgba(98, 55, 30, .9));
  color: #f8d568;
}
.form-message {
  margin: 8px 0 0;
  color: #8f96aa;
  font-size: 11px;
}
.work-field {
  display: block;
  margin-top: 14px;
  text-align: left;
}
.candidates .work-field > span {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  gap: 8px;
  text-align: left;
}
.work-field textarea {
  width: 100%;
  resize: vertical;
  min-height: 64px;
  padding: 10px 12px;
  border: 1px solid rgba(168, 85, 247, .24);
  border-radius: 10px;
  background: #17131f;
  color: #eef0f8;
  outline: none;
  font: inherit;
  font-size: 12px;
}
.work-field textarea:focus {
  border-color: rgba(250, 204, 21, .48);
  box-shadow: 0 0 0 2px rgba(250, 204, 21, .08);
}
.form-message {
  min-height: 16px;
  color: #facc15;
  font-weight: 700;
}
.form-actions {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding-top: 10px;
  background: transparent;
}
.form-action-row {
  display: flex;
  justify-content: center;
  gap: 10px;
  width: 100%;
}
.submit-warning {
  width: 100%;
  color: #facc15;
  font-size: 11px;
  font-weight: 800;
  text-align: center;
}
.form-actions button {
  border: 0;
  border-radius: 9px;
  min-width: 96px;
  padding: 10px 24px;
  font-weight: 800;
  cursor: pointer;
}
.form-back {
  border: 1px solid rgba(250, 204, 21, .28) !important;
  background: #21182b;
  color: #eef0f8;
}
.form-submit {
  background: linear-gradient(90deg,#facc15,#f59e0b);
  color: #17120b;
}
.form-actions button:disabled {
  cursor: default;
  filter: saturate(.7);
  opacity: .82;
}
main {
  padding-bottom: 260px;
}

.vip-recommend-track {
  position: fixed;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 15;
  width: min(820px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  margin: 0;
  padding: 10px 0 0;
  transform: translateX(-50%);
  pointer-events: none;
}
.vip-track-title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin: 0 52px 10px;
}
.vip-track-title span {
  color: #facc15;
  font-size: 11px;
  font-weight: 800;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .85);
}
.vip-card-switch {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
}
.vip-nav {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(250, 204, 21, .32);
  border-radius: 50%;
  background: rgba(23, 19, 31, .92);
  color: #facc15;
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 8px 26px rgba(0, 0, 0, .45);
}
.vip-card-strip {
  min-width: 0;
  overflow: hidden;
}
.vip-card {
  display: none;
  min-width: 0;
  padding: 16px;
  border: 1px solid rgba(250, 204, 21, .24);
  border-radius: 14px;
  background: radial-gradient(circle at 18% 18%, rgba(250, 204, 21, .13), transparent 34%), rgba(7, 5, 18, .94);
  box-shadow: 0 16px 46px rgba(0, 0, 0, .68), inset 0 0 24px rgba(250, 204, 21, .05);
  backdrop-filter: blur(12px);
}
.vip-card.active {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(210px, auto);
  align-items: center;
  column-gap: 18px;
}
.vip-card.listed {
  border-color: rgba(56, 189, 248, .32);
  background: radial-gradient(circle at 18% 18%, rgba(56, 189, 248, .16), transparent 34%), rgba(7, 5, 18, .94);
}
.vip-card-head {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}
.vip-card-head img {
  width: 58px;
  height: 58px;
  border-radius: 12px;
  object-fit: cover;
}
.vip-card-side {
  display: flex;
  min-width: 210px;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 8px;
}
.vip-card-status {
  display: inline-flex;
  width: fit-content;
  margin: 0;
  padding: 3px 8px;
  border: 1px solid rgba(250, 204, 21, .26);
  border-radius: 999px;
  background: rgba(124, 93, 23, .18);
  color: #facc15;
  font-size: 10px;
  font-weight: 800;
}
.vip-card-status-listed {
  border-color: rgba(56, 189, 248, .34);
  background: rgba(14, 116, 144, .28);
  color: #7dd3fc;
}
.vip-card-head h3 {
  margin: 0;
  color: #eef0f8;
  font: 800 16px/1.25 'Noto Serif TC', serif;
  overflow-wrap: anywhere;
}
.vip-card-head em {
  display: inline-block;
  margin-top: 5px;
  color: #9ca3af;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}
.vip-need-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin: 0;
  padding: 0;
  border-radius: 10px;
  background: transparent;
}
.vip-need-row span {
  color: #8f96aa;
  font-size: 12px;
  font-weight: 700;
}
.vip-need-row strong {
  color: #facc15;
  font-size: 14px;
  text-align: right;
  overflow-wrap: anywhere;
  white-space: nowrap;
}
.vip-listed-row strong {
  color: #7dd3fc;
}
.vip-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  pointer-events: auto;
}
.vip-dot {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .26);
  cursor: pointer;
}
.vip-dot.active {
  width: 18px;
  border-radius: 999px;
  background: #facc15;
}

@media (max-width: 760px) {
  main { padding-bottom: 240px; }
  .room-top { min-height: 420px; }
  .room-top.rank-1 { min-height: 440px; margin-top: 0; }
  .room-list { grid-template-columns: 58px minmax(0, 1fr); gap: 12px; padding: 54px 12px 12px 46px; text-align: left; }
  .room-list > img { margin-left: 0; }
  .list-card .person-line,
  .list-card .list-meta { width: calc(100% - 44px); }
  .list-card .person-line .list-rank { left: 14px; top: 22px; }
  .vip-recommend-track { bottom: max(10px, env(safe-area-inset-bottom)); width: calc(100vw - 18px); max-width: calc(100vw - 18px); }
  .vip-track-title { align-items: start; flex-direction: column; gap: 4px; margin: 0 42px 8px; }
  .vip-card-switch { grid-template-columns: 34px minmax(0, 1fr) 34px; gap: 7px; }
  .vip-card.active { grid-template-columns: minmax(0, 1fr) minmax(132px, auto); column-gap: 10px; }
  .vip-card { padding: 14px; }
  .vip-card-head { grid-template-columns: 46px minmax(0, 1fr); gap: 10px; }
  .vip-card-head img { width: 46px; height: 46px; }
  .vip-card-side { min-width: 132px; gap: 6px; }
  .vip-card-status { font-size: 9px; }
  .vip-need-row strong { font-size: 12px; white-space: normal; }
  .vip-nav { width: 34px; height: 34px; font-size: 23px; }
}

/* Blue-purple crystal theme. */
:root {
  --crystal-bg: #050817;
  --crystal-deep: #090d24;
  --crystal-panel: rgba(13, 20, 49, .78);
  --crystal-panel-strong: rgba(16, 25, 61, .9);
  --crystal-ice: #eff8ff;
  --crystal-cyan: #67e8f9;
  --crystal-blue: #60a5fa;
  --crystal-violet: #a78bfa;
  --crystal-pink: #f0abfc;
  --crystal-line: rgba(147, 197, 253, .34);
  --crystal-line-strong: rgba(103, 232, 249, .58);
  --crystal-shadow: rgba(2, 6, 23, .72);
}
body {
  background:
    linear-gradient(135deg, #020617 0%, #071027 34%, #101044 68%, #06071c 100%);
  color: var(--crystal-ice);
}
.cosmos {
  background:
    linear-gradient(118deg, rgba(96, 165, 250, .12) 0 1px, transparent 1px 24%),
    linear-gradient(32deg, rgba(167, 139, 250, .12) 0 1px, transparent 1px 28%),
    linear-gradient(160deg, #030712 0%, #071227 38%, #15104a 72%, #050617 100%);
}
.nebula {
  display: none;
}
.cosmos::before,
.cosmos::after {
  content: "";
  position: absolute;
  pointer-events: none;
  opacity: .5;
}
.cosmos::before {
  inset: -8% -4% auto auto;
  width: 72vw;
  height: 52vh;
  clip-path: polygon(12% 18%, 100% 0, 82% 64%, 38% 100%, 0 56%);
  background:
    linear-gradient(135deg, rgba(125, 211, 252, .16), transparent 42%),
    linear-gradient(42deg, transparent 18%, rgba(196, 181, 253, .18) 48%, transparent 76%);
}
.cosmos::after {
  left: -12vw;
  bottom: -10vh;
  width: 64vw;
  height: 46vh;
  clip-path: polygon(0 24%, 54% 0, 100% 54%, 68% 100%, 16% 82%);
  background:
    linear-gradient(120deg, rgba(99, 102, 241, .2), transparent 52%),
    linear-gradient(28deg, rgba(103, 232, 249, .12), transparent 64%);
}
.star {
  width: 7px;
  height: 7px;
  border-radius: 1px;
  transform: rotate(45deg);
  background: #e0f7ff;
  box-shadow: 0 0 14px 3px rgba(103, 232, 249, .55);
  opacity: .48;
}
header {
  border-bottom: 1px solid rgba(103, 232, 249, .18);
  background:
    linear-gradient(180deg, rgba(12, 20, 54, .74), rgba(5, 8, 23, .42)),
    linear-gradient(112deg, transparent 18%, rgba(103, 232, 249, .08) 18% 19%, transparent 19% 44%, rgba(167, 139, 250, .11) 44% 45%, transparent 45%);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .07), 0 18px 60px rgba(15, 23, 42, .36);
}
header h1 {
  background: linear-gradient(105deg, #ffffff 4%, #bff3ff 32%, #91c8ff 52%, #c4b5fd 74%, #f0abfc 96%);
  -webkit-background-clip: text;
  color: transparent;
  text-shadow: 0 0 22px rgba(96, 165, 250, .26), 0 7px 26px rgba(2, 6, 23, .75);
}
header h2,
.vip-track-title span,
.rule-pop h2,
.modal-card > h2 {
  color: #bfdbfe;
  text-shadow: 0 0 16px rgba(103, 232, 249, .38);
}
.actions button,
.tabs,
.modal-tabs,
.role-switch {
  border-color: rgba(103, 232, 249, .24);
  background: linear-gradient(135deg, rgba(15, 23, 42, .72), rgba(49, 46, 129, .36));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 10px 26px rgba(2, 6, 23, .32);
}
.actions button,
.tabs button,
.modal-tabs button,
.role-switch button {
  color: #b9d8ff;
}
.actions .gold,
.find-btn,
.candidates button,
.form-submit {
  border: 1px solid rgba(103, 232, 249, .42);
  color: #f8fbff;
  background: linear-gradient(112deg, #2563eb, #7c3aed 54%, #06b6d4);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .07) inset, 0 10px 24px rgba(37, 99, 235, .28), 0 0 24px rgba(103, 232, 249, .18);
}
.actions .gold:hover,
.find-btn:hover,
.candidates button:hover,
.form-submit:hover {
  filter: brightness(1.1) saturate(1.08);
}
.tabs .active,
.modal-tabs .active,
.role-switch button.active,
.choice-grid input:checked + span {
  border-color: rgba(103, 232, 249, .58);
  color: #ffffff;
  background: linear-gradient(115deg, rgba(37, 99, 235, .78), rgba(124, 58, 237, .78) 58%, rgba(14, 165, 233, .7));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 0 22px rgba(96, 165, 250, .22);
}
.list-card,
.room-list,
.modal-card,
.rule-pop,
.vip-card,
.candidates > div,
.form-target,
.choice-grid span,
.work-field textarea,
.candidate-empty {
  border-color: var(--crystal-line);
  background:
    linear-gradient(135deg, rgba(103, 232, 249, .09), transparent 30%),
    linear-gradient(225deg, rgba(167, 139, 250, .14), transparent 38%),
    var(--crystal-panel);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 16px 42px var(--crystal-shadow);
}
.list-card,
.room-list,
.vip-card {
  border-radius: 8px;
}
.modal-card,
.rule-pop {
  border-radius: 12px;
}
.rule-pop {
  width: min(620px, 92vw);
  max-height: 84vh;
  overflow-y: auto;
  padding: 30px 28px 32px;
  border-color: rgba(103, 232, 249, .58);
  background:
    linear-gradient(135deg, rgba(56, 189, 248, .08), transparent 34%),
    linear-gradient(225deg, rgba(124, 58, 237, .12), transparent 42%),
    #071229;
  box-shadow: 0 0 0 100vmax rgba(2, 6, 23, .72), 0 24px 80px rgba(0, 0, 0, .78), inset 0 1px 0 rgba(255, 255, 255, .08);
  scrollbar-width: thin;
  scrollbar-color: rgba(103, 232, 249, .55) rgba(15, 23, 42, .36);
}
.rule-pop::-webkit-scrollbar {
  width: 6px;
}
.rule-pop::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(15, 23, 42, .36);
}
.rule-pop::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(180deg, #67e8f9, #8b5cf6);
}
.rule-body {
  margin-top: 16px;
  color: #dcecff;
  font-size: 13px;
  line-height: 1.75;
}
.rule-list {
  margin: 0;
  padding-left: 20px;
}
.rule-list > li {
  margin: 0 0 12px;
}
.rule-highlight {
  color: #67e8f9;
  font-weight: 900;
  text-shadow: 0 0 12px rgba(103, 232, 249, .5);
}
.reward-section {
  margin-top: 14px;
}
.reward-section h3 {
  position: relative;
  margin: 0 0 10px;
  padding-left: 16px;
  color: #f8fbff;
  font-size: 14px;
  font-weight: 900;
}
.reward-section h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: .66em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #67e8f9;
  box-shadow: 0 0 12px rgba(103, 232, 249, .72);
}
.reward-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  overflow: hidden;
  border: 1px solid rgba(147, 197, 253, .34);
  border-radius: 6px;
  background: #08152f;
}
.reward-table th,
.reward-table td {
  border: 1px solid rgba(147, 197, 253, .28);
  padding: 9px 10px;
  color: #eaf6ff;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  vertical-align: middle;
}
.reward-table th {
  background: #172a4c;
  color: #ffffff;
  font-weight: 900;
}
.reward-table td {
  background: #0b1d3e;
}
.reward-item {
  display: grid;
  justify-items: center;
  gap: 6px;
}
.reward-thumb {
  display: grid;
  place-items: center;
  width: min(96px, 70%);
  aspect-ratio: 16 / 9;
  border: 1px dashed rgba(147, 197, 253, .42);
  border-radius: 6px;
  background:
    linear-gradient(135deg, rgba(103, 232, 249, .1), transparent 38%),
    linear-gradient(225deg, rgba(167, 139, 250, .12), transparent 44%),
    rgba(8, 21, 47, .9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}
.reward-thumb::before {
  content: "圖片";
  color: rgba(234, 246, 255, .72);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
}
.reward-item b {
  color: inherit;
  font: inherit;
  font-weight: 800;
}
.reward-stack {
  display: grid;
  gap: 12px;
}
.room-reward-table td[rowspan] {
  line-height: 1.75;
}
.toast {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 60;
  min-width: 136px;
  padding: 12px 24px;
  border: 1px solid rgba(103, 232, 249, .48);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(103, 232, 249, .2), rgba(167, 139, 250, .24)),
    rgba(8, 13, 34, .92);
  color: #f8fbff;
  font-size: 15px;
  font-weight: 900;
  text-align: center;
  box-shadow: 0 16px 42px rgba(2, 6, 23, .5), 0 0 28px rgba(103, 232, 249, .26);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, calc(-50% - 8px));
  transition: opacity .2s ease, transform .2s ease;
}
.toast.show {
  opacity: 1;
  transform: translate(-50%, -50%);
}
.list-card::before,
.room-list::before,
.modal-card::before,
.rule-pop::before,
.vip-card::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(132deg, rgba(255, 255, 255, .16), transparent 18% 72%, rgba(103, 232, 249, .1)),
    linear-gradient(42deg, transparent 0 46%, rgba(255, 255, 255, .07) 47% 48%, transparent 49%);
  opacity: .78;
}
.vip-card {
  position: relative;
}
.elite-card.rank-1,
.elite-room.rank-1,
.elite-card.rank-2,
.elite-room.rank-2,
.elite-card.rank-3,
.elite-room.rank-3 {
  background:
    linear-gradient(135deg, rgba(103, 232, 249, .14), transparent 32%),
    linear-gradient(228deg, rgba(167, 139, 250, .18), transparent 46%),
    rgba(9, 13, 36, .86);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 28px rgba(96, 165, 250, .18), 0 18px 42px rgba(2, 6, 23, .54);
}
.elite-card.rank-1,
.elite-room.rank-1 {
  border-color: rgba(103, 232, 249, .72);
}
.elite-card.rank-2,
.elite-room.rank-2 {
  border-color: rgba(196, 181, 253, .54);
}
.elite-card.rank-3,
.elite-room.rank-3 {
  border-color: rgba(240, 171, 252, .5);
}
.list-rank,
.elite-card .list-rank,
.elite-room .list-rank {
  color: #dbeafe;
  border-color: rgba(147, 197, 253, .44);
  background: linear-gradient(135deg, rgba(30, 41, 100, .88), rgba(15, 23, 42, .74));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 16px rgba(96, 165, 250, .18);
}
.elite-card.rank-1 .list-rank,
.elite-room.rank-1 .list-rank {
  color: #67e8f9;
  text-shadow: 0 0 14px rgba(103, 232, 249, .75);
}
.elite-card.rank-3 .list-rank,
.elite-room.rank-3 .list-rank {
  color: #f0abfc;
  text-shadow: 0 0 14px rgba(240, 171, 252, .55);
}
.list-avatar > img,
.portrait-wrap img,
.room-list-avatar > img,
.room-list-avatar.elite-avatar > img,
.vip-card-head img,
.candidates img,
.form-target img {
  border-color: rgba(103, 232, 249, .58);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 0 22px rgba(96, 165, 250, .24);
}
.live-wave {
  border-color: rgba(224, 242, 254, .88);
  background: linear-gradient(180deg, #38bdf8, #8b5cf6);
  box-shadow: 0 0 16px rgba(103, 232, 249, .55);
}
.list-meta small,
.profile small,
.room-tags small,
.room-list small,
.candidate-id {
  border-color: rgba(103, 232, 249, .26);
  background: rgba(37, 99, 235, .16);
  color: #dbeafe;
}
.list-meta b,
.profile b,
.list-meta strong,
.room-list-fans > span,
.submit-warning,
.form-message,
.role-switch-note,
.vip-card-status,
.vip-need-row strong {
  color: #67e8f9;
}
.list-meta strong,
.candidate-id,
.vip-card-status {
  background: rgba(14, 116, 144, .18);
  border-color: rgba(103, 232, 249, .36);
}
.list-meta span,
.room-list-fans > label,
.profile span,
.vip-card-head em,
.vip-need-row span,
.rule-pop p,
.modal-card > p {
  color: #9fb7d7;
}
.room-list h3,
.person-line h3,
.vip-card-head h3,
.form-target b,
.candidates b {
  color: #f8fbff;
  text-shadow: 0 0 14px rgba(96, 165, 250, .18);
}
.vip-card,
.vip-card.listed {
  border-color: rgba(103, 232, 249, .36);
  background:
    linear-gradient(135deg, rgba(103, 232, 249, .12), transparent 34%),
    linear-gradient(230deg, rgba(167, 139, 250, .16), transparent 46%),
    rgba(7, 12, 30, .94);
}
.vip-card-status-listed,
.vip-listed-row strong {
  color: #c4b5fd;
}
.vip-dot {
  background: rgba(191, 219, 254, .34);
}
.vip-dot.active {
  background: linear-gradient(90deg, #67e8f9, #a78bfa);
  box-shadow: 0 0 14px rgba(103, 232, 249, .5);
}
.vip-nav {
  border-color: rgba(103, 232, 249, .38);
  color: #dff8ff;
  background: linear-gradient(145deg, rgba(30, 64, 175, .62), rgba(76, 29, 149, .74));
}
.form-back {
  border-color: rgba(147, 197, 253, .32) !important;
  background: rgba(15, 23, 42, .72);
  color: #dbeafe;
}
.work-field textarea:focus {
  border-color: rgba(103, 232, 249, .62);
  box-shadow: 0 0 0 2px rgba(103, 232, 249, .12), 0 0 18px rgba(96, 165, 250, .22);
}
.shade {
  background: rgba(2, 6, 23, .76);
  backdrop-filter: blur(14px);
}
.close,
.rule-pop button {
  color: #bfdbfe;
}
.candidates,
.anchor-form,
.room-fan-list {
  scrollbar-color: rgba(103, 232, 249, .55) rgba(15, 23, 42, .45);
}

/* Prototype-only role switch uses neutral grey to separate it from official UI. */
.role-switch {
  border: 1px dashed rgba(148, 163, 184, .5);
  background: linear-gradient(135deg, rgba(51, 65, 85, .76), rgba(30, 41, 59, .82));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.role-switch-note {
  color: #cbd5e1;
}
.role-switch button {
  color: #d1d5db;
  background: rgba(15, 23, 42, .36);
}
.role-switch button.active {
  border: 1px solid rgba(203, 213, 225, .46);
  color: #f8fafc;
  background: linear-gradient(135deg, rgba(100, 116, 139, .9), rgba(71, 85, 105, .9));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 8px 20px rgba(15, 23, 42, .22);
}
.room-confirm {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 14px 2px 8px;
}

.room-confirm .form-target {
  justify-content: center;
  width: min(100%, 360px);
  text-align: left;
}

.room-confirm .form-action-row {
  justify-content: center;
  width: 100%;
}

.score-unit {
  display: inline-block;
  margin-left: 3px;
  color: #b9c8ed;
  font-size: .92em;
  line-height: 1;
  vertical-align: 0;
}
.annotated-tab {
  position: relative;
}

.comment-marker {
  position: absolute;
  z-index: 10;
  top: -8px;
  right: -8px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #168cff;
  box-shadow: 0 3px 10px rgba(0,0,0,.35);
  color: #fff;
  font: 700 11px/1 sans-serif;
}

.comment-marker.note-active { background: #00b8ff; box-shadow: 0 0 0 4px rgba(0,184,255,.18), 0 3px 10px rgba(0,0,0,.35); }

.annotated-avatar,
.annotated-recommender { position: relative; }
.avatar-note { top: -7px; right: -7px; }
.recommender-note { top: -9px; right: -13px; }
.annotated-room-fans { position: relative; }
.room-list-fans .room-fans-note {
  display: grid;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #168cff;
  overflow: visible;
  color: #fff;
  font: 700 11px/1 sans-serif;
  top: -8px;
  right: auto;
  left: 52px;
}
.room-enter-note { top: -8px; right: -8px; }
#recommend { position: relative; }
.recommend-note { top: -8px; right: -8px; }