/* ==========================================================================
   新拟态登录 / 注册页（neu-auth）
   --------------------------------------------------------------------------
   作用范围：仅 user_login.cshtml / user_register.cshtml
            （这两个页面的根容器 #vuediv 上加了 class="neu-auth"）

   设计原则：
     · 只做视觉覆盖 —— 不改 DOM 结构、不改 JS、不改 member.css / responsive.css 原规则
     · 所有选择器都限定在 .neu-auth 下；本文件在 responsive.css 之后引入，故能覆盖原样式
     · 配色取站点品牌红 #f42424（设计稿原本的蓝紫 #5b7fff/#7c5cff 已替换为品牌色）
     · 回滚方式：删掉 .cshtml 里那一行 <link href="/pcshop/css/neu-auth.css"> 即可
   ========================================================================== */

.neu-auth {
    /* 新拟态成立的前提：浅灰底 + 一对「浅/深」阴影 */
    --na-bg: #e0e5ec;
    --na-surface: #e8ecf3;
    --na-light: #ffffff;
    --na-dark: #b8bcc7;
    --na-text: #2d3436;
    --na-muted: #7a8699;
    --na-red: #f42424;
    --na-red-deep: #d81e1e;
    --na-radius: 28px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--na-bg);
    color: var(--na-text);
    font-family: "PingFang SC", "Microsoft YaHei", -apple-system, "Helvetica Neue", Arial, sans-serif;
}

/* public.css 里 body{background:#f9f9f9} 比新拟态底色浅，会在页面边缘露出色差 ⇒ 在登录/注册页改掉。
   用 :has() 精确限定，不影响其他页面；这里不能用 var()（body 是 .neu-auth 的祖先，取不到变量） */
body:has(.neu-auth) { background: #e0e5ec; }

/* ---------- 顶部：logo / Welcome / 切换入口 ---------- */
.neu-auth .login_top_bg { background: transparent; }
.neu-auth .login_top { height: 96px; }
.neu-auth .login_top a.img { height: 96px; }
.neu-auth .login_top span.title { margin-top: 38px; border-left-color: #c9cdd8; color: var(--na-muted); }
.neu-auth .login_top p.tips { margin-top: 38px; color: var(--na-muted); }
.neu-auth .login_top p.tips a { color: var(--na-red); }

/* ---------- 主体容器：铺浅灰底，顺带清掉 .login_body 的背景图 ---------- */
.neu-auth .login_body,
.neu-auth .reg_body {
    flex: 1;                    /* 撑满剩余高度 ⇒ 卡片在视口内垂直居中、页脚贴底 */
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    margin: 0;
    padding: 40px 0;
    min-height: auto;
    overflow: visible;
    background: var(--na-bg);
}

/* 注册页左侧装饰图在新拟态下会破风格：隐藏，让表单居中成卡片 */
.neu-auth .reg_left { display: none; }

/* ---------- 卡片：新拟态凸起 ---------- */
.neu-auth .loginfloat,
.neu-auth .reg_right {
    position: relative;
    left: auto;
    top: auto;
    width: 440px;
    margin: 0 auto;
    padding: 36px 40px 44px;
    overflow: visible;
    background: var(--na-surface);
    border-radius: var(--na-radius);
    box-shadow: -12px -12px 24px var(--na-light), 12px 12px 24px var(--na-dark);
    animation: na-card-in .55s cubic-bezier(.4, 0, .2, 1);
}

@keyframes na-card-in {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: none; }
}

.neu-auth .loginf_box { width: 100%; }
.neu-auth .loginf_box li { margin: 0 0 18px 0; }

/* ---------- 输入框：新拟态内凹 ---------- */
.neu-auth .loginf_txt { height: 54px; }
.neu-auth .loginf_txt i {
    width: 54px;
    height: 54px;
    line-height: 54px;
    font-size: 18px;
    color: var(--na-muted);
}

.neu-auth .login_txt {
    float: none;
    display: block;
    width: 100%;
    height: 54px;
    line-height: 54px;
    box-sizing: border-box;
    padding: 0 18px 0 50px;
    border: none;
    border-radius: 14px;
    background: var(--na-surface);
    box-shadow: inset -5px -5px 10px var(--na-light), inset 5px 5px 10px var(--na-dark);
    color: var(--na-text);
    font-size: 14px;
    -webkit-appearance: none;
    appearance: none;
    transition: box-shadow .2s ease;
}

.neu-auth .login_txt::placeholder { color: #9aa3b2; }

.neu-auth .login_txt:focus {
    border: none;
    outline: none;
    box-shadow: inset -5px -5px 10px var(--na-light), inset 5px 5px 10px var(--na-dark),
                0 0 0 2px rgba(244, 36, 36, .32);
}

/* 国家下拉（注册页）：内凹 + 自绘箭头（因为上面统一关掉了原生 appearance） */
.neu-auth select.login_txt {
    padding-right: 38px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237a8699' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
}

/* ---------- 验证码：内凹输入框 + 内凹图片框 ---------- */
.neu-auth .code_txt { float: left; width: calc(100% - 152px); padding: 0 14px; }

.neu-auth .verifyCode {
    float: right;
    width: 140px;
    height: 54px;
    border: none;
    border-radius: 14px;
    background: var(--na-surface);
    box-shadow: inset -5px -5px 10px var(--na-light), inset 5px 5px 10px var(--na-dark);
}

.neu-auth .verifyCode img { width: 100%; height: 100%; border-radius: 12px; object-fit: contain; }

/* 「获取邮箱验证码」按钮（注册页）*/
.neu-auth .loginf_txt a.code {
    float: right;
    width: 140px;
    height: 54px;
    line-height: 54px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--na-red), var(--na-red-deep));
    box-shadow: 4px 4px 10px rgba(244, 36, 36, .28);
    color: #fff;
    font-size: 13px;
}

