:root {

  --bg: #fdfbf7;

  --surface: rgba(255, 255, 255, 0.65);

  --surface-strong: rgba(255, 255, 255, 0.82);

  --text: #2c2c2e;

  --muted: #8a8a8e;

  --accent: #ff8c94;

  --accent-2: #a78bfa;

  --bar-gradient: linear-gradient(90deg, #ffd6dc 0%, #f5ddff 52%, #fff1c7 100%);

  --line: rgba(255, 255, 255, 0.8);

  --shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.04);

  --shadow-hover: 0 12px 40px 0 rgba(0, 0, 0, 0.08);

  --ease: cubic-bezier(0.25, 1, 0.5, 1);

  --sidebar: 296px;

  font-family: "Nunito", "PingFang SC", "MiSans", "Microsoft YaHei", sans-serif;

  color: var(--text);

  background: var(--bg);

}



* {

  box-sizing: border-box;

}



/* html scroll-behavior 由 JS scrollToTarget 显式控制，不设全局 smooth 避免干扰 */



body {

  margin: 0;

  min-height: 100vh;

  background:

    radial-gradient(circle at 12% 8%, rgba(255, 140, 148, 0.2), transparent 26rem),

    radial-gradient(circle at 92% 18%, rgba(167, 139, 250, 0.2), transparent 28rem),

    linear-gradient(180deg, #fff5f2 0%, #fdfbf7 38%, #f3efff 100%);

  color: var(--text);

}



button,

input,

textarea {

  font: inherit;

}



button {

  border: 0;

  cursor: pointer;

}



.glass {

  background: var(--surface);

  backdrop-filter: blur(16px);

  -webkit-backdrop-filter: blur(16px);

  border: 1px solid var(--line);

  box-shadow: var(--shadow);

}



.topbar {

  position: sticky;

  top: 12px;

  z-index: 30;

  width: min(calc(100% - 24px), 1180px);

  height: 60px;

  margin: 12px auto 0;

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 8px 10px;

  border-radius: 20px;

}



.brand-mark {

  min-width: max-content;

  padding: 0 12px;

  height: 42px;

  border-radius: 999px;

  color: var(--text);

  background: transparent;

  font-weight: 800;

  letter-spacing: 0.05em;

  transition: transform 0.4s var(--ease), color 0.4s var(--ease);

}



.brand-mark span {

  visibility: hidden;

}

body.js-ready .brand-mark span {

  visibility: visible;

}

.brand-mark:hover {

  color: var(--accent);

}



.brand-mark:active,

.topbar button:active,

.module-circle:active,

.tab-btn:active,

.sidebar-link:active {

  transform: scale(0.97);

}



.quick-nav {

  display: flex;

  gap: 4px;

  margin-left: auto;

  overflow-x: auto;

  scrollbar-width: none;

}



.quick-nav::-webkit-scrollbar {

  display: none;

}



.quick-nav button {

  min-width: max-content;

  padding: 10px 12px;

  border-radius: 999px;

  background: transparent;

  color: var(--muted);

  font-weight: 700;

  transition: all 0.4s var(--ease);

}



.quick-nav button:hover,

.quick-nav button.active {

  background: rgba(255, 140, 148, 0.14);

  color: var(--text);

}



.icon-btn {

  width: 42px;

  height: 42px;

  border-radius: 999px;

  display: none;

  align-items: center;

  justify-content: center;

  flex-direction: column;

  gap: 4px;

  background: rgba(255, 255, 255, 0.5);

  transition: all 0.4s var(--ease);

}



.icon-btn span {

  display: block;

  width: 18px;

  height: 2px;

  border-radius: 99px;

  background: var(--text);

}



.view {

  width: min(calc(100% - 24px), 1180px);

  margin: 28px auto 70px;

  animation: pageIn 0.45s var(--ease) both;

}



@keyframes pageIn {

  from {

    opacity: 0;

    transform: translateY(14px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}



.home-hero {

  min-height: calc(100vh - 100px);

  display: grid;

  align-content: start;

  gap: clamp(22px, 5vw, 38px);

  padding-top: clamp(10px, 3vw, 24px);

}



.home-banner {

  width: 100%;

  margin: 0;

  overflow: hidden;

  border-radius: 20px;

  background: rgba(255, 255, 255, 0.48);

  box-shadow: 0 16px 42px rgba(44, 44, 46, 0.08);

}



.home-banner img {

  display: block;

  width: 100%;

  max-height: min(72vh, 680px);

  height: auto;

  object-fit: contain;

}



.top-banner img {

  object-position: center;

}



.bottom-banner img {

  object-position: center;

}



.profile {

  display: grid;

  justify-items: center;

  gap: 16px;

  text-align: center;

}



.owner-links {

  display: flex;

  justify-content: center;

  gap: clamp(18px, 5vw, 34px);

  flex-wrap: wrap;

}



.owner-profile {

  display: grid;

  justify-items: center;

  gap: 10px;

  color: var(--text);

  font-size: 15px;

  font-weight: 800;

}



.owner-card {

  width: min(100%, 520px);

  border-radius: 20px;

  padding: 0 0 clamp(18px, 4vw, 26px);

  overflow: hidden;

  display: grid;

  justify-items: center;

  gap: 16px;

  background: rgba(255, 218, 168, 0.42) !important;

  border-color: rgba(255, 190, 120, 0.35);

}



.profile-avatar {

  width: clamp(118px, 30vw, 172px);

  aspect-ratio: 1;

  border-radius: 50%;

  padding: 6px;

  background: linear-gradient(135deg, var(--accent), var(--accent-2));

  box-shadow: 0 16px 52px rgba(255, 140, 148, 0.22);

  transition: all 0.4s var(--ease);

  text-decoration: none;

}



.profile-avatar:hover {

  transform: translateY(-4px);

  box-shadow: 0 18px 68px rgba(167, 139, 250, 0.28);

}



.profile-avatar img {

  width: 100%;

  height: 100%;

  display: block;

  border-radius: 50%;

  object-fit: cover;

  border: 4px solid rgba(255, 255, 255, 0.78);

}



.profile h1 {

  margin: 0;

  font-size: clamp(30px, 8vw, 58px);

  line-height: 1.05;

  letter-spacing: 0.05em;

}



.profile p {

  max-width: 620px;

  margin: 0;

  color: var(--muted);

  line-height: 1.8;

  font-weight: 600;

}



.module-grid {

  display: grid;

  grid-template-columns: repeat(5, minmax(132px, 1fr));

  gap: clamp(14px, 3vw, 24px);

  overflow-x: auto;

  padding: 8px 4px 16px;

  scrollbar-width: none;

}



.price-table-box {

  border-radius: 20px;

  padding: 0 clamp(14px, 4vw, 28px) clamp(18px, 4vw, 28px);

  overflow: hidden;

  background: rgba(255, 218, 168, 0.42) !important;

  border-color: rgba(255, 190, 120, 0.35);

}



.section-bar {

  width: calc(100% + clamp(28px, 8vw, 56px));

  margin: 0 calc(clamp(14px, 4vw, 28px) * -1) clamp(18px, 4vw, 26px);

  padding: 13px 18px;

  background: var(--bar-gradient);

  color: var(--text);

  text-align: center;

  border-bottom: 1px solid rgba(255, 255, 255, 0.72);

}



.home-hero .section-bar {

  background: linear-gradient(90deg, #FFBA84 0%, #FFD4A8 50%, #FFBA84 100%);

  border-bottom: 1px solid rgba(255, 186, 132, 0.45);

}



.owner-card .section-bar,

.message-board .section-bar,

.order-notice .section-bar {

  width: 100%;

  margin: 0 0 clamp(18px, 4vw, 26px);

}



.section-bar h2 {

  margin: 0;

  font-size: clamp(20px, 4.5vw, 28px);

  line-height: 1.2;

  letter-spacing: 0.08em;

  font-weight: 900;

}



.module-grid::-webkit-scrollbar {

  display: none;

}



.module-circle {

  position: relative;

  isolation: isolate;

  min-width: 132px;

  aspect-ratio: 1;

  border-radius: 50%;

  overflow: hidden;

  display: grid;

  place-items: center;

  background: #111111;

  color: #ffffff;

  font-size: clamp(17px, 3vw, 22px);

  font-weight: 800;

  letter-spacing: 0.05em;

  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.08);

  transition: all 0.4s var(--ease);

}



.module-circle.simple-circle {

  padding: 18px;

  font-size: clamp(24px, 5vw, 34px);

  line-height: 1.15;

  text-align: center;

}



.module-circle:hover {

  transform: translateY(-4px);

  box-shadow: var(--shadow-hover);

}



.module-circle img {

  width: 100%;

  height: 100%;

  object-fit: cover;

}



.module-circle .circle-label {

  position: absolute;

  inset: auto 14px 16px;

  z-index: 2;

  padding: 7px 10px;

  border-radius: 999px;

  background: rgba(17, 17, 17, 0.6);

  color: #ffffff;

  font-size: 13px;

  backdrop-filter: blur(10px);

}

/* ── 陪陪展示上方 男陪/女陪 两张独立卡片 ── */

.gender-row {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: clamp(14px, 3vw, 24px);

  width: 100%;

  margin-bottom: clamp(18px, 4vw, 26px);

}

.gender-pick {

  position: relative;

  isolation: isolate;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: clamp(10px, 2vw, 14px);

  padding: clamp(26px, 5vw, 44px) 16px;

  border: none;

  border-radius: 24px;

  color: #ffffff;

  cursor: pointer;

  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);

  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);

}

.gender-pick.gender-male {

  background: linear-gradient(145deg, #4f7cff 0%, #6a4bff 52%, #8f3dff 100%);

}

.gender-pick.gender-female {

  background: linear-gradient(145deg, #ff6fb0 0%, #ff4d8d 52%, #ff2d75 100%);

}

.gender-pick:hover {

  transform: translateY(-5px);

  box-shadow: var(--shadow-hover);

}

.gender-pick-icon {

  display: grid;

  place-items: center;

  width: clamp(76px, 16vw, 116px);

  height: clamp(76px, 16vw, 116px);

  border-radius: 50%;

  overflow: hidden;

  background: rgba(255, 255, 255, 0.18);

  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.25), 0 8px 20px rgba(0, 0, 0, 0.18);

}

.gender-pick-icon img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}

.gender-pick-glyph {

  font-size: clamp(40px, 8vw, 58px);

  font-weight: 800;

  line-height: 1;

  text-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);

}

