/* 登录页专用样式（page-scoped）。
 *
 * 为什么单独成文件、而不是并入 base.css / backend.css：
 *  1. 登录页只加载 root.css / tailwind.css / admin-ui.css，不加载 backend.css；
 *  2. 这些规则是登录页专属（.login-backdrop / .fluid-shape / .custom-checkbox / body.login-page），
 *     放进全局 bundle 只会成为其余 140 个后台页面的死重；
 *  3. 保持"未分层"并放在 admin-ui.css 之后加载，级联优先级与原 <style> 完全一致。
 *
 * 页面变量挂在 body.login-page 上（而非 :root），既避免与 root.css 的 :root 重复，
 * 又通过继承作用于其后代。改这里前请注意：本页为定制浅色场景，刻意不引用主题令牌之外的字面色。
 */

body.login-page {
    --login-bg: #eef7fb;
    --login-bg-soft: #dfeefa;
    --login-panel: rgba(22, 119, 255, 0.24);
    --login-panel-soft: rgba(20, 184, 166, 0.16);
    --login-panel-warm: rgba(251, 191, 36, 0.15);
    --login-grid: rgba(22, 119, 255, 0.11);
    --login-line: rgba(15, 23, 42, 0.055);
}

/* 页面背景：多层渐变 + 网格 + 遮罩，Tailwind 工具类难以表达，保留自定义 */
body.login-page {
    background:
        linear-gradient(118deg, rgba(20, 184, 166, 0.16) 0%, transparent 34%),
        linear-gradient(148deg, transparent 0 42%, rgba(251, 191, 36, 0.14) 42.5% 55%, transparent 55.5%),
        linear-gradient(145deg, var(--login-bg) 0%, var(--login-bg-soft) 48%, #dcecff 100%);
}

.login-backdrop {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.login-backdrop::before {
    content: "";
    position: absolute;
    inset: -1px;
    background-image:
        linear-gradient(var(--login-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--login-grid) 1px, transparent 1px),
        linear-gradient(120deg, transparent 0 42%, rgba(255, 255, 255, 0.56) 42.4%, rgba(255, 255, 255, 0.10) 50%, transparent 50.4%);
    background-size: 56px 56px, 56px 56px, 100% 100%;
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.78), rgba(0, 0, 0, 0.2) 72%, transparent 100%);
}

.fluid-shape {
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.62);
    background:
        linear-gradient(135deg, var(--login-panel) 0%, var(--login-panel-soft) 54%, rgba(255, 255, 255, 0) 100%),
        linear-gradient(82deg, rgba(255, 255, 255, 0.72) 0%, transparent 58%);
    box-shadow: 0 32px 90px rgba(30, 64, 175, 0.14);
    opacity: 0.96;
    animation: floatShape 22s ease-in-out infinite;
}

.fluid-shape-top {
    width: min(780px, 58vw);
    height: min(430px, 42vh);
    top: -126px;
    right: -182px;
    border-radius: 34px;
    --shape-rotate: -13deg;
    --shape-skew: -8deg;
    transform: rotate(var(--shape-rotate)) skewX(var(--shape-skew));
}

.fluid-shape-bottom {
    width: min(720px, 52vw);
    height: min(380px, 42vh);
    left: -170px;
    bottom: -132px;
    border-radius: 30px;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.74), var(--login-panel-warm) 34%, rgba(20, 184, 166, 0.13) 66%, rgba(22, 119, 255, 0.08) 100%);
    --shape-rotate: 10deg;
    --shape-skew: 9deg;
    transform: rotate(var(--shape-rotate)) skewX(var(--shape-skew));
    animation-delay: -8s;
}

.login-backdrop::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, 0.66) 0%, rgba(255, 255, 255, 0.24) 38%, transparent 72%),
        linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.38) 76%, rgba(255, 255, 255, 0.78) 100%);
}

@keyframes floatShape {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(var(--shape-rotate, 0deg)) skewX(var(--shape-skew, 0deg));
    }
    50% {
        transform: translate3d(0, -14px, 0) rotate(var(--shape-rotate, 0deg)) skewX(var(--shape-skew, 0deg));
    }
}

/* 自定义复选框：渐变背景 + 伪元素对勾，Tailwind 无法直接实现 */
.custom-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid #d1d5db;
    border-radius: var(--admin-radius-md);
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
    position: relative;
}

.custom-checkbox:hover {
    border-color: rgba(22, 119, 255, 0.48);
}

.custom-checkbox:checked {
    border-color: transparent;
    background: linear-gradient(135deg, var(--arco-blue-5), var(--main-color));
}

.custom-checkbox:checked::after {
    content: '\2713';
    position: absolute;
    top: 50%;
    left: 50%;
    color: #ffffff;
    font-size: var(--admin-font-size-sm, 14px);
    font-weight: 700;
    transform: translate(-50%, -50%);
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-5px); }
    40% { transform: translateX(5px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
    .fluid-shape-top {
        width: 78vw;
        height: 260px;
        top: -92px;
        right: -180px;
    }

    .fluid-shape-bottom {
        width: 84vw;
        height: 330px;
        left: -190px;
        bottom: -170px;
    }
}