.neu-auth .loginf_txt a.code:hover { filter: brightness(1.07); }

/* ---------- 忘记密码 / 注册协议勾选 ---------- */
.neu-auth .loginf_box a.link { color: var(--na-muted); }
.neu-auth .loginf_box a.link:hover { color: var(--na-red); }
.neu-auth .loginf_check label { color: var(--na-muted); font-size: 13px; }
.neu-auth .loginf_check a { color: var(--na-red); }

/* ---------- 主按钮：品牌红渐变胶囊 ---------- */
.neu-auth .loginf_box a.login_btn {
    height: 54px;
    line-height: 54px;
    border-radius: 999px;
    letter-spacing: 2px;
    background: linear-gradient(135deg, var(--na-red), var(--na-red-deep));
    box-shadow: 6px 6px 16px rgba(244, 36, 36, .35);
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    transition: transform .15s ease, box-shadow .15s ease;
}

.neu-auth .loginf_box a.login_btn:hover {
    transform: translateY(-2px);
    box-shadow: 8px 10px 20px rgba(244, 36, 36, .45);
}

.neu-auth .loginf_box a.login_btn:active { transform: translateY(0); }

/* ---------- 页脚：把深灰带改成融入浅灰底 ----------
   ⚠️ 深灰其实来自 .foot_conts{background:#333}（不是 .foot_bg），
      而 .foot_bg 的白色由 .bai{background:#fff !important} 提供 ⇒ 白色那条必须用 !important 压回去 */
.neu-auth .foot_bg.user_foot { background: transparent !important; }
.neu-auth .foot_bg.user_foot .foot_conts { background: transparent; }
.neu-auth .foot_conts { color: var(--na-muted); }
.neu-auth .foot_conts p { color: var(--na-muted); }
.neu-auth .foot_conts a { color: var(--na-muted); }
.neu-auth .foot_conts a:hover { color: var(--na-red); }
.neu-auth .foot_conts span { color: #b9bfca; }

/* ---------- 移动端：卡片收窄、阴影减弱 ---------- */
@media (max-width: 768px) {
    .neu-auth .login_body,
    .neu-auth .reg_body { align-items: flex-start; padding: 16px 16px 46px; }

    .neu-auth .loginfloat,
    .neu-auth .reg_right {
        width: auto;
        max-width: 420px;
        margin: 12px auto 0;
        padding: 24px 20px 30px;
        border-radius: 22px;
        box-shadow: -8px -8px 18px var(--na-light), 8px 8px 18px var(--na-dark);
    }

    /* 头部：窄屏下三个 float 元素会各自换行、左右错位 ⇒ 改成垂直居中堆叠 */
    .neu-auth .login_top {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: auto;
        height: auto;
        padding: 16px 16px 0;
    }
    .neu-auth .login_top a.img { float: none; width: auto; height: auto; margin: 0 0 6px; }
    .neu-auth .login_top a.img img { max-height: 44px; }
    .neu-auth .login_top span.title { float: none; display: block; margin: 2px 0 0; border-left: none; }
    .neu-auth .login_top p.tips { float: none; margin: 14px auto 0; }

    .neu-auth .loginf_txt { height: 50px; }
    .neu-auth .login_txt { height: 50px; line-height: 50px; }
    .neu-auth .code_txt { width: calc(100% - 126px); }
    .neu-auth .verifyCode,
    .neu-auth .loginf_txt a.code { width: 116px; height: 50px; line-height: 50px; }
    .neu-auth .loginf_box a.login_btn { height: 50px; line-height: 50px; font-size: 16px; }
}