.gender-pick-name {

  font-size: clamp(22px, 5vw, 30px);

  font-weight: 800;

  letter-spacing: 0.18em;

  padding-left: 0.18em;

  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);

}

.gender-pick-sub {

  font-size: clamp(13px, 2.6vw, 16px);

  letter-spacing: 0.06em;

  opacity: 0.92;

  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);

}

.ripple {

  position: absolute;
  border-radius: 50%;
  pointer-events: none;

  background: rgba(255, 255, 255, 0.55);

  animation: ripple 0.62s var(--ease) forwards;

  transform: translate(-50%, -50%) scale(0);

}



@keyframes ripple {

  to {

    opacity: 0;

    transform: translate(-50%, -50%) scale(3);

  }

}



.message-board {

  width: min(100%, 860px);

  margin: 10px auto 0;

  border-radius: 20px;

  padding: 0 clamp(18px, 4vw, 26px) clamp(18px, 4vw, 26px);

  overflow: hidden;

}



.message-board h2,

.section-title h1 {

  margin: 0 0 8px;

  color: var(--text);

  font-family: "Nunito", "PingFang SC", "Microsoft YaHei", sans-serif;

  font-size: clamp(24px, 5vw, 38px);

  font-weight: 900;

  letter-spacing: 0.03em;

  text-shadow: 0 4px 18px rgba(255, 140, 148, 0.16);

}



