* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    position: relative;
}

body::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" opacity="0.05"><path fill="none" d="M10 10 L90 10 M10 20 L90 20 M10 30 L90 30 M10 40 L90 40 M10 50 L90 50 M10 60 L90 60 M10 70 L90 70 M10 80 L90 80 M10 90 L90 90 M10 10 L10 90 M20 10 L20 90 M30 10 L30 90 M40 10 L40 90 M50 10 L50 90 M60 10 L60 90 M70 10 L70 90 M80 10 L80 90 M90 10 L90 90" stroke="white" stroke-width="0.8"/></svg>');
    background-repeat: repeat;
    pointer-events: none;
}

.login-container {
    width: 100%;
    max-width: 440px;
    z-index: 2;
}

.card {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(2px);
    border-radius: 32px;
    padding: 40px 32px;
    box-shadow: 0 25px 45px -12px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease;
}

.card:hover {
    transform: translateY(-3px);
}

.logo-area {
    text-align: center;
    margin-bottom: 28px;
}

.logo-icon {
    background: linear-gradient(145deg, #2563eb, #1e40af);
    width: 70px;
    height: 70px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 28px;
    box-shadow: 0 12px 18px -8px rgba(37, 99, 235, 0.3);
}

.logo-icon i {
    font-size: 36px;
    color: white;
}

h2 {
    font-size: 28px;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.3px;
}

.subtitle {
    color: #475569;
    font-size: 14px;
    margin-top: 6px;
    font-weight: 400;
}

.input-group {
    margin-bottom: 20px;
    position: relative;
}

.input-group i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 18px;
    transition: color 0.2s;
}

input {
    width: 100%;
    padding: 14px 16px 14px 48px;
    font-size: 15px;
    font-weight: 500;
    border: 1.5px solid #e2e8f0;
    border-radius: 18px;
    background: #ffffff;
    transition: all 0.2s;
    font-family: 'Inter', sans-serif;
    outline: none;
    color: #0f172a;
}

input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

input:focus + i {
    color: #2563eb;
}

.btn-login {
    background: linear-gradient(95deg, #2563eb, #1d4ed8);
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 28px;
    font-size: 16px;
    font-weight: 600;
    color: white;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 8px;
    box-shadow: 0 8px 14px -8px rgba(37, 99, 235, 0.4);
}

.btn-login i {
    font-size: 18px;
    transition: transform 0.2s;
}

.btn-login:hover {
    background: linear-gradient(95deg, #1d4ed8, #1e3a8a);
    transform: scale(1.01);
    box-shadow: 0 12px 18px -8px rgba(37, 99, 235, 0.5);
}

.btn-login:hover i {
    transform: translateX(4px);
}

.footer-links {
    text-align: center;
    margin-top: 28px;
    font-size: 13px;
    color: #64748b;
    border-top: 1px solid #eef2ff;
    padding-top: 22px;
}

.footer-links p {
    margin-bottom: 6px;
}

.footer-links small {
    display: inline-block;
    color: #2563eb;
    background: #eff6ff;
    padding: 4px 10px;
    border-radius: 40px;
    font-weight: 500;
}

@media (max-width: 480px) {
    .card {
        padding: 30px 20px;
    }
    h2 {
        font-size: 24px;
    }
}

.login-error {
    background: linear-gradient(135deg, #fee2e2, #fecaca);
    color: #991b1b;
    padding: 12px 16px;
    border-radius: 16px;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 20px;
    border-left: 4px solid #ef4444;
    display: flex;
    align-items: center;
    gap: 8px;
}