/* PATCH_ID: b2c_login_hero_v3r_refine_20260710 */

/*
 * 本文件只调整 V3 的静态布局和正常态图层。
 * 不覆盖 is-entering、is-leaving、is-ready 的原始运动规则。
 */

.auth-layout{
  overflow:visible !important;
}

.auth-layout > .login-art.b2c-login-hero-v3{
  position:relative !important;
  min-height:610px !important;
  overflow:visible !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  isolation:isolate;
}

/* 粉色卡片下沉，作为商品装置的视觉底座 */
.b2c-login-hero-v3 .b2c-login-v3-base{
  inset:132px 4px 8px !important;
  z-index:1 !important;
  overflow:hidden !important;
  border:1px solid rgba(220,199,231,.76) !important;
  border-radius:38px !important;
  background:
    radial-gradient(
      circle at 76% 21%,
      rgba(255,255,255,.68),
      transparent 30%
    ),
    radial-gradient(
      circle at 17% 84%,
      rgba(224,194,240,.27),
      transparent 39%
    ),
    linear-gradient(
      145deg,
      #f8f1fc 0%,
      #f3e7f7 54%,
      #f8ebf5 100%
    ) !important;
  box-shadow:
    0 34px 82px rgba(79,50,93,.15),
    inset 0 1px 0 rgba(255,255,255,.97) !important;
}

/*
 * 商品舞台位于右上。
 * 主商品上边缘约高出粉色底座 85–100px。
 */
.b2c-login-hero-v3 .b2c-login-v3-stage{
  top:-70px !important;
  left:64% !important;
  width:540px !important;
  height:400px !important;
  z-index:15 !important;
  perspective:1600px !important;
  transform:translateX(-50%) !important;
  pointer-events:none !important;
}

/* 保留 V3 原始浮动动画，仅略微降低浮动幅度 */
.b2c-login-hero-v3 .b2c-login-v3-stack{
  animation:
    b2cLoginV3rFloat 7.2s
    ease-in-out infinite !important;
}

/* 外部商品卡 */
.b2c-login-hero-v3 .b2c-login-v3-layer{
  width:250px !important;
  height:250px !important;
  box-sizing:border-box !important;
  padding:10px !important;
  overflow:hidden !important;
  border-radius:25px !important;
  border:1px solid rgba(255,255,255,.91) !important;
  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.98),
      rgba(244,236,249,.85)
    ) !important;
}

/* 内侧真实商品图独立圆角裁切 */
.b2c-login-hero-v3 .b2c-login-v3-layer img{
  width:100% !important;
  height:100% !important;
  box-sizing:border-box !important;
  display:block !important;
  padding:0 !important;
  object-fit:contain !important;
  overflow:hidden !important;
  border-radius:17px !important;
  clip-path:inset(0 round 17px) !important;
  -webkit-clip-path:inset(0 round 17px) !important;
  background:
    radial-gradient(
      circle at 50% 44%,
      rgba(255,255,255,.99),
      rgba(246,239,249,.92)
    ) !important;
}

/*
 * 仅在正常展示状态覆盖图层位置。
 * 入场和退场期间由原始 V3 CSS 接管。
 */
.b2c-login-hero-v3
.b2c-login-v3-stack:not(.is-entering):not(.is-leaving)
.b2c-login-v3-layer[data-layer="0"]{
  opacity:.08;
  filter:blur(5px) saturate(.70);
  transform:
    translate3d(-238px,-142px,-510px)
    rotateY(-30deg)
    rotateZ(-10deg)
    scale(.72);
}

.b2c-login-hero-v3
.b2c-login-v3-stack:not(.is-entering):not(.is-leaving)
.b2c-login-v3-layer[data-layer="1"]{
  opacity:.14;
  filter:blur(4px) saturate(.77);
  transform:
    translate3d(-192px,-112px,-414px)
    rotateY(-26deg)
    rotateZ(-8deg)
    scale(.78);
}

.b2c-login-hero-v3
.b2c-login-v3-stack:not(.is-entering):not(.is-leaving)
.b2c-login-v3-layer[data-layer="2"]{
  opacity:.24;
  filter:blur(3px) saturate(.84);
  transform:
    translate3d(-146px,-82px,-318px)
    rotateY(-22deg)
    rotateZ(-6deg)
    scale(.84);
}

.b2c-login-hero-v3
.b2c-login-v3-stack:not(.is-entering):not(.is-leaving)
.b2c-login-v3-layer[data-layer="3"]{
  opacity:.39;
  filter:blur(2px) saturate(.90);
  transform:
    translate3d(-100px,-52px,-224px)
    rotateY(-18deg)
    rotateZ(-4deg)
    scale(.90);
}

