*, ::before, ::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}

::backdrop {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-pan-x:  ;
  --tw-pan-y:  ;
  --tw-pinch-zoom:  ;
  --tw-scroll-snap-strictness: proximity;
  --tw-gradient-from-position:  ;
  --tw-gradient-via-position:  ;
  --tw-gradient-to-position:  ;
  --tw-ordinal:  ;
  --tw-slashed-zero:  ;
  --tw-numeric-figure:  ;
  --tw-numeric-spacing:  ;
  --tw-numeric-fraction:  ;
  --tw-ring-inset:  ;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgb(59 130 246 / 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
  --tw-shadow-colored: 0 0 #0000;
  --tw-blur:  ;
  --tw-brightness:  ;
  --tw-contrast:  ;
  --tw-grayscale:  ;
  --tw-hue-rotate:  ;
  --tw-invert:  ;
  --tw-saturate:  ;
  --tw-sepia:  ;
  --tw-drop-shadow:  ;
  --tw-backdrop-blur:  ;
  --tw-backdrop-brightness:  ;
  --tw-backdrop-contrast:  ;
  --tw-backdrop-grayscale:  ;
  --tw-backdrop-hue-rotate:  ;
  --tw-backdrop-invert:  ;
  --tw-backdrop-opacity:  ;
  --tw-backdrop-saturate:  ;
  --tw-backdrop-sepia:  ;
  --tw-contain-size:  ;
  --tw-contain-layout:  ;
  --tw-contain-paint:  ;
  --tw-contain-style:  ;
}/*
! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com
*//*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/

*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  border-width: 0; /* 2 */
  border-style: solid; /* 2 */
  border-color: #e5e7eb; /* 2 */
}

::before,
::after {
  --tw-content: '';
}

/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
7. Disable tap highlights on iOS
*/

html,
:host {
  line-height: 1.5; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -moz-tab-size: 4; /* 3 */
  -o-tab-size: 4;
     tab-size: 4; /* 3 */
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif; /* 4 */
  font-feature-settings: normal; /* 5 */
  font-variation-settings: normal; /* 6 */
  -webkit-tap-highlight-color: transparent; /* 7 */
}

/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/

body {
  margin: 0; /* 1 */
  line-height: inherit; /* 2 */
}

/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/

hr {
  height: 0; /* 1 */
  color: inherit; /* 2 */
  border-top-width: 1px; /* 3 */
}

/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/

abbr:where([title]) {
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/*
Remove the default font size and weight for headings.
*/

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

/*
Reset links to optimize for opt-in styling instead of opt-out.
*/

a {
  color: inherit;
  text-decoration: inherit;
}

/*
Add the correct font weight in Edge and Safari.
*/

b,
strong {
  font-weight: bolder;
}

/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
  font-feature-settings: normal; /* 2 */
  font-variation-settings: normal; /* 3 */
  font-size: 1em; /* 4 */
}

/*
Add the correct font size in all browsers.
*/

small {
  font-size: 80%;
}

/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/

table {
  text-indent: 0; /* 1 */
  border-color: inherit; /* 2 */
  border-collapse: collapse; /* 3 */
}

/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-feature-settings: inherit; /* 1 */
  font-variation-settings: inherit; /* 1 */
  font-size: 100%; /* 1 */
  font-weight: inherit; /* 1 */
  line-height: inherit; /* 1 */
  letter-spacing: inherit; /* 1 */
  color: inherit; /* 1 */
  margin: 0; /* 2 */
  padding: 0; /* 3 */
}

/*
Remove the inheritance of text transform in Edge and Firefox.
*/

button,
select {
  text-transform: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/

button,
input:where([type='button']),
input:where([type='reset']),
input:where([type='submit']) {
  -webkit-appearance: button; /* 1 */
  background-color: transparent; /* 2 */
  background-image: none; /* 2 */
}

/*
Use the modern Firefox focus style for all focusable elements.
*/

:-moz-focusring {
  outline: auto;
}

/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/

:-moz-ui-invalid {
  box-shadow: none;
}

/*
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
  vertical-align: baseline;
}

/*
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/*
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/*
Add the correct display in Chrome and Safari.
*/

summary {
  display: list-item;
}

/*
Removes the default spacing and border for appropriate elements.
*/

blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
  margin: 0;
}

fieldset {
  margin: 0;
  padding: 0;
}

legend {
  padding: 0;
}

ol,
ul,
menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/*
Reset default styling for dialogs.
*/
dialog {
  padding: 0;
}

/*
Prevent resizing textareas horizontally by default.
*/

textarea {
  resize: vertical;
}

/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/

input::-moz-placeholder, textarea::-moz-placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

input::placeholder,
textarea::placeholder {
  opacity: 1; /* 1 */
  color: #9ca3af; /* 2 */
}

/*
Set the default cursor for buttons.
*/

button,
[role="button"] {
  cursor: pointer;
}

/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
  cursor: default;
}

/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
   This can trigger a poorly considered lint error in some tools but is included by design.
*/

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block; /* 1 */
  vertical-align: middle; /* 2 */
}

/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/

img,
video {
  max-width: 100%;
  height: auto;
}

