/* ============================================================
   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); backdrop-filter: blur(16px);
  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);
  backdrop-filter: blur(8px);
  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: 11px; font-weight: 700; letter-spacing: 0.5px;
  padding: 3px 10px; border-radius: 4px;
  backdrop-filter: blur(4px);
}
.badge-free {
  background: linear-gradient(135deg, #2DD4A8 0%, #1DB190 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(45,212,168,0.3), inset 0 1px 0 rgba(255,255,255,0.15);
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.badge-vip {
  background: linear-gradient(135deg, #FFD700 0%, #F0A500 100%);
  color: #2a1800; font-weight: 800;
  box-shadow: 0 2px 10px rgba(255,215,0,0.4), inset 0 1px 0 rgba(255,255,255,0.3);
  text-shadow: 0 0.5px 0 rgba(255,255,255,0.35);
}
.badge-coins {
  background: linear-gradient(135deg, #FF8C42 0%, #E86A20 100%);
  color: #fff; font-weight: 700;
  box-shadow: 0 2px 8px rgba(232,106,32,0.35), inset 0 1px 0 rgba(255,255,255,0.15);
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

.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); backdrop-filter:blur(4px);
  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; backdrop-filter: blur(4px);
}
.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); backdrop-filter: blur(24px);
}
.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 18px; border-radius: var(--radius-full);
  font-size: 14px; font-weight: 500; color: var(--text-3);
  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;
  background: transparent;
  position: relative;
}
.home-cat.active::after {
  content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%);
  width: 18px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, #e8d5a3, #c4a86c);
  box-shadow: 0 0 6px rgba(216,180,106,0.5);
}

/* 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 14s linear infinite;
}
@keyframes marquee {
  0%   { transform: translateX(100%); }
  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: none;
  -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; pointer-events: none; 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: 18px;
}
.sv-avatar-wrap { position: relative; margin-bottom: 6px; cursor: pointer; }
.sv-avatar {
  width: 46px; height: 46px; 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: 30px; height: 30px; filter: drop-shadow(0 1px 4px rgba(0,0,0,0.6)); }
.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: 10px; 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;
  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; aspect-ratio: 16 / 5;
  background: var(--bg-card);
}
.mine-ad img { width: 100%; height: 100%; object-fit: cover; }

/* 常用功能 — 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 12s 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); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
}
.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); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); 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); backdrop-filter:blur(12px);
  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); }

/* --- 同城交友 双列网格 --- */
.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:64px; height:64px; border-radius:50%;
  border:1px solid rgba(212,175,55,0.55);
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,rgba(212,175,55,0.18),transparent);
  box-shadow:0 0 35px rgba(212,175,55,0.30);
  backdrop-filter:blur(6px);
}
.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);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  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); backdrop-filter:blur(8px);
  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); backdrop-filter:blur(6px);
  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); }

/* ========== 我的喜欢 ========== */
.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;
}