.message-board p,

.section-title p {

  margin: 0;

  color: var(--muted);

  line-height: 1.75;

  font-weight: 600;

}



.message-form {

  display: grid;

  gap: 12px;

  margin-top: 18px;

}



.message-form textarea {

  resize: vertical;

  min-height: 104px;

  border: 1px solid rgba(44, 44, 46, 0.08);

  border-radius: 16px;

  background: rgba(255, 255, 255, 0.58);

  padding: 14px;

  color: var(--text);

  outline: none;

  transition: all 0.4s var(--ease);

}



.message-form textarea:focus {

  border-color: rgba(255, 140, 148, 0.5);

  box-shadow: 0 0 0 5px rgba(255, 140, 148, 0.13);

}



.primary-btn {

  justify-self: end;

  border-radius: 999px;

  padding: 12px 20px;

  background: linear-gradient(135deg, var(--accent), var(--accent-2));

  color: #ffffff;

  font-weight: 800;

  box-shadow: 0 12px 28px rgba(255, 140, 148, 0.24);

  transition: all 0.4s var(--ease);

}



.primary-btn:hover {

  transform: translateY(-2px);

}



.message-list {

  margin-top: 20px;

  display: grid;

  gap: 12px;

  padding: 2px 2px 10px;

  scroll-snap-type: y proximity;

}



.message-list h3 {

  grid-column: 1 / -1;

  margin: 0;

  font-size: 16px;

  letter-spacing: 0.05em;

}



