/* public/assets/test/css/partials/auth-modal-v2.css */
/* Auth Modal V2 — PRO (Black Wider + Pure White Right + CSS Wave Divider + 3-row Marquee) */

/* =========================
   Overlay
   ========================= */
#login_modal.am2{
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 22px;

  /* overlay layer */
  background: rgba(2,6,23,.46);
  backdrop-filter: blur(10px);

  /* ===== knobs ===== */
  --am2-left-w: 56%;             /* ✅ 黑区更宽：对齐你图2 */
  --am2-wave-overlap: 280px;     /* ✅ 波浪侵入黑区的宽度（越大波浪越“肥”） */
  --am2-card-radius: 26px;

  /* 3 bg vars (Blade inline style 会覆盖) */
  --am2-bg1: none;
  --am2-bg2: none;
  --am2-bg3: none;
}
#login_modal.am2[aria-hidden="false"]{ display:flex; }

html.am2-lock, body.am2-lock{ overflow:hidden; }
#login_modal.am2, #login_modal.am2 *{ box-sizing:border-box; }

/* =========================
   Card
   ========================= */
#login_modal.am2 .am2-card{
  width: min(980px, 96vw);
  height: min(620px, 86vh);
  border-radius: var(--am2-card-radius);
  overflow: hidden;
  position: relative;

  background: #fff; /* ✅ 卡片本体永远白 */
  box-shadow: 0 26px 90px rgba(0,0,0,.55);
}

/* close */
#login_modal.am2 .am2-close{
  position:absolute;
  top: 16px;
  right: 16px;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 0;
  background: rgba(255,255,255,.98);
  box-shadow: 0 12px 30px rgba(15,23,42,.16);
  font-size: 22px;
  line-height: 46px;
  color: #111827;
  cursor: pointer;
  z-index: 20;
}

/* shell */
#login_modal.am2 .am2-shell{
  height: 100%;
  display: flex;
  position: relative;
}

/* =========================
   LEFT: black + 3-row marquee (FULL FIT)
   ========================= */
#login_modal.am2 .am2-left{
  flex: 0 0 var(--am2-left-w);
  position: relative;
  background: #050814;
  overflow: hidden; /* ✅ 背景必须被裁剪在黑区内 */
  z-index: 1;
}

#login_modal.am2 .am2-flow{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity: .92;
  filter: saturate(1.10) contrast(1.06) brightness(.92);
}

#login_modal.am2 .am2-row{ height: 33.3333%; width: 100%; overflow:hidden; }

#login_modal.am2 .am2-track{
  height: 100%;
  width: 200%;
  display: flex;
  will-change: transform;
  animation: am2-marquee 34s linear infinite;
}
#login_modal.am2 .am2-row.is-even .am2-track{ animation-name: am2-marquee-rev; }

#login_modal.am2 .am2-panel{
  width: 50%;
  height: 100%;
  background-repeat: repeat-x;
  background-size: auto 100%;
  background-position: 0 50%;
}

/* bind 3 images */
#login_modal.am2 .am2-r1 .am2-panel{ background-image: var(--am2-bg1); }
#login_modal.am2 .am2-r2 .am2-panel{ background-image: var(--am2-bg2); }
#login_modal.am2 .am2-r3 .am2-panel{ background-image: var(--am2-bg3); }

@keyframes am2-marquee{
  from{ transform: translate3d(0,0,0); }
  to  { transform: translate3d(-50%,0,0); }
}
@keyframes am2-marquee-rev{
  from{ transform: translate3d(-50%,0,0); }
  to  { transform: translate3d(0,0,0); }
}

/* left mask: readable but keep bg visible */
#login_modal.am2 .am2-left-mask{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(closest-side at 55% 45%, rgba(6,10,22,.10), rgba(6,10,22,.46));
}

/* left content */
#login_modal.am2 .am2-left-content{
  position: relative;
  z-index: 4; /* ✅ 让文字永远在波浪之上（防止波浪侵入太多盖到文字） */
  height: 100%;
  padding: 54px 52px 50px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

#login_modal.am2 .am2-welcome-hi{
  font-size: 44px;
  font-weight: 650;
  letter-spacing: .2px;
  opacity: .96;
}
#login_modal.am2 .am2-welcome-brand{
  margin-top: 10px;
  font-size: 64px;
  font-weight: 700;
  letter-spacing: .2px;
  line-height: 1.02;
}
#login_modal.am2 .am2-brand-line{ display:block; }

