/* ============================================================
   Design System v5 — Ant Design Inspired Premium Dark
   Learned from: ant.design shadow/motion/token specs
   ============================================================ */

:root {
  /* ---- Surfaces ---- */
  --bg:          #0A0A0F;
  --bg-card:     #141419;
  --bg-elevated: #1C1C26;
  --bg-surface:  #111116;
  --bg-glass:    rgba(255,255,255,0.045);
  --bg-glass-2:  rgba(255,255,255,0.07);

  /* ---- Brand — 黑金 ---- */
  --pink:        #D8B46A;
  --pink-hover:  #E8C87A;
  --pink-active: #B98A35;
  --pink-light:  #F3DFA7;
  --pink-glow:   rgba(216,180,106,0.25);
  --pink-ring:   rgba(216,180,106,0.15);
  --cyan:        #25F4EE;
  --gold:        #FFD666;
  --gold-dark:   #FAAD14;

  /* ---- Text (4-level hierarchy) ---- */
  --text-1: rgba(255,255,255,0.92);
  --text-2: rgba(255,255,255,0.55);
  --text-3: rgba(255,255,255,0.30);
  --text-4: rgba(255,255,255,0.16);

  /* ---- Ant Design 3-layer shadow (adapted for dark) ---- */
  --shadow-sm:  0 1px 2px rgba(0,0,0,0.3), 0 1px 6px -1px rgba(0,0,0,0.2);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.35), 0 2px 6px -2px rgba(0,0,0,0.25);
  --shadow-lg:  0 8px 24px rgba(0,0,0,0.45), 0 4px 12px -4px rgba(0,0,0,0.3);

  /* ---- Motion (Ant Design spec: fast/medium/slow) ---- */
  --motion-fast:   0.1s;
  --motion-mid:    0.2s;
  --motion-slow:   0.3s;
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in-back:  cubic-bezier(0.36, 0, 0.66, -0.56);

  /* ---- Type ---- */
  --font: "SF Pro Display", -apple-system, "PingFang SC", "Helvetica Neue", "Noto Sans SC", "Microsoft YaHei UI", system-ui, sans-serif;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 999px;
}

/* ============================================================
   Reset
   ============================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { height: 100%; -webkit-text-size-adjust: 100%; }
body {
  height: 100%; background: var(--bg); color: var(--text-1);
  font-family: var(--font); font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none; overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, textarea { font: inherit; border: none; outline: none; background: none; color: inherit; -webkit-appearance: none; }
button { cursor: pointer; }
ul, ol { list-style: none; }
::-webkit-scrollbar { display: none; }

#app {
  position: relative; width: 100%; max-width: 430px;
  min-height: 100vh; min-height: 100dvh;
  margin: 0 auto; background: var(--bg); overflow-x: hidden;
}

/* ============================================================
   Page Transitions
   ============================================================ */
.page-slide-enter-active,
.page-slide-back-enter-active { transition: transform 0.38s var(--ease-out), opacity 0.28s ease; will-change: transform, opacity; }
.page-slide-leave-active,
.page-slide-back-leave-active { transition: transform 0.38s var(--ease-out), opacity 0.22s ease; will-change: transform, opacity; }
.page-slide-enter-from       { transform: translateX(100%); opacity: 0.5; }
.page-slide-leave-to         { transform: translateX(-30%); opacity: 0; }
.page-slide-back-enter-from  { transform: translateX(-30%); opacity: 0; }
.page-slide-back-leave-to    { transform: translateX(100%); opacity: 0.5; }
.page-fade-enter-active      { transition: opacity var(--motion-mid) ease-out; }
.page-fade-leave-active      { transition: opacity var(--motion-fast) ease-in; }
.page-fade-enter-from, .page-fade-leave-to { opacity: 0; }

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.stagger-item { opacity: 0; animation: fadeSlideUp 0.4s var(--ease-out) forwards; }

@keyframes spin { to { transform: rotate(360deg); } }
.loading-spinner {
  width: 28px; height: 28px;
  border: 2.5px solid rgba(255,255,255,0.05);
  border-top-color: var(--pink);
  border-radius: 50%;
  animation: spin 0.65s linear infinite;
}
.page-loading {
  display: flex; align-items: center; justify-content: center;
  min-height: 60vh;
}

/* ============================================================
   TabBar — 抖音 style
   ============================================================ */
.tabbar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 430px; height: 52px;
  background: rgba(10,10,15,0.96);
  backdrop-filter: saturate(200%) blur(30px);
  -webkit-backdrop-filter: saturate(200%) blur(30px);
  border-top: 0.5px solid rgba(255,255,255,0.035);
  display: flex; align-items: stretch;
  padding-bottom: env(safe-area-inset-bottom, 0);
  z-index: 100;
}

.tabbar-item {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px;
  color: rgba(255,255,255,0.26); font-size: 11px; font-weight: 500;
  letter-spacing: 0.2px;
  transition: color var(--motion-mid) ease;
  user-select: none; -webkit-tap-highlight-color: transparent;
}
.tabbar-item:active { opacity: 0.6; }
.tabbar-item.active { color: #D8B46A; }

.tabbar-icon {
  width: 36px; height: 28px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  transition: transform var(--motion-mid) var(--ease-spring), box-shadow 0.25s, background 0.25s;
}
.tabbar-item.active .tabbar-icon {
  background: rgba(216,180,106,0.12);
  box-shadow: 0 0 14px rgba(216,180,106,0.30), 0 0 24px rgba(216,180,106,0.10);
}
.tabbar-item:active .tabbar-icon { transform: scale(0.78); }

.tabbar-center {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer;
}
.tabbar-plus {
  width: 46px; height: 30px; border-radius: 8px; position: relative;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #F3DFA7, #D8B46A 50%, #B98A35);
  box-shadow: 0 2px 12px rgba(216,180,106,0.35), 0 0 20px rgba(216,180,106,0.15);
  transition: transform var(--motion-mid) var(--ease-spring), box-shadow 0.25s;
}
.tabbar-plus:active { transform: scale(0.85); }
.tabbar-plus.active {
  box-shadow: 0 2px 16px rgba(216,180,106,0.55), 0 0 28px rgba(216,180,106,0.25);
}
.tabbar-plus-front {
  position: relative; z-index: 2; width: 40px; height: 26px;
  background: linear-gradient(135deg, #1A1714, #0E0D0A);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
}
.tabbar-plus-front svg { color: #D8B46A; fill: #D8B46A; }
.tabbar-center-label { font-size: 9px; color: rgba(255,255,255,0.38); transition: color 0.2s; }
.tabbar-center-label.active { color: #D8B46A; }

/* ============================================================
   BackHeader
   ============================================================ */
.back-header {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: var(--bg);
}
.back-btn {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.05);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; cursor: pointer;
  z-index: 2;
  transition: transform var(--motion-fast) var(--ease-spring),
              background var(--motion-mid) ease,
              box-shadow var(--motion-mid) ease;
}
.back-btn:hover {
  background: rgba(255,255,255,0.08);
  box-shadow: 0 0 0 4px rgba(255,255,255,0.03);
}
.back-btn:active {
  transform: scale(0.82);
  background: rgba(216,180,106,0.10);
}
.back-header-title { font-size: 18px; font-weight: 600; letter-spacing: -0.2px; }
.back-title {
  position: absolute; left: 0; right: 0;
  text-align: center; font-size: 18px; font-weight: 600;
  letter-spacing: -0.2px; pointer-events: none;
  color: var(--text-1);
}

.player-back-float {
  position: absolute; top: 12px; left: 16px; z-index: 20;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(0,0,0,0.50); display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform var(--motion-fast) var(--ease-spring),
              background var(--motion-mid) ease;
}
.player-back-float:hover { background: rgba(0,0,0,0.65); }
.player-back-float:active { transform: scale(0.82); }

/* ============================================================
   VideoCard — Ant Design shadow + hover lift + play overlay
   ============================================================ */
.video-card {
  border-radius: var(--radius-md); overflow: hidden;
  background: var(--bg-card); cursor: pointer;
  border:1px solid rgba(216,180,106,0.06);
  box-shadow: var(--shadow-sm);
  transition: transform var(--motion-mid) var(--ease-spring),
              box-shadow var(--motion-slow) ease,
              border-color var(--motion-mid) ease;
}
.video-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md), 0 0 16px rgba(216,180,106,0.08);
  border-color: rgba(216,180,106,0.15);
}
.video-card:active { transform: scale(0.97) translateY(0); box-shadow: var(--shadow-sm); }

.video-card-cover {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  overflow: hidden; background: #0c0c14;
}
.video-card-cover img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.4s ease;
}
.video-card:hover .video-card-cover img { transform: scale(1.04); }

.video-card-cover::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.65));
  pointer-events: none;
}

.video-card-play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3; width: 36px; height: 36px;
  background: rgba(0,0,0,0.55);
  border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center;
  opacity: 1;
  pointer-events: none;
}
.video-card-play svg { margin-left: 2px; }

.video-card-duration {
  position: absolute; right: 6px; bottom: 6px; z-index: 4;
  background: rgba(0,0,0,0.72);
  color: rgba(255,255,255,0.92); font-size: 12px; font-weight: 500;
  font-variant-numeric: tabular-nums; padding: 2px 7px;
  border-radius: 4px; letter-spacing: 0.3px;
}

.video-card-badge {
  position:absolute;left:6px;top:6px;z-index:4;
  font-size:10px;font-weight:600;letter-spacing:0.3px;
  padding:2px 8px;border-radius:3px;
  line-height:1.5;
}
.badge-free {
  background:rgba(255,255,255,0.12);color:rgba(255,255,255,0.7);
}
.badge-vip {
  background:rgba(216,180,106,0.2);color:#D8B46A;font-weight:700;
}
.badge-coins {
  background:rgba(255,255,255,0.12);color:#D8B46A;
}

.video-card-body { padding: 10px 12px 12px; }
.video-card-title {
  font-size: 14px; font-weight: 600; color: var(--text-1);
  line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}
.video-card-meta {
  display: flex; align-items: center; gap: 10px;
  margin-top: 6px; font-size: 12px; color: var(--text-3);
}
.video-card-meta svg { flex-shrink:0; }
.video-card-cat {
  position:absolute; left:6px; bottom:6px; z-index:4;
  font-size:11px; font-weight:500; color:rgba(255,255,255,0.85);
  background:rgba(0,0,0,0.55); padding:2px 8px; border-radius:3px;
}

.video-card.portrait .video-card-cover { aspect-ratio: 3 / 4; }

/* ============================================================
   More Page — 双列/单列切换
   ============================================================ */
.more-page { min-height: 100vh; background: var(--bg); }
.more-body { padding-bottom: 40px; }
.more-banner {
  margin: 4px 16px 14px; border-radius: var(--radius-md);
  overflow: hidden;
}
.more-banner img { width: 100%; display: block; }

.more-sort-bar {
  display: flex; align-items: center; padding: 0 16px;
  margin-bottom: 14px;
}
.more-sort-tabs {
  display: flex; align-items: center; gap: 22px; flex: 1;
}
.more-sort-tab {
  font-size: 15px; color: var(--text-3); cursor: pointer;
  transition: color 0.2s; position: relative;
  padding-bottom: 2px; font-weight: 400;
}
.more-sort-tab.active {
  color: var(--gold); font-weight: 700;
  text-shadow: 0 0 8px rgba(216,180,106,0.35);
}
.more-toggle {
  display: flex; align-items: center; gap: 4px;
  font-size: 14px; color: var(--text-3); cursor: pointer;
  transition: color 0.2s; flex-shrink: 0;
}
.more-toggle:active { color: var(--gold); }
.more-toggle span { color: var(--gold); }

/* Grid 双列 */
.more-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  padding: 0 16px;
}
/* List 单列 */
.more-list {
  display: flex; flex-direction: column; gap: 16px;
  padding: 0 16px;
}

.more-card {
  border-radius: var(--radius-md); overflow: hidden;
  background: var(--bg-card); cursor: pointer;
  transition: transform var(--motion-mid) var(--ease-spring),
              box-shadow var(--motion-slow) ease;
}
.more-card:active { transform: scale(0.97); }

.more-card-cover {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  overflow: hidden; background: #0c0c14;
}
.more-card-cover img {
  width: 100%; height: 100%; object-fit: cover;
}
.more-card-cover::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.6));
  pointer-events: none;
}
.more-card-badge {
  position: absolute; right: 6px; top: 6px; z-index: 4;
  font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
  padding: 3px 10px; border-radius: 4px; min-width: 28px;
  text-align: center; }
