body {

    font-family:'Poppins',sans-serif;

    background:
        linear-gradient(
            135deg,
            #0f172a 0%,
            #1e3a8a 50%,
            #2563eb 100%
        );

    min-height:100vh;

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

    margin:0;
}

button {

    width: 100%;

    height: 80px;

    border: none;

    border-radius: 20px;

    background: white;

    color: #294a7d;

    font-size: 24px;

    font-weight: 700;

    cursor: pointer;

    transition: all .25s ease;
}

button:hover {

    transform: translateY(-3px);

    box-shadow:
        0 15px 35px rgba(0,0,0,.2);
}

button:active {

    transform:
        scale(.98);
}

.logout-btn {
    
    background: #dc3545;
    
    color: white;
}


.login-container {
    
    width: 100%;
    
    max-width: 700px;
    
    padding: 20px;
}

.login-card {

    width:100%;

    max-width:none;

    background:
        rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

    border:
        1px solid rgba(255,255,255,.15);

    border-radius:25px;

    padding:40px;

    box-shadow:
        0 20px 50px rgba(0,0,0,.25);

    animation:
        fadeIn .7s ease;
}

@keyframes fadeIn {

    from {
        opacity:0;
        transform:translateY(20px);
    }

    to {
        opacity:1;
        transform:translateY(0);
    }
}

.login-card h1 {

    color: white;

    font-size: 75px;

    font-weight: 700;

    line-height: 1;

    margin-bottom: 20px;
}

.login-logo {
    
    width: 150px;
    
    height: auto;
    
    display: block;
}

.subtitle {

    color: #cbd5e1;

    font-size: 20px;

    margin-bottom: 60px;
}

.input-group {

    margin-bottom: 25px;
}

.input-group label {

    display: block;

    color: #cbd5e1;

    font-size: 14px;

    font-weight: 500;

    letter-spacing: 2px;

    margin-bottom: 12px;
}

.input-wrapper {

    display: flex;
    
    align-items: center;

    background: rgba(255,255,255,.08);

    border-radius: 18px;

    padding: 0 20px;

    height: 72px;

    transition: .25s;
}

.input-wrapper i {

    color: #cbd5e1;

    font-size: 24px;

    margin-right: 15px;

    width: 30px;

    text-align: center;
}

.input-wrapper input {

    flex: 1;

    border: none;

    background: transparent;

    color: white;

    font-size: 18px;

    font-family: inherit;

    width: auto;

    padding: 0;
}

.input-wrapper input:focus {

    outline:none;
}

.input-wrapper:focus-within {

    background:
        rgba(255,255,255,.15);

    box-shadow:
        0 0 0 2px
        rgba(255,255,255,.15);
}

.input-wrapper:hover {

    background:
        rgba(255,255,255,.12);
}

::placeholder {
    color: rgba(255,255,255,.5);
}

.logo-container {
    margin-bottom: 40px;
}

#togglePassword {

    cursor: pointer;

    color: #cbd5e1;
}






@media (max-width: 768px) {

    .login-card {

        margin:20px;

        padding:30px;
    }

    .login-card h1 {

        font-size:40px;
    }
    
    .dashboard-card h1 {
        
        font-size: 40px;
    }

    .dashboard-header {
        
        flex-direction: column;
        
        gap: 20px;
    }

    button {

        padding:16px;
    }
}







.error {

    background: #dc3545;

    color: white;

    padding: 12px;

    border-radius: 8px;

    margin-bottom: 20px;
}






.dashboard-container {

    width:100%;
    max-width:1100px;

    padding:30px;
}

.dashboard-card {

    background:
        rgba(255,255,255,.08);

    backdrop-filter:blur(20px);

    border:
        1px solid rgba(255,255,255,.15);

    border-radius:25px;

    padding:40px;

    box-shadow:
        0 20px 50px rgba(0,0,0,.25);
        
    animation:
        fadeIn .6s ease;
}

.dashboard-card h1 {

    color: white;

    font-size: 75px;

    font-weight: 700;

    line-height: 1;

    margin-bottom: 20px;
}

.dashboard-header {

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:40px;
}

.dashboard-logo {

    width:150px;
        
    height: auto;
    
    display: block;
}

.logout-link {

    color:white;

    text-decoration:none;

    font-weight:600;
}

.logout-link:hover {

    opacity:.8;
}

.app-grid {

    display:grid;

    grid-template-columns:
        repeat(
            auto-fit,
            minmax(220px,1fr)
        );

    gap:25px;

    margin-top:40px;
}

.app-card {

    background:
        rgba(255,255,255,.08);

    border:
        1px solid rgba(255,255,255,.08);

    border-radius:20px;

    text-decoration:none;

    color:white;

    padding:40px 20px;

    text-align:center;

    transition:.25s;
}

.app-card:hover {

    transform:
        translateY(-5px);

    background:
        rgba(255,255,255,.12);
        
    box-shadow:
        0 15px 30px rgba(0,0,0,.2);
}

.app-card i {

    font-size:48px;

    margin-bottom:15px;

    display:block;
}

.app-card span {

    font-size:20px;

    font-weight:600;
}