#login_modal.am2 .am2-points{
  margin: 300px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
  font-size: 14px;
  opacity: .95;
}
#login_modal.am2 .am2-points li{
  padding-left: 20px;
  position: relative;
}
#login_modal.am2 .am2-points li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:0;
  opacity:.95;
}

/* =========================
   RIGHT: PURE WHITE + CSS wave divider
   ========================= */
#login_modal.am2 .am2-right{
  flex: 1;
  position: relative;
  background: #fff;          /* ✅ 强制白底 */
  overflow: visible;         /* ✅ 让 wave 可以侵入左侧，但卡片整体仍被 .am2-card 裁剪 */
  z-index: 6;
}



/* right inner layout */
#login_modal.am2 .am2-right-inner{
  position: relative;
  z-index: 10;
  height: 100%;
  padding: 34px 56px 34px 0px; /* ✅ 左侧给 wave 留出安全区（别压到波浪上） */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ✅ 内容宽度控制：让右侧更专业、更像图2 */
#login_modal.am2 .am2-formwrap{
  width: min(520px, 100%);
}

/* logo bigger */
#login_modal.am2 .am2-logo{
  display:flex;
  justify-content:center;
  margin: 52px 0 18px;
}
#login_modal.am2 .am2-logo img{
  height: 94px; /* ✅ 更大（你要更大：72/80） */
  width: auto;
}

/* =========================
   Views
   ========================= */
#login_modal.am2 .auth-view{ display:none; width:100%; }
#login_modal.am2 .auth-view.is-active{ display:block; }

#login_modal.am2 .auth-form{ margin-top: 8px; width:100%; }
#login_modal.am2 .auth-field{ margin: 14px 0; }

/* input pill */
#login_modal.am2 .auth-input-wrap{
  position: relative;
  display:flex;
  align-items:center;
  gap: 10px;
  height: 50px;
  padding: 0 16px;
  border-radius: 999px;
  background: #f5f6f8; /* ✅ 不发灰、不脏 */
  border: 1px solid rgba(229,231,235,.95);
}

#login_modal.am2 .auth-input-wrap input{
  flex: 1;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 14px;
  color: #111827;
}
#login_modal.am2 .auth-input-wrap input::placeholder{
  color: rgba(17,24,39,.40);
  font-weight: 700;
}

#login_modal.am2 .am2-ico{
  width: 18px;
  height: 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  opacity: .68;
}

/* eye */
#login_modal.am2 .auth-icon-btn{
  border:0;
  background:transparent;
  cursor:pointer;
  padding: 6px 8px;
  border-radius: 10px;
  opacity: .60;
}
#login_modal.am2 .auth-icon-btn:hover{ opacity: .88; }

/* captcha */
#login_modal.am2 .captcha-img{
  width: 96px;
  height: 34px;
  border-radius: 10px;
  cursor:pointer;
  border: 1px solid rgba(229,231,235,.95);
  background:#fff;
}

/* mini btn */
#login_modal.am2 .auth-mini-btn{
  border:0;
  cursor:pointer;
  height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(229,231,235,.95);
  color:#111827;
  font-size: 12px;
  font-weight: 900;
}

/* primary button */
#login_modal.am2 .auth-btn{
  width: 100%;
  height: 50px;
  border-radius: 999px;
  border: 0;
  cursor:pointer;
  font-weight: 900;
  letter-spacing: .2px;
  margin-top: 4px;
}

#login_modal.am2 .am2-primary{
  background: #fbbf24;
  color: #111827;
  box-shadow: 0 12px 28px rgba(251,191,36,.26);
}
#login_modal.am2 .am2-primary:hover{ filter: brightness(.98); }

#login_modal.am2 .am2-secondary{
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(229,231,235,.95);
  color:#111827;
}

/* links */
#login_modal.am2 .am2-links{
  margin-top: 10px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}
#login_modal.am2 .am2-links-bottom{ justify-content:center; }

#login_modal.am2 .auth-link{
  background:transparent;
  border:0;
  cursor:pointer;
  padding: 6px 6px;
  color: rgba(17,24,39,.66);
  font-weight: 900;
}
#login_modal.am2 .auth-link:hover{ color: rgba(17,24,39,.88); }
#login_modal.am2 .auth-link-highlight{ color: rgba(17,24,39,.92); }

