/* ==========================================================
   后台登录页 — 暗色极光主题
   ----------------------------------------------------------
   设计要点:
   1. 背景零图片: 全部用 CSS 渐变 + 三个模糊光斑合成极光,
      不产生任何网络请求, 也不需要解码图片(GPU 合成即可),
      光斑只做 transform 位移, 不会触发 repaint / layout。
   2. 视觉与后台的毛玻璃语言一致: 玻璃卡片 + 品牌蓝青渐变。
   3. 关闭动效偏好(prefers-reduced-motion) 时停掉所有动画。
   4. 本页固定暗色(与原页面 body.dark-mode 观感一致);
      标签文案等静态元素仍在 _AdminLayout 中统一维护。
   ========================================================== */

/* ---------- 固定暗色底 + 极光背景 ---------- */
body:has(.admin-login) {
    background: #05070c !important;
    color: #e8ecf4;
    overflow-x: hidden;
}
body.dark-mode:has(.admin-login) { background: #05070c !important; }

/* .upload-wrapper 默认有 20px padding, 会在 min-height:100vh 外再撑出滚动条, 这里清掉 */
.upload-wrapper:has(.admin-login) { padding: 0; }

.admin-login {
    position: relative;
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 56px 20px 92px;
    isolation: isolate;
}

/* 渐变基底: 顶部蓝、底部青, 与品牌色同源 */
.admin-login::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(120% 85% at 50% -12%, #101a33 0%, #080b13 45%, #04060a 100%),
        linear-gradient(180deg, #060910 0%, #04060a 100%);
}

/* 三个极光光斑 */
.aurora {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}
.aurora i {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(74px);
    will-change: transform;
}
/* 蓝: 左上大片, 最慢 */
.aurora .a1 {
    width: 62vw; height: 62vw;
    min-width: 520px; min-height: 520px;
    top: -22%; left: -14%;
    background: radial-gradient(circle at 50% 50%, rgba(0, 102, 255, 0.62), rgba(0, 102, 255, 0) 68%);
    animation: auroraDriftA 24s ease-in-out infinite alternate;
}
/* 青: 右下, 反向漂移 */
.aurora .a2 {
    width: 54vw; height: 54vw;
    min-width: 460px; min-height: 460px;
    right: -12%; bottom: -26%;
    background: radial-gradient(circle at 50% 50%, rgba(0, 214, 255, 0.50), rgba(0, 214, 255, 0) 68%);
    animation: auroraDriftB 30s ease-in-out infinite alternate;
}
/* 紫: 中部垫色, 让渐变有厚度, 平时几乎看不见 */
.aurora .a3 {
    width: 46vw; height: 46vw;
    min-width: 400px; min-height: 400px;
    top: 26%; left: 44%;
    background: radial-gradient(circle at 50% 50%, rgba(124, 92, 255, 0.34), rgba(124, 92, 255, 0) 70%);
    animation: auroraDriftC 34s ease-in-out infinite alternate;
}
@keyframes auroraDriftA {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(9vw, 6vh, 0) scale(1.16); }
}
@keyframes auroraDriftB {
    from { transform: translate3d(0, 0, 0) scale(1.08); }
    to   { transform: translate3d(-8vw, -5vh, 0) scale(1); }
}
@keyframes auroraDriftC {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(-7vw, 8vh, 0) scale(1.22); }
}