.more-card-views {
  position: absolute; left: 8px; bottom: 8px; z-index: 4;
  display: flex; align-items: center; gap: 4px;
  font-size: 12px; color: rgba(255,255,255,0.92);
  font-variant-numeric: tabular-nums; font-weight: 500;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.more-card-dur {
  position: absolute; right: 8px; bottom: 8px; z-index: 4;
  font-size: 12px; color: rgba(255,255,255,0.92);
  font-variant-numeric: tabular-nums; font-weight: 500;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.more-card-title {
  padding: 8px 10px 10px; font-size: 14px; color: var(--text-1);
  line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2;
  -webkit-box-orient: vertical; overflow: hidden;
}

/* List mode 大图 */
.more-list .more-card {
  background: transparent;
}
.more-list .more-card-cover {
  border-radius: var(--radius-md);
}
.more-list .more-card-title {
  padding: 8px 0 0; font-size: 14px;
}

/* ============================================================
   Buttons — Ant Design hover/active color shift + scale
   ============================================================ */
.btn {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 40px; padding: 0 24px; border-radius: var(--radius-full);
  font-size: 14px; font-weight: 600; letter-spacing: 0.2px;
  white-space: nowrap; user-select: none;
  transition: transform var(--motion-fast) var(--ease-spring),
              background var(--motion-mid) ease,
              box-shadow var(--motion-mid) ease,
              color var(--motion-mid) ease;
}
.btn:active { transform: scale(0.94); }

.btn-gradient {
  background: var(--pink); color: #fff;
  box-shadow: 0 4px 14px var(--pink-glow);
}
.btn-gradient:hover { background: var(--pink-hover); box-shadow: 0 6px 20px var(--pink-glow); }
.btn-gradient:active { background: var(--pink-active); box-shadow: 0 2px 8px var(--pink-glow); }

.btn-glass {
  background: rgba(255,255,255,0.06); color: var(--text-2);
}
.btn-glass:hover { background: rgba(255,255,255,0.09); color: var(--text-1); }
.btn-glass:active { background: rgba(216,180,106,0.08); color: var(--pink-light); }

.btn-sm { height: 34px; padding: 0 18px; font-size: 14px; }

/* ============================================================
   GlassInput — Ant Design focus glow ring
   ============================================================ */
.glass-input {
  display: flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 14px;
  background: rgba(255,255,255,0.045);
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  transition: background var(--motion-mid) ease,
              border-color var(--motion-mid) ease,
              box-shadow var(--motion-mid) ease;
}
.glass-input:focus-within {
  background: rgba(255,255,255,0.06);
  border-color: rgba(216,180,106,0.30);
  box-shadow: 0 0 0 3px var(--pink-ring);
}
.glass-input svg {
  flex-shrink: 0; color: var(--text-3);
  transition: color var(--motion-mid) ease;
}
.glass-input:focus-within svg { color: var(--pink); filter: drop-shadow(0 0 4px rgba(216,180,106,0.4)); }
.glass-input input { flex: 1; min-width: 0; font-size: 14px; caret-color: var(--pink); }
.glass-input input::placeholder { color: var(--text-4); }

/* ============================================================
   Tags — refined
   ============================================================ */
.tag {
  display: inline-flex; align-items: center;
  padding: 6px 14px; border-radius: var(--radius-full);
  background: rgba(255,255,255,0.045);
  color: var(--text-2); font-size: 14px; font-weight: 500;
  cursor: pointer; user-select: none;
  transition: all var(--motion-fast) var(--ease-spring);
}
.tag:hover { background: rgba(255,255,255,0.07); }
.tag:active { transform: scale(0.93); }
.tag.active { color: var(--pink); background: rgba(216,180,106,0.08); text-shadow: 0 0 8px rgba(216,180,106,0.4); }

/* ============================================================
   Section Header
   ============================================================ */
.section-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 16px; margin-bottom: 14px;
}
.section-title {
  font-size: 18px; font-weight: 700; letter-spacing: -0.2px; color: #D8B46A;
  display:flex; align-items:center; gap:8px;
  text-shadow: 0 0 10px rgba(216,180,106,0.4), 0 0 20px rgba(216,180,106,0.15);
}
.section-title::before {
  content:''; width:3px; height:18px; border-radius:2px;
  background:linear-gradient(180deg,#D8B46A,#B98A35);
  box-shadow:0 0 8px rgba(216,180,106,0.4);
  flex-shrink:0;
}
.section-action {
  font-size:13px; color:rgba(216,180,106,0.7);
  display: flex; align-items: center; gap: 2px;
  cursor: pointer; padding:4px 10px; border-radius:var(--radius-full);
  background:rgba(216,180,106,0.06); border:1px solid rgba(216,180,106,0.1);
  transition: all var(--motion-fast) ease;
}
.section-action:hover { color: #D8B46A; background:rgba(216,180,106,0.1); }
.section-action:active { transform:scale(0.92); }

/* ============================================================
   Overlay
   ============================================================ */
.overlay {
  position: absolute; inset: 0; z-index: 12;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55); }
.overlay-title { font-size: 20px; font-weight: 700; margin-bottom: 12px; }
.overlay-desc { font-size: 14px; color: rgba(255,255,255,0.72); text-align: center; line-height: 1.7; margin-bottom: 24px; padding: 0 32px; }
.overlay-btns { display: flex; gap: 12px; }

/* ============================================================
   Empty State
   ============================================================ */
.empty-state { display: flex; flex-direction: column; align-items: center; padding: 80px 16px; }
.empty-icon {
  width: 72px; height: 72px; border-radius: 50%;
  background: rgba(255,255,255,0.03);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.empty-text { font-size: 15px; font-weight: 500; color: var(--text-3); }
.empty-hint { font-size: 14px; color: var(--text-4); margin-top: 6px; }

em.hl { color: var(--pink); font-style: normal; font-weight: 600; }
.divider { height: 0.5px; background: rgba(255,255,255,0.035); margin: 0 16px; }

/* ============================================================
   PAGE: Home
   ============================================================ */
.home-page { padding-bottom: 68px; }
.home-search {
  padding: 12px 16px 10px; display: flex; gap: 10px; align-items: center;
}

/* Category pills */
.home-cats {
  display: flex; gap: 6px; padding: 6px 16px 18px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.home-cat {
  padding: 7px 16px; border-radius: var(--radius-full);
  font-size: 13px; font-weight: 500; color: rgba(196,168,108,0.7);
  white-space: nowrap; cursor: pointer; flex-shrink: 0;
  background: transparent;
  transition: all var(--motion-mid) ease;
}
.home-cat:active { transform: scale(0.93); }
.home-cat.active {
  color: #fff; font-weight: 700; font-size: 17px;
  background: transparent;
  position: relative;
}
.home-cat.active::after {
  content: ''; position: absolute; bottom: 0px; left: 50%; transform: translateX(-50%);
  width: 20px; height: 3px; border-radius: 2px;
  background: #D8B46A;
}

/* Announce bar — Ant Design Badge processing pulse style */
@keyframes pulseRing {
  0%   { transform: scale(1); opacity: 0.6; }
  100% { transform: scale(2.8); opacity: 0; }
}
.home-announce {
  display: flex; align-items: center; gap: 10px;
  margin: 0 16px 14px; padding: 0 14px;
  height: 38px; border-radius: var(--radius-sm);
  background: rgba(216,180,106,0.05);
  overflow: hidden;
}
.announce-dot {
  position: relative;
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: var(--pink);
}
.announce-dot::after {
  content: ''; position: absolute; inset: 0;
  border-radius: 50%; background: var(--pink);
  animation: pulseRing 2s ease-out infinite;
}
.announce-label {
  flex-shrink: 0; font-size: 13px; font-weight: 600;
  color: var(--pink); letter-spacing: 0.3px;
}
.announce-content {
  flex: 1; overflow: hidden; position: relative;
  height: 100%; display: flex; align-items: center;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.announce-text {
  white-space: nowrap; font-size: 13px; color: var(--text-2);
  animation: marquee 50s linear infinite;
}
@keyframes marquee { 0% { transform: translateX(0%); } 100% { transform: translateX(-100%); } }
}
.announce-close {
  flex-shrink: 0; width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--text-4); border-radius: 50%;
  transition: color var(--motion-fast) ease, background var(--motion-fast) ease;
}
.announce-close:hover { color: var(--text-3); background: rgba(255,255,255,0.05); }
.announce-close:active { color: var(--text-2); }

/* Banner / Carousel */
.home-banner {
  margin: 0 16px 22px; border-radius: var(--radius-lg);
  overflow: hidden; aspect-ratio: 16 / 7;
  background: #0c0c14; box-shadow: var(--shadow-sm);
  position: relative;
}
.carousel-track {
  display: flex; width: 100%; height: 100%;
  transition: transform 0.6s cubic-bezier(0.23,1,0.32,1);
}
.carousel-slide {
  flex: 0 0 100%; width: 100%; height: 100%;
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.carousel-slide img { width: 100%; height: 100%; object-fit: cover; border-radius:10px; }
.carousel-dots {
  position: absolute; bottom: 8px; left: 50%;
  transform: translateX(-50%); display: flex; gap: 6px; z-index: 5;
}
.carousel-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(255,255,255,0.35); cursor: pointer;
  transition: all 0.35s cubic-bezier(0.23,1,0.32,1);
}
.carousel-dot.active {
  width: 18px; border-radius: 3px;
  background: var(--pink);
  box-shadow: 0 0 6px rgba(216,180,106,0.5);
}

/* Parallax content area — covers banner */
.home-content-area {
  position: relative; z-index: 2;
  margin-top: -16px;
  border-radius: 16px 16px 0 0;
  background: var(--bg-primary);
  padding-top: 4px;
}

/* Pull-to-refresh */
.pull-refresh {
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; transition: height 0.3s ease;
}
.pull-refresh-icon {
  width: 24px; height: 24px; border-radius: 50%;
  border: 2.5px solid rgba(216,180,106,0.15);
  border-top-color: #D8B46A;
  transition: transform 0.2s ease;
}
.pull-refresh-icon.spinning {
  animation: prSpin 0.7s linear infinite;
}
@keyframes prSpin { to { transform: rotate(360deg) } }

/* Grid — Ant Design 8px grid base */
.home-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; padding: 0 16px; margin-bottom: 28px;
}
.home-grid.featured .video-card:first-child {
  grid-column: 1 / -1;
}
.home-grid.featured .video-card:first-child .video-card-cover {
  aspect-ratio: 16 / 8;
}
.home-grid.featured .video-card:first-child .video-card-title {
  font-size: 16px;
}

/* ============================================================
   PAGE: Short Video
   ============================================================ */
.sv-page {
  position: fixed; inset: 0; width: 100%; max-width: 430px;
  margin: 0 auto; background: #000; overflow: hidden;
  user-select: none; z-index: 200;
  touch-action: pan-x;
  -webkit-overflow-scrolling: touch;
}
.sv-top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 20;
  padding: 12px 16px; display: flex; align-items: center;
  background: linear-gradient(180deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.15) 70%, transparent 100%);
  pointer-events: none;
}
.sv-tabs { flex: 1; display: flex; justify-content: center; gap: 24px; pointer-events: auto; }
.sv-tab {
  position: relative; font-size: 15px; color: rgba(255,255,255,0.38);
  font-weight: 500; cursor: pointer; padding-bottom: 8px;
  transition: all var(--motion-mid) ease;
}
.sv-tab.active { color: #fff; font-weight: 700; font-size: 17px; }
.sv-tab.active::after {
  content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 22px; height: 3px; background: #fff; border-radius: 2px;
}
.sv-search-btn {
  position: absolute; right: 16px; top: 48px;
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  cursor: pointer; pointer-events: auto;
  transition: transform var(--motion-fast) var(--ease-spring);
}
.sv-search-btn:active { transform: scale(0.82); }

.sv-track { width: 100%; height: 100%; position: relative; will-change: transform; }
.sv-track.animating { transition: transform 0.42s var(--ease-out); }
.sv-slide {
  position: absolute; left: 0; width: 100%;
  overflow: hidden; backface-visibility: hidden;
  background:#000;
}
.sv-cover { width: 100%; height: 100%; object-fit: cover; display:block; }

.sv-play-btn {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.8); z-index: 10;
  opacity: 0; pointer-events: none;
  transition: opacity 0.25s, transform 0.25s var(--ease-spring);
}
.sv-slide.paused .sv-play-btn { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }

.sv-actions {
  position: absolute; right: 10px; bottom: 180px; z-index: 15;
  display: flex; flex-direction: column; align-items: center; gap: 22px;
}
.sv-avatar-wrap { position: relative; margin-bottom: 6px; cursor: pointer; }
.sv-avatar {
  width: 52px; height: 52px; border-radius: 50%; border: 2px solid #fff;
  object-fit: cover; box-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
.sv-avatar-follow {
  position: absolute; bottom: -7px; left: 50%; transform: translateX(-50%);
  width: 18px; height: 18px; background: var(--pink); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px var(--pink-glow); border: 1.5px solid #000;
}
.sv-action {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  cursor: pointer;
  transition: transform var(--motion-fast) var(--ease-spring);
}
.sv-action:active { transform: scale(0.78); }
.sv-action svg { width: 36px; height: 36px; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.7)); }
.sv-action span {
  font-size: 12px; font-weight: 600; color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7); letter-spacing: 0.2px;
}

.sv-bottom-area {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 15;
  padding: 40px 65px 62px 16px;
  background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.4) 40%, rgba(0,0,0,0.1) 70%, transparent 100%);
  display: flex; flex-direction: column; gap: 6px;
}
.sv-author {
  font-size: 17px; color: #fff; font-weight: 700;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6); cursor: pointer;
}
.sv-desc {
  font-size: 14px; color: rgba(255,255,255,0.82); line-height: 1.45;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sv-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.sv-tag { font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.55); }