.message-item {

  min-height: auto;

  border-radius: 16px;

  padding: 14px 16px;

  background:

    linear-gradient(145deg, rgba(255, 255, 255, 0.68), rgba(255, 245, 247, 0.52)),

    rgba(255, 255, 255, 0.48);

  border: 1px solid rgba(255, 255, 255, 0.7);

  transition: all 0.4s var(--ease);

  scroll-snap-align: start;

}



.message-item:hover {

  transform: translateY(-4px);

  box-shadow: var(--shadow-hover);

}



.message-pagination {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 14px;

  margin-top: 18px;

}



.message-pagination button {

  border-radius: 999px;

  padding: 8px 16px;

  background: rgba(255, 255, 255, 0.62);

  color: var(--text);

  font-weight: 800;

  transition: all 0.3s var(--ease);

}



.message-pagination button:hover:not(:disabled) {

  background: var(--accent);

  color: #ffffff;

}



.message-pagination button:disabled {

  opacity: 0.35;

  cursor: default;

}



.message-pagination .page-info {

  font-weight: 800;

  color: var(--muted);

  font-size: 14px;

}



.message-meta {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 12px;

  margin-bottom: 10px;

}



.message-meta strong {

  color: var(--text);

  font-size: 14px;

}



.message-meta span {

  color: var(--muted);

  font-size: 12px;

  font-weight: 800;

}



.message-item p {

  color: var(--text);

  line-height: 1.7;

  font-weight: 700;

}



.order-notice {

  width: min(100%, 860px);

  margin: 0 auto;

  border-radius: 20px;

  padding: 0 clamp(18px, 4vw, 28px) clamp(18px, 4vw, 28px);

  overflow: hidden;

}



.order-notice p {

  margin: 12px 0 0;

  line-height: 1.8;

  font-weight: 700;

  color: var(--text);

}



.layout-a {

  display: grid;

  grid-template-columns: var(--sidebar) minmax(0, 1fr);

  gap: 24px;

  align-items: start;

}



.desktop-sidebar {

  position: fixed;

  left: max(12px, calc((100vw - 1180px) / 2));

  top: 96px;

  z-index: 20;

  width: var(--sidebar);

  max-height: calc(100vh - 116px);

  border-radius: 20px;

  padding: 16px;

  overflow: auto;

  display: none;

}



body.has-sidebar .desktop-sidebar {

  display: block;

}



body.has-sidebar .view {

  max-width: 1180px;

}



.sidebar-spacer {

  width: var(--sidebar);

}



.search-box {

  width: 100%;

  border: 1px solid rgba(44, 44, 46, 0.08);

  border-radius: 14px;

  background: rgba(255, 255, 255, 0.62);

  color: var(--text);

  padding: 12px 14px;

  outline: none;

  transition: all 0.4s var(--ease);

}



.search-box:focus {

  border-color: rgba(167, 139, 250, 0.45);

  box-shadow: 0 0 0 5px rgba(167, 139, 250, 0.12);

}



.sidebar-group {

  margin-top: 14px;

}



.group-toggle {

  width: 100%;

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 10px 8px;

  border-radius: 12px;

  background: transparent;

  color: var(--text);

  font-weight: 800;

  letter-spacing: 0.05em;

  transition: all 0.4s var(--ease);

}



.group-toggle:hover {

  background: rgba(255, 140, 148, 0.1);

}



.sidebar-list {

  display: grid;

  gap: 4px;

  margin-top: 6px;

}



.sidebar-group.collapsed .sidebar-list {

  display: none;

}



.sidebar-link {

  width: 100%;

  position: relative;

  text-align: left;

  padding: 10px 10px 10px 16px;

  border-radius: 12px;

  background: transparent;

  color: var(--muted);

  font-size: 14px;

  font-weight: 700;

  transition: all 0.4s var(--ease);

}



.sidebar-link::before {

  content: "";

  position: absolute;

  left: 4px;

  top: 10px;

  bottom: 10px;

  width: 3px;

  border-radius: 99px;

  background: transparent;

}



.sidebar-link:hover,

.sidebar-link.active {

  color: var(--text);

  background: rgba(255, 255, 255, 0.5);

}



.sidebar-link.active::before {

  background: var(--accent);

}



.section-title {

  margin-bottom: 18px;

  text-align: center;

}



.poster-stack {

  display: grid;

  gap: 22px;

}



.poster-card {

  overflow: hidden;

  border-radius: 20px;

  scroll-margin-top: 100px; /* 桌面：topbar 84px + 16px 缓冲 */

  transition: all 0.4s var(--ease);

}