.b2c-login-hero-v3
.b2c-login-v3-stack:not(.is-entering):not(.is-leaving)
.b2c-login-v3-layer[data-layer="4"]{
  opacity:.58;
  filter:blur(1px) saturate(.96);
  transform:
    translate3d(-54px,-22px,-134px)
    rotateY(-14deg)
    rotateZ(-2deg)
    scale(.95);
}

.b2c-login-hero-v3
.b2c-login-v3-stack:not(.is-entering):not(.is-leaving)
.b2c-login-v3-layer[data-layer="5"]{
  opacity:.79;
  filter:blur(.25px) saturate(1);
  transform:
    translate3d(-8px,8px,-48px)
    rotateY(-10deg)
    rotateZ(0deg)
    scale(.99);
}

.b2c-login-hero-v3
.b2c-login-v3-stack:not(.is-entering):not(.is-leaving)
.b2c-login-v3-layer[data-layer="6"]{
  opacity:1;
  filter:
    blur(0)
    saturate(1.05)
    contrast(1.02);
  transform:
    translate3d(40px,39px,38px)
    rotateY(-6deg)
    rotateZ(2.5deg)
    scale(1.045);
  box-shadow:
    0 17px 27px rgba(48,29,59,.16),
    0 47px 92px rgba(45,27,57,.29),
    0 0 0 1px rgba(199,169,216,.26),
    inset 0 1px 0 rgba(255,255,255,1) !important;
}

/* 主图悬浮投影 */
.b2c-login-hero-v3 .b2c-login-v3-shadow{
  top:330px !important;
  left:61% !important;
  width:265px !important;
  height:57px !important;
  z-index:2 !important;
  opacity:.61 !important;
  filter:blur(27px) !important;
}

/* 背景图形限制在粉色底座范围 */
.b2c-login-hero-v3 .b2c-login-v3-grid{
  inset:154px 23px 18px !important;
  border-radius:31px !important;
  opacity:.40 !important;
}

.b2c-login-hero-v3 .b2c-login-v3-orbit{
  top:95px !important;
  left:64% !important;
  width:415px !important;
  height:360px !important;
  opacity:.24 !important;
}

.b2c-login-hero-v3 .b2c-login-v3-watermark{
  top:157px !important;
  right:10px !important;
  color:rgba(94,64,112,.042) !important;
  font-size:76px !important;
}

/* =========================================================
   标题区：固定左下，不进入商品装置空间
   ========================================================= */

.b2c-login-hero-v3 .b2c-login-v3-copy{
  right:auto !important;
  bottom:36px !important;
  left:43px !important;
  width:318px !important;
  max-width:318px !important;
  z-index:8 !important;
}

.b2c-login-hero-v3 .b2c-login-v3-pill{
  min-height:29px !important;
  margin-bottom:15px !important;
  padding:0 14px !important;
  border-color:rgba(172,130,201,.44) !important;
  background:rgba(255,255,255,.38) !important;
  color:#755094 !important;
  font-size:9px !important;
  font-weight:850 !important;
  letter-spacing:.19em !important;
  backdrop-filter:blur(9px);
}

.b2c-login-hero-v3 .b2c-login-v3-title{
  width:100% !important;
  max-width:318px !important;
  margin:0 !important;
  color:#1d1922 !important;
  font-family:
    Inter,
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif !important;
  font-size:42px !important;
  font-weight:900 !important;
  font-style:normal !important;
  line-height:.88 !important;
  letter-spacing:-.058em !important;
  text-transform:uppercase !important;
}

.b2c-login-hero-v3 .b2c-login-v3-title span,
.b2c-login-hero-v3 .b2c-login-v3-title em{
  display:block !important;
}

.b2c-login-hero-v3 .b2c-login-v3-title em{
  margin-top:7px !important;
  color:#765095 !important;
  font-style:italic !important;
  font-weight:850 !important;
  letter-spacing:-.065em !important;
}

.b2c-login-hero-v3 .b2c-login-v3-description{
  max-width:310px !important;
  margin-top:15px !important;
  color:rgba(48,39,55,.72) !important;
  font-size:12px !important;
  line-height:1.55 !important;
}

/* 右侧登录卡片英文排版 */
.b2c-login-v3r-panel h1,
.b2c-login-v3r-panel h2,
.b2c-login-v3r-panel h3{
  font-family:
    Inter,
    "Helvetica Neue",
    Arial,
    sans-serif !important;
  font-weight:850 !important;
  letter-spacing:-.035em !important;
}

.b2c-login-v3r-panel
[data-v3r-signup-row]{
  color:rgba(49,42,55,.66) !important;
}

.b2c-login-v3r-panel
[data-v3r-signup-row] a{
  margin-left:3px;
  color:#765096 !important;
  font-weight:750 !important;
  text-decoration:none !important;
}