/* sns */
#login_modal.am2 .am2-sns{
  margin-top: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 12px;
}
#login_modal.am2 .am2-sns-btn{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(229,231,235,.95);
  background: rgba(255,255,255,.96);
  cursor:pointer;
  font-size: 12px;
  font-weight: 900;
  color: rgba(17,24,39,.82);
}
#login_modal.am2 .am2-sns-btn:hover{ filter: brightness(.98); }

/* terms */
#login_modal.am2 .am2-terms{
  margin-top: 12px;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(17,24,39,.55);
  text-align: center;
}
#login_modal.am2 .am2-terms .auth-link{ padding: 0 4px; }

/* reset steps */
#login_modal.am2 .am2-reset-steps{ margin: 4px 0 16px; }
#login_modal.am2 .am2-stepbar{
  height: 6px;
  border-radius: 999px;
  background: rgba(229,231,235,.95);
  overflow: hidden;
}
#login_modal.am2 .am2-stepbar-active{
  height:100%;
  width: 33.333%;
  background:#fbbf24;
  transition: width .22s ease;
}
#login_modal.am2 .am2-steplabels{
  margin-top: 10px;
  display:flex;
  justify-content: space-between;
  font-size: 12px;
  color: rgba(17,24,39,.55);
  font-weight: 900;
}
#login_modal.am2 .am2-steplabels .is-on{ color: rgba(17,24,39,.88); }

#login_modal.am2 .auth-reset-view{ display:none; width:100%; }
#login_modal.am2 .auth-reset-view.is-active{ display:block; }

#login_modal.am2 .am2-reset-actions{
  margin-top: 12px;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* responsive */
@media (max-width: 900px){
  #login_modal.am2{ padding: 14px; }
  #login_modal.am2 .am2-card{
    width: min(980px, calc(100vw - 28px));
    height: min(680px, calc(100vh - 28px));
    border-radius: 18px;
  }

  /* mobile: hide left & wave */
  #login_modal.am2 .am2-left{ display:none; }
  #login_modal.am2 .am2-wave{ display:none; }
  #login_modal.am2 .am2-right-inner{ padding: 26px 18px; }
}

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  #login_modal.am2 .am2-track{ animation:none !important; }
}















/* =========================
   AM2 Wave Divider (SVG, stable)
   ========================= */

/* 可调：波浪“侵入左侧”的宽度（越大侵入越多） */
#login_modal.am2{
  --am2-wave-overlap: 120px; /* 220~320 自己微调 */
}

/* 右侧必须是定位容器（你已是 position:relative） */
#login_modal.am2 .am2-right{ position:relative; }

/* 波浪本体：放在 right 的左边界，整体往左挪出去（不压右侧内容） */
#login_modal.am2 .am2-wave{
  position:absolute;
  top:0;
  bottom:0;
  left:0;

  width: var(--am2-wave-overlap);
  transform: translateX(calc(-1 * var(--am2-wave-overlap)));

  pointer-events:none;
  z-index: 7;

  background-repeat:no-repeat;
  background-size: 100% 100%;
  background-position: right center;

  /* 阴影：让白边更“立体”，不突兀 */
  filter: drop-shadow(0 18px 28px rgba(0,0,0,.18));

  /* SVG：右边是直边贴住分割线，左边是波浪边 */
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%20preserveAspectRatio='none'%3E%3Cpath%20fill='%23ffffff'%20d='M100%200%20H56%20C18%202%2018%2030%2052%2038%20C82%2046%2082%2060%2052%2068%20C18%2078%2018%2098%2056%20100%20H100%20V0%20Z'/%3E%3Cpath%20fill='none'%20stroke='rgba(0,0,0,0.08)'%20stroke-width='1.6'%20d='M56%200%20C18%202%2018%2030%2052%2038%20C82%2046%2082%2060%2052%2068%20C18%2078%2018%2098%2056%20100'/%3E%3C/svg%3E");
}

/* 移动端不显示（你原本就隐藏，这里再保险一次） */
@media (max-width: 900px){
  #login_modal.am2 .am2-wave{ display:none; }
}