.poster-card:hover {

  transform: translateY(-4px);

  box-shadow: var(--shadow-hover);

}



.poster-shell {

  position: relative;

  min-height: 340px;

  background: rgba(255, 255, 255, 0.44);

}



.poster-shell::before {

  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.68) 50%, transparent 70%);

  transform: translateX(-100%);

  animation: shimmer 1.25s infinite;

}



.poster-shell.loaded::before {

  display: none;

}



@keyframes shimmer {

  to {

    transform: translateX(100%);

  }

}



.poster-img {

  display: block;

  width: 100%;

  height: auto;

  opacity: 0;

  transition: opacity 0.55s var(--ease);

}



.poster-shell.loaded .poster-img {

  opacity: 1;

}



.poster-caption {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 14px;

  padding: 13px 16px;

  color: var(--muted);

  font-weight: 700;

}



.poster-caption strong {

  color: var(--text);

}



.poster-note {

  margin: 0;

  padding: 0 16px 16px;

  color: var(--text);

  font-weight: 800;

  line-height: 1.75;

  white-space: normal;

}



.light-layout {

  display: grid;

  gap: 18px;

}



.tabs {

  position: sticky;

  top: 84px;

  z-index: 18;

  display: flex;

  gap: 8px;

  overflow-x: auto;

  border-radius: 20px;

  padding: 8px;

  scrollbar-width: none;

}



.tabs::-webkit-scrollbar {

  display: none;

}



.tab-btn {

  min-width: max-content;

  border-radius: 999px;

  padding: 10px 14px;

  background: transparent;

  color: var(--muted);

  font-weight: 800;

  transition: all 0.4s var(--ease);

}



.tab-btn.active,

.tab-btn:hover {

  color: var(--text);

  background: rgba(255, 140, 148, 0.14);

}



.light-grid {

  columns: 1;

  column-gap: 18px;

}



.light-grid .poster-card {

  break-inside: avoid;

  margin-bottom: 18px;

  scroll-margin-top: 148px; /* 桌面：topbar 84px + tabs 48px + 16px 缓冲 */

}



.drawer-mask {

  position: fixed;

  inset: 0;

  z-index: 35;

  background: rgba(44, 44, 46, 0.16);

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.4s var(--ease);

}



.drawer-mask.open {

  opacity: 1;

  pointer-events: auto;

}



.mobile-drawer {

  position: fixed;

  inset: 0 auto 0 0;

  z-index: 40;

  width: min(86vw, 330px);

  padding: 18px;

  overflow: auto;

  transform: translateX(-110%);

  transition: transform 0.4s var(--ease);

  border-radius: 0 20px 20px 0;

}



.mobile-drawer.open {

  transform: translateX(0);

}



.modal-backdrop {

  position: fixed;

  inset: 0;

  z-index: 80;

  display: grid;

  place-items: center;

  padding: 18px;

  background: rgba(44, 44, 46, 0.2);

  opacity: 0;

  pointer-events: none;

  transition: all 0.4s var(--ease);

}



.modal-backdrop.open {

  opacity: 1;

  pointer-events: auto;

}



.entry-modal {

  position: relative;

  width: min(100%, 640px);

  max-height: min(86vh, 720px);

  overflow: auto;

  border-radius: 20px;

  padding: clamp(22px, 5vw, 34px);

  transform: translateY(20px) scale(0.98);

  transition: all 0.4s var(--ease);

}



.modal-backdrop.open .entry-modal {

  transform: translateY(0) scale(1);

}



.entry-modal h2 {

  margin: 0 42px 16px 0;

  font-size: clamp(22px, 5vw, 34px);

  letter-spacing: 0.05em;

}



.modal-copy {

  display: grid;

  gap: 10px;

}



.modal-copy p {

  margin: 0;

  line-height: 1.75;

  color: var(--text);

  font-weight: 700;

}



.modal-close {

  position: absolute;

  top: 16px;

  right: 16px;

  width: 38px;

  height: 38px;

  border-radius: 999px;

  background: rgba(255, 255, 255, 0.62);

  color: var(--text);

  font-size: 24px;

  line-height: 1;

  transition: all 0.4s var(--ease);

}



.modal-close:hover {

  color: var(--accent);

  transform: rotate(8deg);

}



.modal-confirm {

  margin-top: 20px;

  justify-self: start;

}



