* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif; }

/* ======== 背景 ======== */
.login-bg {
    position: fixed; inset: 0;
    background: linear-gradient(135deg, #12B7F5 0%, #3B8FF3 55%, #6A6BF5 100%);
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.bubble {
    position: absolute; border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    animation: float 7s ease-in-out infinite;
}
.b1 { width: 160px; height: 160px; top: 12%; left: 8%; }
.b2 { width: 90px;  height: 90px;  top: 68%; left: 16%; animation-delay: 1.2s; }
.b3 { width: 210px; height: 210px; top: 18%; right: 10%; animation-delay: 0.6s; }
.b4 { width: 70px;  height: 70px;  bottom: 14%; right: 22%; animation-delay: 2s; }
.b5 { width: 120px; height: 120px; bottom: 8%; left: 38%; animation-delay: 1.6s; }
@keyframes float {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-22px) scale(1.04); }
}

/* ======== 登录卡片 ======== */
.login-card {
    position: relative; z-index: 2;
    width: 400px; max-width: calc(100vw - 32px);
    background: #fff; border-radius: 14px;
    padding: 38px 42px 30px;
    box-shadow: 0 24px 64px rgba(0, 30, 90, 0.28);
    text-align: center;
    animation: pop .5s ease-out;
}
@keyframes pop {
    from { opacity: 0; transform: translateY(24px) scale(.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.login-logo { margin-bottom: 6px; }
.login-title { font-size: 24px; color: #222; font-weight: 700; }
.login-slogan {
    font-size: 27px; color: #1a1a1a; font-weight: 900;
    letter-spacing: 2px; margin: 8px 0 4px;
    /* 微软雅黑无 Black 字重，用细微描边补足，视觉上更粗 */
    -webkit-text-stroke: .6px currentColor;
}
.login-sub { color: #9aa4b0; font-size: 13px; margin: 4px 0 20px; }
.login-slogans { margin-bottom: 16px; }
.login-slogans .login-sub { margin-bottom: 0; }

/* ======== 私信她落地样式 ======== */
.her-avatar { margin-bottom: 14px; }
.her-avatar img {
    width: 108px; height: 108px; border-radius: 50%;
    object-fit: cover; display: inline-block;
    border: 4px solid #fff;
    box-shadow: 0 8px 24px rgba(18, 60, 130, .25);
}
.btn-pm {
    margin-top: 8px; height: 50px; font-size: 17px; letter-spacing: 6px;
}

/* ======== 表单输入框 ======== */
.field { margin: 0 0 14px; }
.field input {
    width: 100%; height: 48px; padding: 0 16px;
    border: 1px solid #e2e8f2; border-radius: 12px;
    background: #f6f8fc; color: #333;
    font-size: 14px; outline: none;
    transition: border-color .25s, box-shadow .25s, background .25s;
}
.field input::placeholder { color: #a9b4c0; }
.field input:hover { border-color: #c9d6e6; }
.field input:focus {
    border-color: #12B7F5; background: #fff;
    box-shadow: 0 0 0 3px rgba(18, 183, 245, .15);
}

/* ======== 管理员登录页底部链接 ======== */
.hint { margin-top: 12px; font-size: 13px; color: #9aa4b0; }
.hint a { color: #12B7F5; text-decoration: none; }
.hint a:hover { text-decoration: underline; }

.btn-primary {
    width: 100%; height: 46px; margin-top: 6px;
    border: none; border-radius: 23px;
    background: linear-gradient(90deg, #12B7F5, #3B8FF3);
    color: #fff; font-size: 16px; font-weight: 600; letter-spacing: 4px;
    cursor: pointer; transition: all .25s;
    box-shadow: 0 6px 16px rgba(59, 143, 243, .35);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(59, 143, 243, .45); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:disabled { opacity: .6; cursor: not-allowed; transform: none; }

.msg {
    display: none; margin-top: 14px; padding: 9px 12px;
    border-radius: 8px; font-size: 13px;
}
.msg.err { color: #d03050; background: #fff1f3; }
.msg.ok  { color: #1a8a5a; background: #e8f8f0; }

/* ======== 小屏适配 ======== */
@media (max-width: 480px) {
    .login-card { padding: 28px 22px 24px; }
    .login-title { font-size: 21px; }
    .login-slogan { font-size: 23px; letter-spacing: 1px; }
    .login-logo { transform: scale(.85); margin-bottom: 0; }
    .b1, .b3 { display: none; }
    .b2 { width: 60px; height: 60px; }
    .b5 { width: 80px; height: 80px; }
}
@media (max-width: 360px) {
    .b4 { display: none; }
    .btn-primary { letter-spacing: 2px; }
}
/* 矮屏（横屏 / 小屏设备）：压缩纵向间距 */
@media (max-height: 700px) {
    .login-card { padding: 22px 22px 18px; }
    .login-sub { margin: 4px 0 14px; }
    .field input { height: 42px; }
    .btn-primary { height: 42px; }
}