/* 1) 右侧恢复“纯白底”（防止被任何渐变/阴影污染） */
#login_modal.am2 .am2-right{
  background:#fff !important;
}
#login_modal.am2 .am2-right-inner{
  background: #ffffff; /* 右侧容器不需要灰底 */
}

/* 可选：如果你想右侧再更“干净”，把之前可能叠加的滤镜去掉 */
#login_modal.am2 .am2-right,
#login_modal.am2 .am2-right-inner{
  filter: none !important;
}

/* 2) 波浪幅度减小：用更克制的 path（更接近“轻微内凹”） */
#login_modal.am2 .am2-wave{
  /* 你原来那套定位不动，只替换 SVG */
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%20100'%20preserveAspectRatio='none'%3E%3Cpath%20fill='%23ffffff'%20d='M100%200%20H62%20C32%204%2030%2026%2052%2036%20C74%2046%2074%2054%2052%2064%20C30%2074%2032%2096%2062%20100%20H100%20V0%20Z'/%3E%3Cpath%20fill='none'%20stroke='rgba(0,0,0,0.07)'%20stroke-width='1.2'%20d='M62%200%20C32%204%2030%2026%2052%2036%20C74%2046%2074%2054%2052%2064%20C30%2074%2032%2096%2062%20100'/%3E%3C/svg%3E") !important;

  /* 阴影再轻一点（避免右侧看起来灰） */
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.12)) !important;
}



/* =========================
   AM2 NO-SCROLL FIX
   方案：卡片更高 + 注册/重置视图压缩间距（不启用滚动）
   Append at END of auth-modal-v2.css
   ========================= */

/* 1) 卡片整体增高（但受视口限制） */
#login_modal.am2 .am2-card{
  height: min(680px, 92vh) !important; /* 原来 620/86vh 太矮，注册会溢出 */
}

/* 2) 注册/重置：把“垂直间距”压一点（只影响这些 view） */
#login_modal.am2 .auth-view[data-view="register"].is-active .auth-field,
#login_modal.am2 .auth-view[data-view="reset"].is-active .auth-field{
  margin: 5px 0 !important; /* 原来 14px 0 */
}

/* 3) 注册/重置：logo 上下间距压一点 */
#login_modal.am2 .auth-view[data-view="register"].is-active ~ .am2-terms,
#login_modal.am2 .auth-view[data-view="reset"].is-active ~ .am2-terms{
  margin-top: 8px !important;
}

#login_modal.am2 .am2-logo{
  margin: 2px 0 14px !important; /* 原来 18px */
}

/* 4) 按钮别占太多“呼吸空间” */
#login_modal.am2 .auth-btn{ margin-top: 2px !important; }

/* 5) reset 的 stepbar 上下间距压一点 */
#login_modal.am2 .auth-view[data-view="reset"].is-active .am2-reset-steps{
  margin: 0 0 12px !important;
}






/* =========================
   AM2 LEFT BG — brighten only (append at end)
   ========================= */
#login_modal.am2{
  /* 你只需要调这三个： */
  --am2-flow-opacity: 1;            /* 0.85~1.15 */
  --am2-flow-brightness: 1.06;      /* 1.00~1.15 */
  --am2-mask-strength: .18;         /* 0.18~0.35 (越小越亮) */
}

/* 1) 背景流动层：提亮、略增饱和，减少“发黑” */
#login_modal.am2 .am2-flow{
  opacity: var(--am2-flow-opacity) !important;
  filter: saturate(1.18) contrast(1.06) brightness(var(--am2-flow-brightness)) !important;
}

/* 2) 遮罩层：减弱黑雾，不要压死背景 */
#login_modal.am2 .am2-left-mask{
  background:
    radial-gradient(
      closest-side at 66% 45%,
      rgba(6,10,22, calc(var(--am2-mask-strength) * 0.35)),
      rgba(6,10,22, var(--am2-mask-strength))
    ) !important;
}








/* ✅ 预加载图片区：不占位、不显示，但会下载 */
.am2-preloads{
  position: fixed;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.am2-preloads img{ width:1px; height:1px; display:block; }



/* 背景流动层：默认不显示，ready 后淡入（避免“贴图加载闪烁”） */
#login_modal.am2 .am2-flow{
  opacity: 0;
  transition: opacity .22s ease;
}
#login_modal.am2.is-bg-ready .am2-flow{
  opacity: 1; /* 这里如果你有 --am2-flow-opacity，就用那个 */
}