.toast {

  position: fixed;

  left: 50%;

  bottom: 24px;

  z-index: 60;

  max-width: calc(100vw - 32px);

  transform: translate(-50%, 22px);

  opacity: 0;

  pointer-events: none;

  padding: 12px 18px;

  border-radius: 999px;

  background: rgba(44, 44, 46, 0.86);

  color: #ffffff;

  font-weight: 800;

  box-shadow: var(--shadow-hover);

  transition: all 0.4s var(--ease);

}



.toast.show {

  opacity: 1;

  transform: translate(-50%, 0);

}



.empty {

  padding: 20px;

  border-radius: 16px;

  color: var(--muted);

}



@media (min-width: 760px) {

  .light-grid {

    columns: 2;

  }

}



@media (min-width: 980px) {

  body.has-sidebar .view {

    width: min(calc(100% - 24px), 1180px);

  }



  .layout-a .content-column {

    grid-column: 2;

  }

}



@media (max-width: 979px) {

  .icon-btn {

    display: flex;

  }



  body:not(.has-sidebar) .menu-toggle {

    visibility: hidden;

  }



  .desktop-sidebar {

    display: none !important;

  }



  .layout-a {

    display: block;

  }



  .sidebar-spacer {

    display: none;

  }



  .quick-nav {

    max-width: 52vw;

  }

}



/* ── 陪陪展示 ── */



.companion-box {

  border-radius: 20px;

  padding: 0 clamp(14px, 4vw, 28px) clamp(18px, 4vw, 26px);

  overflow: hidden;

  background: rgba(218, 218, 255, 0.38) !important;

  border-color: rgba(167, 139, 250, 0.3);

}



.companion-box .section-bar {

  background: linear-gradient(90deg, #c4b5fd 0%, #e0d5ff 50%, #c4b5fd 100%);

  border-bottom: 1px solid rgba(167, 139, 250, 0.35);

  width: calc(100% + clamp(28px, 8vw, 56px));

  margin: 0 calc(clamp(14px, 4vw, 28px) * -1) clamp(18px, 4vw, 26px);

  text-align: center;

}



.companion-box .module-grid {

  grid-template-columns: repeat(2, minmax(132px, 1fr));

  justify-content: center;

  max-width: 380px;

  margin: 0 auto;

  gap: clamp(14px, 3vw, 24px);

}



/* ── 陪陪照片墙 ── */



.wall-group {

  margin-bottom: 20px;

}



.wall-group:last-child {

  margin-bottom: 0;

}



.wall-group-title {

  margin: 0 0 10px;

  padding: 0 4px;

  font-size: 15px;

  font-weight: 800;

  color: #8b7dbc;

  letter-spacing: 0.06em;

}



.wall-row {

  display: flex;

  gap: 12px;

  overflow-x: auto;

  scroll-snap-type: x mandatory;

  -webkit-overflow-scrolling: touch;

  padding-bottom: 6px;

  scrollbar-width: thin;

  scrollbar-color: rgba(167, 139, 250, 0.3) transparent;

}



.wall-row::-webkit-scrollbar {

  height: 5px;

}



.wall-row::-webkit-scrollbar-thumb {

  background: rgba(167, 139, 250, 0.35);

  border-radius: 8px;

}



.wall-card {

  flex: 0 0 150px;

  scroll-snap-align: start;

  border-radius: 14px;

  overflow: hidden;

  cursor: pointer;

  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);

  background: rgba(26, 26, 62, 0.35) !important;

  border: 1px solid rgba(167, 139, 250, 0.18);

}



.wall-card:hover {

  transform: translateY(-4px);

  box-shadow: var(--shadow-hover);

  border-color: rgba(167, 139, 250, 0.45);

}



.wall-card-thumb {

  width: 100%;

  aspect-ratio: 3 / 4;

  background-size: cover;

  background-position: center;

  position: relative;

}



.wall-card-thumb.no-poster {

  background: linear-gradient(145deg, #2d1b69 0%, #1a1a3e 45%, #1e3a5f 100%);

}



.wall-card-thumb.no-poster::after {

  content: '🎮';

  position: absolute;

  inset: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 36px;

  opacity: 0.25;

}



.wall-card-name {

  padding: 8px 10px;

  font-size: 13px;

  font-weight: 700;

  text-align: center;

  color: #e0d6ff;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  letter-spacing: 0.04em;

}



.wall-empty {

  text-align: center;

  padding: 24px 16px;

  color: #8b7dbc;

  font-weight: 700;

  font-size: 14px;

}



@media (max-width: 640px) {

  .wall-card {

    flex: 0 0 128px;

  }

}



.companion-layout {

  display: grid;

  gap: 18px;

}



.companion-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));

  gap: clamp(14px, 3vw, 22px);

}