.sv-paywall-pill {
  display: inline-flex; align-self: flex-start; align-items: center;
  padding: 7px 16px; border-radius: var(--radius-full);
  font-size: 13px; font-weight: 700; color: #fff;
  cursor: pointer; margin-top: 6px;
  transition: transform var(--motion-fast) var(--ease-spring),
              box-shadow var(--motion-mid) ease;
}
.sv-paywall-pill:active { transform: scale(0.94); }
.sv-paywall-pill.vip   { background: var(--pink); box-shadow: 0 2px 12px var(--pink-glow); }
.sv-paywall-pill.vip:hover { box-shadow: 0 4px 20px var(--pink-glow); }
.sv-paywall-pill.coins { background: linear-gradient(135deg, #FFD666, #FAAD14); color: #1a1a1a; }

.sv-tabbar {
  position: absolute; bottom: 0; left: 0; right: 0; height: 52px;
  background: rgba(0,0,0,0.92); backdrop-filter: saturate(200%) blur(24px);
  border-top: 0.5px solid rgba(255,255,255,0.035);
  display: flex; align-items: stretch; z-index: 30;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

/* ============================================================
   PAGE: Search
   ============================================================ */
.search-page { min-height: 100vh; padding-bottom: 40px; }
.search-section { padding: 0 16px; }
.search-section-header {
  display: flex; justify-content: space-between; align-items: center;
  margin: 28px 0 14px;
}
.search-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.search-tags .tag:nth-child(1) { color: var(--pink); background: rgba(216,180,106,0.06); text-shadow: 0 0 8px rgba(216,180,106,0.4); }
.search-tags .tag:nth-child(2) { color: var(--pink-light); background: rgba(255,107,157,0.05); text-shadow: 0 0 8px rgba(216,180,106,0.3); }
.search-tags .tag:nth-child(3) { color: var(--gold); background: rgba(255,214,102,0.05); text-shadow: 0 0 8px rgba(216,180,106,0.4); }

.search-results { padding: 0 16px; }
.search-results-count { font-size: 13px; font-weight: 500; color: var(--text-3); margin: 24px 0 14px; }

.search-result-card {
  display: flex; gap: 12px; padding: 8px; margin-bottom: 8px;
  border-radius: var(--radius-md); background: var(--bg-glass);
  cursor: pointer;
  transition: all var(--motion-fast) var(--ease-spring);
}
.search-result-card:hover { background: var(--bg-glass-2); }
.search-result-card:active { background: var(--bg-glass-2); transform: scale(0.98); }
.search-result-cover {
  position: relative; width: 130px; height: 73px; border-radius: 8px;
  overflow: hidden; flex-shrink: 0; background: #0c0c14;
}
.search-result-cover img { width: 100%; height: 100%; object-fit: cover; }
.search-result-info { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 2px 0; }
.search-result-title { font-size: 14px; font-weight: 500; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ============================================================
   PAGE: Uploader
   ============================================================ */
.up-header {
  background: linear-gradient(180deg, rgba(216,180,106,0.07) 0%, transparent 55%);
  padding: 0 16px;
}
.up-avatar {
  width: 72px; height: 72px; border-radius: 50%;
  border: 2.5px solid rgba(216,180,106,0.25); object-fit: cover;
  box-shadow: 0 4px 20px var(--pink-glow); background: var(--bg-elevated);
}
.up-avatar-cam {
  position: absolute; top: -2px; right: -2px;
  width: 22px; height: 22px; background: var(--pink); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--bg);
}
.up-vip {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 8px; padding: 2px 8px; border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #FFD666, #FAAD14);
  font-size: 11px; font-weight: 700; color: #1a1a1a;
}
.up-name { font-size: 20px; font-weight: 700; margin-bottom: 4px; letter-spacing: -0.3px; }
.up-bio { font-size: 14px; color: var(--text-3); margin-bottom: 12px; }
.up-stats { display: flex; justify-content: space-around; padding: 24px 8px 20px; }
.up-stat { text-align: center; flex: 1; }
.up-stat-num { font-size: 18px; font-weight: 700; margin-bottom: 2px; letter-spacing: -0.3px; }
.up-stat-label { font-size: 13px; color: var(--text-3); }
.up-tabs {
  display: flex; position: sticky; top: 0; z-index: 10;
  background: var(--bg); border-bottom: 0.5px solid rgba(255,255,255,0.035);
}
.up-tab {
  flex: 1; text-align: center; padding: 13px 0;
  font-size: 14px; font-weight: 500; color: var(--text-3);
  cursor: pointer; position: relative;
  transition: color var(--motion-mid) ease;
}
.up-tab.active { color: #fff; font-weight: 600; }
.up-tab.active::after {
  content: ''; position: absolute; bottom: -0.5px; left: 50%; transform: translateX(-50%);
  width: 32px; height: 2.5px; background: var(--pink);
  border-radius: 2px;
}
.up-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; }

/* ============================================================
   PAGE: Category
   ============================================================ */
.cat-page { min-height: 100vh; padding-bottom: 80px; }
.cat-group { padding: 0 16px; margin-bottom: 28px; }
.cat-group-title { font-size: 13px; font-weight: 600; color: var(--text-3); margin-bottom: 12px; letter-spacing: 0.5px; text-transform: uppercase; }
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cat-tag {
  text-align: center; padding: 12px 0; border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.035);
  font-size: 14px; font-weight: 500; color: var(--text-2);
  cursor: pointer;
  transition: all var(--motion-fast) var(--ease-spring);
}
.cat-tag:hover { background: rgba(255,255,255,0.055); }
.cat-tag:active { transform: scale(0.94); }
.cat-tag.active {
  background: rgba(216,180,106,0.08);
  color: var(--pink);
}
.cat-bottom {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 430px; display: flex; gap: 12px;
  padding: 12px 16px;
  background: rgba(10,10,15,0.96); backdrop-filter: saturate(200%) blur(28px);
  border-top: 0.5px solid rgba(255,255,255,0.035);
}
.cat-bottom .btn { flex: 1; }

/* ============================================================
   PAGE: Player
   ============================================================ */
.player-page { min-height: 100vh; padding-bottom: 68px; background:var(--bg); }
.player-video-wrap {
  width: 100%; aspect-ratio: 16 / 9; background: #000;
  position: relative; overflow: hidden;
  box-shadow:0 4px 24px rgba(0,0,0,0.6);
}
.player-info { padding: 16px 16px 0; }
.player-title {
  font-size: 18px; font-weight: 700; line-height: 1.5; margin-bottom: 12px;
  letter-spacing: -0.2px; color:#f0f0f0;
}
.player-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.player-tags .tag {
  padding:4px 12px; font-size:12px; border-radius:var(--radius-full);
  background:rgba(216,180,106,0.08); color:var(--gold); border:1px solid rgba(216,180,106,0.15);
}
.player-stats {
  display: flex; gap: 16px; font-size: 13px; color: var(--gold-sub); margin-bottom: 16px;
}
.player-actions {
  display: flex; justify-content:space-around; padding:12px 0;
  margin:0 -16px; border-top:1px solid var(--gold-line); border-bottom:1px solid var(--gold-line);
}
.player-action-btn {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  cursor: pointer; padding:4px 12px;
  transition: transform var(--motion-fast) var(--ease-spring), color var(--motion-mid) ease;
}
.player-action-btn:active { transform: scale(0.82); }
.player-action-btn svg { width: 24px; height: 24px; }
.player-action-btn span { font-size: 12px; font-weight: 500; color: var(--text-3); }
.player-action-btn .active-icon { color:var(--gold); text-shadow:0 0 8px rgba(216,180,106,0.4); }
.player-play-center {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:5;
  cursor:pointer; filter:drop-shadow(0 2px 12px rgba(0,0,0,0.5));
  transition:transform 0.2s var(--ease-spring);
}
.player-play-center:active { transform:translate(-50%,-50%) scale(0.88); }
.player-progress {
  position:absolute; bottom:0; left:0; right:0; height:3px; z-index:6;
  background:rgba(255,255,255,0.15);
}
.player-progress-bar {
  width:35%; height:100%;
  background:linear-gradient(90deg,var(--gold),#F3DFA7);
  border-radius:0 2px 2px 0;
  box-shadow:0 0 8px rgba(216,180,106,0.4);
}

/* --- Player: UP主卡片 --- */
.player-uploader {
  display:flex; align-items:center; gap:12px;
  padding:14px 16px; cursor:pointer;
}
.player-up-avatar {
  width:44px; height:44px; border-radius:50%; object-fit:cover;
  border:2px solid rgba(216,180,106,0.25); flex-shrink:0;
}
.player-up-name { font-size:15px; font-weight:600; color:var(--text-1); }
.player-up-fans { font-size:12px; color:var(--text-3); margin-top:2px; }
.player-up-follow {
  margin-left:auto; padding:6px 18px; border-radius:var(--radius-full);
  font-size:13px; font-weight:600; border:none; cursor:pointer;
  transition:all 0.2s var(--ease-spring);
}
.player-up-follow.active {
  background:rgba(216,180,106,0.1); color:var(--gold); border:1px solid rgba(216,180,106,0.2);
}
.player-up-follow:not(.active) {
  background:linear-gradient(135deg,#D8B46A,#B98A35); color:#1a1a1a;
}
.player-up-follow:active { transform:scale(0.92); }

/* --- Player: 选集 --- */
.player-section-title {
  font-size:16px; font-weight:700; color:var(--text-1); padding:16px 16px 10px;
}
.player-ep-tabs {
  display:flex; gap:0; padding:0 16px; margin-bottom:12px;
}
.player-ep-tab {
  flex:1; padding:8px 0; text-align:center; font-size:13px; font-weight:500;
  color:var(--text-3); background:none; border:none; cursor:pointer;
  border-bottom:2px solid transparent; transition:all 0.2s;
}
.player-ep-tab.active { color:var(--gold); border-bottom-color:var(--gold); }
.player-ep-grid {
  display:grid; grid-template-columns:repeat(5,1fr); gap:8px; padding:0 16px 12px;
}
.player-ep-item {
  aspect-ratio:1; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center;
  font-size:14px; font-weight:500; color:var(--text-2); background:var(--bg-card);
  border:1px solid rgba(216,180,106,0.08); cursor:pointer; transition:all 0.15s;
}
.player-ep-item.active {
  background:rgba(216,180,106,0.12); color:var(--gold); border-color:rgba(216,180,106,0.3);
  box-shadow:0 0 12px rgba(216,180,106,0.1);
}
.player-ep-item:active { transform:scale(0.9); }

/* --- Player: 评论区 --- */
.player-comments { padding:0 16px 16px; }
.player-comment-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 16px 10px;
}
.player-comment-count { font-size:13px; color:var(--text-3); }
.player-comment {
  display:flex; gap:10px; padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,0.04);
}
.player-comment:last-child { border-bottom:none; }
.player-comment-avatar {
  width:34px; height:34px; border-radius:50%; object-fit:cover; flex-shrink:0;
  background:var(--bg-elevated);
}
.player-comment-body { flex:1; min-width:0; }
.player-comment-name { font-size:13px; font-weight:500; color:var(--gold); margin-bottom:4px; }
.player-comment-text { font-size:13px; line-height:1.6; color:var(--text-2); }
.player-comment-meta {
  display:flex; align-items:center; gap:16px; margin-top:6px; font-size:11px; color:var(--text-3);
}
.player-comment-meta span { display:flex; align-items:center; gap:3px; }
.player-comment-input {
  display:flex; align-items:center; gap:10px; padding:12px 16px;
  background:var(--bg-card); border-radius:var(--radius-md);
  border:1px solid rgba(216,180,106,0.08); margin-top:12px;
}
.player-comment-input span { font-size:13px; color:var(--text-3); flex:1; }
.player-comment-input svg { color:var(--text-3); }

/* --- Player: 分割线 --- */
.player-divider {
  height:8px; background:rgba(0,0,0,0.3); margin:0;
}

/* ============================================================
   PAGE: Mine — 参考设计稿+暗色适配
   ============================================================ */
.mine-page { padding-bottom: 68px; min-height: 100vh; }

.mine-header {
  position: relative;
  padding: 16px 20px 20px;
  background: linear-gradient(180deg,
    rgba(255,80,130,0.22) 0%,
    rgba(255,60,110,0.10) 40%,
    transparent 100%);
}

.mine-settings {
  position: absolute; right: 16px; top: 16px; z-index: 10;
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all var(--motion-fast) var(--ease-spring);
}
.mine-settings:active { transform: scale(0.85); }

.mine-avatar-row {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 4px;
}
.mine-avatar {
  width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(135deg, #2a1a2e, #1a1020);
  border: 2.5px solid rgba(255,80,130,0.25);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(255,79,163,0.20);
}
.mine-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mine-login-text {
  font-size: 20px; font-weight: 700; letter-spacing: -0.02em;
}
.mine-id {
  font-size: 14px; color: var(--text-3); margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.mine-vip-status {
  font-size: 14px; color: var(--text-3); margin-top: 6px;
  padding-left: 86px;
}

/* 两个正方形卡片并排 */
.mine-cards-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 16px 16px 14px;
}

/* 会员中心 — 粉色渐变正方形 */
.mine-vip-card {
  border-radius: 16px;
  padding: 14px 14px 12px;
  background: linear-gradient(135deg, #2A2418 0%, #1A1510 55%, #1E1A0C 100%);
  border: 1px solid rgba(216,180,106,0.30);
  box-shadow: 0 6px 18px rgba(216,180,106,0.18), 0 0 24px rgba(216,180,106,0.08);
  position: relative; overflow: hidden;
  cursor: pointer;
  aspect-ratio: 1;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: all var(--motion-fast) var(--ease-spring);
}
.mine-vip-card:active { transform: scale(0.96); }
.mine-vip-card::before {
  content: '';
  position: absolute; right: -20px; top: -28px;
  width: 100px; height: 100px; border-radius: 50%;
  background: radial-gradient(circle, rgba(216,180,106,0.18) 0%, transparent 70%);
  pointer-events: none;
}
.mine-vip-label {
  font-size: 16px; font-weight: 700;
  color: #D8B46A;
  text-shadow: 0 0 10px rgba(216,180,106,0.45), 0 0 20px rgba(216,180,106,0.15);
}
.mine-vip-desc {
  font-size: 13px; margin-top: 4px;
  color: rgba(216,180,106,0.55);
}
.mine-vip-icon {
  position: absolute; right: 6px; bottom: 36px;
  width: 52px; height: 52px;
}
.mine-vip-btn {
  display: inline-flex; align-items: center; align-self: flex-start;
  padding: 7px 16px; border-radius: 999px;
  background: linear-gradient(120deg, #F3DFA7, #D8B46A 55%, #B98A35);
  box-shadow: 0 4px 12px rgba(216,180,106,0.30), 0 0 18px rgba(216,180,106,0.15);
  font-size: 14px; font-weight: 600; color: #231803;
  cursor: pointer; border: none;
  transition: all var(--motion-fast) var(--ease-spring);
}
.mine-vip-btn:active { transform: scale(0.93); }

/* 钱包中心 — 黑金渐变正方形 */
.mine-wallet-card {
  border-radius: 16px;
  padding: 14px 14px 12px;
  background: linear-gradient(120deg, #2A2418 0%, #171410 60%, #241E0A 100%);
  border: 1px solid rgba(216,180,106,0.30);
  box-shadow: 0 5px 14px rgba(216,180,106,0.16), 0 0 22px rgba(216,180,106,0.08);
  cursor: pointer;
  position: relative; overflow: hidden;
  aspect-ratio: 1;
  display: flex; flex-direction: column; justify-content: space-between;
  transition: all var(--motion-fast) var(--ease-spring);
}
.mine-wallet-card:active { transform: scale(0.96); }
.mine-wallet-title {
  font-size: 16px; font-weight: 700;
  color: #D8B46A;
  text-shadow: 0 0 10px rgba(216,180,106,0.45), 0 0 20px rgba(216,180,106,0.15);
}
.mine-wallet-balance {
  display: inline-flex; align-items: center; align-self: flex-start;
  padding: 7px 16px; border-radius: 999px;
  background: linear-gradient(120deg, #D8B46A, #B98A35);
  font-size: 14px; font-weight: 500; color: #231803;
  box-shadow: 0 4px 12px rgba(216,180,106,0.30), 0 0 16px rgba(216,180,106,0.12);
}
.mine-wallet-star {
  position: absolute; right: 6px; bottom: 36px;
  width: 52px; height: 52px;
}

/* 5 function icons */
.mine-funcs {
  display: flex; justify-content: space-around;
  padding: 6px 8px 0; margin-bottom: 16px;
}
.mine-func {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  cursor: pointer; padding: 6px 0; width: 56px;
  transition: transform var(--motion-fast) var(--ease-spring);
}
.mine-func:active { transform: scale(0.88); }
.mine-func-ic {
  width: 46px; height: 46px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
}
.mine-func-tx {
  font-size: 12px; color: var(--text-2); font-weight: 500;
  white-space: nowrap;
}

/* Ad Banner */
.mine-ad {
  margin: 0 16px 18px; border-radius: 12px;
  overflow: hidden; 
  background: var(--bg-card);
}
.mine-ad img { width: 100%; display: block; }

/* 常用功能 — 4×2 grid */
.mine-utils-title {
  padding: 4px 20px 12px;
  font-size: 15px; font-weight: 700;
  letter-spacing: -0.01em;
}
.mine-utils-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 4px 0; padding: 0 16px 20px;
}
.mine-util {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 12px 0; cursor: pointer;
  transition: transform var(--motion-fast) var(--ease-spring);
}
.mine-util:active { transform: scale(0.88); }
.mine-util-ic {
  width: 42px; height: 42px; border-radius: 12px;
  background: rgba(255,255,255,0.045);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-2);
}
.mine-util:active .mine-util-ic { background: rgba(255,255,255,0.08); }
.mine-util-tx {
  font-size: 12px; color: var(--text-2); font-weight: 500;
}

/* ============================================================
   PAGE: Placeholder
   ============================================================ */
.placeholder-page {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding-bottom: 68px;
}
.placeholder-icon {
  width: 88px; height: 88px; border-radius: 50%;
  background: rgba(255,255,255,0.025);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 20px;
}
.placeholder-title { font-size: 20px; font-weight: 700; margin-bottom: 6px; letter-spacing: -0.3px; }
.placeholder-desc  { font-size: 14px; color: var(--text-3); }

/* ============================================================
   MINE SUB-PAGES — 黑金高级风
   ============================================================ */
@keyframes msub-marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes msub-slideup { from{transform:translateY(100%)} to{transform:translateY(0)} }
@keyframes msub-scan { 0%,100%{top:12px} 50%{top:calc(100% - 14px)} }

.msub-page {
  --gold:#D8B46A; --gold-deep:#B98A35; --gold-line:rgba(216,180,106,0.15); --gold-sub:rgba(255,255,255,0.42);
  min-height:100vh; padding-bottom:20px; overflow-y:auto;
}
.msub-gold-text {
  background:linear-gradient(120deg,#F3DFA7 0%,#D8B46A 45%,#B98A35 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 6px rgba(216,180,106,0.45));
}

/* NavBar */
.msub-nav { position:relative; display:flex; align-items:center; justify-content:center; height:44px; flex-shrink:0; }
.msub-nav-back { position:absolute; left:16px; width:32px; height:32px; display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--gold); background:none; border:none; }
.msub-nav-title { font-size:16px; font-weight:600; letter-spacing:0.15em; color:var(--text-1); }
.msub-nav-right { position:absolute; right:16px; font-size:14px; color:var(--gold); cursor:pointer; background:none; border:none; text-shadow:0 0 6px rgba(216,180,106,0.35); }

/* Gold Button */
.msub-gold-btn {
  width:100%; height:48px; border-radius:999px; border:none;
  font-size:15px; font-weight:700; letter-spacing:0.15em; color:#fff;
  background:linear-gradient(120deg,#F3DFA7,#D8B46A 55%,#B98A35);
  box-shadow:0 8px 24px rgba(216,180,106,0.35), 0 0 28px rgba(216,180,106,0.15); cursor:pointer; transition:transform 0.15s; color:#231803;
}
.msub-gold-btn:active { transform:scale(0.98); }

/* Notice Bar */
.msub-notice {
  margin:12px 16px 0; display:flex; align-items:center; gap:8px;
  border-radius:999px; padding:0 12px; height:32px;
  background:var(--bg-elevated); border:1px solid var(--gold-line); overflow:hidden;
}
.msub-notice-text { flex:1; overflow:hidden; white-space:nowrap; }
.msub-notice-text span { display:inline-block; font-size:13px; color:var(--gold-sub); animation:msub-marquee 30s linear infinite; }

/* Tips */
.msub-tips { padding:0 20px; margin-top:24px; font-size:13px; line-height:1.8; color:var(--gold-sub); }
.msub-tips-title { font-weight:600; color:var(--text-1); margin-bottom:4px; }

/* Coin */
.msub-coin {
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; border-radius:50%; font-weight:700; font-size:12px; color:#5C430E;
  background:radial-gradient(circle at 32% 28%,#F7E3A1,#D8B46A 55%,#8F6B1F);
  box-shadow:inset 0 -2px 4px rgba(0,0,0,0.3),0 1px 3px rgba(0,0,0,0.5), 0 0 8px rgba(216,180,106,0.3);
}
.msub-coin-lg { width:130px; height:130px; font-size:52px; }
.msub-coin-sm { width:18px; height:18px; font-size:9px; }
.msub-coin-md { width:20px; height:20px; font-size:11px; }

/* Member Page — Tabs */
.msub-tabs { display:flex; align-items:center; justify-content:center; gap:40px; padding-top:8px; }
.msub-tab { font-size:15px; color:var(--gold-sub); padding-bottom:4px; position:relative; cursor:pointer; border:none; background:none; }
.msub-tab.active { color:var(--gold); font-weight:700; text-shadow:0 0 8px rgba(216,180,106,0.4); }
.msub-tab.active::after {
  content:''; position:absolute; left:50%; transform:translateX(-50%); bottom:-2px;
  width:20px; height:2px; border-radius:1px; background:var(--gold);
}

/* Card Carousel */
.msub-cards-scroll {
  display:flex; gap:12px; overflow-x:auto; padding:16px 32px 4px;
  scroll-snap-type:x mandatory; scrollbar-width:none;
}
.msub-cards-scroll::-webkit-scrollbar { display:none; }
.msub-vip-card {
  flex-shrink:0; width:280px; height:162px; border-radius:16px; padding:0;
  scroll-snap-align:center; position:relative; overflow:hidden;
  background:#141210; border:1px solid rgba(216,180,106,0.30); cursor:pointer;
  transition:all 0.2s ease;
}
.msub-vip-card:first-child { box-shadow:0 12px 32px rgba(216,180,106,0.22), 0 0 24px rgba(216,180,106,0.10); }
.msub-vip-bg {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
.msub-vip-overlay {
  position:absolute; inset:0;
  background:linear-gradient(135deg,rgba(10,10,15,0.78) 0%,rgba(30,26,12,0.6) 45%,rgba(10,10,15,0.88) 100%);
}
.msub-vip-content { position:relative; z-index:1; padding:16px; height:100%; display:flex; flex-direction:column; }
.msub-vip-tier {
  display:inline-flex; align-self:flex-start; padding:2px 10px; border-radius:999px; font-size:12px; font-weight:700;
  background:linear-gradient(120deg,#F3DFA7,#D8B46A); color:#231803; letter-spacing:0.05em;
  box-shadow:0 0 10px rgba(216,180,106,0.35);
}
.msub-vip-name { font-size:16px; font-weight:800; letter-spacing:0.05em; margin-top:8px; }
.msub-vip-tag {
  display:inline-flex; margin-top:6px; padding:2px 8px; border-radius:4px; font-size:12px;
  color:rgba(255,255,255,0.7); background:rgba(255,255,255,0.10); }
.msub-vip-price { position:absolute; bottom:14px; left:16px; display:flex; align-items:flex-end; gap:4px; z-index:1; }
.msub-vip-price-num { font-size:28px; font-weight:900; line-height:1; }
.msub-vip-price-unit { font-size:14px; font-weight:600; color:var(--gold); margin-bottom:3px; text-shadow:0 0 8px rgba(216,180,106,0.4); }
.msub-vip-crown { position:absolute; right:14px; bottom:14px; opacity:0.8; color:var(--gold); z-index:1; filter:drop-shadow(0 0 6px rgba(216,180,106,0.4)); }

/* Benefits Grid */
.msub-benefits-header { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:20px; }
.msub-benefits-line { width:32px; height:1px; background:var(--gold-line); }
.msub-benefits-title { font-size:16px; font-weight:900; letter-spacing:0.2em; }
.msub-benefits-grid {
  margin:12px 16px 0; border-radius:16px; padding:16px;
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px 0;
  background:var(--bg-card); border:1px solid var(--gold-line);
}
.msub-benefit { display:flex; flex-direction:column; align-items:center; text-align:center; }
.msub-benefit-icon {
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 32% 28%,rgba(243,223,167,0.22),rgba(216,180,106,0.08));
  border:1px solid var(--gold-line); color:var(--gold);
  box-shadow:0 0 10px rgba(216,180,106,0.15);
}
.msub-benefit-name { margin-top:6px; font-size:13px; font-weight:600; color:var(--text-1); }
.msub-benefit-desc { margin-top:2px; font-size:12px; color:var(--gold-sub); transform:scale(0.85); transform-origin:top center; line-height:1.3; }

/* Recharge Page */
.msub-balance {
  margin:12px 16px 0; border-radius:16px; padding:20px 20px 18px;
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,#1E1A0C 0%,#141210 40%,#2A2418 100%);
  border:1px solid rgba(216,180,106,0.30);
  display:flex; align-items:center; justify-content:space-between;
}
.msub-balance::before {
  content:''; position:absolute; right:-30px; top:-30px; width:120px; height:120px;
  border-radius:50%; background:radial-gradient(circle,rgba(216,180,106,0.12),transparent 70%);
  pointer-events:none;
}
.msub-balance::after {
  content:''; position:absolute; left:-20px; bottom:-20px; width:80px; height:80px;
  border-radius:50%; background:radial-gradient(circle,rgba(216,180,106,0.08),transparent 70%);
  pointer-events:none;
}
.msub-balance-info { position:relative; z-index:1; }
.msub-balance-label { font-size:14px; color:var(--gold-sub); }
.msub-balance-val { margin-top:8px; font-size:26px; font-weight:800; letter-spacing:0.02em; }
.msub-balance-icon {
  position:relative; z-index:1; width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 35% 30%,rgba(243,223,167,0.18),rgba(216,180,106,0.06));
  border:1px solid rgba(216,180,106,0.20);
  box-shadow:0 0 12px rgba(216,180,106,0.15);
}
.msub-recharge-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding:16px; }
.msub-recharge-item {
  position:relative; border-radius:16px; padding:16px 0;
  display:flex; flex-direction:column; align-items:center;
  background:var(--bg-card); border:1px solid var(--gold-line); cursor:pointer; transition:all 0.15s;
}
.msub-recharge-item.selected { background:rgba(216,180,106,0.10); border-color:var(--gold); box-shadow:0 6px 20px rgba(216,180,106,0.20), 0 0 18px rgba(216,180,106,0.10); }
.msub-recharge-coins { display:flex; align-items:center; gap:4px; font-size:24px; font-weight:900; color:var(--text-1); }
.msub-recharge-price { margin-top:4px; font-size:14px; color:var(--gold-sub); }
.msub-recharge-gift {
  position:absolute; top:-10px; left:50%; transform:translateX(-50%) scale(0.8);
  white-space:nowrap; padding:2px 8px; border-radius:999px; font-size:13px; font-weight:600;
  background:linear-gradient(120deg,#F3DFA7,#D8B46A); color:#231803;
  box-shadow:0 0 10px rgba(216,180,106,0.35);
}

/* Payment Sheet */
.msub-sheet-overlay { position:fixed; inset:0; z-index:100; display:flex; flex-direction:column; justify-content:flex-end; background:rgba(0,0,0,0.65); }
.msub-sheet { border-radius:24px 24px 0 0; padding:20px 20px 24px; background:var(--bg-card); border-top:1px solid var(--gold-line); animation:msub-slideup 0.25s ease; }
.msub-sheet-title { text-align:center; font-size:15px; font-weight:700; letter-spacing:0.15em; color:var(--text-1); }
.msub-sheet-divider { height:1px; margin:16px 0; background:var(--gold-line); }
.msub-sheet-amount { font-size:14px; font-weight:600; color:var(--text-1); }
.msub-pay-row { display:flex; align-items:center; gap:12px; padding:12px 0; cursor:pointer; width:100%; background:none; border:none; text-align:left; }
.msub-pay-icon { width:36px; height:36px; border-radius:8px; display:flex; align-items:center; justify-content:center; border:1px solid var(--gold-line); }
.msub-pay-icon.alipay { background:rgba(216,180,106,0.14); color:var(--gold); }
.msub-pay-icon.wechat { background:rgba(120,200,120,0.1); color:#7BC87B; }
.msub-pay-name { font-size:14px; color:var(--text-1); }
.msub-pay-radio { margin-left:auto; width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1.5px solid rgba(255,255,255,0.25); }
.msub-pay-radio.checked { border:none; background:linear-gradient(120deg,#F3DFA7,#D8B46A); color:#231803; box-shadow:0 0 10px rgba(216,180,106,0.35); }

/* Records Page */
.msub-records { padding:12px 16px 0; }
.msub-record { border-radius:16px; padding:16px; margin-bottom:12px; display:flex; align-items:center; justify-content:space-between; background:var(--bg-card); border:1px solid var(--gold-line); }
.msub-record-name { font-size:15px; font-weight:600; color:var(--text-1); }
.msub-record-date { margin-top:4px; font-size:13px; color:var(--gold-sub); }
.msub-record-amount { font-size:18px; font-weight:700; }
.msub-record-amount.minus { color:var(--gold-sub); }

/* Settings Page */
.msub-avatar-section { display:flex; flex-direction:column; align-items:center; margin-top:24px; }
.msub-avatar-large { width:74px; height:74px; border-radius:50%; object-fit:cover; border:2px solid var(--gold); box-shadow:0 0 24px rgba(216,180,106,0.35); background:var(--bg-elevated); }
.msub-avatar-name { margin-top:12px; font-size:16px; font-weight:700; letter-spacing:0.05em; color:var(--text-1); }
.msub-settings-list { margin:28px 16px 0; border-radius:16px; padding:0 16px; background:var(--bg-card); border:1px solid var(--gold-line); }
.msub-settings-row { display:flex; align-items:center; padding:16px 0; border-bottom:1px solid var(--gold-line); cursor:pointer; width:100%; background:none; border-left:none; border-right:none; border-top:none; }
.msub-settings-row:last-child { border-bottom:none; }
.msub-settings-row-label { font-size:15px; color:var(--text-1); }
.msub-settings-row-val { margin-left:auto; font-size:14px; color:var(--gold-sub); }
.msub-settings-row-arrow { margin-left:4px; color:var(--gold-sub); }

/* Register Page */
.msub-form { padding:16px; }
.msub-input {
  width:100%; height:48px; border-radius:999px; padding:0 20px; font-size:14px;
  color:var(--text-1); background:var(--bg-card); border:1px solid var(--gold-line);
  outline:none; margin-bottom:16px; font-family:inherit;
}
.msub-input::placeholder { color:#6B675E; }
.msub-input:focus { border-color:var(--gold); box-shadow:0 0 0 2px rgba(216,180,106,0.15); }
.msub-form-tips { display:flex; gap:12px; margin-top:4px; font-size:13px; line-height:1.8; color:var(--gold-sub); }
.msub-form-tips-label { flex-shrink:0; color:var(--text-1); }

/* Recover Page */
.msub-recover-title { padding:20px 20px 12px; font-size:15px; font-weight:700; color:var(--text-1); }
.msub-recover-card {
  margin:0 16px; border-radius:16px; padding:16px; display:flex; align-items:center;
  background:var(--bg-card); border:1px solid var(--gold-line); cursor:pointer;
}
.msub-recover-card-label { font-size:15px; color:var(--text-1); }
.msub-recover-card-arrow { margin-left:auto; color:var(--gold); filter:drop-shadow(0 0 4px rgba(216,180,106,0.4)); }
.msub-recover-tips { padding:20px; font-size:13px; line-height:1.8; color:var(--gold-sub); }

/* Credential Page */
.msub-scanner-wrap {
  position:relative; width:260px; height:260px; margin:56px auto 0;
  border-radius:16px; background:var(--bg-card); border:1px solid var(--gold-line);
}
.msub-scanner-corner { position:absolute; width:28px; height:28px; border-radius:6px; }
.msub-scanner-corner.tl { left:-8px; top:-8px; border-left:3px solid var(--gold); border-top:3px solid var(--gold); filter:drop-shadow(0 0 6px rgba(216,180,106,0.5)); }
.msub-scanner-corner.tr { right:-8px; top:-8px; border-right:3px solid var(--gold); border-top:3px solid var(--gold); filter:drop-shadow(0 0 6px rgba(216,180,106,0.5)); }
.msub-scanner-corner.bl { left:-8px; bottom:-8px; border-left:3px solid var(--gold); border-bottom:3px solid var(--gold); filter:drop-shadow(0 0 6px rgba(216,180,106,0.5)); }
.msub-scanner-corner.br { right:-8px; bottom:-8px; border-right:3px solid var(--gold); border-bottom:3px solid var(--gold); filter:drop-shadow(0 0 6px rgba(216,180,106,0.5)); }
.msub-scanner-line { position:absolute; left:16px; right:16px; height:2px; background:linear-gradient(90deg,transparent,var(--gold),transparent); animation:msub-scan 2.4s ease-in-out infinite; box-shadow:0 0 12px rgba(216,180,106,0.5), 0 0 24px rgba(216,180,106,0.2); }

/* Checkin Page */
.msub-checkin-card { margin:12px 16px 0; border-radius:16px; padding:16px; background:var(--bg-card); border:1px solid var(--gold-line); }
.msub-checkin-header { display:flex; align-items:center; justify-content:space-between; }
.msub-checkin-streak { font-size:16px; font-weight:700; color:var(--text-1); }
.msub-checkin-reward { font-size:14px; font-weight:700; text-shadow:0 0 8px rgba(216,180,106,0.4); }
.msub-days-row { display:flex; justify-content:space-between; margin-top:16px; }
.msub-day { display:flex; flex-direction:column; align-items:center; gap:6px; }
.msub-day-box {
  width:40px; height:48px; border-radius:12px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2px; background:var(--bg-elevated); border:1px solid var(--gold-line);
}
.msub-day-box.today { background:linear-gradient(160deg,#F3DFA7,#B98A35); border:none; box-shadow:0 6px 16px rgba(216,180,106,0.35), 0 0 20px rgba(216,180,106,0.15); }
.msub-day-box.today .msub-day-mult { color:#231803; }
.msub-day-mult { font-size:12px; color:var(--gold-sub); }
.msub-day-dot { width:6px; height:6px; border-radius:50%; background:#3A3A3F; }
.msub-day-dot.active { background:var(--gold); box-shadow:0 0 6px rgba(216,180,106,0.5); }
.msub-day-label { font-size:13px; color:var(--gold-sub); }
.msub-stats-card { margin:16px 16px 0; border-radius:16px; padding:16px; background:var(--bg-card); border:1px solid var(--gold-line); }
.msub-stats-title { font-size:15px; font-weight:700; color:var(--text-1); }
.msub-stat-row { margin-top:12px; border-radius:12px; padding:12px; display:flex; align-items:center; gap:12px; background:var(--bg-elevated); }
.msub-stat-label { font-size:14px; color:var(--text-1); }
.msub-stat-val { margin-left:auto; font-size:14px; color:var(--gold-sub); }

/* ============================================================
   DatingPage — 约会页 (黑金风格)
   ============================================================ */
.dt-page { min-height:100vh; padding-bottom:70px; background:var(--bg); }
.dt-top-bar { position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:center; padding:12px 16px; background:rgba(10,10,15,0.92); border-bottom:1px solid rgba(216,180,106,0.12); }
.dt-tabs { display:flex; justify-content:center; gap:6px; }
.dt-tab { padding:6px 16px; border-radius:999px; font-size:14px; font-weight:600; color:rgba(255,255,255,0.5); background:transparent; border:1px solid transparent; cursor:pointer; transition:all 0.25s; white-space:nowrap; }
.dt-tab.active { color:#231803; background:linear-gradient(120deg,#F3DFA7,#D8B46A 55%,#B98A35); border-color:transparent; box-shadow:0 2px 10px rgba(216,180,106,0.40), 0 0 18px rgba(216,180,106,0.15); }
.dt-search-toggle {
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; padding:6px;
  transition:transform 0.2s;
}
.dt-search-toggle:active { transform:translateY(-50%) scale(0.85); }
.dt-search-bar {
  position:sticky; top:48px; z-index:49; padding:8px 14px 10px;
  background:rgba(10,10,15,0.95); border-bottom:1px solid rgba(216,180,106,0.08);
  animation:dtSearchIn 0.25s ease;
}
@keyframes dtSearchIn { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }
.dt-search-input-wrap {
  display:flex; align-items:center; gap:8px;
  background:rgba(216,180,106,0.06); border:1px solid rgba(216,180,106,0.18);
  border-radius:999px; padding:8px 14px;
}
.dt-search-input {
  flex:1; background:none; border:none; outline:none;
  color:#f0f0f0; font-size:14px;
}
.dt-search-input::placeholder { color:rgba(216,180,106,0.35); }
.dt-search-clear {
  background:none; border:none; color:rgba(216,180,106,0.5);
  font-size:14px; cursor:pointer; padding:0 2px;
}
.dt-empty {
  text-align:center; padding:48px 0; color:rgba(216,180,106,0.35);
  font-size:14px;
}
.dt-body { padding:12px 12px 24px; }

/* 卡片入场动画 */
.dt-by-card, .dt-jy-card, .dt-ww-card { animation:dtCardIn 0.4s ease both; }
@keyframes dtCardIn { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }

/* --- 良家包养 卡片 --- */
.dt-list { display:flex; flex-direction:column; gap:12px; }
.dt-by-card { display:block; text-decoration:none; background:linear-gradient(135deg,#1A1714 0%,#141210 100%); border:1px solid rgba(216,180,106,0.18); border-radius:14px; padding:14px; transition:border-color 0.2s; }
.dt-by-card:active { border-color:rgba(216,180,106,0.45); }
.dt-by-top { display:flex; align-items:flex-start; gap:12px; }
.dt-by-avatar { width:72px; height:72px; border-radius:10px; object-fit:cover; flex-shrink:0; border:1px solid rgba(216,180,106,0.15); }
.dt-by-info { flex:1; min-width:0; }
.dt-by-name { font-size:14px; font-weight:700; color:#F3DFA7; line-height:1.4; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin:0; text-shadow:0 0 8px rgba(216,180,106,0.4); }
.dt-by-desc { font-size:12px; color:rgba(255,255,255,0.45); margin:4px 0 0; line-height:1.3; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.dt-by-dist { display:inline-flex; align-items:center; gap:3px; font-size:12px; color:#D8B46A; margin-top:6px; text-shadow:0 0 6px rgba(216,180,106,0.35); }
.dt-by-btn { flex-shrink:0; align-self:center; padding:6px 12px; border-radius:999px; font-size:12px; font-weight:700; color:#231803; background:linear-gradient(120deg,#F3DFA7,#D8B46A 55%,#B98A35); white-space:nowrap; box-shadow:0 2px 10px rgba(216,180,106,0.35), 0 0 16px rgba(216,180,106,0.12); }
.dt-by-previews { display:flex; gap:6px; margin-top:10px; }
.dt-by-preview-img { flex:1; height:80px; border-radius:8px; object-fit:cover; border:1px solid rgba(216,180,106,0.1); }


/* --- 良家包养 卡片2 横向布局 --- */
.dt-by-card2 { display:flex; gap:12px; background:linear-gradient(135deg,#1A1714 0%,#12100D 100%); border:1px solid rgba(216,180,106,0.15); border-radius:16px; padding:12px; transition:border-color 0.25s,box-shadow 0.25s; animation:dtCardIn 0.4s ease both; }
.dt-by-card2:active { border-color:rgba(216,180,106,0.4); box-shadow:0 0 20px rgba(216,180,106,0.08); }
.dt-by-left { position:relative; flex-shrink:0; width:110px; }
.dt-by-cover { width:110px; height:140px; border-radius:12px; object-fit:cover; border:1px solid rgba(216,180,106,0.12); }
.dt-by-badge { position:absolute; bottom:6px; left:6px; font-size:10px; color:#231803; background:linear-gradient(120deg,#F3DFA7,#D8B46A); padding:2px 8px; border-radius:999px; font-weight:700; }
.dt-by-right { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.dt-by-hdr { display:flex; align-items:center; justify-content:space-between; }
.dt-by-name2 { font-size:15px; font-weight:700; color:#F3DFA7; text-shadow:0 0 10px rgba(216,180,106,0.35); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:70%%; }
.dt-by-heart { opacity:0.4; transition:opacity 0.2s; }
.dt-by-pills { display:flex; flex-wrap:wrap; gap:4px; }
.dt-pill { font-size:11px; padding:2px 8px; border-radius:999px; background:rgba(216,180,106,0.1); color:#D8B46A; border:1px solid rgba(216,180,106,0.12); white-space:nowrap; }
.dt-by-loc { display:flex; align-items:center; gap:4px; font-size:12px; color:rgba(216,180,106,0.7); }
.dt-by-foot { display:flex; align-items:center; justify-content:space-between; margin-top:auto; }
.dt-by-thumbs { display:flex; gap:4px; }
.dt-by-thumb { width:36px; height:36px; border-radius:6px; object-fit:cover; border:1px solid rgba(216,180,106,0.1); }
.dt-by-more { width:36px; height:36px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:11px; color:#D8B46A; background:rgba(216,180,106,0.08); border:1px solid rgba(216,180,106,0.12); }
.dt-by-time { font-size:11px; color:rgba(255,255,255,0.35); }

/* --- 分页导航 --- */
.dt-pager { display:flex; align-items:center; justify-content:center; gap:6px; padding:16px 0 8px; }
.dt-pager-btn { min-width:36px; height:36px; border-radius:10px; border:1px solid rgba(216,180,106,0.2); background:rgba(216,180,106,0.06); color:#D8B46A; font-size:13px; font-weight:600; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all 0.2s; user-select:none; padding:0 10px; }
.dt-pager-btn:active { background:rgba(216,180,106,0.15); }
.dt-pager-btn.active { background:linear-gradient(120deg,#F3DFA7,#D8B46A 55%%,#B98A35); color:#231803; border-color:transparent; box-shadow:0 2px 10px rgba(216,180,106,0.3); }
.dt-pager-btn[disabled] { opacity:0.3; pointer-events:none; }
.dt-pager-info { font-size:12px; color:rgba(255,255,255,0.4); margin:0 4px; }

/* --- 高端外围 双列网格 --- */
.dt-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.dt-jy-card { display:flex; flex-direction:column; text-decoration:none; background:linear-gradient(135deg,#1A1714 0%,#141210 100%); border:1px solid rgba(216,180,106,0.18); border-radius:14px; overflow:hidden; transition:border-color 0.2s; }
.dt-jy-card:active { border-color:rgba(216,180,106,0.45); }
.dt-jy-img-wrap { position:relative; width:100%; aspect-ratio:3/4; overflow:hidden; }
.dt-jy-img { width:100%; height:100%; object-fit:cover; }
.dt-jy-overlay { position:absolute; bottom:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; padding:6px 8px; background:linear-gradient(transparent,rgba(0,0,0,0.7)); }
.dt-jy-likes, .dt-jy-dist { display:inline-flex; align-items:center; gap:3px; font-size:11px; color:#D8B46A; text-shadow:0 0 6px rgba(216,180,106,0.4); }
.dt-jy-name { padding:8px 10px 0; font-size:14px; font-weight:700; color:#F3DFA7; line-height:1.3; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; margin:0; text-shadow:0 0 8px rgba(216,180,106,0.4); }
.dt-jy-desc { padding:3px 10px 0; font-size:11px; color:rgba(255,255,255,0.4); line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin:0; }
.dt-jy-btn { margin:8px 10px 10px; padding:7px 0; border-radius:999px; font-size:13px; font-weight:700; text-align:center; color:#231803; background:linear-gradient(120deg,#F3DFA7,#D8B46A 55%,#B98A35); box-shadow:0 2px 10px rgba(216,180,106,0.35), 0 0 16px rgba(216,180,106,0.12); }

/* --- 外围 横向卡片 --- */
.dt-ww-card { display:flex; text-decoration:none; background:linear-gradient(135deg,#1A1714 0%,#141210 100%); border:1px solid rgba(216,180,106,0.18); border-radius:14px; overflow:hidden; transition:border-color 0.2s; }
.dt-ww-card:active { border-color:rgba(216,180,106,0.45); }
.dt-ww-img { width:130px; min-height:160px; object-fit:cover; flex-shrink:0; }
.dt-ww-info { flex:1; padding:12px; display:flex; flex-direction:column; min-width:0; }
.dt-ww-name { font-size:15px; font-weight:700; color:#F3DFA7; margin:0; text-shadow:0 0 8px rgba(216,180,106,0.4); }
.dt-ww-desc { font-size:12px; color:rgba(255,255,255,0.45); margin:6px 0 0; line-height:1.4; }
.dt-ww-meta { display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:8px; }

/* ============================================================
   PAGE: Auth — 黑金3D登录注册
   ============================================================ */
.auth-page {
  position:fixed; inset:0; z-index:200;
  background:#0a0a0c; overflow:hidden;
  display:flex; flex-direction:column;
}
.auth-bg-glow-top {
  position:absolute; top:-120px; left:50%; transform:translateX(-50%);
  width:420px; height:260px; border-radius:50%;
  background:radial-gradient(circle,rgba(212,175,55,0.15),transparent 70%);
  filter:blur(80px); pointer-events:none;
}
.auth-bg-glow-bottom {
  position:absolute; bottom:-80px; left:25%;
  width:340px; height:200px; border-radius:50%;
  background:radial-gradient(circle,rgba(138,106,31,0.18),transparent 70%);
  filter:blur(70px); pointer-events:none;
}
.auth-particles {
  position:absolute; inset:0; pointer-events:none; z-index:0;
}
.auth-content {
  position:relative; z-index:10;
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:20px; overflow-y:auto;
}

/* Logo */
.auth-logo { margin-bottom:20px; display:flex; flex-direction:column; align-items:center; animation:authFloat 4s ease-in-out infinite; }
@keyframes authFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
.auth-logo-circle {
  width:120px; height:120px;
  display:flex; align-items:center; justify-content:center;
}
.auth-logo-icon { font-size:28px; color:#f3d47a; }
.auth-logo-title {
  margin-top:12px; font-size:22px; font-weight:700;
  letter-spacing:0.35em; font-family:Georgia,serif;
  background:linear-gradient(180deg,#f8e7ac,#d4af37 50%,#8a6a1f);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.auth-logo-sub {
  margin-top:4px; font-size:10px; letter-spacing:0.5em;
  color:rgba(179,150,72,0.7); text-transform:uppercase;
}

/* 3D Card */
.auth-card {
  width:100%; max-width:380px;
  border-radius:16px; border:1px solid rgba(212,175,55,0.30);
  background:rgba(0,0,0,0.45);
  padding:24px; position:relative; overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,0.7);
  transition:transform 0.25s ease;
}
.auth-card-shine {
  position:absolute; inset:0; border-radius:16px;
  pointer-events:none; transition:opacity 0.3s;
}
.auth-card-line-top {
  position:absolute; top:0; left:32px; right:32px; height:1px;
  background:linear-gradient(90deg,transparent,rgba(243,212,122,0.7),transparent);
}
.auth-card-line-bottom {
  position:absolute; bottom:0; left:32px; right:32px; height:1px;
  background:linear-gradient(90deg,transparent,rgba(212,175,55,0.45),transparent);
}

/* Tab toggle */
.auth-tabs {
  display:flex; position:relative;
  border-radius:999px; border:1px solid rgba(212,175,55,0.28);
  background:rgba(0,0,0,0.4); padding:3px; margin-bottom:24px;
}
.auth-tab-pill {
  position:absolute; top:3px; bottom:3px; width:calc(50% - 3px);
  border-radius:999px;
  background:linear-gradient(90deg,#b8962e,#f3d47a 50%,#b8962e);
  transition:left 0.3s ease;
  box-shadow:0 2px 12px rgba(212,175,55,0.35);
}
.auth-tab-pill.login { left:3px; }
.auth-tab-pill.register { left:calc(50%); }
.auth-tab-btn {
  position:relative; z-index:2; flex:1;
  padding:10px 0; text-align:center;
  font-size:14px; font-weight:600; letter-spacing:0.25em;
  cursor:pointer; transition:color 0.3s;
  border:none; background:none; color:rgba(201,176,112,0.8);
}
.auth-tab-btn.active { color:#0a0a0c; font-weight:700; }

/* Form fields */
.auth-form { display:flex; flex-direction:column; gap:14px; }
.auth-field {
  position:relative;
}
.auth-field-icon {
  position:absolute; left:0; top:0; bottom:0; width:44px;
  display:flex; align-items:center; justify-content:center;
  border-right:1px solid rgba(212,175,55,0.22);
  color:rgba(212,175,55,0.6); pointer-events:none;
  transition:color 0.3s;
}
.auth-field input:focus ~ .auth-field-icon,
.auth-field input:focus + .auth-field-icon { color:#f3d47a; }
.auth-field input {
  width:100%; height:48px; padding:0 16px 0 52px;
  background:rgba(0,0,0,0.4); border:1px solid rgba(212,175,55,0.25);
  border-radius:10px; font-size:14px; color:#f5e9c8;
  outline:none; font-family:inherit;
  transition:all 0.3s;
}
.auth-field input::placeholder { color:rgba(138,122,74,0.7); }
.auth-field input:focus {
  border-color:#f3d47a;
  background:rgba(0,0,0,0.55);
  box-shadow:0 0 20px rgba(212,175,55,0.20);
}

/* Remember + forgot */
.auth-extras {
  display:flex; justify-content:space-between; align-items:center;
  margin-top:4px; font-size:12px; color:rgba(168,148,88,0.85);
}
.auth-extras label {
  display:flex; align-items:center; gap:6px; cursor:pointer; user-select:none;
}
.auth-extras input[type=checkbox] {
  accent-color:#d4af37; width:14px; height:14px;
}
.auth-extras button {
  background:none; border:none; color:rgba(168,148,88,0.85);
  cursor:pointer; font-size:12px; font-family:inherit;
  transition:color 0.2s;
}
.auth-extras button:hover { color:#f3d47a; }

/* Submit */
.auth-submit {
  position:relative; width:100%; height:48px;
  border-radius:10px; border:none; overflow:hidden;
  margin-top:20px; cursor:pointer;
  font-size:15px; font-weight:700; letter-spacing:0.4em; color:#0a0a0c;
  transition:transform 0.2s;
}
.auth-submit:active { transform:scale(0.97); }
.auth-submit-bg {
  position:absolute; inset:0;
  background:linear-gradient(90deg,#9a7b22,#f3d47a 50%,#9a7b22);
  background-size:200% 100%;
  transition:background-position 0.5s;
}
.auth-submit:hover .auth-submit-bg { background-position:100% 0; }
.auth-submit span { position:relative; z-index:1; }

/* Divider */
.auth-divider {
  display:flex; align-items:center; gap:12px;
  margin-top:22px; font-size:11px; color:rgba(125,108,60,0.8);
}
.auth-divider-line {
  flex:1; height:1px;
  background:linear-gradient(90deg,transparent,rgba(212,175,55,0.25));
}
.auth-divider-line:last-child {
  background:linear-gradient(270deg,transparent,rgba(212,175,55,0.25));
}

/* Social buttons */
.auth-socials { display:flex; justify-content:center; gap:20px; margin-top:14px; }
.auth-social-btn {
  width:42px; height:42px; border-radius:50%;
  border:1px solid rgba(212,175,55,0.30);
  background:transparent; display:flex; align-items:center; justify-content:center;
  color:#d4af37; cursor:pointer;
  transition:all 0.3s;
}
.auth-social-btn:hover {
  background:rgba(212,175,55,0.12);
  box-shadow:0 0 18px rgba(212,175,55,0.30);
}

/* Footer */
.auth-footer {
  margin-top:18px; font-size:10px; color:rgba(109,92,48,0.7);
  letter-spacing:0.15em; text-align:center;
}

/* Toast */
.auth-toast {
  position:absolute; top:32px; left:50%; transform:translateX(-50%);
  z-index:220; padding:10px 22px; border-radius:999px;
  border:1px solid rgba(212,175,55,0.45);
  background:rgba(0,0,0,0.8); color:#f3d47a; font-size:14px; white-space:nowrap;
  box-shadow:0 0 25px rgba(212,175,55,0.30);
  animation:authToastIn 0.3s ease;
}
@keyframes authToastIn {
  from { opacity:0; transform:translate(-50%,-10px); }
  to { opacity:1; transform:translate(-50%,0); }
}

/* Back button */
.auth-back {
  position:absolute; top:16px; left:16px; z-index:220;
  width:36px; height:36px; border-radius:50%;
  border:1px solid rgba(212,175,55,0.25);
  background:rgba(0,0,0,0.4); display:flex; align-items:center; justify-content:center;
  color:#d4af37; cursor:pointer;
  transition:all 0.3s;
}
.auth-back:active { transform:scale(0.88); background:rgba(212,175,55,0.12); }

/* Shake */
@keyframes authShake {
  0%,100%{transform:translateX(0)} 25%{transform:translateX(-8px)} 75%{transform:translateX(8px)}
}
.auth-shake { animation:authShake 0.4s ease; }
.w100 { width:100%; }

/* ========== 历史观看 ========== */
.msub-nav-right {
  position:absolute; right:16px; top:50%; transform:translateY(-50%);
  background:none; border:none; color:var(--gold); font-size:13px;
  cursor:pointer; padding:4px 8px;
}
.hist-list { padding:0 14px 24px; }
.hist-group { margin-bottom:8px; }
.hist-date {
  font-size:13px; color:var(--gold-sub); padding:14px 0 8px;
  border-bottom:1px solid var(--gold-line); margin-bottom:10px;
}
.hist-item {
  display:flex; gap:12px; padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,0.04);
  cursor:pointer; animation:fadeUp .4s ease both;
}
.hist-item:active { opacity:0.7; }
.hist-cover {
  position:relative; width:140px; min-width:140px; height:80px;
  border-radius:8px; overflow:hidden; background:#1a1a20;
}
.hist-cover img { width:100%; height:100%; object-fit:cover; }
.hist-dur {
  position:absolute; bottom:4px; right:4px;
  background:rgba(0,0,0,0.75); color:#fff; font-size:11px;
  padding:1px 5px; border-radius:4px;
}
.hist-info { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:center; gap:6px; }
.hist-title {
  font-size:14px; color:#eee; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.hist-meta { font-size:12px; color:var(--gold-sub); }
.hist-tabs { display:flex; padding:0 14px; margin-bottom:4px; }
.hist-tab { flex:1; text-align:center; padding:10px 0; font-size:14px; color:rgba(255,255,255,0.45); cursor:pointer; position:relative; transition:color .25s; }
.hist-tab.active { color:var(--gold); font-weight:600; }
.hist-tab.active::after { content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%); width:24px; height:2.5px; background:var(--gold); border-radius:2px; }

/* ========== 我的喜欢 ========== */
.likes-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  padding:8px 14px 24px;
}
.likes-card {
  border-radius:10px; overflow:hidden;
  background:#141418; cursor:pointer;
  animation:fadeUp .4s ease both;
}
.likes-card:active { opacity:0.7; transform:scale(0.97); }
.likes-cover {
  position:relative; width:100%; aspect-ratio:16/10;
  background:#1a1a20; overflow:hidden;
}
.likes-cover img { width:100%; height:100%; object-fit:cover; }
.likes-dur {
  position:absolute; bottom:5px; right:5px;
  background:rgba(0,0,0,0.75); color:#fff; font-size:11px;
  padding:1px 5px; border-radius:4px;
}
.likes-heart {
  position:absolute; top:6px; right:6px;
  width:24px; height:24px; border-radius:50%;
  background:rgba(0,0,0,0.5); display:flex;
  align-items:center; justify-content:center;
}
.likes-title {
  font-size:13px; color:#eee; padding:8px 8px 2px; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.likes-meta {
  font-size:11px; color:var(--gold-sub); padding:0 8px 10px;
}

/* ========== 我的购买 ========== */
.purch-list { padding:0 14px 24px; }
.purch-item {
  display:flex; gap:12px; padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,0.04);
  cursor:pointer; animation:fadeUp .4s ease both;
}
.purch-item:active { opacity:0.7; }
.purch-cover {
  position:relative; width:130px; min-width:130px; height:76px;
  border-radius:8px; overflow:hidden; background:#1a1a20;
}
.purch-cover img { width:100%; height:100%; object-fit:cover; }
.purch-dur {
  position:absolute; bottom:4px; right:4px;
  background:rgba(0,0,0,0.75); color:#fff; font-size:11px;
  padding:1px 5px; border-radius:4px;
}
.purch-info { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:space-between; }
.purch-title {
  font-size:14px; color:#eee; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.purch-row { display:flex; align-items:center; justify-content:space-between; }
.purch-price {
  font-size:13px; font-weight:600; padding:2px 8px;
  border-radius:4px;
}
.purch-price.coins { color:#F4D562; background:rgba(244,213,98,0.1); }
.purch-price.vip {
  color:#0A0A0F; background:linear-gradient(135deg,#D8B46A,#F3DFA7);
  text-shadow:0 0.5px 0 rgba(255,255,255,0.3);
}
.purch-date { font-size:12px; color:var(--gold-sub); }

/* ============================================================
   Welcome 弹窗 — 视频App风格
   ============================================================ */
@keyframes wpopIn { 0%{opacity:0;transform:translate(-50%,-50%) scale(0.85)} 100%{opacity:1;transform:translate(-50%,-50%) scale(1)} }
@keyframes wpopCloseIn { 0%{opacity:0;transform:translateY(-8px)} 100%{opacity:1;transform:translateY(0)} }

.wpop-mask {
  position:fixed; inset:0; z-index:9000;
  background:rgba(0,0,0,0.55);
}
.wpop {
  position:fixed; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:280px; border-radius:14px; overflow:hidden;
  background:#1b1b1f;
  box-shadow:0 12px 40px rgba(0,0,0,0.6);
  animation:wpopIn 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.wpop-head {
  height:130px; padding:24px 20px 0;
  background:linear-gradient(135deg,#2a1a3e 0%,#1a1028 40%,#0f1a2e 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.wpop-vip {
  font-size:32px; font-weight:800; letter-spacing:0.15em;
  color:#e8d5a3;
  text-shadow:0 2px 12px rgba(212,175,55,0.3);
}
.wpop-slogan {
  margin-top:6px; font-size:12px; color:rgba(232,213,163,0.6); letter-spacing:0.2em;
}
.wpop-body {
  padding:18px 20px 20px; text-align:center;
}
.wpop-line {
  font-size:13px; color:#999; line-height:1.8;
}
.wpop-tip {
  margin-top:12px; font-size:12px; color:#e8d5a3;
}
.wpop-btn {
  margin-top:16px; width:100%; padding:11px 0;
  border:none; border-radius:22px; cursor:pointer;
  font-size:14px; font-weight:600; color:#1b1b1f;
  background:linear-gradient(90deg,#e8d5a3,#c4a86c);
}
.wpop-btn:active { opacity:0.85; }
.wpop-close {
  position:absolute; left:50%; bottom:-50px;
  transform:translateX(-50%);
  width:32px; height:32px; border-radius:50%;
  border:1.5px solid rgba(255,255,255,0.4);
  display:flex; align-items:center; justify-content:center;
  color:rgba(255,255,255,0.6); font-size:14px;
  cursor:pointer;
  animation:wpopCloseIn 0.3s 0.2s both;
}

/* coop */
.coop{padding:0 0 130px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.coop-hd{padding:48px 20px 20px}
.coop-hd h2{font-size:24px;font-weight:700;color:var(--text-1);margin-bottom:6px}
.coop-hd p{font-size:13px;color:var(--text-3);line-height:1.6}
.coop-card{margin:0 16px 16px;background:var(--bg-card);border-radius:14px;overflow:hidden}
.coop-row{display:flex;gap:14px;padding:16px}
.coop-row+.coop-row{border-top:1px solid rgba(255,255,255,0.035)}
.coop-ic{width:36px;height:36px;border-radius:10px;background:rgba(216,180,106,0.08);color:var(--pink);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:17px;font-weight:700}
.coop-row h3{font-size:15px;font-weight:600;color:var(--text-1);margin:0 0 3px}
.coop-row p{font-size:13px;color:var(--text-3);line-height:1.5;margin:0}
.coop-sec{padding:20px 20px 0}
.coop-sec-t{font-size:14px;font-weight:600;color:var(--text-2);margin-bottom:10px}
.coop-li{display:flex;align-items:baseline;gap:8px;padding:5px 0;font-size:14px;color:var(--text-2)}
.coop-li::before{content:'';width:4px;height:4px;border-radius:50%;background:var(--pink);flex-shrink:0;margin-top:7px}
.coop-flow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.coop-fi{background:var(--bg-card);border-radius:12px;padding:14px}
.coop-fi-n{font-size:18px;font-weight:800;color:var(--pink);margin-bottom:4px;font-style:italic}
.coop-fi-t{font-size:14px;font-weight:600;color:var(--text-1);margin-bottom:2px}
.coop-fi-d{font-size:12px;color:var(--text-3)}
.coop-btn-w{position:fixed;bottom:70px;left:0;right:0;padding:14px 20px;background:linear-gradient(to top,var(--bg) 60%,transparent);z-index:10}
.coop-note{text-align:center;padding:20px;font-size:11px;color:var(--text-4)}
.coop-mask{position:fixed;inset:0;background:rgba(0,0,0,0.6);z-index:999;display:flex;align-items:center;justify-content:center}
.coop-dlg{background:var(--bg-elevated);border:1px solid rgba(255,255,255,0.06);border-radius:16px;padding:28px 24px;width:82%;max-width:300px;text-align:center}
.coop-dlg h3{font-size:16px;font-weight:700;color:var(--text-1);margin-bottom:16px}
.coop-dlg-close{width:100%;margin-top:20px;padding:10px;border:none;border-radius:10px;background:var(--bg-glass-2);color:var(--text-2);font-size:14px;font-weight:500;cursor:pointer}

/* cred page */
.cred-page{display:flex;flex-direction:column}
.cred-body{flex:1;display:flex;flex-direction:column;align-items:center;padding:20px 16px}
.cred-card{background:var(--bg-card);border:1px solid rgba(216,180,106,0.15);border-radius:16px;padding:28px 20px;width:100%;max-width:320px;text-align:center;margin-top:20px}
.cred-badge{margin-bottom:12px}
.cred-title{font-size:18px;font-weight:700;color:var(--text-1);margin-bottom:6px}
.cred-level{display:inline-block;padding:3px 14px;border-radius:20px;background:rgba(216,180,106,0.12);color:#D8B46A;font-size:12px;font-weight:600;margin-bottom:20px}
.cred-number{background:rgba(216,180,106,0.08);border:1px dashed rgba(216,180,106,0.25);border-radius:10px;padding:14px;margin-bottom:20px;font-family:monospace;font-size:16px;font-weight:700;color:#D8B46A;letter-spacing:1px;word-break:break-all}
.cred-info-row{display:flex;justify-content:space-around;gap:16px}
.cred-info-item{display:flex;flex-direction:column;align-items:center;gap:4px}
.cred-info-label{font-size:11px;color:var(--text-3)}
.cred-info-val{font-size:13px;color:var(--text-1);font-weight:500}
.cred-warn{display:flex;align-items:flex-start;gap:8px;margin:16px;padding:12px 14px;background:rgba(216,180,106,0.06);border-radius:10px;font-size:12px;color:var(--text-3);line-height:1.5}
/* recover credential */
.rcred-body{padding:20px 16px}
.rcred-step{}
.rcred-step-title{font-size:20px;font-weight:700;color:var(--text-1);margin-bottom:8px}
.rcred-step-desc{font-size:13px;color:var(--text-3);margin-bottom:20px;line-height:1.5}
.rcred-input{width:100%;padding:14px 16px;border:1px solid rgba(255,255,255,0.08);border-radius:10px;background:var(--bg-card);color:var(--text-1);font-size:15px;outline:none;margin-bottom:12px;box-sizing:border-box}
.rcred-input:focus{border-color:rgba(216,180,106,0.4)}
.rcred-err{color:#e74c3c;font-size:13px;margin:4px 0 0}
.rcred-match{background:rgba(216,180,106,0.08);border-radius:10px;padding:14px;margin-bottom:20px;font-size:14px;color:var(--text-2)}
.rcred-match span{color:#D8B46A;font-weight:600}
/* benefit desc */
.msub-benefit-desc{font-size:11px;color:var(--text-3);margin-top:2px;display:block;text-align:center}

/* 3-tab auth */
.auth-tabs-3 .auth-tab-pill{width:calc(33.33% - 3px)}
.auth-tabs-3 .auth-tab-pill.login{left:3px}
.auth-tabs-3 .auth-tab-pill.register{left:calc(33.33%)}
.auth-tabs-3 .auth-tab-pill.credential{left:calc(66.66%)}
.auth-tabs-3 .auth-tab-btn{font-size:13px;letter-spacing:0.1em}

/* Share page */

/* ===== Promotion Center ===== */
.promo-page { background: #0d0d0d; min-height: 100vh; }
.promo-body { padding: 12px 16px 40px; }

/* Dashboard cards */
.promo-dashboard { display: flex; gap: 10px; margin-bottom: 12px; }
.promo-dash-card { flex: 1; background: linear-gradient(135deg, #1e1e2a 0%, #252535 100%); border: 1px solid #D8B46A33; border-radius: 12px; padding: 16px 12px; text-align: center; }
.promo-dash-val { font-size: 20px; font-weight: 700; color: #D8B46A; letter-spacing: -0.5px; }
.promo-dash-label { font-size: 12px; color: #999; margin-top: 4px; }

/* Mini stats row */
.promo-stats-mini { display: flex; justify-content: space-around; padding: 10px 0; font-size: 12px; color: #aaa; margin-bottom: 8px; }
.promo-stats-mini b { color: #D8B46A; margin: 0 2px; }

/* Reward banner */
.promo-reward-banner { background: linear-gradient(90deg, #D8B46A22 0%, #D8B46A11 100%); border: 1px solid #D8B46A44; border-radius: 10px; padding: 10px 14px; display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 13px; color: #D8B46A; }
.promo-reward-icon { font-size: 18px; }

/* QR Code section */
.promo-qr-section { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); border: 1px solid #D8B46A44; border-radius: 16px; padding: 14px 16px; text-align: center; margin-bottom: 14px; position: relative; overflow: hidden; }
.promo-qr-title { font-size: 14px; font-weight: 700; color: #D8B46A; margin-bottom: 10px; letter-spacing: 2px; }
.promo-qr-wrap { display: inline-block; padding: 8px; background: #fff; border-radius: 10px; box-shadow: 0 4px 16px rgba(216,180,106,0.25), 0 0 0 2px rgba(216,180,106,0.15); margin-bottom: 8px; }
.promo-qr-wrap img { display: block !important; border-radius: 4px; }
.promo-qr-wrap canvas { display: none !important; }
.promo-qr-hint { font-size: 12px; color: #D8B46A99; margin-bottom: 10px; letter-spacing: 1px; }
.promo-code-display { font-size: 14px; color: #ccc; margin-bottom: 14px; }
.promo-code-val { color: #D8B46A; font-weight: 700; font-size: 18px; letter-spacing: 2px; margin-left: 6px; }

/* Buttons */
.promo-btn-row { display: flex; gap: 10px; justify-content: center; }
.promo-btn { background: #252535; color: #D8B46A; border: 1px solid #D8B46A55; border-radius: 8px; padding: 10px 20px; font-size: 14px; cursor: pointer; transition: all 0.2s; }
.promo-btn:active { transform: scale(0.96); }
.promo-btn-gold { background: linear-gradient(135deg, #D8B46A 0%, #c5a050 100%); color: #111; border: none; font-weight: 600; }
.promo-btn:disabled { opacity: 0.5; }

/* Tabs */
.promo-tabs { display: flex; border-bottom: 1px solid #333; margin-bottom: 0; }
.promo-tab { flex: 1; text-align: center; padding: 12px 0; font-size: 14px; color: #888; cursor: pointer; position: relative; transition: color 0.2s; }
.promo-tab.active { color: #D8B46A; }
.promo-tab.active::after { content: ""; position: absolute; bottom: 0; left: 25%; width: 50%; height: 2px; background: #D8B46A; border-radius: 1px; }

/* Tab content */
.promo-tab-content { min-height: 120px; padding: 12px 0; }
.promo-empty { text-align: center; color: #666; font-size: 14px; padding: 40px 0; }

/* Invitee list */
.promo-invitee-list { display: flex; flex-direction: column; gap: 8px; }
.promo-invitee-card { display: flex; justify-content: space-between; align-items: center; background: #1a1a28; border-radius: 10px; padding: 12px; border: 1px solid #2a2a3a; }
.promo-inv-left { display: flex; align-items: center; gap: 10px; }
.promo-inv-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 1px solid #D8B46A44; }
.promo-inv-info { display: flex; flex-direction: column; }
.promo-inv-name { font-size: 14px; color: #eee; display: flex; align-items: center; gap: 6px; }
.promo-inv-vip { background: linear-gradient(135deg, #D8B46A, #c5a050); color: #111; font-size: 10px; padding: 1px 6px; border-radius: 4px; font-weight: 600; }
.promo-inv-date { font-size: 11px; color: #777; margin-top: 2px; }
.promo-inv-right { text-align: right; }
.promo-inv-recharge { font-size: 13px; color: #ccc; }
.promo-inv-comm { font-size: 13px; color: #D8B46A; font-weight: 600; }

/* Commission list */
.promo-comm-list { display: flex; flex-direction: column; gap: 8px; }
.promo-comm-card { display: flex; justify-content: space-between; align-items: center; background: #1a1a28; border-radius: 10px; padding: 12px; border: 1px solid #2a2a3a; }
.promo-comm-left { display: flex; flex-direction: column; gap: 2px; }
.promo-comm-name { font-size: 14px; color: #eee; }
.promo-comm-type { font-size: 12px; color: #888; }
.promo-comm-date { font-size: 11px; color: #666; }
.promo-comm-right { text-align: right; }
.promo-comm-amount { font-size: 16px; font-weight: 700; color: #D8B46A; }
.promo-comm-status { font-size: 11px; margin-top: 2px; }
.promo-comm-status.st-pending { color: #e8a735; }
.promo-comm-status.st-settled { color: #4CAF50; }
.promo-comm-status.st-paid { color: #4CAF50; }
.promo-comm-status.st-cancelled { color: #f44; }

/* Payment QR section */
.promo-pay-section { background: #151520; border: 1px solid #2a2a3a; border-radius: 12px; padding: 16px; margin-bottom: 12px; }
.promo-pay-title { font-size: 14px; font-weight: 600; color: #eee; margin-bottom: 12px; }
.promo-pay-slot { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.promo-pay-preview { text-align: center; }
.promo-pay-preview img { width: 120px; height: 120px; object-fit: cover; border-radius: 8px; border: 1px solid #D8B46A44; margin-bottom: 6px; }
.promo-pay-preview div { font-size: 12px; color: #aaa; }
.promo-pay-empty { color: #666; font-size: 13px; padding: 20px 0; }
.promo-pay-input { width: 100%; max-width: 240px; background: #0d0d0d; border: 1px solid #333; border-radius: 8px; padding: 8px 12px; color: #eee; font-size: 13px; outline: none; text-align: center; }
.promo-pay-input:focus { border-color: #D8B46A; }

/* Rules */
.promo-rules-section { margin-top: 16px; padding: 16px; background: #151520; border-radius: 12px; border: 1px solid #2a2a3a; }
.promo-rules-title { font-size: 14px; font-weight: 600; color: #eee; margin-bottom: 12px; }
.promo-rule { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; font-size: 13px; color: #aaa; line-height: 1.5; }
.promo-rule-n { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; min-width: 22px; background: #D8B46A22; color: #D8B46A; border-radius: 50%; font-size: 12px; font-weight: 600; }

/* Booking v2 */
.bk2{padding:0 0 130px;overflow-y:auto;-webkit-overflow-scrolling:touch;background:var(--bg)}
.bk2-hero{padding:50px 24px 24px;text-align:center}
.bk2-hero-badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:2px;color:#D8B46A;border:1px solid rgba(216,180,106,0.25);border-radius:4px;padding:3px 10px;margin-bottom:14px}
.bk2-hero-title{font-size:24px;font-weight:800;color:var(--text-1);line-height:1.35;margin-bottom:10px}
.bk2-hero-sub{font-size:20px;font-weight:600;color:#D8B46A}
.bk2-hero-desc{font-size:13px;color:var(--text-3)}
.bk2-tabs{display:flex;gap:10px;padding:0 16px;margin-bottom:16px}
.bk2-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;height:42px;border:1px solid rgba(255,255,255,0.06);background:var(--bg-card);color:var(--text-3);font-size:13px;font-weight:500;border-radius:10px;cursor:pointer;transition:all .25s}
.bk2-tab.on{background:rgba(216,180,106,0.12);border-color:rgba(216,180,106,0.25);color:#D8B46A;font-weight:600}
.bk2-tab svg{opacity:0.5}
.bk2-tab.on svg{opacity:1;color:#D8B46A}
.bk2-body{padding:0 16px}
.bk2-highlight{background:var(--bg-card);border:1px solid rgba(216,180,106,0.12);border-radius:16px;padding:28px 20px;text-align:center;margin-bottom:12px;position:relative;overflow:hidden}
.bk2-highlight::before{content:'';position:absolute;top:0;left:20%;right:20%;height:1px;background:linear-gradient(90deg,transparent,rgba(216,180,106,0.3),transparent)}
.bk2-hl-icon{width:60px;height:60px;border-radius:50%;border:1.5px solid rgba(216,180,106,0.2);display:flex;align-items:center;justify-content:center;margin:0 auto 14px;background:rgba(216,180,106,0.04)}
.bk2-hl-title{font-size:20px;font-weight:700;color:var(--text-1);margin-bottom:6px}
.bk2-hl-desc{font-size:13px;color:var(--text-3);margin-bottom:14px}
.bk2-hl-tags{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.bk2-tag{font-size:11px;font-weight:500;color:#D8B46A;background:rgba(216,180,106,0.08);border:1px solid rgba(216,180,106,0.15);border-radius:4px;padding:3px 10px;letter-spacing:0.3px}
.bk2-card{background:var(--bg-card);border-radius:14px;padding:18px 16px;margin-bottom:12px}
.bk2-card-hd{font-size:15px;font-weight:600;color:var(--text-1);margin-bottom:14px;padding-left:10px;border-left:3px solid #D8B46A}
.bk2-perk{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:13px;color:var(--text-2);line-height:1.4}
.bk2-chk{width:18px;height:18px;border-radius:50%;background:rgba(216,180,106,0.08);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.bk2-steps{position:relative;padding-left:14px}
.bk2-steps::before{content:'';position:absolute;left:25px;top:14px;bottom:14px;width:1px;background:rgba(216,180,106,0.12)}
.bk2-step{display:flex;gap:14px;align-items:flex-start;padding:10px 0;position:relative}
.bk2-step-n{width:24px;height:24px;border-radius:50%;background:rgba(216,180,106,0.1);color:#D8B46A;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;z-index:1}
.bk2-step-body{min-width:0}
.bk2-step-t{font-size:14px;font-weight:600;color:var(--text-1);margin-bottom:2px}
.bk2-step-d{font-size:12px;color:var(--text-3)}
.bk2-bottom{position:fixed;bottom:70px;left:0;right:0;padding:14px 20px;background:linear-gradient(to top,var(--bg) 60%,transparent);z-index:10}

/* Home logo */
.home-logo-wrap { flex-shrink:0; width:48px; height:48px; }
.home-logo-img { width:48px; height:48px; border-radius:50%; object-fit:contain; background:transparent; }
.home-dl-btn { flex-shrink:0; width:36px; height:36px; display:flex; align-items:center; justify-content:center; cursor:pointer; }

/* ===== SV Video Element ===== */
.sv-video { position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;display:block;background:#000; }

/* ===== Douyin-style Comments Panel ===== */
.sv-cm-mask { position:fixed;inset:0;z-index:250;background:rgba(0,0,0,0.6);animation:fadeIn .2s ease; }
@keyframes fadeIn { from{opacity:0} to{opacity:1} }
.sv-cm-sheet {
  position:absolute;bottom:0;left:0;right:0;max-height:72vh;
  background:#1c1c1e;border-radius:14px 14px 0 0;
  display:flex;flex-direction:column;
  animation:sheetUp .32s cubic-bezier(.32,.72,.24,1.02);
}
@keyframes sheetUp { from{transform:translateY(100%)} to{transform:translateY(0)} }
.sv-cm-bar { width:36px;height:4px;border-radius:2px;background:rgba(255,255,255,0.15);margin:10px auto 0; }
.sv-cm-head {
  padding:12px 16px;display:flex;align-items:center;justify-content:center;position:relative;
}
.sv-cm-head .title { color:#fff;font-size:15px;font-weight:600; }
.sv-cm-head .close {
  position:absolute;right:14px;top:50%;transform:translateY(-50%);
  width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,0.1);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  color:rgba(255,255,255,0.5);font-size:16px;transition:background .2s;
}
.sv-cm-head .close:active { background:rgba(255,255,255,0.2); }
.sv-cm-list { flex:1;overflow-y:auto;padding:4px 16px 8px;-webkit-overflow-scrolling:touch; }
.sv-cm-empty { text-align:center;padding:50px 0;color:rgba(255,255,255,0.2);font-size:14px; }
.sv-cm-item { display:flex;gap:12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,0.04); }
.sv-cm-item:last-child { border-bottom:none; }
.sv-cm-av {
  width:36px;height:36px;border-radius:50%;flex-shrink:0;
  background:rgba(255,255,255,0.08);overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.sv-cm-av img { width:100%;height:100%;object-fit:cover; }
.sv-cm-av .letter { color:rgba(255,255,255,0.4);font-size:14px;font-weight:500; }
.sv-cm-body { flex:1;min-width:0; }
.sv-cm-nick { color:rgba(255,255,255,0.4);font-size:13px;font-weight:500; }
.sv-cm-txt { color:rgba(255,255,255,0.92);font-size:14px;margin-top:5px;line-height:1.5;word-break:break-word; }
.sv-cm-meta { display:flex;align-items:center;gap:16px;margin-top:8px; }
.sv-cm-time { color:rgba(255,255,255,0.2);font-size:11px; }
.sv-cm-like {
  display:flex;align-items:center;gap:3px;color:rgba(255,255,255,0.25);font-size:11px;cursor:pointer;
  transition:color .2s;
}
.sv-cm-like:active { color:#FE2C55; }
.sv-cm-like svg { width:14px;height:14px; }
.sv-cm-input-area {
  padding:10px 12px;padding-bottom:max(10px,env(safe-area-inset-bottom));
  border-top:1px solid rgba(255,255,255,0.06);display:flex;gap:8px;
  background:#1c1c1e;
}
.sv-cm-input-area input {
  flex:1;padding:10px 16px;border-radius:20px;border:none;
  background:rgba(255,255,255,0.08);color:#fff;font-size:14px;outline:none;
}
.sv-cm-input-area input::placeholder { color:rgba(255,255,255,0.2); }
.sv-cm-input-area .send-btn {
  padding:10px 18px;border-radius:20px;border:none;cursor:pointer;
  background:#FE2C55;color:#fff;font-size:14px;font-weight:600;
  transition:opacity .2s;white-space:nowrap;
}
.sv-cm-input-area .send-btn:active { opacity:0.7; }

/* ===== Douyin-style Share Panel ===== */
.sv-share-mask { position:fixed;inset:0;z-index:300;background:rgba(0,0,0,0.6);animation:fadeIn .2s ease; }
.sv-share-sheet {
  position:absolute;bottom:0;left:0;right:0;
  background:#1c1c1e;border-radius:14px 14px 0 0;
  padding:0 0 max(16px,env(safe-area-inset-bottom));
  animation:sheetUp .32s cubic-bezier(.32,.72,.24,1.02);
}
.sv-share-sheet .bar { width:36px;height:4px;border-radius:2px;background:rgba(255,255,255,0.15);margin:10px auto 0; }
.sv-share-title { text-align:center;padding:14px 0 12px;color:rgba(255,255,255,0.6);font-size:13px;font-weight:500; }
.sv-share-grid { display:flex;justify-content:center;gap:28px;padding:8px 20px 16px; }
.sv-share-item {
  display:flex;flex-direction:column;align-items:center;gap:8px;cursor:pointer;
  transition:transform .15s;
}
.sv-share-item:active { transform:scale(0.9); }
.sv-share-icon {
  width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;
}
.sv-share-icon.wechat { background:#07C160; }
.sv-share-icon.qq { background:#12B7F5; }
.sv-share-icon.link { background:rgba(255,255,255,0.1); }
.sv-share-icon.more { background:rgba(255,255,255,0.1); }
.sv-share-label { color:rgba(255,255,255,0.6);font-size:11px; }
.sv-share-cancel {
  margin:4px 16px 0;padding:14px;text-align:center;
  border-radius:12px;background:rgba(255,255,255,0.06);
  color:rgba(255,255,255,0.7);font-size:15px;cursor:pointer;
}
.sv-share-cancel:active { background:rgba(255,255,255,0.1); }

/* Short video progress bar (Douyin style) */
.sv-progress { position:absolute; bottom:60px; left:0; right:0; height:4px; background:rgba(255,255,255,0.2); z-index:30; cursor:pointer; padding:10px 0; background-clip:content-box; touch-action:none; }
.sv-progress-fill { height:4px; width:0; background:#fff; border-radius:0 2px 2px 0; transition:width .15s linear; box-shadow:0 0 4px rgba(255,255,255,0.4); position:relative; }
.sv-progress-fill::after { content:""; position:absolute; right:-6px; top:50%; transform:translateY(-50%); width:12px; height:12px; background:#fff; border-radius:50%; opacity:0; transition:opacity .2s; box-shadow:0 0 6px rgba(255,255,255,0.6); }
.sv-dragging .sv-progress-fill::after, .sv-progress:hover .sv-progress-fill::after { opacity:1; }
.sv-dragging .sv-progress, .sv-progress:hover { height:6px; }
.sv-dragging .sv-progress-fill, .sv-progress:hover .sv-progress-fill { height:6px; transition:none; }

.sv-fs-btn { position:absolute; right:12px; bottom:80px; z-index:35; width:40px; height:40px; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.4); border-radius:50%; cursor:pointer; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.sv-refresh-indicator { position:fixed; top:80px; left:50%; transform:translateX(-50%); z-index:60; background:rgba(0,0,0,0.6); color:#fff; padding:6px 18px; border-radius:20px; font-size:13px; pointer-events:none; animation:svRefreshFade 2s ease forwards; }
@keyframes svRefreshFade { 0%{opacity:1;} 70%{opacity:1;} 100%{opacity:0;} }

/* SV buffering spinner */
.sv-buffering { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:25; pointer-events:none; }
.sv-spin { width:40px; height:40px; border:3px solid rgba(255,255,255,0.2); border-top-color:#fff; border-radius:50%; animation:svSpin .8s linear infinite; }
@keyframes svSpin { to { transform:rotate(360deg) } }

/* SV speed badge */
.sv-speed-badge { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:25; background:rgba(0,0,0,0.6); color:#fff; font-size:18px; font-weight:700; padding:8px 20px; border-radius:24px; pointer-events:none; letter-spacing:1px; }

/* SV mute button + time */
.sv-time-row { position:absolute; bottom:68px; left:12px; right:12px; z-index:25; display:flex; align-items:center; gap:8px; pointer-events:none; }
.sv-mute-btn { width:32px; height:32px; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0.35); border-radius:50%; pointer-events:auto; cursor:pointer; flex-shrink:0; }
.sv-time-text { color:rgba(255,255,255,0.7); font-size:11px; font-variant-numeric:tabular-nums; text-shadow:0 1px 3px rgba(0,0,0,0.5); }

/* Player seek zones */
.dp-seek-left, .dp-seek-right { position:absolute; top:0; width:35%; height:calc(100% - 46px); z-index:5; }
.dp-seek-left { left:0; }
.dp-seek-right { right:0; }

/* SV play button - better visibility when paused */
.sv-slide.paused .sv-play-btn { opacity:1 !important; }

/* Seek preview overlay */
.sv-seek-preview { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:26; background:rgba(0,0,0,0.7); color:#fff; font-size:22px; font-weight:700; padding:10px 24px; border-radius:12px; pointer-events:none; font-variant-numeric:tabular-nums; letter-spacing:1px; }

/* Network error toast */
.sv-network-error { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:30; text-align:center; pointer-events:none; }
.sv-network-error span { display:block; color:rgba(255,255,255,0.8); font-size:13px; margin-top:8px; }

/* === SKELETON LOADING === */
.skeleton{position:relative;overflow:hidden;background:#1a1a2e;border-radius:8px}
.skeleton::after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.04) 50%,transparent 100%);animation:sk-shimmer 1.5s infinite}
@keyframes sk-shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.skeleton-card{aspect-ratio:16/9;border-radius:8px;margin-bottom:8px}
.skeleton-text{height:14px;border-radius:4px;margin-top:6px;width:70%}
.skeleton-text.short{width:40%}
.skeleton-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:0 12px}
.skeleton-item{margin-bottom:12px}

/* === PAGE TRANSITIONS === */
.fade-enter-active,.fade-leave-active{transition:opacity .2s ease}
.fade-enter-from,.fade-leave-to{opacity:0}
.slide-up-enter-active,.slide-up-leave-active{transition:all .25s cubic-bezier(.4,0,.2,1)}
.slide-up-enter-from{opacity:0;transform:translateY(16px)}
.slide-up-leave-to{opacity:0;transform:translateY(-8px)}
.slide-right-enter-active,.slide-right-leave-active{transition:all .25s cubic-bezier(.4,0,.2,1)}
.slide-right-enter-from{transform:translateX(30px);opacity:0}
.slide-right-leave-to{transform:translateX(-30px);opacity:0}

/* === SMOOTH SCROLL === */
html{scroll-behavior:smooth}
*{-webkit-tap-highlight-color:transparent}
.page-container{min-height:100vh;will-change:opacity}

/* === IMAGE LAZY LOAD PLACEHOLDER === */
.lazy-img{opacity:0;transition:opacity .3s ease}
.lazy-img.loaded{opacity:1}
img[loading="lazy"]{background:#1a1a2e}

/* === PULL TO REFRESH === */
.ptr-indicator{text-align:center;padding:12px 0;color:rgba(255,255,255,.5);font-size:13px;transition:all .3s ease;overflow:hidden;max-height:0}
.ptr-indicator.active{max-height:50px}
.ptr-spinner{display:inline-block;width:18px;height:18px;border:2px solid rgba(255,255,255,.2);border-top-color:#1989fa;border-radius:50%;animation:ptr-spin .6s linear infinite}
@keyframes ptr-spin{to{transform:rotate(360deg)}}

/* === BUTTON PRESS FEEDBACK === */
.btn-press{transition:transform .1s ease;-webkit-tap-highlight-color:transparent}
.btn-press:active{transform:scale(.96)}

/* === TOAST ANIMATION === */
.toast-anim{animation:toast-in .3s cubic-bezier(.4,0,.2,1)}
@keyframes toast-in{0%{opacity:0;transform:translate(-50%,-50%) scale(.85)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}

/* === LOADING DOTS === */
.loading-dots::after{content:'';animation:dots 1.5s steps(4) infinite}
@keyframes dots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}

/* === SMOOTH VIDEO CARD HOVER === */
.video-card{transition:transform .2s ease,box-shadow .2s ease}
.video-card:active{transform:scale(.97)}

/* === BOTTOM TAB BAR SMOOTH === */
.tab-bar-item{transition:color .2s ease}
.tab-bar-item.active{transition:color .15s ease}

/* === CONTENT AREA PADDING FOR SAFE AREA === */
@supports(padding-bottom:env(safe-area-inset-bottom)){
  .tab-bar{padding-bottom:env(safe-area-inset-bottom)}
}

/* === Mobile Performance Overrides (safe, scoped) === */
@media (max-width: 768px) {
  *, *::before, *::after {
    -webkit-tap-highlight-color: transparent;
  }

  .video-card, .more-card, .sv-card,
  .auth-card, .msub-vip-card, .dt-card {
    box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
  }

  .tabbar, .sv-tabbar, .player-nav,
  .cat-bottom, .dt-top-bar, .dt-search-bar,
  .msub-nav, .sv-refresh-indicator, .sv-speed-badge, .sv-seek-preview {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .overlay, .auth-bg-glow-top, .auth-bg-glow-bottom {
    filter: none !important;
  }

  .video-card, .more-card, .sv-card,
  .msub-vip-card, .msub-recharge-item,
  .msub-settings-row, .msub-pay-row,
  .dt-card, .cat-chip, .tabbar-item {
    transition: opacity 0.15s ease !important;
  }

  .home-scroll, .cat-scroll, .sv-container,
  .msub-page, .dt-page, .player-page {
    -webkit-overflow-scrolling: touch;
  }

  .sv-tabbar, .player-nav,
  .cat-bottom, .msub-nav, .dt-top-bar {
    will-change: transform;
    transform: translateZ(0);
  }

  .tabbar {
    will-change: transform;
    transform: translateX(-50%) translateZ(0);
  }

  .video-card, .more-card, .dt-card {
    content-visibility: auto;
    contain-intrinsic-size: auto 200px;
  }

  img, video {
    content-visibility: auto;
  }

  .video-card:hover, .more-card:hover,
  .cat-chip:hover, .tabbar-item:hover {
    transform: none !important;
    filter: none !important;
  }
}

/* ===== GirlDetailPage ===== */
.gd-page{min-height:100vh;background:#0a0a0f;padding-bottom:80px}
.gd-header{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:rgba(10,10,15,0.95);backdrop-filter:blur(8px)}
.gd-back{background:none;border:none;padding:4px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.gd-htitle{font-size:16px;font-weight:600;color:#fff}
.gd-hspace{width:30px}
.gd-loading{text-align:center;color:rgba(255,255,255,0.4);padding:60px 0;font-size:14px}

/* 九宫格 */
.gd-grid-wrap{padding:12px}
.gd-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;border-radius:8px;overflow:hidden}
.gd-grid-item{position:relative;aspect-ratio:1;overflow:hidden;cursor:pointer;background:#111}
.gd-grid-item:first-child:nth-last-child(1){grid-column:span 3;aspect-ratio:3/4}
.gd-grid-item:first-child:nth-last-child(2),.gd-grid-item:first-child:nth-last-child(2)~.gd-grid-item{grid-column:span 1;aspect-ratio:1}
.gd-grid-img{width:100%;height:100%;object-fit:cover;transition:transform .2s}
.gd-grid-item:active .gd-grid-img{transform:scale(1.05)}
.gd-no-img{display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,0.3);font-size:13px;grid-column:span 3;aspect-ratio:3/2}

/* Lightbox */
.gd-lightbox{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,0.95);display:flex;align-items:center;justify-content:center}
.gd-lb-img{max-width:100%;max-height:90vh;object-fit:contain;border-radius:4px}
.gd-lb-close{position:absolute;top:16px;right:16px;background:none;border:none;color:#fff;font-size:32px;cursor:pointer;z-index:2;padding:8px}
.gd-lb-prev,.gd-lb-next{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,0.1);border:none;color:#fff;font-size:36px;padding:12px 16px;cursor:pointer;border-radius:8px;z-index:2}
.gd-lb-prev{left:8px}
.gd-lb-next{right:8px}
.gd-lb-counter{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,0.6);font-size:14px}

/* Info */
.gd-body{padding:20px 16px}
.gd-name-row{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.gd-name{font-size:18px;font-weight:700;color:#fff;word-break:break-word;line-height:1.4}
.gd-badge{font-size:11px;color:#34d399;background:rgba(52,211,153,0.1);padding:3px 10px;border-radius:12px;border:1px solid rgba(52,211,153,0.2)}
.gd-meta{display:flex;align-items:center;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.gd-meta-item{font-size:13px;color:rgba(255,255,255,0.55);background:rgba(255,255,255,0.05);padding:4px 12px;border-radius:6px}
.gd-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.gd-tag{background:rgba(216,180,106,0.1);color:#D8B46A;font-size:12px;padding:5px 14px;border-radius:6px}
.gd-section{margin-bottom:20px}
.gd-sec-title{font-size:15px;font-weight:600;color:#D8B46A;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid rgba(216,180,106,0.15)}
.gd-desc{white-space:pre-wrap;word-break:break-word;font-size:14px;color:rgba(255,255,255,0.8);line-height:2;background:rgba(255,255,255,0.03);padding:16px;border-radius:10px}
.gd-desc a{color:#D8B46A;text-decoration:underline}
.gd-blur{filter:blur(4px);user-select:none;color:rgba(255,255,255,0.3)}
.gd-stats{display:flex;gap:20px}
.gd-stat{font-size:13px;color:rgba(255,255,255,0.35)}

/* Bottom bar */
.gd-bottom{position:fixed;bottom:0;left:0;right:0;padding:12px 16px calc(env(safe-area-inset-bottom,0px) + 12px);background:rgba(10,10,15,0.95);backdrop-filter:blur(8px);border-top:1px solid rgba(255,255,255,0.06);z-index:50}
.gd-contact-btn{width:100%;padding:14px;border:none;border-radius:12px;background:linear-gradient(135deg,#D8B46A,#c9a050);color:#1a1a2e;font-size:15px;font-weight:700;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity .2s}
.gd-contact-btn:active{opacity:0.8}
.gd-vip-btn{background:linear-gradient(135deg,#E8385D,#d42e50);color:#fff}









/* History / Likes / Purchases video list */
.msub-video-list{padding:12px 16px;}
.msub-video-item{display:flex;align-items:center;padding:12px 0;border-bottom:1px solid var(--gold-line);cursor:pointer;gap:12px;}
.msub-video-item:last-child{border-bottom:none;}
.msub-video-cover{width:120px;height:68px;border-radius:8px;overflow:hidden;flex-shrink:0;background:var(--bg-2);}
.msub-video-cover img{width:100%;height:100%;object-fit:cover;display:block;}
.msub-video-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;}
.msub-video-title{font-size:14px;color:var(--text-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0;line-height:1.4;}
.msub-video-meta{font-size:12px;color:var(--gold-sub);margin:0;line-height:1.3;}

/* ===== Fullscreen ===== */
.sv-slide:fullscreen, .sv-slide:-webkit-full-screen { background:#000; }
.sv-slide:fullscreen .sv-video, .sv-slide:-webkit-full-screen .sv-video { width:100vw; height:100vh; object-fit:contain; }
.sv-slide:fullscreen .sv-progress, .sv-slide:-webkit-full-screen .sv-progress { bottom:20px; z-index:100; }
.sv-slide:fullscreen .sv-actions, .sv-slide:-webkit-full-screen .sv-actions { z-index:100; }
.sv-slide:fullscreen .sv-bottom-area, .sv-slide:-webkit-full-screen .sv-bottom-area { z-index:100; }
.sv-slide:fullscreen .sv-fs-btn, .sv-slide:-webkit-full-screen .sv-fs-btn { z-index:100; }
.sv-slide:fullscreen .sv-time-row, .sv-slide:-webkit-full-screen .sv-time-row { z-index:100; }

/* ===== Payment UI v2 ===== */
.pay-methods{display:flex;flex-direction:column;gap:10px;margin:12px 0 16px}
.pay-method{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:14px;border:1.5px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.03);cursor:pointer;transition:all .2s ease;position:relative;overflow:hidden}
.pay-method::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .2s}
.pay-method.wx-sel{border-color:rgba(7,193,96,0.5);background:rgba(7,193,96,0.06)}
.pay-method.wx-sel::before{opacity:1;background:linear-gradient(135deg,rgba(7,193,96,0.08),transparent 60%)}
.pay-method.ali-sel{border-color:rgba(22,119,255,0.5);background:rgba(22,119,255,0.06)}
.pay-method.ali-sel::before{opacity:1;background:linear-gradient(135deg,rgba(22,119,255,0.08),transparent 60%)}
.pay-icon-wrap{width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;z-index:1}
.pay-icon-wrap.wx{background:rgba(7,193,96,0.12)}
.pay-icon-wrap.ali{background:rgba(22,119,255,0.12)}
.pay-info{flex:1;min-width:0;position:relative;z-index:1}
.pay-info-name{font-size:15px;font-weight:600;color:var(--text-1);line-height:1.3}
.pay-info-desc{font-size:12px;color:var(--gold-sub);margin-top:2px;line-height:1.3}
.pay-radio{width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,0.15);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s;position:relative;z-index:1}
.pay-radio.checked{border:none}
.pay-radio.wx-checked{background:#07C160;box-shadow:0 0 12px rgba(7,193,96,0.4)}
.pay-radio.ali-checked{background:#1677FF;box-shadow:0 0 12px rgba(22,119,255,0.4)}
.pay-radio-dot{width:8px;height:8px;border-radius:50%;background:white;opacity:0;transform:scale(0);transition:all .2s}
.pay-radio.checked .pay-radio-dot{opacity:1;transform:scale(1)}
.pay-sheet-summary{display:flex;align-items:center;justify-content:space-between;padding:16px;border-radius:14px;background:rgba(216,180,106,0.06);border:1px solid var(--gold-line);margin-bottom:16px}
.pay-sheet-summary-left{display:flex;flex-direction:column;gap:2px}
.pay-sheet-summary-label{font-size:13px;color:var(--gold-sub)}
.pay-sheet-summary-coins{font-size:18px;font-weight:800;color:var(--text-1);display:flex;align-items:center;gap:6px}
.pay-sheet-summary-price{font-size:26px;font-weight:900}
.pay-safe{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:12px;font-size:12px;color:var(--gold-sub);opacity:0.6}
.pay-safe svg{flex-shrink:0}
.pay-section-label{font-size:13px;font-weight:600;color:var(--gold-sub);margin-bottom:10px;letter-spacing:0.05em}
.msub-sheet-handle{width:36px;height:4px;border-radius:2px;background:rgba(255,255,255,0.15);margin:0 auto 16px}