body {
    margin: 0;
    padding: 0;
    position: relative;
    min-height: 100dvh;
    font-family: sans-serif;
    z-index: 0;

    display: flex;
    align-items: center;
    justify-content: center;
}

body {
    background-color: #1b1f22;
}

/* Blurred background */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: calc(100% + 120px);
    height: calc(100% + 120px);
    background-color: #1b1f22;
    background-image: url(/static/bg.webp);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    margin: -60px;
    filter: saturate(70%) brightness(95%);   /* Adjust blur strength */
    z-index: -1;          /* Push behind content */

    opacity: 0;
    animation: fadeInBg 0.5s ease forwards;
    animation-delay: 0.2s;
}

@keyframes fadeInBg {
  to { opacity: 1; }
}

.logincard {
    position: relative;
    margin-top: -110px;
    width: 300px;                 /* adjust size */
    max-width: calc(90vw - 100px);
    padding: 20px 50px;
    padding-right: 75px;
    border-radius: 20px;
    background: linear-gradient(
        to bottom right,
        rgba(255, 255, 255, 0.25), /* brighter top/left */
        rgba(255, 255, 255, 0.092)   /* softer bottom/right */
    );
    backdrop-filter: blur(30px) saturate(130%) brightness(105%) contrast(105%);  /* frosted glass effect */
    -webkit-backdrop-filter: blur(30px); /* Safari support */
    border: 1px solid rgba(255, 255, 255, 0.3); /* subtle border */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2), inset 0 0 20px -15px rgba(255, 255, 255, 0.572);  /* soft shadow */
    color: #fff;                  /* text color (adjust as needed) */
    /* sheen positioning */
    background-size: 200% 200%;
    background-position: center;
    transition: background-position 0.8s ease;
    .actions {
        display: flex;
        justify-content: start;
        align-items: end;
        gap: 20px;
    }

    &::before {
        content: ' ';
        top: 20px;
        right: 10px;
        position: absolute;
        background-image: url(/static/logo.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        z-index: 99;
        width: 100px;
        height: 100px;
    }
}

/* Subtle shift on hover */
.logincard:hover {
  background-position: top left;
}

button {
    background-image: linear-gradient(#42A1EC, #0070C9);
    border: 1px solid #0077CC;
    border-radius: 4px;
    box-sizing: border-box;
    color: #FFFFFF;
    cursor: pointer;
    direction: ltr;
    display: block;
    font-family: "SF Pro Text","SF Pro Icons","AOS Icons","Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 17px;
    font-weight: 400;
    letter-spacing: -.022em;
    line-height: 1.47059;
    min-width: 30px;
    overflow: visible;
    padding: 4px 15px;
    text-align: center;
    vertical-align: baseline;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    white-space: nowrap;

    &:disabled {
    cursor: default;
    opacity: .3;
    }

    &:hover {
    background-image: linear-gradient(#51A9EE, #147BCD);
    border-color: #1482D0;
    text-decoration: none;
    }

    &:active {
    background-image: linear-gradient(#3D94D9, #0067B9);
    border-color: #006DBC;
    outline: none;
    }

    &:focus {
    box-shadow: rgba(131, 192, 253, 0.5) 0 0 0 3px;
    outline: none;
    }
}