.companion-loading,

.companion-grid .empty-state {

  grid-column: 1 / -1;

  text-align: center;

  padding: 48px 20px;

  color: var(--muted);

  font-weight: 700;

  font-size: 16px;

}



/* ── 首页陪陪轮播 ── */



.home-carousel {

  position: relative;

  max-width: 860px;

  margin: 0 auto clamp(14px, 3vw, 20px);

  overflow: hidden;

  border-radius: 16px;

}



.home-carousel-track {

  display: flex;

  transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);

  will-change: transform;

  touch-action: pan-y pinch-zoom;

}



.carousel-slide {

  flex: 0 0 100%;

  padding: 0 clamp(4px, 1vw, 10px);

}



.carousel-card {

  position: relative;

  aspect-ratio: 16 / 9;

  border-radius: 14px;

  overflow: hidden;

  background-size: cover;

  background-position: center;

  background-color: #1a1a3e;

  cursor: pointer;

  transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.carousel-card:hover {

  transform: scale(1.015);

  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);

}



.carousel-no-poster {

  position: absolute;

  inset: 0;

  display: flex;

  align-items: center;

  justify-content: center;

  background: linear-gradient(145deg, #2d1b69, #1a1a3e, #1e3a5f);

  font-size: 48px;

  opacity: 0.3;

}



.carousel-card-overlay {

  position: absolute;

  inset: auto 0 0 0;

  padding: clamp(12px, 3vw, 20px);

  background: linear-gradient(transparent, rgba(0, 0, 0, 0.72));

  color: #fff;

  border-radius: 0 0 14px 14px;

}



.carousel-card-label {

  display: inline-block;

  padding: 3px 10px;

  border-radius: 999px;

  background: rgba(167, 139, 250, 0.55);

  font-size: 12px;

  font-weight: 800;

  margin-bottom: 6px;

  backdrop-filter: blur(6px);

  letter-spacing: 0.02em;

}



.carousel-card-name {

  display: block;

  font-size: clamp(15px, 3vw, 20px);

  font-weight: 900;

  letter-spacing: 0.04em;

}



.carousel-arrow {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  width: clamp(36px, 6vw, 44px);

  height: clamp(36px, 6vw, 44px);

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.72);

  backdrop-filter: blur(8px);

  border: 1px solid rgba(255, 255, 255, 0.5);

  color: var(--text);

  font-size: clamp(22px, 4vw, 30px);

  line-height: 1;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  z-index: 2;

  transition: all 0.3s ease;

  opacity: 0;

  pointer-events: none;

}



.home-carousel:hover .carousel-arrow {

  opacity: 1;

  pointer-events: auto;

}



.carousel-arrow:hover {

  background: rgba(255, 255, 255, 0.92);

  transform: translateY(-50%) scale(1.08);

}



.carousel-prev {

  left: clamp(8px, 2vw, 16px);

}



.carousel-next {

  right: clamp(8px, 2vw, 16px);

}



.carousel-dots {

  display: flex;

  justify-content: center;

  gap: 8px;

  margin-top: 12px;

}



.carousel-dot {

  width: 10px;

  height: 10px;

  border-radius: 50%;

  background: rgba(167, 139, 250, 0.28);

  border: none;

  cursor: pointer;

  transition: all 0.3s ease;

  padding: 0;

}



.carousel-dot.active {

  background: var(--accent-2);

  transform: scale(1.35);

}



/* Mobile carousel adjustments */

@media (max-width: 640px) {

  .carousel-card {

    aspect-ratio: 4 / 3;

  }



  .carousel-slide {

    padding: 0 3px;

  }



  .carousel-arrow {

    opacity: 1;

    pointer-events: auto;

    width: 34px;

    height: 34px;

  }



  .carousel-card-name {

    font-size: 14px;

  }

}



.companion-card {

  overflow: hidden;

  border-radius: 20px;

  cursor: pointer;

  transition: all 0.4s var(--ease);

}



.companion-card:hover {

  transform: translateY(-4px);

  box-shadow: var(--shadow-hover);

}



