@import url('pink-kawaii.css');


html {
  --pink-primary: #ec4899;
  --pink-primary-light: #f9a8d4;
  --pink-text: #5c2d4a;
  --pink-muted: #9d5c7a;
}

html, body {
  background: transparent !important;
  min-height: 100%;
}

.pink-floral-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(ellipse 90% 60% at 10% 0%, rgba(251, 207, 232, 0.92), transparent 55%),
    radial-gradient(ellipse 70% 50% at 95% 8%, rgba(253, 186, 216, 0.78), transparent 50%),
    radial-gradient(ellipse 60% 45% at 50% 100%, rgba(252, 231, 243, 0.96), transparent 55%),
    linear-gradient(165deg, #fff9fc 0%, #ffe4ef 45%, #ffd6e8 100%);
}
.pink-floral-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.32;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%23f9a8d4' fill-opacity='0.45'%3E%3Ccircle cx='60' cy='60' r='6'/%3E%3Cellipse cx='60' cy='42' rx='8' ry='14'/%3E%3Cellipse cx='60' cy='78' rx='8' ry='14'/%3E%3Cellipse cx='42' cy='60' rx='14' ry='8'/%3E%3Cellipse cx='78' cy='60' rx='14' ry='8'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 140px 140px;
}
.pink-petal {
  position: absolute;
  border-radius: 50% 0 50% 50%;
  background: linear-gradient(135deg, rgba(251, 207, 232, 0.65), rgba(244, 114, 182, 0.22));
  animation: pinkFloatPetal 14s ease-in-out infinite;
}
.pink-petal.p1 { width: 90px; height: 90px; top: 6%; left: -18px; transform: rotate(25deg); }
.pink-petal.p2 { width: 65px; height: 65px; top: 38%; right: -12px; animation-delay: -4s; }
.pink-petal.p3 { width: 80px; height: 80px; bottom: 18%; left: 6%; animation-delay: -7s; }
.pink-flower {
  position: absolute;
  font-size: 28px;
  opacity: 0.4;
  animation: pinkFloatFlower 10s ease-in-out infinite;
}
.pink-flower.f1 { top: 11%; right: 10%; }
.pink-flower.f2 { top: 32%; left: 7%; animation-delay: -2s; }
.pink-flower.f3 { bottom: 28%; right: 7%; animation-delay: -4s; }
@keyframes pinkFloatPetal {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@keyframes pinkFloatFlower {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-8px) scale(1.05); }
}

#app {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  background: transparent !important;
}

/* 底部导航代理入口 */
.pink-agent-entry { display: none !important; }

.pink-agent-tabbar-item {
  color: var(--pink-muted) !important;
  text-decoration: none !important;
  flex: 1 !important;
}
.pink-agent-tabbar-item .tabbar-icon {
  width: 22px;
  height: 22px;
  color: #5c2d4a;
}
.pink-agent-tabbar-item .van-tabbar-item__text,
.pink-agent-tabbar-item > span:last-child {
  color: var(--pink-muted) !important;
  font-size: 11px;
}
.pink-agent-tabbar-item.van-tabbar-item--active,
.pink-agent-tabbar-item.pink-agent-tabbar-active {
  color: #db2777 !important;
}
.pink-agent-tabbar-item.van-tabbar-item--active .van-tabbar-item__text,
.pink-agent-tabbar-item.pink-agent-tabbar-active .van-tabbar-item__text,
.pink-agent-tabbar-item.van-tabbar-item--active > span:last-child,
.pink-agent-tabbar-item.pink-agent-tabbar-active > span:last-child {
  color: #db2777 !important;
}
.pink-tabbar-with-agent .van-tabbar-item {
  min-width: 0;
}
.pink-tabbar-with-agent .van-tabbar-item__text,
.pink-tabbar-with-agent .van-tabbar-item > span {
  font-size: 11px;
}

/* Vant 浅色粉花覆盖 */
:root {
  --van-primary-color: #ec4899 !important;
  --van-tabbar-item-active-color: #db2777 !important;
  --van-button-primary-background: #ec4899 !important;
  --van-button-primary-border-color: #ec4899 !important;
}