@keyframes b2cLoginV3rFloat{
  0%,
  100%{
    transform:
      translate3d(0,0,0)
      rotateX(0deg);
  }

  50%{
    transform:
      translate3d(0,-7px,0)
      rotateX(.8deg);
  }
}

@media(max-width:1150px){
  .auth-layout > .login-art.b2c-login-hero-v3{
    min-height:575px !important;
  }

  .b2c-login-hero-v3 .b2c-login-v3-base{
    inset:122px 2px 6px !important;
  }

  .b2c-login-hero-v3 .b2c-login-v3-stage{
    top:-66px !important;
    left:65% !important;
    transform:
      translateX(-50%)
      scale(.89) !important;
  }

  .b2c-login-hero-v3 .b2c-login-v3-copy{
    left:34px !important;
    width:290px !important;
  }

  .b2c-login-hero-v3 .b2c-login-v3-title{
    max-width:290px !important;
    font-size:38px !important;
  }
}

@media(max-width:850px){
  .auth-layout > .login-art.b2c-login-hero-v3{
    min-height:535px !important;
  }

  .b2c-login-hero-v3 .b2c-login-v3-base{
    inset:108px 0 4px !important;
  }

  .b2c-login-hero-v3 .b2c-login-v3-stage{
    top:-78px !important;
    left:63% !important;
    transform:
      translateX(-50%)
      scale(.72) !important;
  }

  .b2c-login-hero-v3 .b2c-login-v3-copy{
    right:24px !important;
    bottom:25px !important;
    left:26px !important;
    width:auto !important;
    max-width:290px !important;
  }

  .b2c-login-hero-v3 .b2c-login-v3-title{
    max-width:290px !important;
    font-size:34px !important;
  }
}

@media(max-width:620px){
  .auth-layout > .login-art.b2c-login-hero-v3{
    min-height:495px !important;
  }

  .b2c-login-hero-v3 .b2c-login-v3-base{
    inset:92px 0 2px !important;
    border-radius:29px !important;
  }

  .b2c-login-hero-v3 .b2c-login-v3-stage{
    top:-103px !important;
    left:58% !important;
    transform:
      translateX(-50%)
      scale(.58) !important;
  }

  .b2c-login-hero-v3 .b2c-login-v3-copy{
    right:22px !important;
    bottom:21px !important;
    left:22px !important;
    max-width:275px !important;
  }

  .b2c-login-hero-v3 .b2c-login-v3-title{
    font-size:31px !important;
  }
}

@media(prefers-reduced-motion:reduce){
  .b2c-login-hero-v3 .b2c-login-v3-stack{
    animation:none !important;
  }
}


/* PATCH_B2C_LOGIN_HERO_V3R_SHIFT_LEFT_20260710 */
/* 仅把整组商品图层稍微左移，不改动动画引擎 */
@media (min-width: 1100px){
  [data-b2c-login-v3-stack]{
    margin-left: -72px !important;
  }
}

/* 中等桌面也一起微调，避免靠近右侧登录卡片 */
@media (min-width: 900px) and (max-width: 1099px){
  [data-b2c-login-v3-stack]{
    margin-left: -44px !important;
  }
}


/* PATCH_B2C_LOGIN_V3R_SAFE_LEFT_CARD_CSS_ONLY_20260710 */

/* =========================================================
   商品装置安全左移
   只调整舞台坐标，不修改动画状态和 JS。
   ========================================================= */

@media (min-width:1100px){
  .b2c-login-hero-v3 .b2c-login-v3-stage{
    left:58.5% !important;
  }

  .b2c-login-hero-v3 .b2c-login-v3-shadow{
    left:57% !important;
  }

  .b2c-login-hero-v3 .b2c-login-v3-orbit{
    left:58.5% !important;
  }
}

@media (min-width:900px) and (max-width:1099px){
  .b2c-login-hero-v3 .b2c-login-v3-stage{
    left:60% !important;
  }

  .b2c-login-hero-v3 .b2c-login-v3-shadow{
    left:59% !important;
  }

  .b2c-login-hero-v3 .b2c-login-v3-orbit{
    left:60% !important;
  }
}

/* =========================================================
   登录卡片优化
   使用 CSS :has() 定位，不运行任何 DOM 监听脚本。
   ========================================================= */

.auth-layout >
:not(.login-art):has(input[type="password"]){
  position:relative !important;
  z-index:10 !important;
  box-sizing:border-box !important;
  width:min(100%,430px) !important;
  padding:30px 28px 24px !important;
  overflow:hidden !important;
  border:1px solid rgba(226,218,234,.90) !important;
  border-radius:30px !important;
  background:
    radial-gradient(
      circle at 88% 5%,
      rgba(244,233,251,.58),
      transparent 34%
    ),
    rgba(255,255,255,.92) !important;
  box-shadow:
    0 30px 70px rgba(34,26,42,.11),
    0 10px 26px rgba(164,141,181,.08),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

/* 顶部微光 */
.auth-layout >
:not(.login-art):has(input[type="password"])::before{
  content:"";
  position:absolute;
  top:0;
  right:30px;
  left:30px;
  height:1px;
  pointer-events:none;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(177,135,207,.48),
      transparent
    );
}