.companion-thumb {

  position: relative;

  aspect-ratio: 4 / 5;

  background: linear-gradient(145deg, #2d1b69 0%, #1a1a3e 45%, #1e3a5f 100%);

  background-size: cover;

  background-position: center;

  overflow: hidden;

}



.companion-video {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}



.companion-play-btn {

  position: absolute;

  inset: 0;

  display: grid;

  place-items: center;

  background: rgba(0, 0, 0, 0.14);

  transition: background 0.3s var(--ease);

}



.companion-card:hover .companion-play-btn {

  background: rgba(0, 0, 0, 0.28);

}



.companion-play-btn .play-icon {

  width: 58px;

  height: 58px;

  display: grid;

  place-items: center;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.92);

  color: var(--text);

  font-size: 22px;

  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);

  transition: transform 0.3s var(--ease);

}



.companion-card:hover .play-icon {

  transform: scale(1.08);

}



.companion-placeholder {

  position: absolute;

  inset: 0;

  display: grid;

  place-items: center;

  color: rgba(255, 255, 255, 0.45);

  font-size: 14px;

  font-weight: 700;

}



.companion-caption {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 14px;

  padding: 13px 16px;

  color: var(--muted);

  font-weight: 700;

}



.companion-caption strong {

  color: var(--text);

}



.companion-desc {

  margin: 0;

  padding: 0 16px 16px;

  color: var(--muted);

  font-weight: 600;

  line-height: 1.65;

  font-size: 14px;

}



/* ── 视频播放 Modal ── */



#videoModal.modal-backdrop {

  position: fixed;

  inset: 0;

  z-index: 80;

  display: grid;

  place-items: center;

  padding: 18px;

  background: rgba(0, 0, 0, 0.55);

  opacity: 0;

  pointer-events: none;

  transition: all 0.35s var(--ease);

}



#videoModal.modal-backdrop.open {

  opacity: 1;

  pointer-events: auto;

}



.video-modal {

  position: relative;

  width: min(100%, 820px);

  max-height: 92vh;

  overflow: hidden;

  display: flex;

  flex-direction: column;

  border-radius: 20px;

  padding: clamp(18px, 4vw, 28px);

  transform: translateY(16px) scale(0.98);

  transition: all 0.35s var(--ease);

}



.video-modal .modal-close {

  position: sticky;

  align-self: flex-end;

  top: 0;

  z-index: 90;

  flex-shrink: 0;

}



.video-player-wrap {

  flex-shrink: 0;

}



.video-modal h2,

.video-modal-desc {

  flex-shrink: 0;

}



#videoModal.open .video-modal {

  transform: translateY(0) scale(1);

}



.video-modal h2 {

  margin: 14px 42px 6px 0;

  font-size: clamp(18px, 4vw, 26px);

  letter-spacing: 0.04em;

  font-weight: 900;

}



.video-modal-desc {

  margin: 0 0 10px;

  color: var(--muted);

  line-height: 1.7;

  font-weight: 600;

}



.video-player-wrap {

  width: 100%;

  border-radius: 14px;

  overflow: hidden;

  background: #000;

  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.15);

}



.video-player-wrap video {

  display: block;

  width: 100%;

  max-height: 62vh;

  height: auto;

  object-fit: contain;

}



@media (max-width: 620px) {

  .topbar {

    top: 8px;

    width: calc(100% - 16px);

    margin-top: 8px;

  }



  .view {

    width: calc(100% - 16px);

    margin-top: 18px;

  }



  .brand-mark {

    padding: 0 4px;

  }



  .module-grid {

    grid-template-columns: repeat(5, 132px);

  }



  .home-banner img {

    max-height: none;

  }



  .owner-links {

    gap: 14px;

  }



  .profile-avatar {

    width: min(38vw, 136px);

  }



  .poster-shell {

    min-height: 240px;

  }



  .poster-card {

    scroll-margin-top: 92px; /* 手机：topbar 76px + 16px 缓冲 */

  }



  .light-grid .poster-card {

    scroll-margin-top: 148px; /* 手机：tabs 仍 top:84px，总偏移相同 */

  }



  .poster-caption {

    align-items: flex-start;

    flex-direction: column;

  }



  .companion-grid {

    grid-template-columns: 1fr;

  }



  .companion-thumb {

    aspect-ratio: 3 / 4;

  }



  .companion-card {

    border-radius: 14px;

  }



  .companion-caption {

    padding: 10px 12px;

    font-size: 14px;

    gap: 8px;

  }



  .companion-caption strong {

    font-size: 14px;

  }



  .companion-desc {

    padding: 0 12px 12px;

    font-size: 12px;

  }



  .companion-play-btn .play-icon {

    width: 42px;

    height: 42px;

    font-size: 16px;

  }

}