body {
    background: linear-gradient(135deg, #0f1f3d 0%, #1a2c4e 25%, #2d3f63 50%, #1a2c4e 75%, #0f1f3d 100%) !important;
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(3px 3px at 20% 30%, rgba(255, 255, 255, 0.8) 50%, transparent),
        radial-gradient(2px 2px at 40% 70%, rgba(255, 255, 255, 0.8) 50%, transparent),
        radial-gradient(4px 4px at 50% 160%, rgba(255, 255, 255, 0.8) 50%, transparent),
        radial-gradient(3px 3px at 80% 10%, rgba(255, 255, 255, 0.8) 50%, transparent),
        radial-gradient(2px 2px at 90% 40%, rgba(255, 255, 255, 0.8) 50%, transparent),
        radial-gradient(3px 3px at 10% 80%, rgba(255, 255, 255, 0.8) 50%, transparent);
    background-size: 200px 200px;
    animation: snow 20s linear infinite !important;
    opacity: 0.6;
    z-index: 0;
    pointer-events: none;
}

@keyframes snow {
    0% { background-position: 0px 0px; }
    100% { background-position: 200px 600px; }
}

.login-card {
    background: rgba(20, 30, 48, 0.75) !important;
    backdrop-filter: blur(20px) saturate(150%) !important;
    border: 1px solid rgba(135, 206, 235, 0.3) !important;
    box-shadow: 
        0 32px 64px rgba(0, 10, 30, 0.6),
        0 8px 24px rgba(0, 10, 30, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2),
        0 0 15px rgba(135, 206, 235, 0.1) !important;
    position: relative;
    overflow: visible !important; 
}

.login-card::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -30px;
    right: -20px;
    height: 50px;
    /* background: url('sveg/snezok.png') no-repeat; */
    background-size: auto;
    background-position: center top;
    z-index: 10;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

.login-card::after {
    background: linear-gradient(135deg, 
        rgba(135, 206, 235, 0.1) 0%, 
        transparent 30%, 
        transparent 70%, 
        rgba(168, 85, 247, 0.1) 100%) !important;
}

.logo {
    background: linear-gradient(135deg, #a5f3fc 0%, #38bdf8 50%, #60a5fa 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: 0 0 20px rgba(56, 189, 248, 0.5);
}

.logo-subtitle {
    color: #bae6fd !important;
}

.logo-subtitle-main {
    color: #e0f2fe !important;
}

.logo-subtitle-note {
    color: #bae6fd !important;
}

.logo-subtitle-note a {
    color: #e0f2fe !important;
}

.logo-subtitle-note a:hover {
    color: #f0f9ff !important;
}

input[type="text"],
input[type="password"] {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(135, 206, 235, 0.2) !important;
    color: #e0f2fe !important;
}

input[type="text"]:focus,
input[type="password"]:focus {
    border-color: rgba(56, 189, 248, 0.8) !important;
    box-shadow: 
        0 0 0 1px rgba(56, 189, 248, 0.8),
        0 0 24px rgba(56, 189, 248, 0.25) !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

label {
    color: #e0f2fe !important;
}

.login-btn {
    background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 50%, #6366f1 100%) !important;
    box-shadow: 
        0 8px 16px rgba(14, 165, 233, 0.25),
        0 4px 8px rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.login-btn:hover {
    box-shadow: 
        0 16px 32px rgba(14, 165, 233, 0.4),
        0 8px 16px rgba(0, 0, 0, 0.3) !important;
    background: linear-gradient(135deg, #38bdf8 0%, #60a5fa 50%, #818cf8 100%) !important;
}

.agreement-text {
    color: #94a3b8 !important;
}

.agreement-text a {
    color: #7dd3fc !important;
}

.agreement-text a:hover {
    color: #bae6fd !important;
}

.divider::before,
.divider::after,
.demo-divider::before {
    background: linear-gradient(90deg, transparent, rgba(135, 206, 235, 0.3), transparent) !important;
}

.divider span,
.demo-divider span {
    color: #94a3b8 !important;
}

.demo-divider span {
    background: transparent !important; 
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

.kodari-login-btn {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(135, 206, 235, 0.2) !important;
}

.kodari-login-btn:hover {
    background: rgba(56, 189, 248, 0.15) !important;
    border-color: rgba(56, 189, 248, 0.4) !important;
}

.demo-test-btn {
    background: rgba(56, 189, 248, 0.1) !important;
    border: 1px solid rgba(56, 189, 248, 0.3) !important;
}

.demo-test-btn:hover {
    background: rgba(56, 189, 248, 0.2) !important;
    border-color: rgba(56, 189, 248, 0.5) !important;
}

.demo-test-icon {
    background: rgba(56, 189, 248, 0.2) !important;
    color: #7dd3fc !important;
}

.demo-test-btn:hover .demo-test-icon {
    background: rgba(56, 189, 248, 0.3) !important;
    color: #e0f2fe !important;
}

.demo-test-title {
    color: #f0f9ff !important;
}

.demo-test-subtitle {
    color: #bae6fd !important;
}

.demo-test-arrow {
    color: #7dd3fc !important;
}

.login-header {
    position: relative;
}

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(10deg); }
}