/* 标题 */
.auth-layout >
:not(.login-art):has(input[type="password"])
:is(h1,h2,h3),
.auth-layout >
:not(.login-art):has(input[type="password"])
:is(form,div)
:is(h1,h2,h3){
  color:#1e1a25 !important;
}

/* 兼容标题位于卡片内部任意层级 */
.auth-layout >
:not(.login-art):has(input[type="password"])
h1,
.auth-layout >
:not(.login-art):has(input[type="password"])
h2,
.auth-layout >
:not(.login-art):has(input[type="password"])
h3{
  margin-top:0 !important;
  margin-bottom:21px !important;
  color:#1e1a25 !important;
  font-family:
    Inter,
    "Helvetica Neue",
    Arial,
    sans-serif !important;
  font-size:24px !important;
  font-weight:850 !important;
  line-height:1.08 !important;
  letter-spacing:-.045em !important;
}

/* 标签 */
.auth-layout >
:not(.login-art):has(input[type="password"])
label{
  display:block !important;
  margin:0 0 8px 2px !important;
  color:#5d5665 !important;
  font-size:13px !important;
  font-weight:750 !important;
  line-height:1.2 !important;
}

/* 输入框 */
.auth-layout >
:not(.login-art):has(input[type="password"])
input{
  box-sizing:border-box !important;
  width:100% !important;
  min-height:50px !important;
  padding:0 16px !important;
  border:1px solid #e4ddea !important;
  border-radius:16px !important;
  outline:none !important;
  background:rgba(255,255,255,.88) !important;
  color:#211d28 !important;
  font-size:14px !important;
  box-shadow:
    inset 0 1px 2px rgba(38,26,48,.025),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
  transition:
    border-color .2s ease,
    box-shadow .2s ease,
    background .2s ease !important;
}

.auth-layout >
:not(.login-art):has(input[type="password"])
input:hover{
  border-color:#d8cde2 !important;
  background:#fff !important;
}

.auth-layout >
:not(.login-art):has(input[type="password"])
input:focus{
  border-color:#b994d3 !important;
  background:#fff !important;
  box-shadow:
    0 0 0 4px rgba(174,128,205,.13),
    inset 0 1px 0 rgba(255,255,255,.96) !important;
}

/* 输入框间距 */
.auth-layout >
:not(.login-art):has(input[type="password"])
input + label,
.auth-layout >
:not(.login-art):has(input[type="password"])
div:has(> input) + div:has(> input){
  margin-top:17px !important;
}

/* 登录按钮 */
.auth-layout >
:not(.login-art):has(input[type="password"])
button[type="submit"],
.auth-layout >
:not(.login-art):has(input[type="password"])
form button{
  width:100% !important;
  min-height:48px !important;
  margin-top:13px !important;
  border:0 !important;
  border-radius:16px !important;
  background:
    linear-gradient(
      135deg,
      #1e1b25 0%,
      #282431 100%
    ) !important;
  color:#fff !important;
  font-size:14px !important;
  font-weight:800 !important;
  letter-spacing:.01em !important;
  box-shadow:
    0 13px 28px rgba(28,23,35,.18),
    inset 0 1px 0 rgba(255,255,255,.07) !important;
  cursor:pointer !important;
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    filter .18s ease !important;
}

.auth-layout >
:not(.login-art):has(input[type="password"])
button[type="submit"]:hover,
.auth-layout >
:not(.login-art):has(input[type="password"])
form button:hover{
  transform:translateY(-1px);
  filter:brightness(1.035);
  box-shadow:
    0 17px 34px rgba(28,23,35,.22),
    inset 0 1px 0 rgba(255,255,255,.09) !important;
}

.auth-layout >
:not(.login-art):has(input[type="password"])
button[type="submit"]:active,
.auth-layout >
:not(.login-art):has(input[type="password"])
form button:active{
  transform:translateY(0);
}

/* 注册提示 */
.auth-layout >
:not(.login-art):has(input[type="password"])
a{
  color:#8053a3 !important;
  font-weight:750 !important;
  text-decoration:none !important;
}

.auth-layout >
:not(.login-art):has(input[type="password"])
a:hover{
  text-decoration:underline !important;
}

/* 防止登录卡片受到商品层覆盖 */
.auth-layout >
:not(.login-art):has(input[type="password"]){
  isolation:isolate !important;
}

@media(max-width:1099px){
  .auth-layout >
  :not(.login-art):has(input[type="password"]){
    padding:26px 24px 21px !important;
    border-radius:26px !important;
  }
}