:root {
    color-scheme: dark;
    --bg: #070812;
    --text: rgba(255, 255, 255, 0.92);
    --muted: rgba(255, 255, 255, 0.72);
    --border: rgba(255, 255, 255, 0.14);
    --shadow: rgba(0, 0, 0, 0.45);
    --btn: rgba(255, 255, 255, 0.06);
    --btn-hover: rgba(255, 255, 255, 0.1);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    background: var(--bg) !important;
    color: var(--text) !important;
    overflow: hidden;
    animation: none !important;
}

.bg {
    position: fixed;
    inset: -20%;
    z-index: 0;
    background:
        radial-gradient(1100px 700px at 10% 20%, rgba(156, 140, 255, 0.36), rgba(0, 0, 0, 0) 60%),
        radial-gradient(1000px 700px at 85% 25%, rgba(255, 140, 196, 0.30), rgba(0, 0, 0, 0) 62%),
        radial-gradient(900px 650px at 65% 90%, rgba(120, 235, 255, 0.24), rgba(0, 0, 0, 0) 62%),
        radial-gradient(900px 650px at 30% 85%, rgba(255, 220, 160, 0.18), rgba(0, 0, 0, 0) 65%),
        radial-gradient(1200px 900px at 50% 50%, rgba(35, 38, 90, 0.45), rgba(7, 8, 18, 1) 62%);
    filter: blur(12px) saturate(140%) contrast(110%);
    transform: translate3d(0, 0, 0);
    animation: drift 10s ease-in-out infinite alternate;
    will-change: transform;
}

.blobs {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    filter: saturate(140%) contrast(115%);
    animation: hue 14s linear infinite;
}

.blob {
    position: absolute;
    width: var(--size);
    height: var(--size);
    left: 0;
    top: 0;
    border-radius: 9999px;
    background: radial-gradient(circle at 30% 30%, rgba(var(--rgb), 0.98), rgba(var(--rgb), 0) 62%);
    mix-blend-mode: screen;
    opacity: 0.86;
    filter: blur(26px);
    transform: translate3d(var(--x1), var(--y1), 0) scale(1);
    will-change: transform, opacity;
    animation: blob var(--dur) ease-in-out infinite alternate;
}

.blob.b2 { opacity: 0.78; filter: blur(30px); mix-blend-mode: lighten; }
.blob.b3 { opacity: 0.70; filter: blur(34px); mix-blend-mode: screen; }

@keyframes blob {
    0% { transform: translate3d(var(--x1), var(--y1), 0) scale(1); }
    100% { transform: translate3d(var(--x2), var(--y2), 0) scale(1.18); }
}

@keyframes hue {
    0% { filter: saturate(140%) contrast(115%) hue-rotate(0deg); }
    100% { filter: saturate(140%) contrast(115%) hue-rotate(28deg); }
}

.grain {
    position: fixed;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27160%27%20height%3D%27160%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%27.75%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27/%3E%3C/filter%3E%3Crect%20width%3D%27160%27%20height%3D%27160%27%20filter%3D%27url(%23n)%27%20opacity%3D%27.33%27/%3E%3C/svg%3E");
    mix-blend-mode: overlay;
    opacity: 0.22;
}

.vignette {
    position: fixed;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: radial-gradient(1200px 800px at 50% 30%, rgba(0,0,0,0) 45%, rgba(0,0,0,0.65) 100%);
}

@keyframes drift {
    0% { transform: translate3d(-2%, -1%, 0) scale(1.05) rotate(-1deg); }
    35% { transform: translate3d(2%, -2%, 0) scale(1.08) rotate(1deg); }
    70% { transform: translate3d(-1%, 2%, 0) scale(1.06) rotate(-0.5deg); }
    100% { transform: translate3d(2.5%, 1.5%, 0) scale(1.1) rotate(0.8deg); }
}

.wrap {
    position: relative;
    height: 100%;
    display: grid;
    place-items: center;
    padding: 24px;
    z-index: 4;
}

/* Glassmorphism Card Style */
.login-card-glass {
    width: clamp(320px, 92vw, 520px);
    padding: 26px 24px !important;
    background: rgba(30, 30, 30, 0.7) !important; /* Dark semi-transparent background */
    backdrop-filter: blur(10px) !important; /* Blur effect */
    -webkit-backdrop-filter: blur(10px) !important; /* Safari support */
    border: 1px solid rgba(255, 255, 255, 0.1) !important; /* Subtle border */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37) !important; /* Shadow */
    color: #fff !important; /* Light text */
    border-radius: 5px !important;
}

.login-card-glass .uk-margin {
    margin-top: 12px !important;
    margin-bottom: 12px !important;
}

.login-card-glass img {
    max-width: 260px;
    width: 100%;
    height: auto;
}

@media (max-height: 720px) {
    .login-card-glass {
        padding: 20px 18px !important;
    }
    .login-card-glass img {
        max-width: 220px;
    }
}

/* Input fields styling for glass effect */
.login-card-glass .uk-input {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
}

.login-card-glass .uk-input:focus {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

.login-card-glass .uk-input::placeholder {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Autofill overrides (Firefox/Chromium) */
.login-card-glass input.uk-input:-webkit-autofill,
.login-card-glass input.uk-input:-webkit-autofill:hover,
.login-card-glass input.uk-input:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.10) inset !important;
    caret-color: #ffffff !important;
}

.login-card-glass input.uk-input:-moz-autofill,
.login-card-glass input.uk-input:-moz-autofill:hover,
.login-card-glass input.uk-input:-moz-autofill:focus {
    box-shadow: 0 0 0 1000px rgba(255, 255, 255, 0.10) inset !important;
    caret-color: #ffffff !important;
    color: #ffffff !important;
}

/* Headings styling */
.login-card-glass h1,
.login-card-glass h2,
.login-card-glass h3 {
    color: #ffffff !important;
}

/* Muted text styling adjustment for dark background */
.login-card-glass .uk-text-muted {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Label styling */
.login-card-glass .uk-form-label {
    color: #e0e0e0 !important;
}

/* Navy Glass Button Style */
.login-card-glass .uk-button-primary {
    background: linear-gradient(135deg, rgba(246, 211, 101, 0.8) 0%, rgba(253, 160, 133, 0.8) 100%) !important; /* Warm Peach Glass */
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    backdrop-filter: blur(5px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    border-radius: 4px !important;
}

.login-card-glass .uk-button-primary:hover {
    background: linear-gradient(135deg, rgba(246, 211, 101, 0.9) 0%, rgba(253, 160, 133, 0.9) 100%) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    transform: translateY(-2px);
    box-shadow: 0 7px 14px rgba(0, 0, 0, 0.25), 0 0 15px rgba(253, 160, 133, 0.4); /* Peach glow */
}

.login-card-glass .uk-button-primary:active {
    background: linear-gradient(135deg, rgba(246, 211, 101, 1) 0%, rgba(253, 160, 133, 1) 100%) !important;
    transform: translateY(1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Registration card styling */
.registration-card-glass {
    background: rgba(30, 30, 30, 0.5) !important;
    backdrop-filter: blur(5px) !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 5px !important;
}

.registration-card-glass .uk-card-title {
    color: #fff !important;
}

.registration-card-glass p {
    color: #ccc !important;
}



.bg-image {
    display: none;
}