/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden]:where(:not([hidden="until-found"])) {
  display: none;
}
  button {
  cursor: pointer;
  border-style: none;
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.\!container {
  width: 100% !important;
}
.container {
  width: 100%;
}
@media (min-width: 640px) {

  .\!container {
    max-width: 640px !important;
  }

  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {

  .\!container {
    max-width: 768px !important;
  }

  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {

  .\!container {
    max-width: 1024px !important;
  }

  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {

  .\!container {
    max-width: 1280px !important;
  }

  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {

  .\!container {
    max-width: 1536px !important;
  }

  .container {
    max-width: 1536px;
  }
}
  /* 通用描边图标 */
  .icon {
  height: 1.25rem;
  width: 1.25rem;
  fill: none;
  stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
  /* 麦位关麦话筒图标（尺寸/定位见 .seat-mic 主规则） */
  .seat-mic {
  fill: none;
  stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
  /* 礼物图标 */
  .gift-icon {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0.375rem;
  height: 2.25rem;
  width: 2.25rem;
  fill: none;
  stroke: currentColor;
  --tw-text-opacity: 1;
  color: rgb(196 181 253 / var(--tw-text-opacity, 1));
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

  /* 应用容器（房间页深色背景） */
  .app-container {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  min-height: 100vh;
  width: 100%;
  max-width: 1200px;
  overflow: hidden;
    color: #ece9f5;
    background:
      radial-gradient(120% 42% at 50% -10%, rgba(124, 58, 237, 0.35), transparent 60%),
      linear-gradient(180deg, #1a1238 0%, #130e28 45%, #0c0918 100%);
}

  /* 页面切换 */
  .page {
  display: none;
  min-height: 100vh;
  flex-direction: column;
}
  .page.active {
  display: flex;
}

  /* 通用按钮 */

  /* 房间页顶部信息条 */
  .room-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding-left: 0.875rem;
  padding-right: 0.875rem;
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
  .room-cover {
  display: flex;
  height: 2.75rem;
  width: 2.75rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  align-self: center;
  overflow: hidden;
  border-radius: 9999px;
  border-width: 1px;
    border-color: rgba(139, 92, 246, 0.5);
    box-shadow: 0 0 12px rgba(139, 92, 246, 0.3);
}
  .room-cover img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
  .room-cover .room-cover-fallback {
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
}
  .room-head {
  display: flex;
  min-width: 0px;
  flex: 1 1 0%;
  flex-direction: column;
  gap: 0.25rem;
}
  .room-name-row {
  display: flex;
  min-width: 0px;
  align-items: center;
  gap: 0.5rem;
}
  .room-name {
  min-width: 0px;
  flex: 1 1 0%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(243 241 250 / var(--tw-text-opacity, 1));
}
  .name-actions {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.25rem;
}
  .room-id {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 400;
  --tw-text-opacity: 1;
  color: rgb(138 132 168 / var(--tw-text-opacity, 1));
}
  .room-sub {
  display: flex;
  min-width: 0px;
  align-items: center;
  gap: 0.5rem;
}
  .room-stat {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.125rem;
  font-size: 11px;
  --tw-text-opacity: 1;
  color: rgb(182 176 210 / var(--tw-text-opacity, 1));
}
  .room-stat .icon {
    width: 12px;
    height: 12px;
    color: #ff7a45;
  }
  .room-stat .icon:first-child {
    color: #ff7a45;
  }
  .room-sub .room-stat:last-child .icon {
    color: #a78bfa;
  }
  /* 在线观众：头像组（重叠）+ 人数 */
  .online-group {
  display: flex;
  flex-shrink: 0;
  cursor: pointer;
  align-items: center;
  border-radius: 9999px;
    padding: 2px 6px 2px 4px;
    transition: background 0.15s ease;
}
  .online-group:active {
    background: rgba(255, 255, 255, 0.1);
  }
  .online-avatars {
  display: flex;
  align-items: center;
}
  .online-avatar {
  display: flex;
  height: 1.75rem;
  width: 1.75rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
    background: #2a2348;
    color: #c9b8ff;
    border: 1.5px solid rgba(255, 255, 255, 0.32);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}
  .online-avatar + .online-avatar {
    margin-left: -8px;
  }
  .online-num {
  display: flex;
  height: 1.75rem;
  min-width: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  padding-left: 0.375rem;
  padding-right: 0.375rem;
  font-size: 12px;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    background: rgba(255, 255, 255, 0.14);
    margin-left: 6px;
}
  .follow-wrap {
  display: flex;
  height: 2rem;
  flex-shrink: 0;
  align-items: center;
  overflow: hidden;
  border-radius: 9999px;
    background: linear-gradient(135deg, #ffd95e, #f5b800);
    box-shadow: 0 2px 10px rgba(245, 184, 0, 0.4);
}
  .follow-btn {
  display: flex;
  height: 100%;
  flex-shrink: 0;
  align-items: center;
  gap: 0.125rem;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  font-size: 12px;
  font-weight: 600;
    color: #4a3200;
    background: transparent;
}
  .follow-count {
  display: flex;
  height: 100%;
  min-width: 44px;
  align-items: center;
  justify-content: center;
  padding-left: 0.625rem;
  padding-right: 0.625rem;
  font-size: 12px;
  font-weight: 600;
    color: #4a3200;
    background: transparent;
    border-left: 1px solid rgba(74, 50, 0, 0.22);
}
  /* 已关注：整个连体胶囊变半透明灰 */
  .follow-wrap.is-followed {
    background: rgba(255, 255, 255, 0.12);
    box-shadow: none;
  }
  .follow-wrap.is-followed .follow-btn,
  .follow-wrap.is-followed .follow-count {
    color: #d9d4ec;
  }
  .follow-wrap.is-followed .follow-count {
    border-left-color: rgba(255, 255, 255, 0.18);
  }
  .follow-btn .icon {
    width: 13px;
    height: 13px;
  }
  .header-icon {
  display: flex;
  height: 2rem;
  width: 2rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  --tw-text-opacity: 1;
  color: rgb(216 211 236 / var(--tw-text-opacity, 1));
}
  .header-icon:active {
    background: rgba(255, 255, 255, 0.12);
  }
  .header-icon .icon {
    width: 20px;
    height: 20px;
  }
  .header-close {
    color: #fda4af;
  }

  /* 麦位区 */
  .seats-area {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1rem;
}

  /* 房主麦位 */
  .host-seat {
  position: relative;
  display: flex;
  aspect-ratio: 16 / 9;
  width: 100%;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(245, 196, 81, 0.65);
    box-shadow: 0 0 24px rgba(245, 196, 81, 0.12);
}
  .host-avatar {
  display: flex;
  height: 72px;
  width: 72px;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border-width: 3px;
  --tw-border-opacity: 1;
  border-color: rgb(245 158 11 / var(--tw-border-opacity, 1));
  font-size: 28px;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    background-image: linear-gradient(135deg, #7c3aed, #a855f7);
}
  .host-name {
  position: absolute;
  bottom: 0.625rem;
  left: 0.875rem;
  font-size: 13px;
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
  .host-seat.has-video .host-avatar {
    display: none;
  }
  .speaking-indicator {
  pointer-events: none;
  position: absolute;
  inset: -2px;
  border-radius: 1rem;
  border-width: 2px;
  --tw-border-opacity: 1;
  border-color: rgb(34 197 94 / var(--tw-border-opacity, 1));
  opacity: 0;
}
  @keyframes speak {

  0%, 100% {
    opacity: 0.4;
  }

  50% {
    opacity: 1;
  }
}
  .speaking-indicator.active {
  animation: speak 1.5s infinite;
  opacity: 1;
}

  /* ---------- 主播未直播通用封面 ---------- */
  .host-cover {
  position: absolute;
  inset: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
    z-index: 1;
    background: linear-gradient(160deg, rgba(124, 58, 237, 0.3), rgba(46, 16, 101, 0.6));
}
  .host-cover-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  text-align: center;
}
  .host-cover-fox {
  margin-bottom: 0.375rem;
  height: 5rem;
  width: 5rem;
    animation: fox-float 2.6s ease-in-out infinite;
}
  .host-cover-fox-svg {
    width: 100%;
    height: 100%;
    display: block;
  }
  .host-cover-title {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.025em;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
  .host-cover-schedule {
  margin-top: 0.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 9999px;
  background-color: rgb(0 0 0 / 0.3);
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 11px;
  --tw-text-opacity: 1;
  color: rgb(253 230 138 / var(--tw-text-opacity, 1));
    border: 1px solid rgba(251, 191, 36, 0.35);
}
  .host-cover-schedule[hidden] {
    display: none;
  }
  .hc-schedule-ic {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    color: #fbbf24;
  }
  .hc-schedule-text b {
    color: #fcd34d;
    font-weight: 700;
  }
  /* 仅未直播显示封面并隐藏原头像/名字；开播后封面隐藏 */
  .host-seat:not(.host-offline) .host-cover {
    display: none;
  }
  .host-seat.host-offline .host-avatar,
  .host-seat.host-offline .host-name {
    display: none;
  }
  @keyframes fox-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
  }

  /* 嘉宾麦位网格 */
  .guest-seats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.625rem;
}
  .seat {
  position: relative;
  display: flex;
  aspect-ratio: 1 / 1;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 0.75rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
  .seat:hover {
    border-color: rgba(139, 92, 246, 0.5);
  }
  .seat:active {
    transform: scale(0.95);
  }
  /* 头像框（含等级框 + 说话波纹） */
  .seat-avatar-wrap {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
    background: linear-gradient(135deg, #60a5fa, #818cf8);
  }
  /* 动态头像框（素材 WebP）：放大覆盖在头像外圈，中心透明，不拦截点击 */
  .seat-frame {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 78px;
    height: 78px;
    max-width: none;
    transform: translate(-50%, -50%);
    border-radius: 0;
    pointer-events: none;
    z-index: 1;
  }
  .seat-avatar-wrap .seat-avatar {
    position: relative;
    z-index: 2;
  }
  .seat-avatar-wrap.speaking::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid #22c55e;
    animation: seatRing 1.1s ease-out infinite;
  }
  @keyframes seatRing {
    0% {
      transform: scale(0.92);
      opacity: 0.85;
    }
    100% {
      transform: scale(1.32);
      opacity: 0;
    }
  }
  .seat-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 9999px;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 600;
    width: 100%;
    height: 100%;
    background: #211a40;
    color: #d8b4fe;
}
  .seat-avatar .seat-avatar-img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
  }
  .seat.empty .seat-avatar {
    width: 42px;
    height: 42px;
    margin-bottom: 6px;
    background: rgba(255, 255, 255, 0.05);
    color: #6f6a8a;
  }
  /* 管理员角标 */
  .seat-tag {
  position: absolute;
  top: 0.375rem;
  left: 0.375rem;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.125rem;
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    padding: 1px 5px;
    border-radius: 8px;
    background: linear-gradient(135deg, #f59e0b, #ef4444);
}
  .seat-tag .icon {
    width: 9px;
    height: 9px;
  }
  /* 等级徽章（头像右下角） */
  .seat-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  font-size: 11px;
  --tw-text-opacity: 1;
  color: rgb(167 161 198 / var(--tw-text-opacity, 1));
}
  .seat.is-admin .seat-name {
    color: #f5c451;
    font-weight: 700;
  }

  /* ---------- 统一等级徽章（昵称前） ---------- */
  .lv-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: var(--lv-color, #7c3aed);
    vertical-align: -2px;
  }
  .lv-badge .lv-hex-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .lv-badge .lv-badge-num {
    position: relative;
    font-size: 8px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
  }
  .lv-badge .lv-badge-img {
    width: 100%;
    height: 100%;
    -o-object-fit: contain;
       object-fit: contain;
  }
  /* 素材胶囊（无数字空胶囊 + 叠加数字）：容器随图等比，数字叠加在右侧空白区 */
  .lv-badge.lv-badge-pill {
    width: auto;
    height: auto;
  }
  .lv-badge.lv-badge-pill .lv-pill-img {
    display: block;
    width: auto;
    height: 16px;
  }
  .lv-badge.lv-badge-pill .lv-pill-num {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 40%;
    right: 8%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
  }
  .lv-badge-lg {
    width: 40px;
    height: 40px;
  }
  .lv-badge-lg .lv-badge-num {
    font-size: 15px;
  }
  .lv-badge-lg.lv-badge-pill .lv-pill-img {
    height: 32px;
  }
  .lv-badge-lg.lv-badge-pill .lv-pill-num {
    font-size: 17px;
  }
  /* 麦位头像角标内的徽章 */
  .seat-avatar-wrap .lv-badge {
    position: absolute;
    right: -6px;
    bottom: -4px;
    width: 20px;
    height: 20px;
  }
  .seat-avatar-wrap .lv-badge .lv-badge-num {
    font-size: 10px;
  }
  .seat-avatar-wrap .lv-badge.lv-badge-pill {
    width: auto;
    height: auto;
  }
  .seat-avatar-wrap .lv-badge.lv-badge-pill .lv-pill-img {
    height: 18px;
  }
  .seat-avatar-wrap .lv-badge.lv-badge-pill .lv-pill-num {
    font-size: 10px;
  }

  /* 未擦亮：图标变暗（不掉级，去饱和+降亮度，14.7；再消费即擦亮） */
  .lv-badge.lv-dim {
    filter: grayscale(0.75) brightness(0.55);
    opacity: 0.85;
  }

  /* ---------- 后台侧栏分组折叠态 ---------- */
  .admin-sidebar.is-collapsed .admin-nav-sub {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    justify-content: center;
  }

  /* ---------- 升级提示动画 ---------- */
  .lv-up-layer {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }
  .lv-up-card {
    position: relative;
    width: 220px;
    padding: 30px 20px 26px;
    border-radius: 20px;
    text-align: center;
    background: linear-gradient(160deg, rgba(60, 38, 110, 0.96), rgba(24, 17, 48, 0.96));
    border: 1px solid rgba(167, 139, 250, 0.5);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), 0 0 40px rgba(139, 92, 246, 0.35);
    animation: lvUpPop 0.45s cubic-bezier(0.2, 1.2, 0.3, 1) both;
  }
  .lv-up-rays {
    position: absolute;
    inset: -30px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(251, 191, 36, 0.28), transparent 62%);
    animation: lvUpGlow 1.6s ease-in-out infinite alternate;
  }
  .lv-up-badge {
    position: relative;
    display: flex;
    justify-content: center;
    margin-bottom: 14px;
  }
  .lv-up-title {
    position: relative;
    font-size: 20px;
    font-weight: 800;
    background: linear-gradient(90deg, #c4b5fd, #fbbf24);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .lv-up-level {
    position: relative;
    margin-top: 6px;
    font-size: 15px;
    font-weight: 700;
    color: #f3efff;
  }
  .lv-up-from {
    position: relative;
    margin-top: 4px;
    font-size: 12px;
    color: #9b95b8;
  }
  .lv-up-layer.lv-up-hide {
    opacity: 0;
    transition: opacity 0.45s ease;
  }
  @keyframes lvUpPop {
    from { transform: scale(0.6); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
  }
  @keyframes lvUpGlow {
    from { opacity: 0.5; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1.08); }
  }
  /* 关麦话筒图标：居中覆盖在头像正中间（开麦不渲染） */
  .seat-mic {
  pointer-events: none;
  position: absolute;
  inset: 0px;
  z-index: 5;
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
    color: #cfc9e6;
}
  .seat-mic::before {
    content: '';
    position: absolute;
    width: 58%;
    height: 58%;
    border-radius: 50%;
    background: rgba(10, 8, 22, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.12);
  }
  .seat-mic svg {
    position: relative;
    width: 32%;
    height: 32%;
  }
  .seat-mic.is-muted {
    color: #b3adc9;
  }
  .seat-mic.is-banned {
    color: #f87171;
  }
  .seat-mic.is-banned::before {
    background: rgba(45, 12, 16, 0.6);
  }

  /* 视频容器 */
  .seat-video,
  .host-video {
  position: absolute;
  inset: 0px;
  display: none;
  overflow: hidden;
  --tw-bg-opacity: 1;
  background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
  .seat-video {
    border-radius: 11px;
  }
  .seat-video video,
  .host-video video {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

  /* 右侧边栏 */
  .room-sidebar {
  display: flex;
  flex: 1 1 0%;
  flex-direction: column;
}
  .chat-area {
  margin-left: 1rem;
  margin-right: 1rem;
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
  display: flex;
  max-height: 160px;
  flex: 1 1 0%;
  flex-direction: column;
  gap: 0.5rem;
  overflow-y: auto;
  border-radius: 0.75rem;
  padding: 0.75rem;
  padding-left: 0.875rem;
  padding-right: 0.875rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
}
  .chat-msg {
  max-width: 100%;
  align-self: flex-start;
  font-size: 13px;
  line-height: 1.375;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.28);
    color: #d6d1ec;
    word-break: break-word;
}
  .msg-user {
    color: #c4b5fd;
    font-weight: 600;
  }
  .msg-mine .msg-user {
    color: #f5c451;
  }
  /* 金色昵称：金色渐变文字（能力 golden_nickname） */
  .msg-user.golden-name {
    background: linear-gradient(90deg, #fbbf24, #f59e0b, #fde68a);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 700;
  }
  /* 公屏行内身份徽章：贵族在前、等级次之、名字最后 */
  .msg-nb,
  .msg-lv {
    display: inline-flex;
    align-items: center;
    margin-right: 3px;
    vertical-align: -2px;
  }
  .msg-nb .nb-badge,
  .msg-lv .lv-badge {
    vertical-align: 0;
  }
  .msg-nb .nb-badge {
    width: 16px;
    height: 16px;
  }
  /* 进场消息行内坐骑缩略图 */
  .msg-mount {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    vertical-align: middle;
  }
  .msg-mount img {
    height: 34px;
    width: auto;
    -o-object-fit: contain;
       object-fit: contain;
  }
  .msg-at {
    color: #a78bfa;
    font-weight: 600;
  }
  /* 贵族消息：整条加背景条（颜色取贵族配置色 --nb-bg/--nb-line，直角无圆角），末尾图标拉开间距 */
  .chat-msg.has-noble {
    border-radius: 0;
    background: var(--nb-bg, rgba(30, 20, 52, 0.55));
    border: 1px solid var(--nb-line, rgba(167, 139, 250, 0.3));
  }
  .has-noble .msg-nb {
    margin-right: 0;
    margin-left: 5px;
  }
  /* 消息类型标签 */
  .tag-ic .icon {
    width: 10px;
    height: 10px;
  }

  /* 底部操作栏 */
  .bottom-bar {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.75rem;
    padding-bottom: 24px;
}
  .action-btn .icon {
    width: 15px;
    height: 15px;
  }
  .bar-icon {
  display: flex;
  height: 2.5rem;
  width: 2.5rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #d8d3ec;
}
  .bar-icon:active {
    transform: scale(0.92);
  }
  .bar-icon:hover {
    background: rgba(139, 92, 246, 0.35);
    color: #fff;
  }
  .bar-icon .icon {
    width: 20px;
    height: 20px;
  }
  /* 更多（三点）：暗灰圆 */
  .bar-more {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(255, 255, 255, 0.06);
    color: #b9b4d6;
  }
  .bar-more .icon {
    width: 22px;
    height: 22px;
  }
  /* 连麦：蓝色圆（电话） */
  .link-btn {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.42);
  }
  .link-btn .icon {
    width: 21px;
    height: 21px;
  }
  /* 房主开启连麦：金色 */
  .link-btn.host-link {
    background: linear-gradient(135deg, #f5c451 0%, #f59e0b 100%);
    box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);
  }
  /* 等待审核：暗 + 图标脉冲 */
  .link-btn.is-waiting {
    background: rgba(255, 255, 255, 0.12);
    box-shadow: none;
    opacity: 0.85;
  }
  .link-btn.is-waiting .icon {
    animation: linkPulse 1.2s ease-in-out infinite;
  }
  @keyframes linkPulse {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 1; }
  }
  /* 礼物：紫色圆 */
  .gift-btn {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 14px rgba(139, 92, 246, 0.42);
  }
  .gift-btn .icon {
    width: 21px;
    height: 21px;
  }
  /* 点赞：粉色圆（大拇指） */
  .like-btn {
    background: linear-gradient(135deg, #fb7185 0%, #e11d48 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 14px rgba(244, 63, 94, 0.42);
  }
  .like-btn .icon {
    width: 21px;
    height: 21px;
  }
  .like-btn.bump {
    animation: likeBump 0.35s ease;
  }
  @keyframes likeBump {
    0% { transform: scale(1); }
    40% { transform: scale(1.25); }
    100% { transform: scale(1); }
  }
  /* 点赞后向上飘的大拇指 */
  .like-float {
    position: fixed;
    width: 24px;
    height: 24px;
    color: #fb7185;
    pointer-events: none;
    z-index: 999;
    animation: likeFloatUp 0.9s ease-out forwards;
  }
  .like-float .icon {
    width: 24px;
    height: 24px;
  }
  @keyframes likeFloatUp {
    0% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-72px) scale(1.3); }
  }
  /* 下麦 / 结束直播：紧凑深色胶囊 */
  .down-btn {
    flex-shrink: 0;
    height: 40px;
    padding: 0 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    white-space: nowrap;
  }
  .down-btn:active {
    transform: scale(0.96);
  }
  /* 房主「开始直播」：金色醒目按钮（区别于观众连麦） */
  .host-start-btn {
    flex-shrink: 0;
    height: 40px;
    padding: 0 18px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #3a2a05;
    background: linear-gradient(135deg, #ffd76a 0%, #f59e0b 100%);
    border: none;
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(245, 158, 11, 0.5);
  }
  .host-start-btn:active {
    transform: scale(0.96);
  }
  .host-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55);
    animation: hostLivePulse 1.6s ease-out infinite;
  }
  @keyframes hostLivePulse {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); }
    70% { box-shadow: 0 0 0 7px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
  }
  /* 房主「结束直播」：红色警示 */
  .down-btn.host-end-btn {
    color: #fff;
    background: linear-gradient(135deg, #fb7185 0%, #e11d48 100%);
    border: none;
    box-shadow: 0 4px 14px rgba(225, 29, 72, 0.4);
  }
  /* 底部“说点什么”输入入口 */
  .chat-entry {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 6px 0 14px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #8a84a8;
    font-size: 14px;
  }
  .chat-entry:active {
    background: rgba(255, 255, 255, 0.12);
  }
  .chat-entry-smile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: #b9b4d6;
    flex-shrink: 0;
  }
  .chat-entry-smile .icon {
    width: 19px;
    height: 19px;
  }
  .chat-entry-ph {
    flex: 1;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .bottom-bar .btn-up {
    flex: 0 0 auto;
    padding: 0 18px;
  }
  /* 上麦后图标更多，收紧手机端尺寸 */
  .bottom-bar.is-live {
    gap: 6px;
  }
  .bottom-bar.is-live .bar-icon {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
  }
  .bottom-bar.is-live .down-btn {
    flex-shrink: 0;
    height: 38px;
  }
  /* 手机上麦态：隐藏独立礼物（收入“更多”），给输入框留空间 */
  .bottom-bar.is-live .live-gift {
    display: none;
  }
  @media (min-width: 769px) {
    .bottom-bar.is-live {
      gap: 10px;
    }
    .bottom-bar.is-live .bar-icon {
      width: 44px;
      height: 44px;
    }
    .bottom-bar.is-live .down-btn {
      height: 42px;
    }
    .bottom-bar.is-live .live-gift {
      display: flex;
    }
  }

  /* Toast */
  .\!toast {
  pointer-events: none;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1000;
  white-space: nowrap;
  border-radius: 0.5rem;
  background-color: rgb(30 41 59 / 0.9);
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  opacity: 0;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}
  .toast {
  pointer-events: none;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 1000;
  white-space: nowrap;
  border-radius: 0.5rem;
  background-color: rgb(30 41 59 / 0.9);
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  opacity: 0;
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}
  .\!toast {
    transform: translate(-50%, -50%) !important;
  }
  .toast {
    transform: translate(-50%, -50%);
  }
  .\!toast.show {
  opacity: 1;
}
  .toast.show {
  opacity: 1;
}
  .toast.\!show {
  opacity: 1;
}

  /* 通用确认弹窗 */
  .confirm-mask {
  position: fixed;
  inset: 0px;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 2rem;
  padding-right: 2rem;
    background: rgba(8, 5, 20, 0.55);
    opacity: 0;
    transition: opacity 0.18s ease;
}
  .confirm-mask.show {
    opacity: 1;
  }
  .confirm-mask.\!show {
    opacity: 1 !important;
  }
  .confirm-mask.leaving {
    opacity: 0;
  }
  .confirm-box {
    width: 100%;
    max-width: 280px;
    background: linear-gradient(180deg, #2c2450, #221b40);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 22px 20px 0;
    text-align: center;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
    transform: scale(0.94);
    transition: transform 0.18s ease;
  }
  .confirm-mask.show .confirm-box {
    transform: scale(1);
  }
  .confirm-mask.\!show .confirm-box {
    transform: scale(1) !important;
  }
  .confirm-icon {
    width: 46px;
    height: 46px;
    margin: 0 auto 12px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f5a623;
    background: rgba(245, 166, 35, 0.14);
  }
  .confirm-icon svg {
    width: 26px;
    height: 26px;
  }
  .confirm-title {
    font-size: 15px;
    font-weight: 600;
    color: #efeafb;
    line-height: 1.5;
    margin-bottom: 20px;
  }
  .confirm-actions {
    display: flex;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    margin: 0 -20px;
  }
  .confirm-actions button {
    flex: 1;
    height: 48px;
    font-size: 15px;
    background: transparent;
  }
  .confirm-cancel {
    color: #b6b0cc;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
  }
  .confirm-ok {
    color: #f5b800;
    font-weight: 600;
  }
  .confirm-actions button:active {
    background: rgba(255, 255, 255, 0.05);
  }

  /* ============ 礼物面板（手机优先，桌面居中） ============ */
  .gift-panel-wrap {
    position: fixed;
    inset: 0;
    z-index: 220;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
  }
  .gift-panel-wrap.open {
    pointer-events: auto;
  }
  .gift-mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    transition: opacity 0.22s ease;
  }
  .gift-panel-wrap.open .gift-mask {
    opacity: 1;
  }
  .gift-sheet {
    position: relative;
    width: 100%;
    max-width: 480px;
    max-height: 78vh;
    display: flex;
    flex-direction: column;
    padding: 16px 14px calc(14px + env(safe-area-inset-bottom, 0px));
    border-radius: 22px 22px 0 0;
    background: linear-gradient(180deg, #2b2158 0%, #1c1540 55%, #161033 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 -12px 50px rgba(0, 0, 0, 0.65);
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.22, 0.9, 0.32, 1);
  }
  .gift-panel-wrap.open .gift-sheet {
    transform: translateY(0);
  }

  /* 充值面板 */
  .recharge-panel-wrap {
    position: fixed;
    inset: 0;
    z-index: 240;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
  }
  .recharge-panel-wrap.open { pointer-events: auto; }
  .recharge-mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity 0.22s ease;
  }
  .recharge-panel-wrap.open .recharge-mask { opacity: 1; }
  .recharge-sheet {
    position: relative;
    width: 100%;
    max-width: 480px;
    padding: 18px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    border-radius: 22px 22px 0 0;
    background: linear-gradient(180deg, #2b2158 0%, #1c1540 60%, #161033 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 -12px 50px rgba(0, 0, 0, 0.65);
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.22, 0.9, 0.32, 1);
  }
  .recharge-panel-wrap.open .recharge-sheet { transform: translateY(0); }
  .recharge-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 17px;
    font-weight: 700;
    color: #fff;
  }
  .recharge-close {
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 14px;
  }
  .recharge-balance { margin-top: 12px; font-size: 13px; color: rgba(255, 255, 255, 0.7); }
  .recharge-balance b { color: #ffd76a; font-size: 16px; margin: 0 2px; }
  .recharge-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 16px 0 14px;
  }
  .recharge-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 14px 6px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
  }
  .recharge-item.active { border-color: #a855f7; background: rgba(168, 85, 247, 0.22); }
  .rc-tag {
    position: absolute;
    top: -8px;
    right: 6px;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 8px;
    background: linear-gradient(90deg, #ff8a3d, #ff5c8a);
    color: #fff;
  }
  .rc-coin { font-size: 14px; font-weight: 700; }
  .rc-price { font-size: 12px; color: rgba(255, 255, 255, 0.65); }
  .recharge-confirm {
    width: 100%;
    height: 46px;
    border: 0;
    border-radius: 23px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(90deg, #a855f7, #7c3aed);
    box-shadow: 0 8px 24px rgba(124, 58, 237, 0.4);
  }
  .recharge-tip { margin-top: 10px; text-align: center; font-size: 11px; color: rgba(255, 255, 255, 0.45); }

  /* 顶栏：送礼对象 + 金币余额 */
  .gift-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  .gift-to {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #cfc9e8;
    cursor: pointer;
    padding: 4px 8px 4px 0;
    border-radius: 14px;
    transition: background 0.18s ease;
  }
  .gift-to:active { background: rgba(255, 255, 255, 0.08); }
  .gift-to-label {
    color: #9d97b8;
  }
  .gift-to-name {
    color: #fff;
    font-weight: 600;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .gift-to-arrow {
    color: #9d97b8;
    font-size: 16px;
    line-height: 1;
    transition: transform 0.18s ease;
  }
  /* 送礼对象选择浮层 */
  .gift-to-picker {
    position: absolute;
    top: 52px;
    left: 14px;
    z-index: 30;
    min-width: 180px;
    max-width: 240px;
    max-height: 240px;
    overflow-y: auto;
    padding: 6px;
    border-radius: 14px;
    background: rgba(34, 27, 64, 0.98);
    border: 1px solid rgba(167, 139, 250, 0.35);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55);
    opacity: 0;
    transform: translateY(-8px) scale(0.96);
    transform-origin: top left;
    transition: opacity 0.16s ease, transform 0.16s ease;
  }
  .gift-to-picker.open {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  .gift-to-opt {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 7px 8px;
    border-radius: 10px;
    color: #e6e2f5;
    font-size: 13px;
    text-align: left;
  }
  .gift-to-opt:active { background: rgba(255, 255, 255, 0.08); }
  .gift-to-opt.active { color: #c4b5fd; }
  .gto-avatar {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .gto-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .gto-check {
    color: #a78bfa;
    font-weight: 700;
  }
  .gift-balance {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
  }
  .coin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffe08a, #f5a623);
    color: #5a3d00;
    font-size: 10px;
    font-weight: 800;
    box-shadow: 0 1px 3px rgba(245, 158, 11, 0.5);
  }
  .coin-sm {
    width: 12px;
    height: 12px;
    font-size: 8px;
  }
  .bal-num {
    font-weight: 700;
    color: #ffd76a;
  }
  .gift-recharge-top {
    margin-left: 4px;
    padding: 3px 11px;
    border-radius: 12px;
    font-size: 12px;
    color: #3a2600;
    font-weight: 700;
    background: linear-gradient(135deg, #ffe08a, #f5b421);
  }

  /* 分类 Tab */
  .gift-tabs {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    margin-bottom: 10px;
    padding-bottom: 2px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    scrollbar-width: none;
  }
  .gift-tabs::-webkit-scrollbar {
    display: none;
  }
  .gift-tab {
    position: relative;
    flex-shrink: 0;
    padding: 6px 2px;
    font-size: 14px;
    color: #9d97b8;
    white-space: nowrap;
  }
  .gift-tab.active {
    color: #fff;
    font-weight: 600;
  }
  .gift-tab.active::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -3px;
    transform: translateX(-50%);
    width: 18px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, #8b5cf6, #c084fc);
  }

  /* 礼物网格 */
  .gift-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    overflow-y: auto;
    min-height: 0;
    flex: 1;
    align-content: start;
    padding: 2px 2px 8px;
  }
  .gift-empty {
    grid-column: 1 / -1;
    text-align: center;
    color: #6f6a8a;
    padding: 40px 0;
    font-size: 13px;
  }
  .gift-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 10px 4px 8px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid transparent;
    transition: transform 0.12s, background 0.15s, border-color 0.15s;
  }
  .gift-item:active {
    transform: scale(0.94);
  }
  .gift-item.selected {
    background: rgba(139, 92, 246, 0.18);
    border-color: #a78bfa;
  }
  .gift-emoji {
    font-size: 34px;
    line-height: 1.15;
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.3));
  }
  .gift-emoji .gift-anim {
    width: 44px;
    height: 44px;
    -o-object-fit: contain;
       object-fit: contain;
    display: block;
  }
  .gift-name {
    font-size: 11px;
    color: #cfc9e8;
  }
  .gift-price {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: #ffd76a;
    font-weight: 600;
  }
  .gift-price .bag-count {
    color: #9d97b8;
  }
  /* 贵族专属礼物：未达档位置灰锁定 */
  .gift-item.locked {
    opacity: 0.55;
  }
  .gift-item.locked .gift-emoji {
    filter: grayscale(0.6) brightness(0.8);
  }
  .gift-lock {
    position: absolute;
    top: 4px;
    right: 4px;
    display: inline-flex;
    align-items: center;
    gap: 1px;
    padding: 1px 4px;
    border-radius: 8px;
    font-size: 9px;
    font-weight: 700;
    color: #fde68a;
    background: rgba(15, 12, 30, 0.72);
  }

  /* 底部：充值 / 数量 / 赠送 */
  .gift-bottom {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
  }
  .gift-recharge {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    font-size: 13px;
    color: #cfc9e8;
  }
  .recharge-ic {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #ffd76a;
    font-size: 16px;
  }
  .gift-qty {
    display: flex;
    gap: 6px;
    flex: 1;
  }
  .qty-btn {
    flex: 1;
    height: 30px;
    border-radius: 15px;
    font-size: 13px;
    color: #b6b0d2;
    background: rgba(255, 255, 255, 0.07);
  }
  .qty-btn.active {
    color: #fff;
    font-weight: 700;
    background: linear-gradient(135deg, #8b5cf6, #a855f7);
    box-shadow: 0 3px 10px rgba(139, 92, 246, 0.4);
  }
  .gift-send {
    flex-shrink: 0;
    height: 40px;
    padding: 0 30px;
    border-radius: 20px;
    font-size: 15px;
    font-weight: 700;
    color: #3a2600;
    background: linear-gradient(135deg, #ffe08a, #f5b421);
    box-shadow: 0 5px 16px rgba(245, 158, 11, 0.45);
  }
  .gift-send:active {
    transform: scale(0.96);
  }

  /* 连击气泡（右侧，浮于面板与特效之上） */
  .gift-combo {
    position: fixed;
    right: 18px;
    top: 42%;
    z-index: 330;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px 9px 10px;
    border-radius: 40px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.94), rgba(219, 100, 20, 0.94));
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4);
    pointer-events: none;
    animation: comboIn 0.3s cubic-bezier(0.2, 0.8, 0.3, 1.2) both;
  }
  @keyframes comboIn {
    from { opacity: 0; transform: translateX(50px) scale(0.6); }
    to { opacity: 1; transform: translateX(0) scale(1); }
  }
  .combo-emoji {
    font-size: 32px;
  }
  .combo-num {
    font-size: 22px;
    font-weight: 800;
    font-style: italic;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
  }

  /* 普通礼物飘屏 */
  .gift-float {
    position: fixed;
    top: 40%;
    z-index: 260;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 30px;
    background: rgba(30, 20, 60, 0.72);
    border: 1px solid rgba(255, 215, 106, 0.35);
    backdrop-filter: blur(4px);
    pointer-events: none;
    animation: floatUp 2.2s ease forwards;
  }
  @keyframes floatUp {
    0% { opacity: 0; transform: translateY(30px) scale(0.7); }
    15% { opacity: 1; transform: translateY(0) scale(1); }
    72% { opacity: 1; transform: translateY(-20px) scale(1); }
    100% { opacity: 0; transform: translateY(-72px) scale(1); }
  }
  .float-emoji {
    font-size: 30px;
  }
  .float-text {
    font-size: 14px;
    color: #ffe08a;
    font-weight: 600;
  }

  /* 豪华礼物全屏特效 */
  .gift-fx {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 42%, rgba(60, 30, 110, 0.85), rgba(8, 5, 20, 0.94));
    pointer-events: none;
    overflow: hidden;
    animation: fxFadeIn 0.35s ease forwards;
  }
  .fx-rays {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 760px;
    height: 760px;
    margin: -380px 0 0 -380px;
    border-radius: 50%;
    opacity: 0.8;
    background: conic-gradient(
      from 0deg,
      rgba(255, 224, 138, 0.2) 0deg, transparent 14deg,
      rgba(255, 224, 138, 0.2) 28deg, transparent 42deg,
      rgba(255, 224, 138, 0.2) 56deg, transparent 70deg,
      rgba(255, 224, 138, 0.2) 84deg, transparent 98deg,
      rgba(255, 224, 138, 0.2) 112deg, transparent 126deg,
      rgba(255, 224, 138, 0.2) 140deg, transparent 154deg,
      rgba(255, 224, 138, 0.2) 168deg, transparent 182deg,
      rgba(255, 224, 138, 0.2) 196deg, transparent 210deg,
      rgba(255, 224, 138, 0.2) 224deg, transparent 238deg,
      rgba(255, 224, 138, 0.2) 252deg, transparent 266deg,
      rgba(255, 224, 138, 0.2) 280deg, transparent 294deg,
      rgba(255, 224, 138, 0.2) 308deg, transparent 322deg,
      rgba(255, 224, 138, 0.2) 336deg, transparent 350deg
    );
    -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 62%);
    mask-image: radial-gradient(circle, #000 0%, transparent 62%);
    animation: fxSpin 9s linear infinite;
  }
  .fx-particles {
    position: absolute;
    top: 50%;
    left: 50%;
  }
  .fx-particle {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 24px;
  }
  .fx-emoji {
    position: relative;
    z-index: 2;
    font-size: 130px;
    line-height: 1;
    filter: drop-shadow(0 0 40px rgba(255, 215, 106, 0.55)) drop-shadow(0 10px 30px rgba(0, 0, 0, 0.5));
    animation: fxPop 0.9s cubic-bezier(0.2, 0.8, 0.3, 1.2) both, fxFloat 1.8s ease-in-out 1s infinite;
  }
  .fx-caption {
    position: relative;
    z-index: 2;
    margin-top: 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    animation: fxRise 0.6s ease 0.5s both;
  }
  .fx-from {
    color: #ffd76a;
  }
  .fx-name {
    font-size: 30px;
    background: linear-gradient(90deg, #ffe08a, #ffb43a);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .fx-to {
    position: relative;
    z-index: 2;
    margin-top: 8px;
    font-size: 15px;
    color: #d8d3ec;
    animation: fxRise 0.6s ease 0.64s both;
  }
  @keyframes fxFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  @keyframes fxSpin {
    to { transform: rotate(360deg); }
  }
  @keyframes fxPop {
    0% { opacity: 0; transform: scale(0) rotate(-24deg); }
    60% { opacity: 1; transform: scale(1.2) rotate(10deg); }
    100% { opacity: 1; transform: scale(1) rotate(0deg); }
  }
  @keyframes fxFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-16px); }
  }
  @keyframes fxRise {
    from { opacity: 0; transform: translateY(34px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* 审核弹窗 */
  .review-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 150;
  display: none;
  width: 85%;
  max-width: 340px;
  border-radius: 1rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  --tw-shadow: 0 8px 32px rgba(0,0,0,0.1);
  --tw-shadow-colored: 0 8px 32px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    color: #ece9f5;
    background: linear-gradient(180deg, #241b4d 0%, #1a1438 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transform: translate(-50%, -50%);
}
  .review-modal.open {
  display: block;
}
  .review-header {
  margin-bottom: 1rem;
  text-align: center;
}
  .review-header h3 {
  margin-bottom: 0.25rem;
  font-size: 1rem;
  line-height: 1.5rem;
}
  .review-header p {
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(157 151 184 / var(--tw-text-opacity, 1));
}
  .review-user {
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: 0.75rem;
  padding: 0.75rem;
    background: rgba(255, 255, 255, 0.06);
}
  .review-avatar {
  display: flex;
  height: 3rem;
  width: 3rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
    background: rgba(139, 92, 246, 0.25);
    color: #d8b4fe;
}
  .review-name {
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
}
  .review-desc {
  margin-top: 0.125rem;
  font-size: 0.75rem;
  line-height: 1rem;
  --tw-text-opacity: 1;
  color: rgb(157 151 184 / var(--tw-text-opacity, 1));
}
  .review-btns {
  display: flex;
  gap: 0.625rem;
}
  .review-btn {
  flex: 1 1 0%;
  border-radius: 9999px;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
}
  .review-btn.reject {
  --tw-text-opacity: 1;
  color: rgb(201 196 224 / var(--tw-text-opacity, 1));
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.14);
}
  .review-btn.approve {
  --tw-bg-opacity: 1;
  background-color: rgb(124 58 237 / var(--tw-bg-opacity, 1));
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}

  /* ============================================================
     大厅 / 房间列表（深色直播风格）
     ============================================================ */
  .lobby {
    position: fixed;
    inset: 0;
    z-index: 10;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    color: #ece9f5;
    background:
      radial-gradient(120% 55% at 50% -12%, rgba(124, 58, 237, 0.4), transparent 62%),
      linear-gradient(180deg, #1a1238 0%, #130e28 40%, #0c0918 100%);
  }

  /* 顶部吸顶区 */
  .lobby-sticky {
    position: sticky;
    top: 0;
    z-index: 30;
    background: linear-gradient(180deg, rgba(26, 18, 56, 0.98), rgba(21, 15, 44, 0.9));
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  .lobby-bar {
    max-width: 1080px;
    margin: 0 auto;
  }
  .lobby-top {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px 6px;
  }
  .lobby-search {
    flex: 1;
    min-width: 0;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(139, 92, 246, 0.55);
  }
  .lobby-search:active {
    background: rgba(255, 255, 255, 0.1);
  }
  .search-text {
    font-size: 14px;
    color: #9d97b8;
  }
  .search-icon {
    display: flex;
    color: #c4b5fd;
  }
  .search-icon .icon {
    width: 20px;
    height: 20px;
  }
  .lobby-top-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
  }
  .top-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #f2f0f8;
  }
  .top-icon:active {
    background: rgba(255, 255, 255, 0.12);
  }
  .top-icon .icon {
    width: 26px;
    height: 26px;
  }
  .top-icon-add {
    color: #c4b5fd;
  }

  /* 频道 Tab */
  .channel-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 10px 10px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .channel-tabs::-webkit-scrollbar {
    display: none;
  }
  .channel-tab {
    position: relative;
    flex-shrink: 0;
    height: 36px;
    padding: 0 12px;
    font-size: 15px;
    font-weight: 500;
    color: rgba(236, 233, 245, 0.62);
    background: transparent;
  }
  .channel-tab.active {
    color: #fff;
    font-weight: 700;
  }
  .channel-tab.active::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 2px;
    transform: translateX(-50%);
    width: 20px;
    height: 3px;
    border-radius: 2px;
    background: #8b5cf6;
  }
  .channel-tab.gold {
    color: #f5c451;
  }
  .channel-tab.gold.active {
    color: #ffd76a;
  }
  .channel-tab.gold.active::after {
    background: #f5c451;
  }
  .channel-menu {
    flex-shrink: 0;
    margin-left: 4px;
    display: flex;
    color: #d8d3ec;
  }
  .channel-menu .icon {
    width: 22px;
    height: 22px;
  }

  /* 两列卡片网格 */
  .lobby-content {
    max-width: 1080px;
    margin: 0 auto;
    padding: 12px 12px 92px;
  }
  .lobby-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px 10px;
  }
  .live-card {
    border-radius: 12px;
    transition: transform 0.15s;
  }
  .live-card:active {
    transform: scale(0.97);
  }
  .live-cover {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 12px;
    overflow: hidden;
    background: #201a3a;
  }
  .live-cover img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .cover-bottom {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0.22) 0%,
      transparent 32%,
      transparent 55%,
      rgba(0, 0, 0, 0.62) 100%
    );
  }
  /* LIVE 直播状态（左上角） */
  .live-status {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    line-height: 1;
    padding: 3px 7px;
    border-radius: 6px;
    backdrop-filter: blur(4px);
  }
  .live-status.is-live {
    color: #fff;
    background: linear-gradient(135deg, #ff4d4f, #e02b2e);
    box-shadow: 0 2px 8px rgba(224, 43, 46, 0.5);
  }
  .live-status.is-off {
    color: rgba(255, 255, 255, 0.85);
    background: rgba(20, 18, 32, 0.6);
  }
  .live-dot {
    position: relative;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
  }
  .live-dot::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #fff;
    animation: livePing 1.2s ease-out infinite;
  }
  @keyframes livePing {
    0% {
      transform: scale(1);
      opacity: 0.8;
    }
    100% {
      transform: scale(2.8);
      opacity: 0;
    }
  }

  /* 封面角标（右上角） */
  .cover-tag {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    padding: 3px 7px;
    border-radius: 6px;
    color: #fff;
    background: rgba(15, 12, 30, 0.55);
    backdrop-filter: blur(4px);
    max-width: 46%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .cover-tag.tag-gold {
    color: #3a2a00;
    font-weight: 800;
    background: linear-gradient(135deg, #ffd76a, #f5b421);
  }

  /* 未开播：封面压暗、取消火苗 */
  .live-cover.is-off img {
    filter: brightness(0.5) saturate(0.7);
  }

  /* 后台表格：直播中状态呼吸点 */
  .admin-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #e02b2e;
    animation: adminLivePulse 1.6s ease-in-out infinite;
  }
  @keyframes adminLivePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(224, 43, 46, 0.5); }
    50% { box-shadow: 0 0 0 4px rgba(224, 43, 46, 0.15); }
  }

  .live-host {
    position: absolute;
    left: 8px;
    bottom: 8px;
    max-width: 58%;
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75);
  }
  .live-hot {
    position: absolute;
    right: 8px;
    bottom: 8px;
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 11px;
    font-weight: 600;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  }
  .live-hot .icon {
    width: 14px;
    height: 14px;
    color: #ff7a45;
    fill: rgba(255, 122, 69, 0.9);
  }
  .live-info {
    padding: 8px 2px 0;
  }
  .live-title {
    font-size: 14px;
    font-weight: 500;
    color: #f3f1fa;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .live-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 3px;
  }
  .live-cat {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    color: #9d97b8;
  }
  .live-cat .icon {
    width: 14px;
    height: 14px;
    margin-left: 1px;
  }
  .live-more {
    display: flex;
    padding: 2px;
    color: #6f6a8a;
  }
  .live-more .icon {
    width: 16px;
    height: 16px;
  }

  /* 底部导航 */
  .bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    background: rgba(13, 9, 28, 0.94);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .bottom-nav-inner {
    max-width: 1080px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    height: 58px;
  }
  .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 0;
    color: #6f6a8a;
    background: transparent;
  }
  .nav-ic {
    display: flex;
  }
  .nav-ic .icon {
    width: 23px;
    height: 23px;
  }
  .nav-label {
    font-size: 11px;
  }
  .nav-item.active {
    color: #a78bfa;
  }

  /* ============================================================
     通用底部操作面板（ActionSheet）
     ============================================================ */
  .action-sheet {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }
  .sheet-mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  .action-sheet.open .sheet-mask {
    opacity: 1;
  }
  .sheet-panel {
    position: relative;
    width: 100%;
    max-width: 480px;
    background: linear-gradient(180deg, #241b4d 0%, #1a1438 100%);
    border-radius: 20px 20px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px 12px calc(14px + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
    transition: transform 0.22s ease;
  }
  .action-sheet.open .sheet-panel {
    transform: translateY(0);
  }
  .sheet-title {
    text-align: center;
    font-size: 13px;
    color: #9d97b8;
    padding: 10px 0 8px;
  }
  .sheet-options {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 14px;
    overflow: hidden;
  }
  .sheet-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: transparent;
    color: #ece9f5;
    font-size: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  .sheet-item:last-child {
    border-bottom: none;
  }
  .sheet-item:active {
    background: rgba(255, 255, 255, 0.08);
  }
  .sheet-item.danger {
    color: #f87171;
  }
  .sheet-ic {
    display: flex;
    color: #c4b5fd;
  }
  .sheet-item.danger .sheet-ic {
    color: #f87171;
  }
  .sheet-ic .icon {
    width: 19px;
    height: 19px;
  }
  .sheet-cancel {
    width: 100%;
    margin-top: 10px;
    padding: 14px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.1);
    color: #ece9f5;
    font-size: 15px;
    font-weight: 600;
  }
  .sheet-cancel:active {
    background: rgba(255, 255, 255, 0.16);
  }

  /* ============================================================
     公屏输入面板（表情 / 发送）
     ============================================================ */
  .chat-compose {
    position: fixed;
    inset: 0;
    z-index: 220;
    display: none;
    flex-direction: column;
    justify-content: flex-end;
  }
  .chat-compose.open {
    display: flex;
  }
  .compose-mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  .chat-compose.open .compose-mask {
    opacity: 1;
  }
  .compose-panel {
    position: relative;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    background: linear-gradient(180deg, #241b4d 0%, #1a1438 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px 20px 0 0;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
    transition: transform 0.22s ease;
  }
  .chat-compose.open .compose-panel {
    transform: translateY(0);
  }
  .compose-emoji {
    display: none;
    max-height: 200px;
    overflow-y: auto;
    padding: 6px 4px;
  }
  .compose-emoji.open {
    display: block;
  }
  .emoji-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
  }
  .emoji-item {
    font-size: 22px;
    line-height: 1;
    padding: 8px 0;
    border-radius: 8px;
    text-align: center;
  }
  .emoji-item:active {
    background: rgba(255, 255, 255, 0.12);
  }
  .compose-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 6px;
  }
  .compose-emoji-btn {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #c4b5fd;
  }
  .compose-emoji-btn:active {
    background: rgba(255, 255, 255, 0.12);
  }
  .compose-emoji-btn .icon {
    width: 22px;
    height: 22px;
  }
  .compose-input {
    flex: 1;
    min-width: 0;
    height: 40px;
    border-radius: 20px;
    padding: 0 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #f3f1fa;
    font-size: 14px;
  }
  .compose-input::-moz-placeholder {
    color: #6f6a8a;
  }
  .compose-input::placeholder {
    color: #6f6a8a;
  }
  .compose-input:focus {
    outline: none;
    border-color: rgba(167, 139, 250, 0.6);
  }
  .compose-send {
    height: 40px;
    flex-shrink: 0;
    padding: 0 18px;
    border-radius: 20px;
    background: linear-gradient(135deg, #8b5cf6, #7c3aed);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
  }
  .compose-send:active {
    opacity: 0.9;
  }

  /* 底部麦克风 / 摄像头开关状态 */
  .bar-icon.toggle-ic.is-on {
    color: #d8d3ec;
  }
  .bar-icon.toggle-ic.is-off {
    color: #f87171;
    background: rgba(248, 113, 113, 0.12);
    border-color: rgba(248, 113, 113, 0.28);
  }

  /* ============================================================
     排麦队列面板（房主侧）
     ============================================================ */
  .queue-panel-wrap {
    position: fixed;
    inset: 0;
    z-index: 215;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
  }
  .queue-panel-wrap.open {
    pointer-events: auto;
  }
  .queue-mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    transition: opacity 0.22s ease;
  }
  .queue-panel-wrap.open .queue-mask {
    opacity: 1;
  }
  .queue-sheet {
    position: relative;
    width: 100%;
    max-width: 480px;
    max-height: 72vh;
    display: flex;
    flex-direction: column;
    padding: 18px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    border-radius: 22px 22px 0 0;
    background: linear-gradient(180deg, #2b2158 0%, #1c1540 55%, #161033 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 -12px 50px rgba(0, 0, 0, 0.65);
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.22, 0.9, 0.32, 1);
  }
  .queue-panel-wrap.open .queue-sheet {
    transform: translateY(0);
  }
  .queue-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
  }
  .queue-title {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
  }
  .queue-count {
    font-size: 13px;
    color: #a78bfa;
    font-weight: 600;
    margin-left: 2px;
  }
  .queue-close {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b9b4d6;
    background: rgba(255, 255, 255, 0.07);
  }
  .queue-close .icon {
    width: 16px;
    height: 16px;
  }
  .queue-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 2px 2px 10px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
  }
  .queue-list::-webkit-scrollbar {
    width: 3px;
  }
  .queue-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 3px;
  }
  .queue-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.06);
    animation: qItemIn 0.34s cubic-bezier(0.2, 0.8, 0.3, 1) both;
  }
  @keyframes qItemIn {
    from { opacity: 0; transform: translateX(24px); }
    to { opacity: 1; transform: translateX(0); }
  }
  .queue-item.leaving.to-right {
    animation: qItemOutR 0.22s ease forwards;
  }
  .queue-item.leaving.to-left {
    animation: qItemOutL 0.22s ease forwards;
  }
  @keyframes qItemOutR {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(48px) scale(0.92); }
  }
  @keyframes qItemOutL {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(-48px) scale(0.92); }
  }
  .q-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 700;
    border: 1.5px solid;
  }
  .q-info {
    flex: 1;
    min-width: 0;
  }
  .q-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .q-name {
    font-size: 14px;
    color: #fff;
    font-weight: 600;
  }
  .q-wait {
    font-size: 12px;
    color: #9d97b8;
    margin-top: 3px;
  }
  .q-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
  }
  .q-btn {
    height: 34px;
    padding: 0 12px;
    border-radius: 17px;
    font-size: 13px;
    font-weight: 600;
  }
  .q-reject {
    color: #cfc9e8;
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.14);
  }
  .q-approve {
    color: #fff;
    background: linear-gradient(135deg, #8b5cf6, #a855f7);
    box-shadow: 0 3px 10px rgba(139, 92, 246, 0.4);
  }
  .q-btn:active {
    transform: scale(0.94);
  }
  .queue-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 0;
  }
  .queue-empty-ic {
    font-size: 44px;
    margin-bottom: 10px;
    opacity: 0.8;
  }
  .queue-empty-t {
    font-size: 15px;
    color: #b6b0d2;
    margin-bottom: 4px;
  }
  .queue-empty-d {
    font-size: 12px;
    color: #6f6a8a;
  }
  .queue-foot {
    display: flex;
    gap: 12px;
    margin-top: 10px;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
  }
  .queue-btn {
    flex: 1;
    height: 44px;
    border-radius: 22px;
    font-size: 15px;
    font-weight: 700;
  }
  .q-clear {
    color: #cfc9e8;
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.14);
  }
  .q-all {
    color: #3a2600;
    background: linear-gradient(135deg, #ffe08a, #f5b421);
    box-shadow: 0 5px 16px rgba(245, 158, 11, 0.4);
  }
  .queue-btn:active {
    transform: scale(0.97);
  }

  /* 排队提醒横幅（房主，麦位区顶部） */
  .queue-banner {
    display: none;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding: 10px 14px;
    border-radius: 14px;
    cursor: pointer;
    background: linear-gradient(90deg, rgba(139, 92, 246, 0.28), rgba(168, 85, 247, 0.16));
    border: 1px solid rgba(167, 139, 250, 0.35);
  }
  .queue-banner.show {
    display: flex;
    animation: bannerIn 0.3s ease;
  }
  .queue-banner.\!show {
    display: flex !important;
    animation: bannerIn 0.3s ease !important;
  }
  @keyframes bannerIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .queue-banner-ic {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #8b5cf6, #a855f7);
    color: #fff;
  }
  .queue-banner-ic .icon {
    width: 16px;
    height: 16px;
  }
  .queue-banner-text {
    flex: 1;
    font-size: 13px;
    color: #ece9f5;
  }
  .queue-banner-num {
    color: #ffd76a;
    font-weight: 700;
  }
  .queue-banner-go {
    font-size: 13px;
    color: #fff;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, #8b5cf6, #a855f7);
  }

  /* ============================================================
     在线成员 / 贡献榜面板
     ============================================================ */
  .members-panel-wrap {
    position: fixed;
    inset: 0;
    z-index: 215;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
  }
  .members-panel-wrap.open {
    pointer-events: auto;
  }
  .members-mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    transition: opacity 0.22s ease;
  }
  .members-panel-wrap.open .members-mask {
    opacity: 1;
  }
  .members-sheet {
    position: relative;
    width: 100%;
    max-width: 480px;
    max-height: 78vh;
    display: flex;
    flex-direction: column;
    padding: 18px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    border-radius: 22px 22px 0 0;
    background: linear-gradient(180deg, #2b2158 0%, #1c1540 55%, #161033 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 -12px 50px rgba(0, 0, 0, 0.65);
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.22, 0.9, 0.32, 1);
  }
  .members-panel-wrap.open .members-sheet {
    transform: translateY(0);
  }
  .members-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
  }
  .members-title {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
  }
  .members-count {
    font-size: 13px;
    color: #a78bfa;
    font-weight: 600;
    margin-left: 2px;
  }
  .members-close {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b9b4d6;
    background: rgba(255, 255, 255, 0.07);
  }
  .members-close .icon {
    width: 16px;
    height: 16px;
  }
  .members-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
  }
  .members-tab {
    flex: 1;
    height: 36px;
    border-radius: 18px;
    font-size: 14px;
    font-weight: 600;
    color: #b6b0d2;
    background: rgba(255, 255, 255, 0.06);
  }
  .members-tab.on {
    color: #fff;
    background: linear-gradient(135deg, #8b5cf6, #a855f7);
    box-shadow: 0 3px 10px rgba(139, 92, 246, 0.35);
  }
  .members-tab.\!on {
    color: #fff !important;
    background: linear-gradient(135deg, #8b5cf6, #a855f7) !important;
    box-shadow: 0 3px 10px rgba(139, 92, 246, 0.35) !important;
  }
  .members-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
  }
  .members-body::-webkit-scrollbar {
    width: 3px;
  }
  .members-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 3px;
  }

  /* 成员/榜单通用头像、标签、金币 */
  .m-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1.5px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 700;
    flex-shrink: 0;
  }
  .m-role {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 8px;
  }
  .role-host {
    color: #ffd76a;
    background: rgba(255, 215, 106, 0.16);
  }
  .role-admin {
    color: #fb7185;
    background: rgba(251, 113, 133, 0.16);
  }
  .role-anchor {
    color: #a78bfa;
    background: rgba(167, 139, 250, 0.18);
  }
  .coin-mini {
    display: inline-flex;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ffd76a, #f59e0b);
    color: #3a2600;
    font-size: 9px;
    font-weight: 800;
    margin-right: 3px;
    vertical-align: -1px;
  }

  /* 在线成员 */
  .members-stat {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #9d97b8;
    padding: 9px 12px;
    margin: 4px 0 8px;
    background: rgba(139, 92, 246, 0.1);
    border-radius: 12px;
  }
  .members-stat b {
    color: #a78bfa;
  }
  .members-stat-ic {
    color: #a78bfa;
    display: inline-flex;
  }
  .members-stat-ic .icon {
    width: 16px;
    height: 16px;
  }
  .member-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 8px;
    border-radius: 14px;
    cursor: pointer;
  }
  .member-row:active {
    background: rgba(255, 255, 255, 0.05);
  }
  .m-info {
    flex: 1;
    min-width: 0;
  }
  .m-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .m-name {
    font-size: 14px;
    color: #fff;
    font-weight: 600;
  }
  .m-sub {
    font-size: 12px;
    color: #9d97b8;
    margin-top: 3px;
  }
  .m-onmic {
    color: #22c55e;
    display: inline-flex;
  }
  .m-onmic .icon {
    width: 18px;
    height: 18px;
  }
  .m-go {
    color: #5b5680;
    font-size: 22px;
    line-height: 1;
  }

  /* 贡献榜领奖台 */
  .podium {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 16px 8px 0;
  }
  .pod-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
  }
  .pod-medal {
    font-size: 22px;
    margin-bottom: -2px;
  }
  .pod-avatar {
    display: flex;
    justify-content: center;
  }
  .pod-1 .m-avatar {
    width: 72px;
    height: 72px;
    font-size: 28px;
    box-shadow: 0 0 0 3px rgba(255, 215, 106, 0.55);
  }
  .pod-2 .m-avatar {
    box-shadow: 0 0 0 3px rgba(199, 199, 218, 0.5);
  }
  .pod-3 .m-avatar {
    box-shadow: 0 0 0 3px rgba(212, 160, 108, 0.5);
  }
  .pod-name {
    font-size: 13px;
    color: #fff;
    font-weight: 600;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .pod-1 .pod-name {
    font-size: 14px;
  }
  .pod-val {
    font-size: 11px;
    color: #ffd76a;
  }
  .pod-bar {
    width: 100%;
    border-radius: 10px 10px 0 0;
  }
  .pod-1 .pod-bar {
    height: 58px;
    background: linear-gradient(180deg, rgba(255, 215, 106, 0.5), rgba(255, 215, 106, 0.06));
  }
  .pod-2 .pod-bar {
    height: 42px;
    background: linear-gradient(180deg, rgba(200, 200, 220, 0.4), rgba(200, 200, 220, 0.05));
  }
  .pod-3 .pod-bar {
    height: 32px;
    background: linear-gradient(180deg, rgba(212, 160, 108, 0.4), rgba(212, 160, 108, 0.05));
  }
  .rank-list {
    margin-top: 10px;
  }
  .rank-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 8px;
    border-radius: 12px;
    cursor: pointer;
  }
  .rank-row:active {
    background: rgba(255, 255, 255, 0.05);
  }
  .rank-num {
    width: 24px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: #6f6a8a;
  }
  .rank-name {
    flex: 1;
    font-size: 14px;
    color: #f3f1fa;
  }
  .rank-val {
    font-size: 12px;
    color: #ffd76a;
  }

  /* ============================================================
     用户资料卡（居中弹窗）
     ============================================================ */
  .profile-card-wrap {
    position: fixed;
    inset: 0;
    z-index: 240;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    pointer-events: none;
  }
  .profile-card-wrap.open {
    pointer-events: auto;
  }
  .profile-mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.62);
    opacity: 0;
    transition: opacity 0.22s ease;
  }
  .profile-card-wrap.open .profile-mask {
    opacity: 1;
  }
  .profile-card-wrap.open .profile-card {
    animation: profileIn 0.3s cubic-bezier(0.2, 0.8, 0.3, 1.1) forwards;
  }
  @keyframes profileIn {
    to {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
  }
  .profile-close .icon {
    width: 15px;
    height: 15px;
  }
  .p-btn .icon {
    width: 17px;
    height: 17px;
  }
  .p-follow.is-followed {
    color: #cfc9e8;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: none;
  }
  .follow-plus {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: url(/b992f3ee47b4ed35d522.png) center / contain no-repeat;
  }
  .follow-check {
    display: inline-block;
    width: 13px;
    height: 13px;
    background: url(/ee1f9934c623fee0d6c5.png) center / contain no-repeat;
  }

  /* ============================================================
     个人资料卡 · 虎牙式贵族卡片（纯展示，底板素材后台可换）
     ============================================================ */
  .nc-card {
    position: relative;
    width: 100%;
    max-width: 320px;
    aspect-ratio: 640 / 876;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    opacity: 0;
    transform: scale(0.86) translateY(16px);
  }
  .profile-card-wrap.open .nc-card {
    animation: profileIn 0.3s cubic-bezier(0.2, 0.8, 0.3, 1.1) forwards;
  }
  /* 无底板的普通回退卡片 */
  .nc-card-plain {
    aspect-ratio: auto;
    max-width: 330px;
    padding: 30px 22px 24px;
    border-radius: 24px;
    background: linear-gradient(180deg, #241b4d, #181336);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .nc-close {
    position: absolute;
    z-index: 6;
    width: 32px;
    height: 32px;
    border: 0;
    padding: 0;
    border-radius: 50%;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .nc-close .icon { width: 20px; height: 20px; }
  /* 底板卡：X 落在紫色头部右上角实色区（避开金色边框），颜色由 inline 贵族色控制 */
  .nc-card-nobled .nc-close { top: 19%; right: 9%; }
  .nc-card-plain .nc-close { top: 12px; right: 12px; }

  /* 头像：定位在底板拱形凹槽（两底板同模板，圆心 x=50%、y=34.55%，直径≈21.75%，拱内留边） */
  .nc-avatar {
    position: absolute;
    left: 50%;
    top: 34.55%;
    width: 21.75%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    overflow: visible;
    border: 2px solid rgba(196, 181, 253, 0.9);
    box-shadow: 0 4px 14px rgba(76, 29, 149, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .nc-avatar img, .nc-avatar .nc-avatar-initial {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    -o-object-fit: cover;
       object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 700;
  }
  .nc-avatar img { border: 0; }
  .nc-avatar-nb {
    position: absolute;
    right: -12%;
    bottom: -12%;
    width: 46%;
    aspect-ratio: 1;
    filter: drop-shadow(0 2px 4px rgba(76, 29, 149, 0.4));
  }
  .nc-avatar-nb .nb-badge { margin: 0; width: 100%; height: 100%; }
  .nc-avatar-nb .nb-badge-img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; }
  /* 普通卡片：头像从底板凹槽的绝对定位改为顶部静态流式 */
  .nc-card-plain .nc-avatar {
    position: static;
    transform: none;
    width: 84px;
    flex-shrink: 0;
    margin-bottom: 12px;
    border: 2.5px solid rgba(255, 255, 255, 0.8);
    box-shadow: none;
  }
  .nc-card-plain .nc-avatar img,
  .nc-card-plain .nc-avatar .nc-avatar-initial { font-size: 32px; }

  /* 白色主体内容区 */
  .nc-card:not(.nc-card-plain) .nc-body {
    position: absolute;
    top: 42.8%;
    left: 12%;
    right: 12%;
    bottom: 13%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    overflow: visible;
  }
  /* 已是贵族：无开通按钮，内容可舒展到更靠底部 */
  .nc-card.nc-card-nobled .nc-body { bottom: 5%; }
  .nc-card.nc-card-nobled .nc-mount { margin-top: auto; }
  .nc-card-plain .nc-body {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    overflow: visible;
  }
  /* 通用行：横向居中 */
  .nc-row {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
  }
  .nc-row1 { gap: 6px; flex-wrap: nowrap; }
  .nc-name {
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    color: #1f2937;
    line-height: 1.2;
    max-width: 10em;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
  }
  /* 昵称旁性别符号：纯符号无底色，男蓝女粉，与名字等高，未设置不渲染 */
  .nc-gender {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
  }
  .nc-gender-male { color: #60a5fa; }
  .nc-gender-female { color: #f472b6; }

  /* 等级胶囊：贵族档位（档位色）+ 财富等级（蓝色） */
  .nc-pill {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 20px;
    padding: 0 8px;
    border-radius: 10px;
    color: #fff;
    flex-shrink: 0;
    line-height: 1;
    white-space: nowrap;
  }
  .nc-pill-num { font-size: 12px; font-weight: 800; }
  .nc-pill-nob { background: var(--nob-color, #a78bfa); }
  .nc-nob-diamond { width: 12px; height: 12px; }

  /* 第二行：实名（身份证）+ 年龄 ｜ 位置（省级） */
  .nc-row2 { gap: 8px; font-size: 12px; color: #6b7280; }
  .nc-ident { display: inline-flex; align-items: center; }
  .nc-ident .icon { width: 15px; height: 15px; }
  .nc-age { font-weight: 600; }
  .nc-divider { width: 1px; height: 12px; background: #d1d5db; flex-shrink: 0; }
  .nc-loc { display: inline-flex; align-items: center; gap: 2px; }
  .nc-loc .icon { width: 14px; height: 14px; }

  /* 第三行：粉丝数 */
  .nc-fans { font-size: 13px; font-weight: 600; color: #4b5563; }

  .nc-sign {
    font-size: 12px;
    color: #6b7280;
    line-height: 1.5;
    max-width: 100%;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    /* 卡片是 flex column 容器：不加这行 -webkit-box 子项会被压成 0 高，签名整段不可见 */
    flex: 0 0 auto;
  }

  /* 深色回退卡片（无底板）：文字/图标改浅色，保证可读 */
  .nc-card-plain .nc-name { color: #f3f0ff; }
  .nc-card-plain .nc-row2,
  .nc-card-plain .nc-ident,
  .nc-card-plain .nc-loc { color: #c7c2e0; }
  .nc-card-plain .nc-fans { color: #d8d4ee; }
  .nc-card-plain .nc-sign { color: #b9b3d6; }
  .nc-card-plain .nc-divider { background: rgba(255, 255, 255, 0.22); }

  /* 坐骑动态区（无圆框，精灵直接显示在白卡上）+ 竖排名称 */
  .nc-mount {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    margin: 4px -16px 0;
  }
  .nc-mount-stage {
    position: relative;
    width: 250px;
    height: 120px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .nc-mount-name {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    writing-mode: vertical-rl;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    color: #6d28d9;
    background: linear-gradient(180deg, rgba(139, 92, 246, 0.16), rgba(124, 58, 237, 0.1));
    border: 1px solid rgba(139, 92, 246, 0.45);
    border-radius: 8px;
    padding: 8px 5px;
  }
  .nc-card-plain .nc-mount-name { color: #ddd6fe; border-color: rgba(167, 139, 250, 0.5); background: rgba(139, 92, 246, 0.22); }

  /* 底部开通贵族（仅未开通者） */
  .nc-open-noble {
    position: absolute;
    left: 12%;
    right: 12%;
    bottom: 3.2%;
    height: 38px;
    border-radius: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    color: #4a2c00;
    background: linear-gradient(135deg, #ffe08a, #f5b421);
    box-shadow: 0 6px 16px rgba(245, 158, 11, 0.4);
  }
  .nc-open-noble .nc-crown { display: flex; align-items: center; }
  .nc-open-noble .nc-crown svg { width: 17px; height: 17px; }
  .nc-noble-arrow { font-size: 17px; font-weight: 700; line-height: 1; }
  .nc-open-noble-plain {
    position: static;
    width: 100%;
    margin-top: 14px;
  }

  /* ============================================================
     私聊 IM（会话列表 sheet + 全屏聊天窗）
     ============================================================ */
  .pm-wrap {
    position: fixed;
    inset: 0;
    z-index: 225;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
  }
  .pm-wrap.open {
    pointer-events: auto;
  }
  .pm-mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    transition: opacity 0.22s ease;
  }
  .pm-wrap.open .pm-mask {
    opacity: 1;
  }
  .pm-sheet {
    position: relative;
    width: 100%;
    max-width: 480px;
    max-height: 78vh;
    display: flex;
    flex-direction: column;
    padding: 18px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    border-radius: 22px 22px 0 0;
    background: linear-gradient(180deg, #2b2158 0%, #1c1540 55%, #161033 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 -12px 50px rgba(0, 0, 0, 0.65);
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.22, 0.9, 0.32, 1);
  }
  .pm-wrap.open .pm-sheet {
    transform: translateY(0);
  }
  .pm-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
  }
  .pm-title {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
  }
  .pm-close {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b9b4d6;
    background: rgba(255, 255, 255, 0.07);
  }
  .pm-close .icon {
    width: 16px;
    height: 16px;
  }
  .pm-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
  }
  .pm-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 56px 0 40px;
    color: #6f6a8a;
  }
  .pm-empty-ic {
    color: #4a456a;
    display: inline-flex;
    margin-bottom: 4px;
  }
  .pm-empty-ic .icon {
    width: 44px;
    height: 44px;
  }
  .pm-empty p {
    margin: 0;
    font-size: 15px;
    color: #b9b4d6;
  }
  .pm-empty span {
    font-size: 12px;
    color: #6f6a8a;
  }
  .pm-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 8px;
    border-radius: 14px;
    cursor: pointer;
  }
  .pm-item:active {
    background: rgba(255, 255, 255, 0.05);
  }
  .pm-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1.5px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    flex-shrink: 0;
  }
  .pm-main {
    flex: 1;
    min-width: 0;
  }
  .pm-name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .pm-name {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
  }
  .pm-time {
    font-size: 11px;
    color: #6f6a8a;
    flex-shrink: 0;
  }
  .pm-last {
    font-size: 13px;
    color: #9d97b8;
    margin-top: 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .pm-badge {
    flex-shrink: 0;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: linear-gradient(135deg, #fb7185, #f43f5e);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* 全屏聊天窗 */
  .pm-chat-wrap {
    position: fixed;
    inset: 0;
    z-index: 235;
    pointer-events: none;
  }
  .pm-chat-wrap.open {
    pointer-events: auto;
  }
  .pm-chat {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    max-width: 480px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #1a1438 0%, #120e28 100%);
    transform: translateX(100%);
    transition: transform 0.26s cubic-bezier(0.22, 0.9, 0.32, 1);
    pointer-events: auto;
  }
  .pm-chat-wrap.open .pm-chat {
    transform: translateX(0);
  }
  .pm-chat-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px;
    background: rgba(28, 21, 64, 0.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
  }
  .pm-back {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
  }
  .pm-back .icon {
    width: 22px;
    height: 22px;
  }
  .pm-chat-name {
    font-size: 16px;
    font-weight: 700;
    color: #fff;
  }
  .pm-chat-status {
    font-size: 11px;
    color: #22c55e;
    margin-top: 1px;
  }
  .pm-chat-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    scrollbar-width: thin;
  }
  .pm-chat-empty {
    margin: auto;
    font-size: 12px;
    color: #6f6a8a;
  }
  .b-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    animation: bIn 0.2s ease;
  }
  @keyframes bIn {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  .b-mine {
    justify-content: flex-end;
  }
  .b-other {
    justify-content: flex-start;
  }
  .b-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1.5px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
  }
  .b-bubble {
    max-width: 74%;
    padding: 9px 12px;
    font-size: 14px;
    line-height: 1.5;
    word-break: break-word;
  }
  .b-bubble-mine {
    color: #fff;
    background: linear-gradient(135deg, #8b5cf6, #a855f7);
    border-radius: 16px 16px 4px 16px;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
  }
  .b-bubble-other {
    color: #ece9f5;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px 16px 16px 4px;
  }
  .b-time {
    display: block;
    font-size: 10px;
    opacity: 0.55;
    margin-top: 4px;
    text-align: right;
  }
  .b-other .b-time {
    text-align: left;
  }
  .pm-chat-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(22, 16, 51, 0.96);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
  }
  .pm-input {
    flex: 1;
    height: 40px;
    border-radius: 20px;
    padding: 0 16px;
    font-size: 14px;
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
  }
  .pm-input::-moz-placeholder {
    color: #6f6a8a;
  }
  .pm-input::placeholder {
    color: #6f6a8a;
  }
  .pm-send {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, #8b5cf6, #a855f7);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.4);
  }
  .pm-send .icon {
    width: 19px;
    height: 19px;
  }

  /* ============================================================
     通用宫格底部面板（更多 / 音效 / 背包）
     ============================================================ */
  .feature-panel {
    position: fixed;
    inset: 0;
    z-index: 210;
    display: flex;
    align-items: flex-end;
    justify-content: center;
  }
  .feature-mask {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    transition: opacity 0.2s ease;
  }
  .feature-panel.open .feature-mask {
    opacity: 1;
  }
  .feature-sheet {
    position: relative;
    width: 100%;
    max-width: 480px;
    background: linear-gradient(180deg, #241b4d 0%, #1a1438 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px 20px 0 0;
    padding: 16px 14px calc(14px + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
    transition: transform 0.22s ease;
  }
  .feature-panel.open .feature-sheet {
    transform: translateY(0);
  }
  .feature-title {
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #ece9f5;
    padding-bottom: 14px;
  }
  .feature-grid {
    display: grid;
    gap: 16px 6px;
    margin-bottom: 12px;
  }
  .feature-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: #b9b4d6;
  }
  .feature-item:active {
    opacity: 0.7;
  }
  .feature-ic {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.08);
    color: #d8d3ec;
  }
  .feature-ic .icon {
    width: 22px;
    height: 22px;
  }
  .feature-label {
    font-size: 12px;
    color: #b9b4d6;
    text-align: center;
  }
  .feature-badge {
    position: absolute;
    top: -4px;
    right: calc(50% - 28px);
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 8px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .feature-cancel {
    width: 100%;
    padding: 13px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.1);
    color: #ece9f5;
    font-size: 15px;
    font-weight: 600;
  }
  .feature-cancel:active {
    background: rgba(255, 255, 255, 0.16);
  }
  /* 彩色功能图标 */
  .ic-amber { background: rgba(245, 158, 11, 0.18); color: #fbbf24; }
  .ic-violet { background: rgba(139, 92, 246, 0.2); color: #a78bfa; }
  .ic-blue { background: rgba(59, 130, 246, 0.2); color: #60a5fa; }
  .ic-green { background: rgba(34, 197, 94, 0.18); color: #4ade80; }
  .ic-yellow { background: rgba(234, 179, 8, 0.18); color: #facc15; }
  .ic-orange { background: rgba(249, 115, 22, 0.18); color: #fb923c; }
  .ic-pink { background: rgba(236, 72, 153, 0.18); color: #f472b6; }
  .ic-slate { background: rgba(148, 163, 184, 0.16); color: #94a3b8; }
  .ic-red { background: rgba(239, 68, 68, 0.18); color: #f87171; }

  /* 时间段选择器（每日开播时间 · 自定义下拉） */
  .trp { width: 100%; }
  .trp-row { display: flex; align-items: center; gap: 8px; }
  .trp-field { flex: 1 1 0; min-width: 0; }
  .trp-trigger {
    width: 100%; height: 40px; padding: 0 10px;
    display: flex; align-items: center; justify-content: space-between; gap: 6px;
    border-radius: 10px; border: 1px solid; font-size: 14px; outline: none;
  }
  .trp-trigger:hover { border-color: #7c3aed; }
  .trp-value { font-variant-numeric: tabular-nums; }
  .trp-value.is-placeholder { color: #94a3b8; }
  .trp-chevron { display: flex; flex: none; }
  .trp-sep { font-size: 13px; flex: none; }
  .trp-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
  .trp-chip {
    height: 30px; padding: 0 12px;
    border-radius: 999px; border: 1px solid;
    font-size: 12px; line-height: 1; cursor: pointer;
  }
  /* 浮层（挂到 body，自带主题类） */
  .trp-pop {
    position: fixed; z-index: 80; overflow: hidden;
    border-radius: 12px; border: 1px solid;
    box-shadow: 0 12px 32px rgba(15, 10, 40, 0.22);
  }
  .trp-pop-head { padding: 9px 12px; font-size: 12px; font-weight: 600; }
  .trp-pop-list { max-height: 264px; overflow-y: auto; padding: 4px; }
  .trp-pop-list::-webkit-scrollbar { width: 6px; }
  .trp-pop-list::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(124, 58, 237, 0.35); }
  .trp-opt {
    width: 100%; height: 36px; padding: 0 10px;
    display: flex; align-items: center; justify-content: space-between;
    border-radius: 8px; font-size: 14px; font-variant-numeric: tabular-nums;
  }
  .trp-check { display: flex; }

  /* 浅色主题：后台弹窗 */
  .trp-light .trp-trigger { background: #fff; border-color: #cbd5e1; color: #334155; }
  .trp-light .trp-chevron { color: #94a3b8; }
  .trp-light .trp-sep { color: #94a3b8; }
  .trp-light .trp-chip { background: #fff; border-color: #e2e8f0; color: #64748b; }
  .trp-light .trp-chip:hover { border-color: #7c3aed; color: #7c3aed; }
  .trp-light .trp-chip.active { background: #7c3aed; border-color: #7c3aed; color: #fff; }
  .trp-pop.trp-pop-light { background: #fff; border-color: #e2e8f0; }
  .trp-pop-light .trp-pop-head { color: #64748b; background: #f8fafc; }
  .trp-pop-light .trp-opt { color: #334155; }
  .trp-pop-light .trp-opt:hover { background: #f3f0ff; }
  .trp-pop-light .trp-opt.active { background: #7c3aed; color: #fff; }

  /* 深色主题：房主设置弹窗 */
  .trp-dark .trp-trigger { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.16); color: #ede9fe; }
  .trp-dark .trp-value.is-placeholder { color: #8b82a8; }
  .trp-dark .trp-chevron { color: #a78bfa; }
  .trp-dark .trp-sep { color: #a78bfa; }
  .trp-dark .trp-chip { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.14); color: #c4b5fd; }
  .trp-dark .trp-chip:hover { border-color: #a78bfa; color: #fff; }
  .trp-dark .trp-chip.active { background: #7c3aed; border-color: #7c3aed; color: #fff; }
  .trp-pop.trp-pop-dark { background: #241c45; border-color: rgba(255, 255, 255, 0.12); }
  .trp-pop-dark .trp-pop-head { color: #c4b5fd; background: rgba(255, 255, 255, 0.04); }
  .trp-pop-dark .trp-opt { color: #ede9fe; }
  .trp-pop-dark .trp-opt:hover { background: rgba(167, 139, 250, 0.16); }
  .trp-pop-dark .trp-opt.active { background: #7c3aed; color: #fff; }

  /* 日期范围选择器（双月日历） */
  .drp-trigger {
    width: 100%; height: 40px; padding: 0 12px;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    background: #fff; border: 1px solid #cbd5e1; border-radius: 10px;
    font-size: 14px; color: #334155;
  }
  .drp-trigger:hover { border-color: #7c3aed; }
  .drp-text { font-variant-numeric: tabular-nums; }
  .drp-text.is-placeholder { color: #94a3b8; }
  .drp-calicon { color: #94a3b8; display: flex; }
  .drp-pop {
    position: fixed; z-index: 80; padding: 14px;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
    box-shadow: 0 16px 44px rgba(15, 10, 40, 0.2);
  }
  .drp-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
  .drp-nav {
    width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
    border-radius: 8px; color: #64748b;
  }
  .drp-nav:hover { background: #f3f0ff; color: #7c3aed; }
  .drp-title { font-size: 14px; font-weight: 600; color: #334155; }
  .drp-months { display: flex; gap: 18px; }
  .drp-month-head { text-align: center; font-size: 13px; font-weight: 600; color: #475569; margin-bottom: 6px; }
  .drp-grid { display: grid; grid-template-columns: repeat(7, 38px); gap: 2px; }
  .drp-week {
    height: 26px; display: flex; align-items: center; justify-content: center;
    font-size: 12px; color: #94a3b8;
  }
  .drp-cell {
    height: 38px; width: 38px; display: flex; align-items: center; justify-content: center;
    border-radius: 999px; font-size: 13px; color: #334155; font-variant-numeric: tabular-nums;
  }
  .drp-cell:hover { background: #ede9fe; }
  .drp-cell.out { color: #cbd5e1; }
  .drp-cell.in-range { background: #ede9fe; border-radius: 8px; }
  .drp-cell.in-range:hover { background: #ddd6fe; }
  .drp-cell.endpoint { background: #7c3aed; color: #fff; }
  .drp-cell.endpoint:hover { background: #6d28d9; }
  .drp-shortcuts { display: flex; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px solid #f1f5f9; }
  .drp-quick {
    height: 28px; padding: 0 12px; border-radius: 999px;
    border: 1px solid #e2e8f0; font-size: 12px; color: #64748b;
  }
  .drp-quick:hover { border-color: #7c3aed; color: #7c3aed; }
.pointer-events-none {
  pointer-events: none;
}
.fixed {
  position: fixed;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.sticky {
  position: sticky;
}
.inset-0 {
  inset: 0px;
}
.inset-y-0 {
  top: 0px;
  bottom: 0px;
}
.-right-1\.5 {
  right: -0.375rem;
}
.-top-1\.5 {
  top: -0.375rem;
}
.bottom-0 {
  bottom: 0px;
}
.bottom-3 {
  bottom: 0.75rem;
}
.left-0 {
  left: 0px;
}
.left-0\.5 {
  left: 0.125rem;
}
.left-1\/2 {
  left: 50%;
}
.left-2 {
  left: 0.5rem;
}
.left-3 {
  left: 0.75rem;
}
.left-\[22px\] {
  left: 22px;
}
.right-0 {
  right: 0px;
}
.right-3 {
  right: 0.75rem;
}
.right-4 {
  right: 1rem;
}
.top-0 {
  top: 0px;
}
.top-0\.5 {
  top: 0.125rem;
}
.top-1\/2 {
  top: 50%;
}
.top-2 {
  top: 0.5rem;
}
.top-4 {
  top: 1rem;
}
.top-5 {
  top: 1.25rem;
}
.z-10 {
  z-index: 10;
}
.z-30 {
  z-index: 30;
}
.z-40 {
  z-index: 40;
}
.z-50 {
  z-index: 50;
}
.z-\[300\] {
  z-index: 300;
}
.z-\[60\] {
  z-index: 60;
}
.z-\[70\] {
  z-index: 70;
}
.z-\[90\] {
  z-index: 90;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.my-4 {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.-mt-0\.5 {
  margin-top: -0.125rem;
}
.mb-0\.5 {
  margin-bottom: 0.125rem;
}
.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-1\.5 {
  margin-bottom: 0.375rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-4 {
  margin-bottom: 1rem;
}
.mb-5 {
  margin-bottom: 1.25rem;
}
.mb-6 {
  margin-bottom: 1.5rem;
}
.ml-1 {
  margin-left: 0.25rem;
}
.ml-16 {
  margin-left: 4rem;
}
.ml-2 {
  margin-left: 0.5rem;
}
.ml-3 {
  margin-left: 0.75rem;
}
.ml-60 {
  margin-left: 15rem;
}
.ml-auto {
  margin-left: auto;
}
.mr-1 {
  margin-right: 0.25rem;
}
.mr-1\.5 {
  margin-right: 0.375rem;
}
.mr-2 {
  margin-right: 0.5rem;
}
.mr-auto {
  margin-right: auto;
}
.mt-0\.5 {
  margin-top: 0.125rem;
}
.mt-1 {
  margin-top: 0.25rem;
}
.mt-1\.5 {
  margin-top: 0.375rem;
}
.mt-2 {
  margin-top: 0.5rem;
}
.mt-2\.5 {
  margin-top: 0.625rem;
}
.mt-3 {
  margin-top: 0.75rem;
}
.mt-4 {
  margin-top: 1rem;
}
.mt-5 {
  margin-top: 1.25rem;
}
.mt-6 {
  margin-top: 1.5rem;
}
.mt-\[1px\] {
  margin-top: 1px;
}
.mt-auto {
  margin-top: auto;
}
.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.block {
  display: block;
}
.inline-block {
  display: inline-block;
}
.inline {
  display: inline;
}
.flex {
  display: flex;
}
.inline-flex {
  display: inline-flex;
}
.table {
  display: table;
}
.\!grid {
  display: grid !important;
}
.grid {
  display: grid;
}
.\!hidden {
  display: none !important;
}
.hidden {
  display: none;
}
.aspect-\[16\/10\] {
  aspect-ratio: 16/10;
}
.aspect-square {
  aspect-ratio: 1 / 1;
}
.aspect-video {
  aspect-ratio: 16 / 9;
}
.h-1 {
  height: 0.25rem;
}
.h-1\.5 {
  height: 0.375rem;
}
.h-10 {
  height: 2.5rem;
}
.h-11 {
  height: 2.75rem;
}
.h-12 {
  height: 3rem;
}
.h-14 {
  height: 3.5rem;
}
.h-16 {
  height: 4rem;
}
.h-2 {
  height: 0.5rem;
}
.h-20 {
  height: 5rem;
}
.h-24 {
  height: 6rem;
}
.h-3 {
  height: 0.75rem;
}
.h-3\.5 {
  height: 0.875rem;
}
.h-4 {
  height: 1rem;
}
.h-40 {
  height: 10rem;
}
.h-5 {
  height: 1.25rem;
}
.h-6 {
  height: 1.5rem;
}
.h-7 {
  height: 1.75rem;
}
.h-8 {
  height: 2rem;
}
.h-9 {
  height: 2.25rem;
}
.h-\[106px\] {
  height: 106px;
}
.h-\[240px\] {
  height: 240px;
}
.h-full {
  height: 100%;
}
.h-px {
  height: 1px;
}
.max-h-52 {
  max-height: 13rem;
}
.max-h-\[60vh\] {
  max-height: 60vh;
}
.max-h-\[68vh\] {
  max-height: 68vh;
}
.max-h-\[70vh\] {
  max-height: 70vh;
}
.max-h-\[88vh\] {
  max-height: 88vh;
}
.max-h-\[90vh\] {
  max-height: 90vh;
}
.min-h-12 {
  min-height: 3rem;
}
.min-h-\[240px\] {
  min-height: 240px;
}
.min-h-screen {
  min-height: 100vh;
}
.w-1\.5 {
  width: 0.375rem;
}
.w-10 {
  width: 2.5rem;
}
.w-11 {
  width: 2.75rem;
}
.w-12 {
  width: 3rem;
}
.w-14 {
  width: 3.5rem;
}
.w-16 {
  width: 4rem;
}
.w-2 {
  width: 0.5rem;
}
.w-20 {
  width: 5rem;
}
.w-24 {
  width: 6rem;
}
.w-28 {
  width: 7rem;
}
.w-3 {
  width: 0.75rem;
}
.w-3\.5 {
  width: 0.875rem;
}
.w-32 {
  width: 8rem;
}
.w-36 {
  width: 9rem;
}
.w-4 {
  width: 1rem;
}
.w-40 {
  width: 10rem;
}
.w-44 {
  width: 11rem;
}
.w-5 {
  width: 1.25rem;
}
.w-52 {
  width: 13rem;
}
.w-6 {
  width: 1.5rem;
}
.w-60 {
  width: 15rem;
}
.w-7 {
  width: 1.75rem;
}
.w-72 {
  width: 18rem;
}
.w-8 {
  width: 2rem;
}
.w-9 {
  width: 2.25rem;
}
.w-auto {
  width: auto;
}
.w-fit {
  width: -moz-fit-content;
  width: fit-content;
}
.w-full {
  width: 100%;
}
.w-px {
  width: 1px;
}
.min-w-0 {
  min-width: 0px;
}
.min-w-56 {
  min-width: 14rem;
}
.min-w-\[104px\] {
  min-width: 104px;
}
.min-w-\[110px\] {
  min-width: 110px;
}
.min-w-\[120px\] {
  min-width: 120px;
}
.min-w-\[180px\] {
  min-width: 180px;
}
.max-w-2xl {
  max-width: 42rem;
}
.max-w-3xl {
  max-width: 48rem;
}
.max-w-4xl {
  max-width: 56rem;
}
.max-w-\[160px\] {
  max-width: 160px;
}
.max-w-\[220px\] {
  max-width: 220px;
}
.max-w-full {
  max-width: 100%;
}
.max-w-lg {
  max-width: 32rem;
}
.max-w-md {
  max-width: 28rem;
}
.max-w-sm {
  max-width: 24rem;
}
.max-w-xl {
  max-width: 36rem;
}
.flex-1 {
  flex: 1 1 0%;
}
.flex-shrink-0 {
  flex-shrink: 0;
}
.shrink-0 {
  flex-shrink: 0;
}
.-translate-x-1\/2 {
  --tw-translate-x: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/2 {
  --tw-translate-y: -50%;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-1 {
  --tw-translate-x: 0.25rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-6 {
  --tw-translate-x: 1.5rem;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-180 {
  --tw-rotate: 180deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.transform {
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes modalPop {

  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.96);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.animate-modalPop {
  animation: modalPop 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes overlayFadeIn {

  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
.animate-overlayFadeIn {
  animation: overlayFadeIn 0.2s ease;
}
@keyframes pulse {

  50% {
    opacity: .5;
  }
}
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes spin {

  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: spin 1s linear infinite;
}
@keyframes toastIn {

  0% {
    opacity: 0;
    transform: translate(-50%, -14px);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}
.animate-toastIn {
  animation: toastIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.cursor-not-allowed {
  cursor: not-allowed;
}
.cursor-pointer {
  cursor: pointer;
}
.select-none {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.resize-none {
  resize: none;
}
.resize {
  resize: both;
}
.appearance-none {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}
.grid-cols-1 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.items-start {
  align-items: flex-start;
}
.items-end {
  align-items: flex-end;
}
.items-center {
  align-items: center;
}
.justify-end {
  justify-content: flex-end;
}
.justify-center {
  justify-content: center;
}
.justify-between {
  justify-content: space-between;
}
.gap-0\.5 {
  gap: 0.125rem;
}
.gap-1 {
  gap: 0.25rem;
}
.gap-1\.5 {
  gap: 0.375rem;
}
.gap-2 {
  gap: 0.5rem;
}
.gap-2\.5 {
  gap: 0.625rem;
}
.gap-3 {
  gap: 0.75rem;
}
.gap-4 {
  gap: 1rem;
}
.gap-5 {
  gap: 1.25rem;
}
.gap-x-3 {
  -moz-column-gap: 0.75rem;
       column-gap: 0.75rem;
}
.gap-y-2 {
  row-gap: 0.5rem;
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-slate-100 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgb(241 245 249 / var(--tw-divide-opacity, 1));
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-x-auto {
  overflow-x: auto;
}
.overflow-y-auto {
  overflow-y: auto;
}
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whitespace-nowrap {
  white-space: nowrap;
}
.rounded {
  border-radius: 0.25rem;
}
.rounded-2xl {
  border-radius: 1rem;
}
.rounded-full {
  border-radius: 9999px;
}
.rounded-lg {
  border-radius: 0.5rem;
}
.rounded-md {
  border-radius: 0.375rem;
}
.rounded-xl {
  border-radius: 0.75rem;
}
.rounded-t-2xl {
  border-top-left-radius: 1rem;
  border-top-right-radius: 1rem;
}
.rounded-t-\[26px\] {
  border-top-left-radius: 26px;
  border-top-right-radius: 26px;
}
.rounded-t-lg {
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
}
.border {
  border-width: 1px;
}
.border-b {
  border-bottom-width: 1px;
}
.border-b-2 {
  border-bottom-width: 2px;
}
.border-l {
  border-left-width: 1px;
}
.border-r {
  border-right-width: 1px;
}
.border-t {
  border-top-width: 1px;
}
.border-dashed {
  border-style: dashed;
}
.border-amber-200 {
  --tw-border-opacity: 1;
  border-color: rgb(253 230 138 / var(--tw-border-opacity, 1));
}
.border-blue-500 {
  --tw-border-opacity: 1;
  border-color: rgb(59 130 246 / var(--tw-border-opacity, 1));
}
.border-emerald-200 {
  --tw-border-opacity: 1;
  border-color: rgb(167 243 208 / var(--tw-border-opacity, 1));
}
.border-emerald-300 {
  --tw-border-opacity: 1;
  border-color: rgb(110 231 183 / var(--tw-border-opacity, 1));
}
.border-rose-100 {
  --tw-border-opacity: 1;
  border-color: rgb(255 228 230 / var(--tw-border-opacity, 1));
}
.border-rose-200 {
  --tw-border-opacity: 1;
  border-color: rgb(254 205 211 / var(--tw-border-opacity, 1));
}
.border-slate-100 {
  --tw-border-opacity: 1;
  border-color: rgb(241 245 249 / var(--tw-border-opacity, 1));
}
.border-slate-200 {
  --tw-border-opacity: 1;
  border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
}
.border-slate-300 {
  --tw-border-opacity: 1;
  border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
}
.border-slate-50 {
  --tw-border-opacity: 1;
  border-color: rgb(248 250 252 / var(--tw-border-opacity, 1));
}
.border-transparent {
  border-color: transparent;
}
.border-violet-100 {
  --tw-border-opacity: 1;
  border-color: rgb(237 233 254 / var(--tw-border-opacity, 1));
}
.border-violet-300 {
  --tw-border-opacity: 1;
  border-color: rgb(196 181 253 / var(--tw-border-opacity, 1));
}
.border-violet-500 {
  --tw-border-opacity: 1;
  border-color: rgb(139 92 246 / var(--tw-border-opacity, 1));
}
.border-violet-600 {
  --tw-border-opacity: 1;
  border-color: rgb(124 58 237 / var(--tw-border-opacity, 1));
}
.border-white\/10 {
  border-color: rgb(255 255 255 / 0.1);
}
.bg-amber-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
}
.bg-amber-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}
.bg-amber-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 158 11 / var(--tw-bg-opacity, 1));
}
.bg-black\/25 {
  background-color: rgb(0 0 0 / 0.25);
}
.bg-black\/40 {
  background-color: rgb(0 0 0 / 0.4);
}
.bg-black\/50 {
  background-color: rgb(0 0 0 / 0.5);
}
.bg-black\/55 {
  background-color: rgb(0 0 0 / 0.55);
}
.bg-black\/70 {
  background-color: rgb(0 0 0 / 0.7);
}
.bg-blue-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
}
.bg-emerald-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(52 211 153 / var(--tw-bg-opacity, 1));
}
.bg-emerald-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(236 253 245 / var(--tw-bg-opacity, 1));
}
.bg-emerald-50\/40 {
  background-color: rgb(236 253 245 / 0.4);
}
.bg-emerald-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}
.bg-emerald-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1));
}
.bg-orange-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 247 237 / var(--tw-bg-opacity, 1));
}
.bg-rose-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(255 241 242 / var(--tw-bg-opacity, 1));
}
.bg-rose-500 {
  --tw-bg-opacity: 1;
  background-color: rgb(244 63 94 / var(--tw-bg-opacity, 1));
}
.bg-rose-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(225 29 72 / var(--tw-bg-opacity, 1));
}
.bg-sky-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(240 249 255 / var(--tw-bg-opacity, 1));
}
.bg-sky-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(2 132 199 / var(--tw-bg-opacity, 1));
}
.bg-slate-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}
.bg-slate-200 {
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}
.bg-slate-300 {
  --tw-bg-opacity: 1;
  background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1));
}
.bg-slate-400 {
  --tw-bg-opacity: 1;
  background-color: rgb(148 163 184 / var(--tw-bg-opacity, 1));
}
.bg-slate-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}
.bg-slate-800 {
  --tw-bg-opacity: 1;
  background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}
.bg-slate-900 {
  --tw-bg-opacity: 1;
  background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
}
.bg-slate-900\/0 {
  background-color: rgb(15 23 42 / 0);
}
.bg-slate-900\/40 {
  background-color: rgb(15 23 42 / 0.4);
}
.bg-slate-900\/50 {
  background-color: rgb(15 23 42 / 0.5);
}
.bg-slate-900\/60 {
  background-color: rgb(15 23 42 / 0.6);
}
.bg-slate-900\/70 {
  background-color: rgb(15 23 42 / 0.7);
}
.bg-transparent {
  background-color: transparent;
}
.bg-violet-100 {
  --tw-bg-opacity: 1;
  background-color: rgb(237 233 254 / var(--tw-bg-opacity, 1));
}
.bg-violet-50 {
  --tw-bg-opacity: 1;
  background-color: rgb(245 243 255 / var(--tw-bg-opacity, 1));
}
.bg-violet-600 {
  --tw-bg-opacity: 1;
  background-color: rgb(124 58 237 / var(--tw-bg-opacity, 1));
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.bg-white\/10 {
  background-color: rgb(255 255 255 / 0.1);
}
.bg-white\/15 {
  background-color: rgb(255 255 255 / 0.15);
}
.bg-white\/20 {
  background-color: rgb(255 255 255 / 0.2);
}
.bg-white\/40 {
  background-color: rgb(255 255 255 / 0.4);
}
.bg-white\/5 {
  background-color: rgb(255 255 255 / 0.05);
}
.bg-white\/95 {
  background-color: rgb(255 255 255 / 0.95);
}
.bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}
.from-violet-50 {
  --tw-gradient-from: #f5f3ff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(245 243 255 / 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-slate-100 {
  --tw-gradient-to: rgb(241 245 249 / 0)  var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), #f1f5f9 var(--tw-gradient-via-position), var(--tw-gradient-to);
}
.to-violet-100 {
  --tw-gradient-to: #ede9fe var(--tw-gradient-to-position);
}
.object-contain {
  -o-object-fit: contain;
     object-fit: contain;
}
.object-cover {
  -o-object-fit: cover;
     object-fit: cover;
}
.p-1 {
  padding: 0.25rem;
}
.p-10 {
  padding: 2.5rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-3 {
  padding: 0.75rem;
}
.p-3\.5 {
  padding: 0.875rem;
}
.p-4 {
  padding: 1rem;
}
.p-5 {
  padding: 1.25rem;
}
.p-6 {
  padding: 1.5rem;
}
.p-8 {
  padding: 2rem;
}
.px-1 {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.px-1\.5 {
  padding-left: 0.375rem;
  padding-right: 0.375rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-2\.5 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}
.px-3 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}
.px-4 {
  padding-left: 1rem;
  padding-right: 1rem;
}
.px-5 {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.px-6 {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.py-0\.5 {
  padding-top: 0.125rem;
  padding-bottom: 0.125rem;
}
.py-1 {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.py-1\.5 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}
.py-10 {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.py-12 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
.py-16 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.py-2 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.py-2\.5 {
  padding-top: 0.625rem;
  padding-bottom: 0.625rem;
}
.py-20 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.py-4 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}
.py-6 {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.pb-4 {
  padding-bottom: 1rem;
}
.pb-5 {
  padding-bottom: 1.25rem;
}
.pl-11 {
  padding-left: 2.75rem;
}
.pl-2 {
  padding-left: 0.5rem;
}
.pl-9 {
  padding-left: 2.25rem;
}
.pr-1 {
  padding-right: 0.25rem;
}
.pr-2 {
  padding-right: 0.5rem;
}
.pr-3 {
  padding-right: 0.75rem;
}
.pt-1 {
  padding-top: 0.25rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.text-left {
  text-align: left;
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
.font-sans {
  font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}
.text-\[10px\] {
  font-size: 10px;
}
.text-\[11\.5px\] {
  font-size: 11.5px;
}
.text-\[11px\] {
  font-size: 11px;
}
.text-\[12\.5px\] {
  font-size: 12.5px;
}
.text-\[12px\] {
  font-size: 12px;
}
.text-\[13px\] {
  font-size: 13px;
}
.text-\[14px\] {
  font-size: 14px;
}
.text-\[15\.5px\] {
  font-size: 15.5px;
}
.text-\[15px\] {
  font-size: 15px;
}
.text-\[17px\] {
  font-size: 17px;
}
.text-\[18px\] {
  font-size: 18px;
}
.text-\[9px\] {
  font-size: 9px;
}
.text-base {
  font-size: 1rem;
  line-height: 1.5rem;
}
.text-lg {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.text-xl {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.text-xs {
  font-size: 0.75rem;
  line-height: 1rem;
}
.font-bold {
  font-weight: 700;
}
.font-medium {
  font-weight: 500;
}
.font-normal {
  font-weight: 400;
}
.font-semibold {
  font-weight: 600;
}
.italic {
  font-style: italic;
}
.leading-5 {
  line-height: 1.25rem;
}
.leading-6 {
  line-height: 1.5rem;
}
.leading-none {
  line-height: 1;
}
.leading-relaxed {
  line-height: 1.625;
}
.tracking-wider {
  letter-spacing: 0.05em;
}
.text-\[\#c4b5fd\] {
  --tw-text-opacity: 1;
  color: rgb(196 181 253 / var(--tw-text-opacity, 1));
}
.text-\[\#f5c451\]\/90 {
  color: rgb(245 196 81 / 0.9);
}
.text-amber-500 {
  --tw-text-opacity: 1;
  color: rgb(245 158 11 / var(--tw-text-opacity, 1));
}
.text-amber-600 {
  --tw-text-opacity: 1;
  color: rgb(217 119 6 / var(--tw-text-opacity, 1));
}
.text-amber-700 {
  --tw-text-opacity: 1;
  color: rgb(180 83 9 / var(--tw-text-opacity, 1));
}
.text-amber-800 {
  --tw-text-opacity: 1;
  color: rgb(146 64 14 / var(--tw-text-opacity, 1));
}
.text-blue-500 {
  --tw-text-opacity: 1;
  color: rgb(59 130 246 / var(--tw-text-opacity, 1));
}
.text-blue-600 {
  --tw-text-opacity: 1;
  color: rgb(37 99 235 / var(--tw-text-opacity, 1));
}
.text-emerald-500 {
  --tw-text-opacity: 1;
  color: rgb(16 185 129 / var(--tw-text-opacity, 1));
}
.text-emerald-600 {
  --tw-text-opacity: 1;
  color: rgb(5 150 105 / var(--tw-text-opacity, 1));
}
.text-emerald-700 {
  --tw-text-opacity: 1;
  color: rgb(4 120 87 / var(--tw-text-opacity, 1));
}
.text-orange-400 {
  --tw-text-opacity: 1;
  color: rgb(251 146 60 / var(--tw-text-opacity, 1));
}
.text-orange-600 {
  --tw-text-opacity: 1;
  color: rgb(234 88 12 / var(--tw-text-opacity, 1));
}
.text-pink-500 {
  --tw-text-opacity: 1;
  color: rgb(236 72 153 / var(--tw-text-opacity, 1));
}
.text-red-500 {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.text-rose-500 {
  --tw-text-opacity: 1;
  color: rgb(244 63 94 / var(--tw-text-opacity, 1));
}
.text-rose-600 {
  --tw-text-opacity: 1;
  color: rgb(225 29 72 / var(--tw-text-opacity, 1));
}
.text-rose-700 {
  --tw-text-opacity: 1;
  color: rgb(190 18 60 / var(--tw-text-opacity, 1));
}
.text-sky-500 {
  --tw-text-opacity: 1;
  color: rgb(14 165 233 / var(--tw-text-opacity, 1));
}
.text-sky-600 {
  --tw-text-opacity: 1;
  color: rgb(2 132 199 / var(--tw-text-opacity, 1));
}
.text-sky-700 {
  --tw-text-opacity: 1;
  color: rgb(3 105 161 / var(--tw-text-opacity, 1));
}
.text-slate-100 {
  --tw-text-opacity: 1;
  color: rgb(241 245 249 / var(--tw-text-opacity, 1));
}
.text-slate-300 {
  --tw-text-opacity: 1;
  color: rgb(203 213 225 / var(--tw-text-opacity, 1));
}
.text-slate-400 {
  --tw-text-opacity: 1;
  color: rgb(148 163 184 / var(--tw-text-opacity, 1));
}
.text-slate-500 {
  --tw-text-opacity: 1;
  color: rgb(100 116 139 / var(--tw-text-opacity, 1));
}
.text-slate-600 {
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.text-slate-700 {
  --tw-text-opacity: 1;
  color: rgb(51 65 85 / var(--tw-text-opacity, 1));
}
.text-slate-800 {
  --tw-text-opacity: 1;
  color: rgb(30 41 59 / var(--tw-text-opacity, 1));
}
.text-slate-900 {
  --tw-text-opacity: 1;
  color: rgb(15 23 42 / var(--tw-text-opacity, 1));
}
.text-violet-500 {
  --tw-text-opacity: 1;
  color: rgb(139 92 246 / var(--tw-text-opacity, 1));
}
.text-violet-600 {
  --tw-text-opacity: 1;
  color: rgb(124 58 237 / var(--tw-text-opacity, 1));
}
.text-violet-700 {
  --tw-text-opacity: 1;
  color: rgb(109 40 217 / var(--tw-text-opacity, 1));
}
.text-white {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-white\/30 {
  color: rgb(255 255 255 / 0.3);
}
.text-white\/45 {
  color: rgb(255 255 255 / 0.45);
}
.text-white\/50 {
  color: rgb(255 255 255 / 0.5);
}
.text-white\/55 {
  color: rgb(255 255 255 / 0.55);
}
.text-white\/60 {
  color: rgb(255 255 255 / 0.6);
}
.text-white\/70 {
  color: rgb(255 255 255 / 0.7);
}
.antialiased {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.placeholder-white\/30::-moz-placeholder {
  color: rgb(255 255 255 / 0.3);
}
.placeholder-white\/30::placeholder {
  color: rgb(255 255 255 / 0.3);
}
.accent-\[\#8b5cf6\] {
  accent-color: #8b5cf6;
}
.opacity-0 {
  opacity: 0;
}
.opacity-50 {
  opacity: 0.5;
}
.opacity-60 {
  opacity: 0.6;
}
.opacity-80 {
  opacity: 0.8;
}
.shadow {
  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-card {
  --tw-shadow: 0 1px 3px rgba(0,0,0,0.06);
  --tw-shadow-colored: 0 1px 3px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-lg {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-pop {
  --tw-shadow: 0 8px 32px rgba(0,0,0,0.1);
  --tw-shadow-colored: 0 8px 32px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline-none {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.blur {
  --tw-blur: blur(8px);
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-blur-\[2px\] {
  --tw-backdrop-blur: blur(2px);
  backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.duration-150 {
  transition-duration: 150ms;
}
.duration-200 {
  transition-duration: 200ms;
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.\[appearance\:textfield\] {
  -webkit-appearance: textfield;
     -moz-appearance: textfield;
          appearance: textfield;
}

/* ============================================================
   基础
   ============================================================ */

/* ============================================================
   可复用组件类（用 @apply 复用 Tailwind 设计令牌）
   ============================================================ */

/* ============================================================
   JS 状态联动（未分层，优先级高于组件/工具类，可稳定覆盖）
   ============================================================ */
.seat.empty {
  border-style: dashed;
  background-color: transparent;
}
.seat.empty .seat-avatar {
  background: rgba(255, 255, 255, 0.05);
  color: #6f6a8a;
}
.seat.empty .seat-name {
  color: #6f6a8a;
}
.seat.speaking {
  border-color: rgba(34, 197, 94, 0.55);
}

/* 有视频：显示视频，隐藏整个头像框（头像+等级徽章），名字/麦克风浮层化 */
.seat.has-video .seat-video,
.host-seat.has-video .host-video {
  display: block;
}
/* 视频态：wrap 透明铺满作定位层，仅保留右上角静音提示，隐藏头像/框/声波/徽章 */
.seat.has-video .seat-avatar-wrap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  pointer-events: none;
  z-index: 3;
}
.seat.has-video .seat-avatar,
.seat.has-video .seat-frame,
.seat.has-video .voice-wave,
.seat.has-video .nb-badge {
  display: none;
}
.seat.has-video .seat-name {
  position: absolute;
  bottom: 0.25rem;
  left: 0.25rem;
  border-radius: 0.5rem;
  background-color: rgb(0 0 0 / 0.5);
  padding-left: 0.375rem;
  padding-right: 0.375rem;
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.seat.has-video .seat-mic {
  inset: auto;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
}
.seat.has-video .seat-mic::before {
  display: none;
}
.seat.has-video .seat-mic svg {
  width: 13px;
  height: 13px;
}

/* ============================================================
   方案4：固定小窗布局（.video-stage）
   大主画面（主播）+ 右侧固定小窗列（嘉宾），固定麦位、不跳动
   ============================================================ */
.video-stage {
  display: flex;
  align-items: stretch;
  gap: 10px;
}
/* 主画面：占剩余宽度，竖屏比例，主播焦点集中 */
.video-stage .host-seat {
  flex: 1 1 auto;
  width: auto;
  margin: 0;
  aspect-ratio: 3 / 4;
}
/* 嘉宾小窗列：固定宽度、纵向排列 */
.video-stage .guest-seats {
  flex: 0 0 72px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* 小窗：在列高内等分，不写死比例，席位数变化也不溢出 */
.video-stage .guest-seats .seat {
  flex: 1 1 0;
  width: 100%;
  aspect-ratio: auto;
  min-height: 0;
}
/* 小窗内头像/头像框缩小，整体居中 */
.video-stage .seat .seat-avatar-wrap {
  width: 46px;
  height: 46px;
  margin-bottom: 4px;
}
.video-stage .seat .seat-frame {
  width: 60px;
  height: 60px;
}
/* 声波与头像框同容器、同尺寸、同心 */
.video-stage .seat .voice-wave {
  width: 60px;
  height: 60px;
}
/* 空位：+ 申请连线，整块矩形居中 */
.video-stage .seat .seat-apply {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.video-stage .seat .seat-plus {
  font-size: 30px;
  font-weight: 300;
  line-height: 1;
  color: rgba(255, 255, 255, 0.85);
}
.video-stage .seat .seat-apply-text {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.5px;
}
.video-stage .seat-name {
  font-size: 9px;
  line-height: 1.2;
  padding: 0 2px;
}
/* 说话声波（虎牙环形 WebP，自带动画；仅说话时显示，不说话隐藏） */
.voice-wave,
.host-wave {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  transition: opacity 0.2s ease;
  -o-object-fit: contain;
     object-fit: contain;
  max-width: none;
}
.voice-wave {
  width: 78px;
  height: 78px;
}
.host-wave {
  width: 132px;
  height: 132px;
}
/* 仅说话时显示声波 */
.video-stage .seat.speaking .voice-wave,
.host-seat.speaking .host-wave {
  opacity: 1;
}
/* 视频态 / 未开播不显示声波 */
.seat.has-video .voice-wave,
.host-seat.has-video .host-wave,
.host-seat.host-offline .host-wave {
  display: none;
}
/* 禁用旧的绿色扩散指示，统一由虎牙环形声波表达说话状态 */
.video-stage .speaking-indicator {
  display: none;
}
.video-stage .seat-avatar-wrap.speaking::after {
  content: none;
}

/* ============================================================
   公屏浮层：等级胶囊徽章（白心形+数字）+ 消息浮在主画面左下角（移动端）
   ============================================================ */
.level-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 20px;
  padding: 0 7px;
  margin-right: 5px;
  border-radius: 999px;
  background: var(--lp);
  flex-shrink: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.pill-heart {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}
.pill-num {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}
@media (max-width: 768px) {
  /* ===== 房间页：全屏弹性布局——主麦撑满、小窗浮右、消息浮左下、底栏固定 ===== */
  #page-room.active {
    height: 100dvh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    --seat-col-w: clamp(64px, 21vw, 92px);
    --bottom-h: 76px;
  }
  #page-room .room-header {
    flex: 0 0 auto;
  }

  /* 主舞台：占满顶部栏与底栏之间的全部空间，作为绝对定位包含块 */
  #page-room .seats-area {
    flex: 1 1 auto;
    min-height: 0;
    position: relative;
    display: block;
    padding: 0;
    gap: 0;
  }
  /* 排队申请横幅：浮在主舞台顶部（无排队时默认隐藏） */
  #page-room .queue-banner {
    position: absolute;
    top: 10px;
    left: 10px;
    right: calc(var(--seat-col-w) + 16px);
    z-index: 8;
    margin: 0;
    padding: 8px 12px;
  }

  /* 视频舞台铺满主舞台 */
  #page-room .video-stage {
    position: absolute;
    inset: 0;
    gap: 0;
  }
  /* 主麦：铺满整个主舞台，更大、更高、占满画面 */
  #page-room .video-stage .host-seat {
    position: absolute;
    inset: 0;
    width: 100%;
    margin: 0;
    aspect-ratio: auto;
    border-radius: 0;
    border: none;
    box-shadow: none;
  }
  /* 嘉宾小窗列：浮在主画面右侧，纵向铺满、上下留边；
     底部抬到底栏上方，避免最后麦位/空位被操作栏遮挡（与消息区底边对齐）；
     z-index:2 高于主麦封面(host-cover z-index:1)，保证透明空位也能命中、可点击申请 */
  #page-room .video-stage .guest-seats {
    position: absolute;
    top: 8px;
    right: 8px;
    bottom: calc(var(--bottom-h) + 8px);
    width: var(--seat-col-w);
    flex: none;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  #page-room .video-stage .guest-seats .seat {
    flex: 1 1 0;
    width: 100%;
    min-height: 0;
    margin: 0;
    border-radius: 14px;
    padding: 4px;
  }
  /* 小窗内：头像框/声波为最大元素，头像缩到 56%，保证头像框完整、不被盖住 */
  #page-room .video-stage .seat .seat-avatar-wrap {
    width: 92%;
    height: auto;
    aspect-ratio: 1;
    padding: 0;
    margin: 0 0 8px;
    background: transparent;
    border: none;
    border-radius: 0;
  }
  #page-room .video-stage .seat .seat-frame,
  #page-room .video-stage .seat .voice-wave {
    width: 100%;
    height: 100%;
    max-width: none;
  }
  #page-room .video-stage .seat .seat-avatar {
    width: 56%;
    height: 56%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  #page-room .video-stage .seat .seat-name {
    font-size: 10px;
    line-height: 1.2;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #page-room .video-stage .seat .seat-apply {
    font-size: 10px;
  }

  /* 侧栏：不占布局的透明覆盖层，仅消息与底栏可交互 */
  #page-room .room-sidebar {
    position: absolute;
    inset: 0;
    flex: none;
    padding: 0;
    margin: 0;
    background: transparent;
    pointer-events: none;
  }
  /* 消息：浮在主画面左下角，避开右侧小窗列，底部抬到操作栏上方；
     固定最近几条、贴底排列，新消息淡入、旧消息淡出，不再向上滚动遮挡 */
  #page-room .chat-area {
    position: absolute;
    left: 10px;
    right: calc(var(--seat-col-w) + 16px);
    bottom: calc(var(--bottom-h) + 8px);
    z-index: 5;
    max-height: 46%;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 6px;
    background: transparent;
    border: none;
    overflow: hidden;
    pointer-events: none;
    /* 顶部柔和渐隐，最旧消息自然淡出画面 */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 26%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 26%);
  }
  #page-room .chat-area::-webkit-scrollbar {
    display: none;
  }
  /* 底部操作栏：固定底部、可交互，顶部渐隐融入画面 */
  #page-room .bottom-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 7;
    margin: 0;
    pointer-events: auto;
    background: linear-gradient(180deg, rgba(10, 8, 22, 0) 0%, rgba(10, 8, 22, 0.72) 38%, rgba(10, 8, 22, 0.92) 100%);
  }
  /* 消息文字（浮层） */
  #page-room .chat-msg {
    align-self: flex-start;
    flex-shrink: 0;
    max-width: 100%;
    margin: 0;
    padding: 2px 0;
    background: transparent;
    border-radius: 0;
    color: #f3f0fb;
    font-size: 13px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  }
  #page-room .msg-system {
    background: transparent;
    color: #d8d3ec;
  }
  #page-room .msg-user {
    color: #c9b8ff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  }
  #page-room .msg-mine .msg-user {
    color: #f5c451;
  }
  /* 贵族消息：透明浮层改为带配置色的背景条（直角，无圆角） */
  #page-room .chat-msg.has-noble {
    padding: 3px 9px;
    border-radius: 0;
    background: var(--nb-bg, rgba(30, 20, 52, 0.55));
    border: 1px solid var(--nb-line, rgba(167, 139, 250, 0.3));
  }
  #page-room .has-noble .msg-nb {
    margin-right: 0;
    margin-left: 5px;
  }
}

/* ============================================================
   休息区垂直位置：按视口高度分档，给下方消息区腾空间
   ============================================================ */
/* 主流高屏：休息区明显上移，配合 8 条消息 */
@media (max-width: 768px) and (min-height: 720px) {
  #page-room .host-cover-inner {
    transform: translateY(-72px);
  }
}
/* 矮屏：休息区贴顶排列，给下方消息区留出空间、避免重叠 */
@media (max-width: 768px) and (max-height: 719px) {
  #page-room .host-cover {
    align-items: flex-start;
    padding-top: 12px;
  }
}

/* ============================================================
   响应式：手机端容器铺满设备宽度（不留两侧白边）
   ============================================================ */
@media (max-width: 768px) {
  .app-container {
    max-width: none;
  }
}

/* ============================================================
   响应式：房间页桌面端左右两栏
   ============================================================ */
@media (min-width: 769px) {
  #page-room.active {
    display: grid;
    grid-template-columns: 1fr 340px;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "header header"
      "seats sidebar";
    height: 100vh;
    min-height: 100vh;
    overflow: hidden;
  }
  .room-header {
    grid-area: header;
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
  }
  .seats-area {
    grid-area: seats;
    gap: 1.25rem;
    padding: 1.5rem;
    padding-left: 2rem;
    padding-right: 2rem;
    overflow-y: auto;
    min-height: 0;
  }
  .guest-seats {
    gap: 0.875rem;
  }
  .seat {
    border-radius: 1rem;
  }
  .seat-avatar-wrap {
    width: 56px;
    height: 56px;
  }
  .seat-avatar {
    font-size: 18px;
  }
  .seat.empty .seat-avatar {
    width: 46px;
    height: 46px;
  }
  .seat-name {
    font-size: 0.75rem;
    line-height: 1rem;
  }
  .seat-video {
    border-radius: 15px;
  }
  .host-seat {
    border-radius: 20px;
    max-height: 300px;
  }
  .host-avatar {
    height: 84px;
    width: 84px;
    font-size: 32px;
  }
  /* 方案4 固定小窗：桌面端宽屏适配 */
  .video-stage {
    gap: 14px;
  }
  .video-stage .host-seat {
    aspect-ratio: 16 / 10;
    max-height: none;
  }
  .video-stage .guest-seats {
    flex-basis: 110px;
    gap: 10px;
  }
  .video-stage .seat .seat-avatar-wrap {
    width: 56px;
    height: 56px;
  }
  .video-stage .seat .seat-frame {
    width: 72px;
    height: 72px;
  }
  .video-stage .seat .voice-wave {
    width: 72px;
    height: 72px;
  }
  .host-wave {
    width: 150px;
    height: 150px;
  }
  .room-sidebar {
    grid-area: sidebar;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.02);
    border-left: 1px solid rgba(255, 255, 255, 0.07);
  }
  .chat-area {
    margin: 1rem;
    margin-bottom: 0.75rem;
    flex: 1;
    min-height: 0;
    max-height: none;
  }
  .bottom-bar {
    padding: 1rem;
    flex-shrink: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    padding-bottom: 16px;
  }
}

/* ============================================================
   响应式：大厅桌面端 4 列
   ============================================================ */
@media (min-width: 769px) {
  .lobby-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 20px 16px;
  }
  .lobby-content {
    padding: 20px 20px 104px;
  }
  .lobby-top {
    padding-top: 16px;
  }
}

/* ===== 登录 / 注册面板（M1） ===== */
.auth-wrap { opacity: 0; transition: opacity 0.2s ease; }
.auth-wrap.open { opacity: 1; }
.auth-sheet {
  transform: translateY(28px);
  transition: transform 0.26s cubic-bezier(0.22, 0.9, 0.3, 1);
}
.auth-wrap.open .auth-sheet { transform: translateY(0); }

/* ===== 我的关注（虎牙风格） ===== */
.fw-search {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .06);
  margin-bottom: 14px;
}
.fw-search-ic { width: 18px; height: 18px; color: #9b95b8; display: flex; flex: none; }
.fw-search-ic svg { width: 18px; height: 18px; }
.fw-input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: #f1ecff; font-size: 14px; }
.fw-input::-moz-placeholder { color: #7d779c; }
.fw-input::placeholder { color: #7d779c; }

.fw-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.fw-tabs { display: flex; gap: 20px; }
.fw-tab {
  position: relative; border: 0; background: transparent; padding: 6px 0;
  color: #9b95b8; font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 4px;
}
.fw-tab.active { color: #f1ecff; font-weight: 700; }
.fw-tab.active::after {
  content: ''; position: absolute; left: 50%; transform: translateX(-50%);
  bottom: -2px; width: 22px; height: 3px; border-radius: 2px; background: #fbbf24;
}
.fw-sort { position: relative; }
.fw-sort-btn {
  border: 0; background: transparent; color: #c9c3e0; font-size: 13.5px;
  display: flex; align-items: center; gap: 3px; padding: 6px 2px;
}
.fw-caret { color: #9b95b8; font-size: 11px; }
.fw-sort-menu {
  position: absolute; right: 0; top: calc(100% + 2px); z-index: 5;
  background: #241c40; border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px;
  padding: 6px; min-width: 112px; box-shadow: 0 10px 28px rgba(0, 0, 0, .45);
}
.fw-sort-menu button {
  display: block; width: 100%; text-align: left; border: 0; background: transparent;
  color: #d8d2ee; font-size: 13.5px; padding: 8px 10px; border-radius: 8px;
}
.fw-sort-menu button:hover { background: rgba(167, 139, 250, .16); color: #fff; }

.fw-list { display: flex; flex-direction: column; }
.fw-row { display: flex; align-items: center; gap: 12px; padding: 14px 2px; }
.fw-avatar { position: relative; width: 48px; height: 48px; flex: none; }
.fw-avatar.is-live { border-radius: 50%; box-shadow: 0 0 0 2px rgba(167, 139, 250, .9), 0 0 14px rgba(139, 92, 246, .55); }
.fw-live-badge {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: -7px;
  background: linear-gradient(135deg, #f43f5e, #e11d48); color: #fff;
  font-size: 9px; font-weight: 800; letter-spacing: .5px;
  padding: 1px 6px; border-radius: 8px; line-height: 1.4; white-space: nowrap;
}
.fw-mid { flex: 1; min-width: 0; }
.fw-name { font-size: 15px; font-weight: 700; color: #f1ecff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fw-sub { font-size: 12px; color: #9b95b8; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fw-followed {
  flex: none; border: 0; cursor: pointer; padding: 8px 18px; border-radius: 999px;
  background: rgba(255, 255, 255, .12); color: #c9c3e0; font-size: 13px; font-weight: 600;
}
.fw-followed:disabled { opacity: .5; }
.fw-empty { text-align: center; color: #9b95b8; padding: 40px 0; font-size: 13.5px; }

/* ===================== 贵族盾标 ===================== */
.nb-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  color: var(--nb-color, #a78bfa);
  vertical-align: -2px;
}
.nb-badge .nb-shield-bg,
.nb-badge .nb-badge-img {
  width: 100%;
  height: 100%;
}
.nb-badge .nb-badge-img { -o-object-fit: contain; object-fit: contain; }
.nb-badge-grace { opacity: .65; }
/* 麦位头像角标内的盾标，排在等级六边形左侧 */
.seat-avatar-wrap .nb-badge {
  position: absolute;
  right: 11px;
  bottom: -4px;
  width: 19px;
  height: 19px;
}

/* ===================== 贵族中心 ===================== */
.nc-mask {
  position: fixed; inset: 0; z-index: 95;
  background: rgba(7, 4, 16, .62);
  backdrop-filter: blur(4px);
  display: flex; align-items: flex-end; justify-content: center;
}
.nc-sheet {
  width: 100%; max-width: 480px;
  background: #17112f;
  border-radius: 20px 20px 0 0;
  border: 1px solid rgba(255, 255, 255, .1);
  max-height: 88vh;
  display: flex; flex-direction: column;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, .5);
}
.nc-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.nc-title { font-weight: 700; font-size: 16px; color: #f1ecff; }
.nc-x { border: 0; background: transparent; color: #9b95b8; font-size: 16px; cursor: pointer; padding: 4px; }
.nc-body { overflow-y: auto; padding: 14px 16px 24px; }
.nc-loading { text-align: center; color: #9b95b8; padding: 30px 0; font-size: 14px; }
.nc-msg {
  background: rgba(167, 139, 250, .16);
  border: 1px solid rgba(167, 139, 250, .35);
  color: #d9ccff; font-size: 13px;
  padding: 9px 12px; border-radius: 10px; margin-bottom: 12px;
}
.nc-balance { font-size: 13px; color: #9b95b8; margin-bottom: 12px; }
.nc-balance b { color: #fbbf24; font-size: 15px; font-weight: 800; }

.nc-my {
  background: linear-gradient(135deg, rgba(124, 58, 237, .35), rgba(167, 139, 250, .12));
  border: 1px solid rgba(167, 139, 250, .3);
  border-radius: 14px; padding: 14px; margin-bottom: 16px;
}
.nc-my-top { display: flex; align-items: center; gap: 12px; }
.nc-my-icon { width: 34px; height: 34px; -o-object-fit: contain; object-fit: contain; }
.nc-my-info { flex: 1; min-width: 0; }
.nc-my-name { font-size: 15px; font-weight: 700; color: #f1ecff; display: flex; align-items: center; gap: 8px; }
.nc-my-sub { font-size: 12px; color: #c9c3e0; margin-top: 3px; }
.nc-state { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; }
.nc-state-active { background: rgba(16, 185, 129, .2); color: #34d399; }
.nc-state-grace { background: rgba(251, 191, 36, .2); color: #fbbf24; }
.nc-grace-tip { font-size: 12px; color: #fbbf24; margin-top: 10px; line-height: 1.5; }

.nc-list { display: flex; flex-direction: column; gap: 12px; }
.nc-tier {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 14px; padding: 14px;
}
.nc-tier-cur { border-color: rgba(167, 139, 250, .55); background: rgba(167, 139, 250, .1); }
.nc-tier-head { display: flex; align-items: center; gap: 12px; }
.nc-tier-icon-wrap { flex: none; }
.nc-tier-icon { width: 40px; height: 40px; -o-object-fit: contain; object-fit: contain; }
.nc-tier-meta { flex: 1; min-width: 0; }
.nc-tier-name { font-size: 15px; font-weight: 700; color: #f1ecff; }
.nc-tier-priv { font-size: 12px; color: #9b95b8; margin-top: 3px; line-height: 1.4; }
.nc-prices { display: flex; gap: 16px; font-size: 12.5px; color: #9b95b8; margin: 12px 0; }
.nc-prices b { color: #fbbf24; font-weight: 800; }

.nc-action {
  width: 100%; border: 0; cursor: pointer;
  height: 40px; border-radius: 10px;
  background: linear-gradient(135deg, #7c3aed, #a78bfa);
  color: #fff; font-size: 14px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.nc-action-cur { background: rgba(255, 255, 255, .12); color: #d9ccff; }
.nc-action-price { font-weight: 800; }
.nc-confirm-amount { font-size: 13px; color: #d9ccff; margin-bottom: 10px; }
.nc-confirm-amount b { color: #fbbf24; font-size: 16px; }
.nc-confirm-btns { display: flex; gap: 10px; }
.nc-cancel, .nc-confirm-btn {
  flex: 1; height: 38px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; border: 0;
}
.nc-cancel { background: rgba(255, 255, 255, .1); color: #c9c3e0; }
.nc-confirm-btn { background: linear-gradient(135deg, #7c3aed, #a78bfa); color: #fff; }
.nc-confirm-btn:disabled { opacity: .45; cursor: not-allowed; }
.nc-foot { text-align: center; font-size: 11.5px; color: #6f6a8a; margin-top: 18px; line-height: 1.6; }

/* ============ 坐骑中心 ============ */
.mt-section { font-size: 13px; font-weight: 700; color: #c4b5fd; margin: 16px 0 10px; }
.mt-list { display: flex; flex-direction: column; gap: 10px; }
.mt-empty {
  font-size: 12.5px; color: #8b85a8; text-align: center;
  padding: 22px 12px; border: 1px dashed rgba(167, 139, 250, .25); border-radius: 12px;
}
.mt-card {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 14px;
  background: rgba(255, 255, 255, .05); border: 1px solid transparent;
}
.mt-card-on { border-color: rgba(167, 139, 250, .55); background: rgba(139, 92, 246, .14); }
.mt-icon {
  width: 48px; height: 48px; flex: 0 0 48px; -o-object-fit: contain; object-fit: contain;
  border-radius: 10px; background: rgba(255, 255, 255, .05);
}
.mt-sprite { position: relative; display: flex; align-items: center; justify-content: center; }
.mt-icon-ph { display: flex; align-items: center; justify-content: center; font-size: 24px; }
.mt-meta { flex: 1; min-width: 0; }
.mt-name { font-size: 14px; font-weight: 700; color: #f1ecff; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mt-sub { font-size: 11.5px; color: #8b85a8; margin-top: 3px; }
.mt-tag {
  font-size: 10px; font-weight: 600; color: #a78bfa;
  background: rgba(139, 92, 246, .18); border-radius: 6px; padding: 1px 6px;
}
.mt-tag-on { color: #fde68a; background: rgba(245, 158, 11, .18); }
.mt-btn {
  flex: 0 0 auto; border: 0; cursor: pointer; border-radius: 10px;
  padding: 8px 14px; font-size: 12.5px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 3px;
}
.mt-btn:disabled { opacity: .5; cursor: not-allowed; }
.mt-btn-primary { background: linear-gradient(135deg, #7c3aed, #a78bfa); color: #fff; }
.mt-btn-ghost { background: rgba(255, 255, 255, .08); color: #c4b5fd; }
.mt-btn-buy { background: linear-gradient(135deg, #d97706, #fbbf24); color: #2a1c05; }

/* ============ 房主房间设置弹窗 ============ */
.rs-modal-wrap { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.rs-modal-mask { position: absolute; inset: 0; background: rgba(7, 4, 16, .62); backdrop-filter: blur(4px); opacity: 0; transition: opacity .2s ease; }
.rs-modal-wrap.open .rs-modal-mask { opacity: 1; }
.rs-modal { position: relative; width: 100%; max-width: 360px; background: #1b1430; border: 1px solid rgba(167, 139, 250, .25); border-radius: 18px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5); transform: scale(.92); opacity: 0; transition: all .2s ease; overflow: hidden; }
.rs-modal-wrap.open .rs-modal { transform: scale(1); opacity: 1; }
.rs-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 10px; }
.rs-modal-title { font-size: 16px; font-weight: 700; color: #fff; }
.rs-modal-close { background: transparent; border: 0; color: #9b94b8; cursor: pointer; display: inline-flex; }
.rs-modal-close svg { width: 18px; height: 18px; }
.rs-modal-body { padding: 6px 18px 4px; }
.rs-field { display: block; margin-bottom: 14px; }
.rs-label { display: block; font-size: 12.5px; font-weight: 600; color: #c4b5fd; margin-bottom: 6px; }
.rs-input { width: 100%; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); border-radius: 10px; padding: 10px 12px; font-size: 13.5px; color: #f1edff; outline: none; transition: border-color .15s; box-sizing: border-box; }
.rs-input:focus { border-color: #8b5cf6; }
.rs-input::-moz-placeholder { color: #6f6a8a; }
.rs-input::placeholder { color: #6f6a8a; }
.rs-textarea { resize: none; font-family: inherit; line-height: 1.5; }
.rs-hint { display: block; margin-top: 5px; font-size: 11px; color: #8a84a8; }
.rs-modal-foot { display: flex; gap: 10px; padding: 12px 18px 18px; }
.rs-btn { flex: 1; height: 40px; border-radius: 11px; font-size: 14px; font-weight: 600; cursor: pointer; border: 0; transition: filter .15s, transform .1s; }
.rs-btn:active { transform: scale(.97); }
.rs-btn-ghost { background: rgba(255, 255, 255, .08); color: #c9c3e0; }
.rs-btn-primary { background: linear-gradient(135deg, #7c3aed, #a78bfa); color: #fff; }
.rs-btn-primary:disabled { opacity: .55; cursor: not-allowed; }

/* ===================== 选择连麦方式（图一） ===================== */
.lk-modal { max-width: 360px; }
.lk-options { display: flex; flex-direction: column; gap: 12px; padding: 4px 0 8px; }
.lk-card {
  position: relative; display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left; cursor: pointer;
  background: rgba(255, 255, 255, .04);
  border: 1.5px solid rgba(255, 255, 255, .1);
  border-radius: 14px; padding: 14px;
  transition: border-color .15s, background .15s;
}
.lk-card.selected {
  border-color: #8b5cf6;
  background: rgba(139, 92, 246, .14);
}
.lk-ic {
  flex: none; width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(124, 58, 237, .35), rgba(167, 139, 250, .18));
  color: #c4b5fd;
}
.lk-ic svg { width: 22px; height: 22px; }
.lk-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.lk-name { font-size: 15px; font-weight: 700; color: #f1ecff; }
.lk-desc { font-size: 12px; color: #9b95b8; }
.lk-check {
  flex: none; width: 20px; height: 20px; color: #8b5cf6;
  opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s;
}
.lk-card.selected .lk-check { opacity: 1; transform: scale(1); }
.lk-check svg { width: 100%; height: 100%; }

/* ===================== 设备选择（图二/五） ===================== */
.dv-modal { max-width: 360px; }
.dv-body { padding-top: 8px; }

/* 视频预览 */
.dv-preview {
  position: relative; width: 100%; height: 180px;
  border-radius: 14px; overflow: hidden;
  background: #120d24; margin-bottom: 16px;
  border: 1px solid rgba(255, 255, 255, .08);
}
.dv-preview-video { position: absolute; inset: 0; }
.dv-preview-video video { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; }
.dv-preview-video video.mirrored { transform: scaleX(-1); }
.dv-preview-status {
  position: absolute; left: 10px; top: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(0, 0, 0, .45); backdrop-filter: blur(4px);
  color: #e7e3f5; font-size: 11.5px; font-weight: 600;
  padding: 4px 9px; border-radius: 999px;
}
.dv-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 6px rgba(34, 197, 94, .8); }
.dv-flip {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  width: 36px; height: 36px; border-radius: 10px; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20, 15, 40, .6); backdrop-filter: blur(4px);
  color: #e7e3f5;
  transition: background .18s ease, transform .12s ease;
}
.dv-flip.active { background: #8b5cf6; color: #fff; }
.dv-flip:active { transform: scale(.92); }
.dv-flip svg { width: 18px; height: 18px; }
.dv-preview-err {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 16px; text-align: center; color: #f0a8b0; font-size: 12.5px; line-height: 1.5;
  background: rgba(40, 20, 30, .55);
}
.dv-preview-err[hidden] { display: none; }

/* 摄像头启动加载态 */
.dv-preview-loading {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 11px; background: #120d24;
  color: #c4b5fd; font-size: 12.5px; font-weight: 500;
}
.dv-preview-loading[hidden] { display: none; }
.dv-spinner {
  width: 27px; height: 27px; border-radius: 50%;
  border: 2.5px solid rgba(139, 92, 246, .25);
  border-top-color: #8b5cf6;
  animation: dv-spin .8s linear infinite;
}
.dv-loading-text { letter-spacing: .2px; }
@keyframes dv-spin { to { transform: rotate(360deg); } }

/* 字段 + 自定义下拉 */
.dv-field { margin-bottom: 14px; }
.dv-label { display: block; font-size: 12.5px; font-weight: 600; color: #c4b5fd; margin-bottom: 7px; }
.dv-select {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; cursor: pointer; box-sizing: border-box;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 11px; padding: 11px 13px;
  color: #f1edff; font-size: 13.5px;
  transition: border-color .15s;
}
.dv-select:hover { border-color: rgba(139, 92, 246, .6); }
.dv-select:disabled { opacity: .55; cursor: not-allowed; }
.dv-select-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dv-caret { flex: none; color: #9b95b8; display: inline-flex; transition: transform .15s; }
.dv-caret svg { width: 16px; height: 16px; }

/* 下拉面板（fixed 挂 body，JS 定位，避免被卡片裁剪） */
.dv-menu {
  display: none; position: fixed; z-index: 1100;
  background: #241c40; border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px; padding: 6px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .5);
  max-height: 240px; overflow-y: auto; box-sizing: border-box;
}
.dv-menu.open { display: block; }
.dv-option {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; border: 0; cursor: pointer; text-align: left;
  background: transparent; color: #d8d2ee;
  font-size: 13.5px; padding: 9px 10px; border-radius: 8px;
}
.dv-option:hover { background: rgba(167, 139, 250, .16); color: #fff; }
.dv-option.selected { color: #c4b5fd; }
.dv-option-label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dv-option-tick { flex: none; width: 16px; height: 16px; color: #a78bfa; display: none; }
.dv-option.selected .dv-option-tick { display: inline-flex; }
.dv-option-tick svg { width: 100%; height: 100%; }
.first\:border-0:first-child {
  border-width: 0px;
}
.last\:border-0:last-child {
  border-width: 0px;
}
.checked\:bg-emerald-500:checked {
  --tw-bg-opacity: 1;
  background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1));
}
.checked\:bg-violet-600:checked {
  --tw-bg-opacity: 1;
  background-color: rgb(124 58 237 / var(--tw-bg-opacity, 1));
}
.hover\:rotate-90:hover {
  --tw-rotate: 90deg;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.hover\:border-rose-400:hover {
  --tw-border-opacity: 1;
  border-color: rgb(251 113 133 / var(--tw-border-opacity, 1));
}
.hover\:border-slate-400:hover {
  --tw-border-opacity: 1;
  border-color: rgb(148 163 184 / var(--tw-border-opacity, 1));
}
.hover\:border-violet-300:hover {
  --tw-border-opacity: 1;
  border-color: rgb(196 181 253 / var(--tw-border-opacity, 1));
}
.hover\:border-violet-400:hover {
  --tw-border-opacity: 1;
  border-color: rgb(167 139 250 / var(--tw-border-opacity, 1));
}
.hover\:border-violet-500:hover {
  --tw-border-opacity: 1;
  border-color: rgb(139 92 246 / var(--tw-border-opacity, 1));
}
.hover\:bg-amber-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
}
.hover\:bg-amber-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(217 119 6 / var(--tw-bg-opacity, 1));
}
.hover\:bg-black\/70:hover {
  background-color: rgb(0 0 0 / 0.7);
}
.hover\:bg-blue-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(239 246 255 / var(--tw-bg-opacity, 1));
}
.hover\:bg-blue-600:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
}
.hover\:bg-emerald-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(4 120 87 / var(--tw-bg-opacity, 1));
}
.hover\:bg-rose-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(255 241 242 / var(--tw-bg-opacity, 1));
}
.hover\:bg-rose-500:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(244 63 94 / var(--tw-bg-opacity, 1));
}
.hover\:bg-rose-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(190 18 60 / var(--tw-bg-opacity, 1));
}
.hover\:bg-sky-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(3 105 161 / var(--tw-bg-opacity, 1));
}
.hover\:bg-slate-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
}
.hover\:bg-slate-200:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
}
.hover\:bg-slate-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1));
}
.hover\:bg-slate-50\/60:hover {
  background-color: rgb(248 250 252 / 0.6);
}
.hover\:bg-slate-50\/80:hover {
  background-color: rgb(248 250 252 / 0.8);
}
.hover\:bg-violet-100:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(237 233 254 / var(--tw-bg-opacity, 1));
}
.hover\:bg-violet-50:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(245 243 255 / var(--tw-bg-opacity, 1));
}
.hover\:bg-violet-700:hover {
  --tw-bg-opacity: 1;
  background-color: rgb(109 40 217 / var(--tw-bg-opacity, 1));
}
.hover\:bg-white\/10:hover {
  background-color: rgb(255 255 255 / 0.1);
}
.hover\:text-red-500:hover {
  --tw-text-opacity: 1;
  color: rgb(239 68 68 / var(--tw-text-opacity, 1));
}
.hover\:text-slate-600:hover {
  --tw-text-opacity: 1;
  color: rgb(71 85 105 / var(--tw-text-opacity, 1));
}
.hover\:text-violet-600:hover {
  --tw-text-opacity: 1;
  color: rgb(124 58 237 / var(--tw-text-opacity, 1));
}
.hover\:text-violet-700:hover {
  --tw-text-opacity: 1;
  color: rgb(109 40 217 / var(--tw-text-opacity, 1));
}
.hover\:text-white:hover {
  --tw-text-opacity: 1;
  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.hover\:underline:hover {
  text-decoration-line: underline;
}
.hover\:shadow-lg:hover {
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.focus\:border-amber-400:focus {
  --tw-border-opacity: 1;
  border-color: rgb(251 191 36 / var(--tw-border-opacity, 1));
}
.focus\:border-rose-400:focus {
  --tw-border-opacity: 1;
  border-color: rgb(251 113 133 / var(--tw-border-opacity, 1));
}
.focus\:border-violet-400:focus {
  --tw-border-opacity: 1;
  border-color: rgb(167 139 250 / var(--tw-border-opacity, 1));
}
.focus\:border-violet-500:focus {
  --tw-border-opacity: 1;
  border-color: rgb(139 92 246 / var(--tw-border-opacity, 1));
}
.focus\:outline-none:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}
.focus\:ring-2:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.focus\:ring-violet-100:focus {
  --tw-ring-opacity: 1;
  --tw-ring-color: rgb(237 233 254 / var(--tw-ring-opacity, 1));
}
.active\:scale-90:active {
  --tw-scale-x: .9;
  --tw-scale-y: .9;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.active\:scale-95:active {
  --tw-scale-x: .95;
  --tw-scale-y: .95;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.active\:scale-\[0\.97\]:active {
  --tw-scale-x: 0.97;
  --tw-scale-y: 0.97;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.active\:scale-\[0\.98\]:active {
  --tw-scale-x: 0.98;
  --tw-scale-y: 0.98;
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.disabled\:text-white\/30:disabled {
  color: rgb(255 255 255 / 0.3);
}
.disabled\:opacity-40:disabled {
  opacity: 0.4;
}
.disabled\:opacity-50:disabled {
  opacity: 0.5;
}
.group:hover .group-hover\:pointer-events-auto {
  pointer-events: auto;
}
.group:hover .group-hover\:bg-slate-900\/45 {
  background-color: rgb(15 23 42 / 0.45);
}
.group:hover .group-hover\:opacity-100 {
  opacity: 1;
}
@media (min-width: 640px) {

  .sm\:hidden {
    display: none;
  }

  .sm\:w-80 {
    width: 20rem;
  }

  .sm\:max-w-md {
    max-width: 28rem;
  }

  .sm\:max-w-sm {
    max-width: 24rem;
  }

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

  .sm\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .sm\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .sm\:items-center {
    align-items: center;
  }

  .sm\:rounded-2xl {
    border-radius: 1rem;
  }

  .sm\:rounded-\[26px\] {
    border-radius: 26px;
  }

  .sm\:pt-6 {
    padding-top: 1.5rem;
  }
}
@media (min-width: 768px) {

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

  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .md\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (min-width: 1024px) {

  .lg\:col-span-1 {
    grid-column: span 1 / span 1;
  }

  .lg\:col-span-2 {
    grid-column: span 2 / span 2;
  }

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

  .lg\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .lg\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .lg\:grid-cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
@media (min-width: 1280px) {

  .xl\:inline {
    display: inline;
  }

  .xl\:grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .xl\:grid-cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
.\[\&\:\:-webkit-inner-spin-button\]\:appearance-none::-webkit-inner-spin-button {
  -webkit-appearance: none;
          appearance: none;
}
.\[\&\:\:-webkit-outer-spin-button\]\:appearance-none::-webkit-outer-spin-button {
  -webkit-appearance: none;
          appearance: none;
}
.\[\&\>option\]\:text-slate-800>option {
  --tw-text-opacity: 1;
  color: rgb(30 41 59 / var(--tw-text-opacity, 1));
}


/*# sourceMappingURL=66.65ced2fb.css.map*/