:root {
  color-scheme: dark;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
  --ink: #f7f2fb;
  --muted: #a99faf;
  --panel: rgba(25, 20, 31, 0.9);
  --line: rgba(255, 255, 255, 0.09);
  --rose: #f278a3;
  --rose-strong: #d95586;
  --gold: #edc98b;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 17% 8%, rgba(105, 44, 90, 0.24), transparent 34%),
    radial-gradient(circle at 88% 72%, rgba(45, 48, 106, 0.2), transparent 34%),
    #0c0a10;
}

button, input { font: inherit; }
button { color: inherit; }

.app-shell { width: min(1380px, 100%); margin: auto; padding: 24px; }
.topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; background: linear-gradient(145deg, #ff95bb, #ba3b70); box-shadow: 0 12px 30px rgba(217,85,134,.25); font-family: serif; }
.brand strong { display: block; font-size: 18px; letter-spacing: .08em; }
.brand small { display: block; color: var(--muted); font-size: 10px; letter-spacing: .13em; margin-top: 3px; }
.wallet { display: grid; grid-template-columns: auto auto; column-gap: 7px; align-items: center; padding: 9px 14px; border: 1px solid var(--line); border-radius: 15px; background: rgba(255,255,255,.045); }
.wallet > span { grid-row: 1 / 3; color: var(--gold); font-size: 22px; }
.wallet strong { line-height: 1; }
.wallet small { color: var(--muted); font-size: 10px; }
.wallet.free-wallet { margin-left: 8px; }
.wallet.free-wallet > span { font-size: 18px; }
.wallet.free-wallet strong { color: #8ce0b0; }
.mobile-free { display: inline-block; margin-left: 6px; padding: 4px 9px; border-radius: 999px; background: rgba(140,224,176,.15); color: #8ce0b0; font-size: 11px; font-weight: 600; }
.intimacy-pill { display: inline-block; margin-top: 7px; padding: 3px 10px; border-radius: 999px; background: linear-gradient(90deg, rgba(255,95,126,.2), rgba(196,77,255,.2)); border: 1px solid rgba(255,120,160,.35); color: #ffb1c4; font-size: 11px; }

/* ===== 直播式打赏特效 ===== */
.gift-fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 28; }
.fx-particle { position: absolute; bottom: -70px; will-change: transform, opacity; filter: drop-shadow(0 0 6px rgba(255,120,180,.6)); animation: fxRise linear forwards; }
@keyframes fxRise {
  0% { transform: translateY(0) scale(.5) rotate(0deg); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translateY(-108vh) scale(1.15) rotate(24deg); opacity: 0; }
}
.fx-gift-big { position: absolute; left: 50%; top: 34%; transform: translateX(-50%) scale(0); animation: fxPop .9s cubic-bezier(.2,1.4,.4,1) forwards; filter: drop-shadow(0 6px 18px rgba(255,80,140,.55)); }
@keyframes fxPop {
  0% { transform: translateX(-50%) scale(0) rotate(-12deg); opacity: 0; }
  34% { transform: translateX(-50%) scale(1.35) rotate(4deg); opacity: 1; }
  60% { transform: translateX(-50%) scale(1) rotate(0deg); }
  100% { transform: translateX(-50%) scale(1) rotate(0deg); opacity: 1; }
}
.fx-banner { position: absolute; top: 10%; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 999px; background: linear-gradient(90deg, rgba(255,95,126,.92), rgba(196,77,255,.92)); color: #fff; font-size: 15px; font-weight: 700; box-shadow: 0 8px 26px rgba(255,60,130,.45); animation: fxBanner .3s ease forwards; white-space: nowrap; }
.fx-banner span { font-size: 20px; }
@keyframes fxBanner { 0% { transform: translateX(-50%) translateY(-18px) scale(.7); opacity: 0; } 100% { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; } }
.fx-shine { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: fxShine linear forwards; }
@keyframes fxShine {
  0% { transform: scale(0); opacity: 0; }
  30% { transform: scale(1); opacity: 1; }
  100% { transform: scale(0); opacity: 0; }
}

.character-strip { display: flex; gap: 9px; overflow-x: auto; padding: 4px 2px 15px; scrollbar-width: none; }
.character-strip::-webkit-scrollbar { display: none; }
.character-card { flex: 0 0 78px; display: grid; place-items: center; gap: 4px; padding: 8px 7px; border: 1px solid transparent; border-radius: 16px; background: transparent; cursor: pointer; opacity: .62; }
.character-card img, .character-card b { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; border: 2px solid rgba(255,255,255,.15); }
.character-card b { display: grid; place-items: center; background: linear-gradient(145deg, #3b3442, #18141e); font-weight: 500; }
.character-card span { font-size: 12px; }
.character-card small { font-size: 9px; color: var(--muted); }
.character-card.active { opacity: 1; border-color: rgba(242,120,163,.45); background: rgba(242,120,163,.08); }
.character-card.active img { border-color: var(--rose); box-shadow: 0 0 0 3px rgba(242,120,163,.12); }

.experience-grid { display: grid; grid-template-columns: minmax(520px, 1.45fr) minmax(360px, .55fr); gap: 18px; align-items: start; }
.stage-card, .control-card { border: 1px solid var(--line); border-radius: 24px; overflow: hidden; background: var(--panel); box-shadow: 0 24px 70px rgba(0,0,0,.34); }
.stage { position: relative; min-height: 0; aspect-ratio: 16 / 9; overflow: hidden; isolation: isolate; transition: background .45s ease; }
.bg-studio { background: linear-gradient(180deg, #ffffff 0%, #f8f6f7 67%, #d8d2d5 100%); }
.bg-apartment { background: linear-gradient(180deg, rgba(28,22,28,.04), rgba(25,16,23,.72)), linear-gradient(120deg, #bfa995 0 42%, #77675e 42% 45%, #cbbba9 45% 72%, #665a54 72%); }
.bg-gym { background: linear-gradient(180deg, rgba(13,22,27,.1), rgba(5,9,12,.7)), repeating-linear-gradient(90deg, #475158 0 4%, #222b31 4% 8%, #59646b 8% 12%); }
.bg-beach { background: linear-gradient(180deg, #75bad4 0 44%, #d5e4dc 44% 47%, #b8d7de 47% 63%, #d8bd8b 63% 100%); }
.bg-night { background: radial-gradient(circle at 80% 28%, #ffd9ae 0 1%, transparent 1.4%), linear-gradient(150deg, #152039 0 40%, #4c2945 67%, #16101b 100%); }
.stage::before { content: ""; position: absolute; inset: 8% 8% 0; border-radius: 45% 45% 0 0; background: linear-gradient(120deg, rgba(255,255,255,.14), transparent 55%); filter: blur(1px); z-index: -1; }
.ambient-glow { position: absolute; width: 70%; height: 40%; left: 15%; bottom: 6%; background: radial-gradient(ellipse, rgba(255,223,203,.3), transparent 68%); filter: blur(28px); }
.character-picture { position: absolute; z-index: 2; inset: 0; overflow: hidden; }
.character-figure { width: 100%; height: 100%; object-fit: cover; object-position: center; transform-origin: 50% 55%; animation: idle 5.8s ease-in-out infinite; }
.character-video { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #111; }
.character-video[hidden] { display: none; }
@keyframes idle { 0%,100% { transform: scale(1); } 50% { transform: scale(1.014) translateY(-3px); } }
@keyframes respond { 0% { transform: scale(1); } 35% { transform: scale(1.03) translateY(-6px); } 70% { transform: scale(.994) translateY(0); } 100% { transform: scale(1); } }
@keyframes waiting { 0%,100% { transform: scale(1.008) translateY(-2px); } 25% { transform: scale(1.024) translateY(-7px) rotate(.5deg); } 50% { transform: scale(1.008) translateY(-3px); } 75% { transform: scale(1.02) translateY(-6px) rotate(-.5deg); } }
.character-figure.respond { animation: respond .9s ease; }
.character-figure.waiting { animation: waiting 3.4s ease-in-out infinite; }
/* 生成等待期间的"平时日常"过渡：当前模特轻轻挥手→点头→呼吸，像平时陪着你 */
.character-figure.transition-idle { animation: transitionIdle 5s ease-in-out infinite; }
@keyframes transitionIdle {
  0%,100% { transform: scale(1.012) translateY(-2px); }
  10% { transform: scale(1.032) translateY(-7px) rotate(.55deg); }
  20% { transform: scale(1.02) translateY(-4px) rotate(.25deg); }
  30% { transform: scale(1.024) translateY(-6px) rotate(-.2deg); }
  42% { transform: scale(1.03) translateY(-8px) rotate(.4deg); }
  54% { transform: scale(1.016) translateY(-4px) rotate(-.3deg); }
  66% { transform: scale(1.026) translateY(-7px) rotate(.2deg); }
  80% { transform: scale(1.014) translateY(-3px) rotate(-.1deg); }
}
.character-figure.action-wave { animation: wave .7s ease-in-out 3; }
.character-figure.action-approach, .character-figure.action-kiss, .character-figure.action-whisper { animation: approach 2.5s ease-in-out; }
.character-figure.action-dance { animation: dance .55s ease-in-out 5 alternate; }
.character-figure.action-hug { animation: hug 2.3s ease-in-out; }
.character-figure.status-thinking { animation: thinking 1.6s ease-in-out infinite; }
.character-figure.action-boundary { animation: boundary 1.1s ease-in-out 2; }
.character-figure.action-open-palm { animation: open-palm 1.3s ease-in-out 2; }
.character-figure.action-change { animation: change 1.4s ease-in-out 2; }
@keyframes wave { from { transform: scale(1.01) rotate(-.25deg); } to { transform: scale(1.018) rotate(.25deg) translateY(-2px); } }
@keyframes approach { 0%,100% { transform: scale(1); } 55% { transform: scale(1.11) translateY(5px); } }
@keyframes dance { from { transform: scale(1.02) rotate(-.45deg) translateX(-3px); } to { transform: scale(1.02) rotate(.45deg) translateX(3px); } }
@keyframes hug { 0%,100% { transform: scale(1); } 55% { transform: scale(1.12) translateY(5px); filter: blur(.15px); } }
@keyframes thinking { 0%,100% { transform: scale(1); } 50% { transform: scale(1.008) rotate(-.15deg) translateY(-2px); } }
@keyframes boundary { 0%,100% { transform: scale(1); } 30% { transform: scale(1.01) translateX(-3px); } 70% { transform: scale(1.01) translateX(3px); } }
@keyframes open-palm { 0%,100% { transform: scale(1); } 50% { transform: scale(1.025) translateY(-3px); } }
@keyframes change { 0%,100% { transform: scale(1) rotateY(0); opacity: 1; } 48% { transform: scale(1.03) rotateY(10deg); opacity: .82; } 55% { transform: scale(1.03) rotateY(-10deg); opacity: .82; } }
.stage-topline { position: absolute; z-index: 5; top: 18px; left: 18px; right: 18px; display: flex; justify-content: space-between; }
.live-pill, .latency-pill { padding: 7px 10px; border-radius: 999px; font-size: 10px; letter-spacing: .08em; backdrop-filter: blur(12px); background: rgba(12,9,14,.53); border: 1px solid rgba(255,255,255,.12); }
.live-pill i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: #ff4e7c; box-shadow: 0 0 10px #ff4e7c; }
.latency-pill { color: #ded4e1; }
.latency-pill:empty { display: none; }
.speech-bubble { position: absolute; z-index: 5; top: 19%; right: 5%; max-width: 230px; padding: 13px 15px; border-radius: 18px 18px 4px 18px; color: #2a2029; background: rgba(255,255,255,.91); font-size: 13px; line-height: 1.6; box-shadow: 0 15px 35px rgba(0,0,0,.16); transition: opacity .25s; display: none; }
.generation-status { position: absolute; z-index: 8; left: 50%; top: 50%; transform: translate(-50%,-50%); display: flex; gap: 12px; align-items: center; min-width: 240px; padding: 16px 18px; border-radius: 18px; background: rgba(18,13,20,.84); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.13); }
.generation-status[hidden] { display: none; }
.generation-status strong, .generation-status small { display: block; }
.generation-status strong { font-size: 13px; }
.generation-status small { color: var(--muted); font-size: 10px; margin-top: 3px; }
.spinner { width: 25px; height: 25px; border-radius: 50%; border: 2px solid rgba(255,255,255,.18); border-top-color: var(--rose); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.stage-gradient { position: absolute; z-index: 3; inset: auto 0 0; height: 37%; background: linear-gradient(transparent, rgba(9,7,11,.94)); pointer-events: none; }
.profile-overlay { position: absolute; z-index: 5; left: 24px; right: 24px; bottom: 20px; display: flex; justify-content: space-between; align-items: end; }
.profile-overlay h1 { margin: 0; font-size: 25px; }
.profile-overlay h1 span { display: inline-block; padding: 2px 7px; border-radius: 999px; color: var(--gold); border: 1px solid rgba(237,201,139,.42); font-size: 10px; vertical-align: middle; }
.profile-overlay p { margin: 7px 0 0; color: #c8beca; font-size: 12px; }
.icon-button { width: 39px; height: 39px; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; background: rgba(255,255,255,.08); cursor: pointer; }
.relationship-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px; padding: 16px 20px; }
.relationship-copy { display: flex; align-items: baseline; gap: 7px; }
.relationship-copy span, .relationship-row > small { color: var(--muted); font-size: 11px; }
.relationship-copy strong { color: #ff92b8; }
.relationship-track { height: 5px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.09); }
.relationship-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #d95685, #ffa2c1); transition: width .4s ease; }

.control-card { display: flex; flex-direction: column; min-height: 580px; }
.control-tabs { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--line); }
.control-tabs button { position: relative; padding: 18px 5px 14px; border: 0; color: var(--muted); background: transparent; cursor: pointer; font-size: 12px; }
.control-tabs button.active { color: #fff; }
.control-tabs button.active::after { content: ""; position: absolute; left: 31%; right: 31%; bottom: 0; height: 2px; border-radius: 2px; background: var(--rose); }
.tab-panel { display: none; padding: 16px 16px 12px; }
.tab-panel.active { display: block; }
.panel-hint { color: var(--muted); font-size: 10px; margin: 0 0 12px; }
.action-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.action-chip { position: relative; display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 7px; min-height: 52px; padding: 8px 10px; border-radius: 13px; border: 1px solid var(--line); background: rgba(255,255,255,.035); text-align: left; font-size: 11px; cursor: pointer; transition: transform .18s, border-color .18s, background .18s; }
.action-chip:hover { transform: translateY(-1px); border-color: rgba(242,120,163,.4); background: rgba(242,120,163,.07); }
.action-chip > span { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 9px; color: #ffc0d6; background: rgba(242,120,163,.12); }
.action-chip small { color: var(--muted); font-size: 9px; }
.action-chip.premium small { color: var(--gold); }
.scene-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.scene-chip { display: grid; gap: 6px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.035); cursor: pointer; text-align: center; font-size: 10px; }
.scene-chip.active { border-color: var(--rose); }
.scene-chip i { display: grid; place-items: center; height: 49px; border-radius: 8px; font-style: normal; font-size: 20px; }
.scene-chip input { display: none; }
.mini.studio { background: linear-gradient(#fff,#ddd8da); }
.mini.apartment { background: linear-gradient(135deg,#cab69f,#67574f); }
.mini.gym { background: repeating-linear-gradient(90deg,#303a3f 0 8px,#5d686f 8px 14px); }
.mini.beach { background: linear-gradient(#79bfd6 0 50%,#d7c08d 50%); }
.mini.night { background: linear-gradient(145deg,#182947,#71304e); }
.scene-chip.upload i { background: rgba(255,255,255,.05); }
.chat-log { flex: 1; min-height: 210px; max-height: 290px; overflow-y: auto; margin: 4px 16px 12px; padding: 12px; border-top: 1px solid var(--line); scrollbar-width: thin; }
.message { max-width: 84%; margin: 0 0 12px; }
.message small { display: block; color: var(--muted); font-size: 9px; margin-bottom: 4px; }
.message p { display: inline-block; margin: 0; padding: 9px 11px; border-radius: 12px; font-size: 12px; line-height: 1.55; background: rgba(255,255,255,.065); }
.message.me { margin-left: auto; text-align: right; }
.message.me p { color: #fff; background: linear-gradient(145deg,#d75d8b,#a83c67); }
.composer { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; margin: 0 16px; padding: 7px; border-radius: 15px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.045); }
.composer input { min-width: 0; border: 0; outline: 0; color: #fff; background: transparent; font-size: 12px; }
.composer input::placeholder { color: #7d737f; }
.mic-button, .send-button { border: 0; cursor: pointer; }
.mic-button { width: 34px; border-radius: 11px; color: #f7a9c4; background: rgba(242,120,163,.12); }
.mic-button.listening { color: white; background: #d94f82; animation: pulse .8s infinite alternate; }
@keyframes pulse { to { box-shadow: 0 0 0 5px rgba(217,79,130,.16); } }
.send-button { padding: 0 15px; border-radius: 10px; background: linear-gradient(145deg,#e16b99,#b63e6e); }
.prototype-note { margin: 8px 0 12px; color: #776f79; text-align: center; font-size: 9px; }
.modal-backdrop { position: fixed; z-index: 40; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(4,3,5,.72); backdrop-filter: blur(10px); }
.modal-backdrop[hidden] { display: none; }
.unlock-modal { position: relative; width: min(360px,100%); padding: 30px; border: 1px solid rgba(255,255,255,.12); border-radius: 24px; background: #19141e; box-shadow: 0 30px 90px rgba(0,0,0,.55); text-align: center; }
.modal-close { position: absolute; top: 12px; right: 12px; border: 0; background: transparent; color: var(--muted); font-size: 25px; cursor: pointer; }
.modal-icon { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 14px; border-radius: 16px; color: var(--gold); background: rgba(237,201,139,.1); font-size: 25px; }
.unlock-modal h2 { margin: 0 0 8px; font-size: 20px; }
.unlock-modal p { color: var(--muted); font-size: 12px; line-height: 1.6; }
.cost-row { display: flex; justify-content: space-between; margin: 20px 0; padding: 13px; border-radius: 12px; background: rgba(255,255,255,.045); font-size: 12px; }
.cost-row strong { color: var(--gold); }
.confirm-button { width: 100%; padding: 12px; border: 0; border-radius: 12px; background: linear-gradient(145deg,#e16b99,#b63e6e); cursor: pointer; }
.unlock-modal > small { display: block; margin-top: 10px; color: #746b77; }

/* ===== 手机号注册 ===== */
.auth-modal input { width: 100%; box-sizing: border-box; margin-top: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: #fff; font-size: 15px; outline: none; }
.auth-modal input::placeholder { color: #7d7388; }
.auth-modal input:focus { border-color: rgba(255,120,160,.6); }
.auth-row { display: flex; gap: 8px; margin-top: 12px; }
.auth-row input { margin-top: 0; flex: 1; min-width: 0; }
.auth-row .auth-send { width: auto; flex: 0 0 118px; padding: 0 10px; font-size: 13px; background: rgba(255,255,255,.12); }
.auth-row .auth-send:disabled { opacity: .55; }
.auth-modal .confirm-button { margin-top: 16px; }
.auth-hint { color: #7d7388; font-size: 12px; }
.auth-hint.dev { color: #8ce0b0; }
.auth-banner { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; padding: 13px 15px; border-radius: 14px; background: linear-gradient(120deg, rgba(255,95,126,.18), rgba(196,77,255,.18)); border: 1px solid rgba(255,120,160,.35); }
.auth-banner strong { display: block; font-size: 15px; color: #ffb1c4; }
.auth-banner small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; }
.auth-banner-btn { flex: 0 0 auto; padding: 8px 16px; border: 0; border-radius: 999px; background: linear-gradient(145deg,#ff5f7e,#c44dff); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; }
.toast { position: fixed; z-index: 60; left: 50%; bottom: 28px; transform: translateX(-50%); padding: 10px 16px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; background: rgba(20,15,23,.92); box-shadow: 0 15px 35px rgba(0,0,0,.28); font-size: 11px; }
.toast[hidden] { display: none; }

@media (max-width: 900px) {
  .app-shell { padding: 14px; }
  .experience-grid { grid-template-columns: 1fr; }
  .stage { min-height: 0; aspect-ratio: 9 / 16; }
  .control-card { min-height: 650px; }
}

@media (max-width: 520px) {
  .app-shell { padding: 10px; }
  .stage-card, .control-card { border-radius: 20px; }
  .stage { min-height: 0; aspect-ratio: 9 / 16; }
  .speech-bubble { top: 14%; max-width: 190px; }
  .character-figure { width: 100%; height: 100%; }
  .action-grid { grid-template-columns: 1fr 1fr; }
  .profile-overlay { left: 16px; right: 16px; }
}

/* ===== 移动端抖音式沉浸直播界面 ===== */
@media (max-width: 900px) {
  body { background: #000; }
  .app-shell { padding: 0; width: 100%; }
  .topbar, .character-strip, .relationship-row, .chat-log, .control-card, .prototype-note, .profile-overlay p, #soundButton { display: none !important; }
  .experience-grid { display: block; }
  .stage-card { border: 0; border-radius: 0; background: #000; box-shadow: none; }
  .stage { width: 100%; height: 100dvh; aspect-ratio: auto; }
  .stage-topline { top: calc(12px + env(safe-area-inset-top)); left: 12px; right: 12px; }
  .stage-top-right { display: flex; align-items: center; gap: 8px; }
  .mobile-credits { padding: 7px 11px; border-radius: 999px; font-size: 11px; color: var(--gold); letter-spacing: .03em; backdrop-filter: blur(12px); background: rgba(12,9,14,.53); border: 1px solid rgba(255,255,255,.12); }
  .speech-bubble { top: 16%; right: 6%; max-width: 200px; font-size: 12px; }
  .profile-overlay { left: 16px; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); }
  .profile-overlay h1 { font-size: 22px; }

  .mobile-rail { position: absolute; z-index: 6; right: 10px; bottom: calc(138px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; gap: 16px; }
  .rail-btn { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 54px; padding: 0; border: 0; background: transparent; color: #fff; font-size: 10px; cursor: pointer; }
  .rail-btn span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; font-size: 20px; background: rgba(22,18,26,.52); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(8px); }
  .rail-btn b { font-weight: 500; text-shadow: 0 1px 3px rgba(0,0,0,.65); }

  .mobile-composer { position: absolute; z-index: 6; left: 12px; right: 12px; bottom: calc(14px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: auto 1fr auto; gap: 8px; padding: 7px; border-radius: 20px; border: 1px solid rgba(255,255,255,.14); background: rgba(20,15,23,.72); backdrop-filter: blur(14px); }
  .mobile-composer input { min-width: 0; border: 0; outline: 0; color: #fff; background: transparent; font-size: 14px; }
  .mobile-composer input::placeholder { color: #9a91a0; }

  .drawer-scrim { position: fixed; z-index: 30; inset: 0; background: rgba(4,3,5,.6); backdrop-filter: blur(4px); }
  .drawer-scrim[hidden] { display: none; }
  .drawer { position: fixed; z-index: 31; left: 0; right: 0; bottom: 0; max-height: 62dvh; padding: 10px 16px calc(16px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; background: rgba(24,19,29,.97); border-top: 1px solid rgba(255,255,255,.12); transform: translateY(105%); transition: transform .32s cubic-bezier(.32,.72,.28,1); }
  .drawer.open { transform: translateY(0); }
  .drawer-handle { width: 42px; height: 4px; margin: 0 auto 10px; border-radius: 999px; background: rgba(255,255,255,.2); }
  .drawer-tabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; margin-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,.1); }
  .drawer-tabs::-webkit-scrollbar { display: none; }
  .drawer-tabs button { position: relative; flex: 1 0 auto; padding: 12px 10px 10px; border: 0; color: var(--muted); background: transparent; font-size: 13px; cursor: pointer; white-space: nowrap; }
  .drawer-tabs button.active { color: #fff; }
  .drawer-tabs button.active::after { content: ""; position: absolute; left: 31%; right: 31%; bottom: 0; height: 2px; border-radius: 2px; background: var(--rose); }
  .drawer-body { max-height: calc(62dvh - 92px); overflow-y: auto; }
  .drawer-panel { display: none; }
  .drawer-panel.active { display: block; }
  .drawer-subtabs { display: flex; gap: 8px; margin: 2px 0 12px; }
  .drawer-subtabs button { padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); color: var(--muted); background: rgba(255,255,255,.04); font-size: 12px; cursor: pointer; }
  .drawer-subtabs button.active { color: #fff; background: rgba(242,120,163,.16); border-color: rgba(242,120,163,.4); }
  .drawer-subpanel { display: none; }
  .drawer-subpanel.active { display: block; }
  .drawer .panel-hint { font-size: 11px; margin: 0 0 10px; }
  .drawer .action-chip { min-height: 54px; font-size: 12px; }
  .drawer .character-grid .character-card { flex: 0 0 auto; }
}

@media (min-width: 901px) {
  .mobile-rail, .mobile-composer, .mobile-credits, .drawer, .drawer-scrim { display: none !important; }
}

/* ===== 商城 / 我的 / 心动记录 / 客服 ===== */
.gift-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.gift-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 8px; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; background: rgba(255,255,255,.05); color: #fff; cursor: pointer; transition: transform .1s; }
.gift-card .g-ico { font-size: 26px; }
.gift-card .g-name { font-size: 13px; }
.gift-card .g-cost { font-size: 11px; color: var(--gold); }
.gift-card:active { transform: scale(.97); }

.store-list { display: flex; flex-direction: column; gap: 8px; }
.store-item { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: rgba(255,255,255,.04); color: #fff; cursor: pointer; transition: transform .1s; }
.store-item .s-ico { font-size: 20px; width: 28px; text-align: center; }
.store-item .s-main { flex: 1; min-width: 0; }
.store-item .s-name { font-size: 13px; }
.store-item .s-label { font-size: 11px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.store-item .s-cost { font-size: 12px; color: var(--gold); white-space: nowrap; }
.store-item:active { transform: scale(.98); }

.history-item { display: flex; flex-direction: column; gap: 3px; width: 100%; padding: 11px 12px; margin-bottom: 8px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: rgba(255,255,255,.04); color: #fff; text-align: left; cursor: pointer; }
.history-item .h-top { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.history-item .h-act { color: var(--rose); font-weight: 600; }
.history-item .h-text { font-size: 12px; color: #cfc5d6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history-item .h-meta { font-size: 10px; color: var(--muted); }
.history-item.disabled { opacity: .55; cursor: default; }
.history-empty { padding: 22px 0; text-align: center; color: var(--muted); font-size: 12px; }

.profile-card { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; background: rgba(255,255,255,.05); margin-bottom: 10px; }
.profile-avatar { font-size: 30px; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: rgba(242,120,163,.14); border: 1px solid rgba(242,120,163,.3); }
.profile-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.profile-nick { border: 0; outline: 0; background: transparent; color: #fff; font-size: 15px; font-weight: 600; }
.profile-bio { border: 0; outline: 0; background: transparent; color: #b9aebe; font-size: 12px; }
.save-profile { padding: 8px 14px; border: 0; border-radius: 999px; background: var(--rose); color: #fff; font-size: 12px; cursor: pointer; }

.me-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.me-stats > div { padding: 10px 4px; text-align: center; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: rgba(255,255,255,.04); }
.me-stats b { display: block; font-size: 17px; color: #fff; }
.me-stats small { font-size: 10px; color: var(--muted); }
.me-section { margin: 12px 0; }
.me-section h4 { margin: 0 0 8px; font-size: 13px; color: #fff; }

.packages { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 10px; }
.package-chip { display: flex; flex-direction: column; gap: 2px; padding: 12px 8px; border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: rgba(255,255,255,.05); color: #fff; font-size: 14px; cursor: pointer; }
.package-chip small { font-size: 11px; color: var(--gold); }
.package-chip.active { border-color: var(--rose); background: rgba(242,120,163,.16); }
.pay-options { display: flex; gap: 8px; margin-bottom: 10px; }
.pay-options button { flex: 1; padding: 9px 4px; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; background: rgba(255,255,255,.04); color: #fff; font-size: 12px; cursor: pointer; }
.pay-options button.active { border-color: var(--rose); background: rgba(242,120,163,.16); }
.pay-confirm { width: 100%; padding: 13px; border: 0; border-radius: 12px; background: var(--rose); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; }
.pay-confirm:disabled { opacity: .4; cursor: default; }
.pay-note { display: block; margin-top: 6px; text-align: center; color: var(--muted); font-size: 10px; }
.pay-qr { margin: 10px auto; text-align: center; }
.pay-qr img { width: 230px; max-width: 80%; border-radius: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.pay-qr small { display: block; margin-top: 8px; color: var(--muted); font-size: 11px; line-height: 1.5; }

.ticket-form { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.ticket-form select, .ticket-form input, .ticket-form textarea { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; background: rgba(255,255,255,.05); color: #fff; font-size: 13px; outline: 0; }
.ticket-form select option { color: #222; }
.ticket-form textarea { resize: vertical; }
.ticket-form button { padding: 11px; border: 0; border-radius: 10px; background: var(--rose); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; }
.ticket-list { display: flex; flex-direction: column; gap: 8px; }
.ticket-item { padding: 10px 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; background: rgba(255,255,255,.04); }
.ticket-item .t-top { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #cfc5d6; }
.ticket-item .t-status { margin-left: auto; padding: 2px 8px; border-radius: 999px; font-size: 10px; }
.ticket-item .t-status.pending { background: rgba(250,173,20,.16); color: #ffd666; }
.ticket-item .t-status.replied { background: rgba(82,196,26,.16); color: #95de64; }
.ticket-item .t-content { margin-top: 6px; font-size: 13px; color: #fff; }
.ticket-item .t-reply { margin-top: 6px; padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.06); font-size: 12px; color: #b9aebe; }
details.faq { margin-top: 10px; }
details.faq summary { cursor: pointer; font-size: 13px; color: var(--rose); }
details.faq .faq-item { padding: 8px 0; border-bottom: 1px dashed rgba(255,255,255,.1); }
details.faq .faq-item b { font-size: 12px; color: #fff; }
details.faq .faq-item p { margin: 4px 0 0; font-size: 12px; color: var(--muted); line-height: 1.55; }

/* ===== 访问口令门 ===== */
.access-gate { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #15101c 0%, #201527 60%, #2b1420 100%); }
.access-gate[hidden] { display: none; }
.access-card { width: min(84vw, 340px); padding: 34px 28px; border-radius: 20px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); text-align: center; }
.access-logo { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 16px; background: linear-gradient(135deg, #ff5f7e, #c44dff); color: #fff; font-size: 26px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.access-title { font-size: 20px; font-weight: 700; color: #fff; }
.access-sub { margin: 6px 0 18px; font-size: 12px; color: #a89bb3; }
.access-card input { width: 100%; box-sizing: border-box; padding: 12px 14px; border: 1px solid rgba(255,255,255,.16); border-radius: 12px; background: rgba(255,255,255,.06); color: #fff; font-size: 14px; text-align: center; outline: 0; }
.access-card input:focus { border-color: #ff5f7e; }
.access-card button { width: 100%; margin-top: 14px; padding: 12px; border: 0; border-radius: 12px; background: linear-gradient(135deg, #ff5f7e, #c44dff); color: #fff; font-size: 15px; font-weight: 700; cursor: pointer; }
.gender-options { display: flex; gap: 12px; margin-top: 18px; }
.gender-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px 8px !important; border-radius: 16px !important; background: rgba(255,255,255,.07) !important; border: 1px solid rgba(255,255,255,.14) !important; }
.gender-btn b { font-size: 34px; line-height: 1; }
.gender-btn span { font-size: 13px; color: #fff; }
.gender-btn:hover, .gender-btn:active { background: linear-gradient(135deg, rgba(255,95,126,.35), rgba(196,77,255,.35)) !important; }
.model-picker-card { width: min(92vw, 560px); max-height: 82vh; overflow-y: auto; }
.model-grid { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.model-card { flex: 1 1 96px; max-width: 120px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px !important; border-radius: 16px !important; background: rgba(255,255,255,.07) !important; border: 1px solid rgba(255,255,255,.14) !important; margin-top: 0 !important; }
.model-card img { width: 72px; height: 96px; object-fit: cover; border-radius: 12px; }
.model-card span { font-size: 13px; font-weight: 700; color: #fff; }
.model-card small { font-size: 10px; color: #ffb1c4; }
.model-card:hover, .model-card:active { background: linear-gradient(135deg, rgba(255,95,126,.4), rgba(196,77,255,.4)) !important; border-color: #ff5f7e !important; }
.model-detail-card { width: min(88vw, 340px); padding: 26px 24px 22px; }
.model-detail-card img { width: 150px; height: 200px; object-fit: cover; border-radius: 16px; margin: 0 auto 12px; display: block; }
.detail-vibe { display: inline-block; margin: 8px auto 10px; padding: 4px 12px; border-radius: 20px; font-size: 12px; color: #ffb1c4; background: rgba(255,95,126,.14); border: 1px solid rgba(255,95,126,.3); }
.detail-story { margin: 8px 0 4px; font-size: 14px; line-height: 1.8; color: #e9e2ee; text-align: left; }
.detail-back { margin-top: 8px !important; background: rgba(255,255,255,.1) !important; color: #d8cfe0 !important; }
.access-error { margin-top: 12px; min-height: 16px; font-size: 12px; color: #ff9aa8; }