body,
.van-theme-light body {
  color: var(--pink-text) !important;
  background: transparent !important;
}

.van-theme-dark body {
  color: var(--pink-text) !important;
  background: transparent !important;
}

.van-theme-dark {
  --van-background: transparent !important;
  --van-background-2: rgba(255, 255, 255, 0.88) !important;
  --van-tabbar-background: rgba(255, 248, 252, 0.95) !important;
  --van-tabbar-item-active-background: rgba(255, 248, 252, 0.95) !important;
  --van-tabbar-item-text-color: #9d5c7a !important;
  --van-tabbar-item-active-color: #db2777 !important;
}

.van-nav-bar,
.van-nav-bar--fixed {
  background: rgba(255, 245, 250, 0.9) !important;
  backdrop-filter: blur(12px);
}
.van-nav-bar__title,
.van-nav-bar .van-icon {
  color: #831843 !important;
}

.van-tabbar {
  background: rgba(255, 248, 252, 0.95) !important;
  backdrop-filter: blur(14px);
  border-top: 1px solid rgba(244, 114, 182, 0.2) !important;
  box-shadow: 0 -4px 20px rgba(244, 114, 182, 0.1) !important;
  z-index: 1000 !important;
}
.van-tabbar-item { color: var(--pink-muted) !important; }
.van-tabbar-item--active { color: #db2777 !important; }

.van-cell-group,
.van-cell-group--inset,
.van-panel,
.van-card,
.van-collapse-item__content {
  background: rgba(255, 255, 255, 0.82) !important;
  border-radius: 14px !important;
}
.van-cell {
  background: transparent !important;
  color: var(--pink-text) !important;
}
.van-cell__title { color: var(--pink-text) !important; }
.van-cell__label { color: var(--pink-muted) !important; }
.van-field__label { color: var(--pink-muted) !important; }
.van-field__control { color: var(--pink-text) !important; }

.van-button--primary {
  background: linear-gradient(135deg, #f9a8d4, #ec4899) !important;
  border: none !important;
  box-shadow: 0 6px 18px rgba(236, 72, 153, 0.3) !important;
}
.van-button--default {
  border-color: rgba(244, 114, 182, 0.35) !important;
  color: #be185d !important;
}

.van-popup,
.van-dialog,
.van-action-sheet {
  background: #fff9fc !important;
}
.van-dialog__header,
.van-popup__title {
  color: #831843 !important;
}

.van-notice-bar {
  background: rgba(255, 255, 255, 0.75) !important;
  color: #be185d !important;
  border: 1px solid rgba(251, 113, 133, 0.25);
  border-radius: 12px;
}

.van-grid-item__content,
.van-image-preview {
  background: transparent !important;
}

.van-theme-dark .van-popup,
.van-theme-dark .van-dialog {
  background: #fff5f8 !important;
  color: var(--pink-text) !important;
}

/* 页面内容区 */
.van-config-provider,
.router-view,
main {
  background: transparent !important;
}

@media (max-width: 480px) {
  .pink-tabbar-with-agent .van-tabbar-item__text,
  .pink-tabbar-with-agent .van-tabbar-item > span {
    font-size: 10px;
  }
}

/* 主页内代理 Tab 页（浮层，不破坏 Vue Router） */
.pink-agent-page {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: var(--van-tabbar-height, 58px);
  z-index: 900;
  overflow-y: auto;
  overflow-x: hidden;
  background: transparent;
  -webkit-overflow-scrolling: touch;
}
.pink-agent-page.hidden {
  display: none !important;
}
.pink-agent-body {
  padding: 0 12px 16px;
}
.pink-agent-iframe {
  display: block;
  width: 100%;
  min-height: 420px;
  height: calc(100vh - var(--van-tabbar-height, 58px) - 100px);
  border: none;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 6px 22px rgba(244, 114, 182, 0.12);
}
body.pink-agent-route {
  overflow: hidden;
}
body.pink-agent-route .van-tabbar {
  z-index: 1001 !important;
}