/* ================= 品牌标识 ================= */
.admin-login .login-brand {
    position: fixed;
    top: 26px; left: 32px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-label);
    color: #fff;
}
.admin-login .login-brand .mark {
    width: 30px; height: 30px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: var(--admin-accent-gradient, linear-gradient(135deg, #0066ff, #00b8ff));
    box-shadow: 0 8px 20px -8px rgba(0, 184, 255, 0.9);
}
.admin-login .login-brand .mark svg { width: 17px; height: 17px; }
.admin-login .login-brand .name span { font-weight: var(--fw-medium); color: rgba(255, 255, 255, 0.45); }

/* ================= 卡片 ================= */
.admin-login .login-card {
    position: relative;
    width: 100%;
    max-width: 400px;
    padding: 1px;                                   /* 渐变描边占位 */
    border-radius: 22px;
    background: linear-gradient(150deg, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0.03) 40%, rgba(0, 184, 255, 0.30));
    box-shadow: 0 40px 90px -28px rgba(0, 0, 0, 0.9);
    animation: loginCardIn 0.7s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}
/* 入场只做纯位移, 既不缩放也不动 opacity:
   1) opacity < 1 会为子树新建合成层, 毛玻璃(backdrop-filter)取不到真实背景,
      卡片先发白、动画结束才"落"回深色玻璃 —— 表现为卡片闪一下 + 变色;
   2) scale < 1 会把 padding:1px 露出的那圈渐变描边压成不足 1 像素,
      浏览器对亚像素细线会抗锯齿甚至整帧不画 —— 表现为四周边缘线闪烁。
   卡片内部的毛玻璃对 2% 缩放不敏感, 所以症状只出现在那 1px 描边上。
   只保留 translateY 可同时避开这两点。 */
@keyframes loginCardIn {
    from { transform: translateY(24px); }
    to   { transform: none; }
}

.admin-login .login-card-inner {
    padding: 34px 32px 26px;
    border-radius: 21px;
    background: rgba(13, 16, 24, 0.76);
    backdrop-filter: blur(28px) saturate(170%);
    -webkit-backdrop-filter: blur(28px) saturate(170%);
}

.admin-login .login-head {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 26px;
}
.admin-login .login-head .mark {
    width: 42px; height: 42px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: var(--admin-accent-gradient, linear-gradient(135deg, #0066ff, #00b8ff));
    box-shadow: 0 14px 28px -12px rgba(0, 180, 255, 0.95);
}
.admin-login .login-head .mark svg { width: 22px; height: 22px; }
.admin-login .login-head h1 {
    margin: 0;
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-label);
    color: #fff;
}
.admin-login .login-head p {
    margin: 3px 0 0;
    font-size: var(--fs-2xs);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-caps);
    color: rgba(255, 255, 255, 0.38);
}

/* ================= 输入框: 浮动标签(交互与之前版本一致) ================= */
.admin-login .login-field {
    position: relative;
    margin-bottom: 12px;
}
.admin-login .login-field .field-input {
    width: 100%;
    height: 54px;
    padding: 0 15px;
    font-family: inherit;
    font-size: var(--fs-base);
    font-weight: var(--fw-medium);
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 12px;
    outline: none;
    transition: border-color 0.22s, background 0.22s, box-shadow 0.22s;
}
/* 占位符透明 —— 标签本身就承担了提示作用 */
.admin-login .login-field .field-input::placeholder { color: transparent; }
.admin-login .login-field .field-input:hover { background: rgba(255, 255, 255, 0.07); }
.admin-login .login-field .field-input:focus {
    background: rgba(255, 255, 255, 0.085);
    border-color: rgba(0, 200, 255, 0.72);
    box-shadow: 0 0 0 4px rgba(0, 170, 255, 0.14);
}

/* 标签停在输入框内(未聚焦时它看起来就是占位文字) */
.admin-login .login-field > .field-label {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: rgba(255, 255, 255, 0.38);
    pointer-events: none;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
/* 聚焦 / 已有内容 / 自动填充时: 标签上浮成青色小标题 */
.admin-login .login-field .field-input:focus ~ .field-label,
.admin-login .login-field .field-input:not(:placeholder-shown) ~ .field-label,
.admin-login .login-field .field-input:-webkit-autofill ~ .field-label {
    top: 0;
    left: 12px;
    transform: translateY(-50%) scale(0.82);
    transform-origin: left center;
    padding: 0 6px;
    border-radius: 4px;
    color: #4fd6ff;
    background: #0d1018;
}

/* 浏览器自动填充时, 覆盖 Chrome 默认的浅色底(否则会盖住浮动标签) */
.admin-login .login-field .field-input:-webkit-autofill,
.admin-login .login-field .field-input:-webkit-autofill:hover,
.admin-login .login-field .field-input:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff;
    -webkit-box-shadow: 0 0 0 1000px #12161f inset;
    caret-color: #fff;
}

/* ================= 记住密码: 滑块开关(与方案 C 一致) ================= */
.admin-login .login-remember {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0 22px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: rgba(255, 255, 255, 0.62);
    cursor: pointer;
    user-select: none;
}
.admin-login .login-remember input {
    position: absolute;
    opacity: 0;
    width: 0; height: 0;
}
.admin-login .login-remember .track {
    position: relative;
    width: 36px; height: 20px;
    flex-shrink: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.13);
    transition: background 0.25s;
}
.admin-login .login-remember .track::after {
    content: "";
    position: absolute;
    top: 2.5px; left: 2.5px;
    width: 15px; height: 15px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.78);
    transition: left 0.28s cubic-bezier(0.34, 1.4, 0.64, 1), background 0.25s;
}
.admin-login .login-remember:hover .track { background: rgba(255, 255, 255, 0.19); }
.admin-login .login-remember input:checked + .track {
    background: var(--admin-accent-gradient, linear-gradient(135deg, #0066ff, #00d4ff));
}
.admin-login .login-remember input:checked + .track::after {
    left: 18.5px;
    background: #fff;
}
.admin-login .login-remember input:focus-visible + .track {
    outline: 2px solid #4fd6ff;
    outline-offset: 2px;
}

/* ================= 登录按钮 ================= */
.admin-login .login-submit {
    width: 100%;
    height: 52px;
    border: 0;
    border-radius: 12px;
    font-family: inherit;
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-caps);
    text-indent: 3px;
    color: #fff;
    cursor: pointer;
    background: var(--admin-accent-gradient, linear-gradient(135deg, #0066ff, #00c8ff));
    box-shadow: 0 16px 34px -14px rgba(0, 150, 255, 0.95), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s, box-shadow 0.3s;
}
.admin-login .login-submit:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow: 0 22px 42px -14px rgba(0, 170, 255, 1), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.admin-login .login-submit:active { transform: scale(0.985); }
.admin-login .login-submit:focus-visible {
    outline: 2px solid #4fd6ff;
    outline-offset: 3px;
}

/* ================= 错误提示 ================= */
.admin-login .login-alert {
    margin-top: 16px;
    padding: 11px 14px;
    border-radius: 10px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-align: center;
    background: rgba(239, 68, 68, 0.14);
    border: 1px solid rgba(248, 113, 113, 0.32);
    color: #fecaca;
    animation: loginItemUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

/* ================= 返回主页 ================= */
.admin-login .login-back-wrap {
    margin-top: 16px;
    animation: loginItemUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.25s backwards;
}
.admin-login .login-back-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: rgba(255, 255, 255, 0.42);
    text-decoration: none;
    transition: color 0.22s, gap 0.22s;
}
.admin-login .login-back-btn svg { width: 14px; height: 14px; }
.admin-login .login-back-btn:hover { color: #fff; gap: 12px; }

/* 入场: 卡片内元素依次上浮 */
@keyframes loginItemUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}
.admin-login .login-head     { animation: loginItemUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.12s backwards; }
.admin-login .login-field:nth-of-type(1) { animation: loginItemUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.17s backwards; }
.admin-login .login-field:nth-of-type(2) { animation: loginItemUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.22s backwards; }
.admin-login .login-remember { animation: loginItemUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.27s backwards; }
.admin-login .login-submit   { animation: loginItemUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.32s backwards; }
.admin-login .login-alert    { animation: loginItemUp 0.3s cubic-bezier(0.16, 1, 0.3, 1) 0.32s backwards; }

/* ================= 响应式 ================= */
@media (max-width: 560px) {
    .admin-login { padding: 84px 16px 56px; }
    .admin-login .login-brand { top: 20px; left: 20px; }
    .admin-login .login-card-inner { padding: 28px 22px 22px; }
    .admin-login .login-head { gap: 11px; margin-bottom: 22px; }
    .admin-login .login-head .mark { width: 38px; height: 38px; border-radius: 12px; }
    .admin-login .login-head .mark svg { width: 20px; height: 20px; }
    .admin-login .login-card { max-width: 100%; border-radius: 20px; }
}

/* 视口很矮时(如笔记本 768px), 收紧留白, 保证一屏放下 */
@media (max-height: 780px) {
    .admin-login { padding: 48px 20px; }
    .admin-login .login-card-inner { padding: 26px 28px 20px; }
    .admin-login .login-head { margin-bottom: 20px; }
    .admin-login .login-field { margin-bottom: 11px; }
    .admin-login .login-field .field-input { height: 50px; }
    .admin-login .login-submit { height: 48px; }
    .admin-login .login-remember { margin: 14px 0 18px; }
}

/* ================= 关闭动效偏好 ================= */
@media (prefers-reduced-motion: reduce) {
    .admin-login .login-card,
    .admin-login .login-card *,
    .aurora i {
        animation: none !important;
    }
    .admin-login .login-submit:hover { transform: none; }
}