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

body{

    font-family:'Poppins',sans-serif;
    color:white;
    overflow:hidden;

    background:
    linear-gradient(rgba(0,0,0,.75),rgba(0,0,0,.85)),
    url("https://images.unsplash.com/photo-1462331940025-496dfbfc7564?auto=format&fit=crop&w=1920&q=80");

    background-size:cover;
    background-position:center;
    background-attachment:fixed;
}

/* LOGIN */

#loginScreen{

    position:fixed;
    inset:0;

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

    backdrop-filter:blur(8px);
}

.login-box{

    width:420px;

    background:rgba(15,23,42,.85);

    border:1px solid rgba(96,165,250,.3);

    border-radius:25px;

    padding:40px;

    text-align:center;

    box-shadow:
    0 0 40px rgba(96,165,250,.25),
    0 0 80px rgba(96,165,250,.15);
}

.login-box h1{

    color:#60a5fa;

    margin-bottom:10px;

    text-shadow:0 0 20px #60a5fa;
}

.subtitle{

    color:#cbd5e1;

    margin-bottom:25px;
}

.warning{

    background:rgba(239,68,68,.15);

    border:1px solid rgba(239,68,68,.3);

    color:#fca5a5;

    padding:12px;

    border-radius:12px;

    margin-bottom:20px;

    font-size:.85rem;
}

.login-box input{

    width:100%;

    padding:15px;

    border:none;

    border-radius:12px;

    background:#020617;

    color:white;

    margin-bottom:15px;

    outline:none;
}

.login-box input:focus{

    border:1px solid #60a5fa;

    box-shadow:0 0 15px rgba(96,165,250,.4);
}

.login-box button{

    width:100%;

    padding:15px;

    border:none;

    border-radius:12px;

    background:#2563eb;

    color:white;

    font-weight:700;

    cursor:pointer;

    transition:.3s;
}

.login-box button:hover{

    transform:translateY(-3px);

    box-shadow:0 0 20px rgba(37,99,235,.5);
}

#error{

    margin-top:15px;

    color:#f87171;

    font-weight:600;
}

/* PANEL */

#panel{

    display:none;

    min-height:100vh;

    padding:40px;

    overflow:auto;
}

.panel-header{

    background:rgba(15,23,42,.85);

    border-radius:25px;

    padding:30px;

    margin-bottom:30px;

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

.panel-header h1{

    color:#60a5fa;

    text-shadow:0 0 20px #60a5fa;
}

.panel-header p{

    margin-top:10px;

    color:#cbd5e1;
}

.grid{

    display:grid;

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

    gap:25px;
}

.card{

    background:rgba(15,23,42,.85);

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

    border-radius:20px;

    padding:25px;

    transition:.3s;
}

.card:hover{

    transform:translateY(-5px);

    box-shadow:0 0 25px rgba(96,165,250,.2);
}

.card h3{

    color:#60a5fa;

    margin-bottom:15px;
}

.card p{

    color:#cbd5e1;
}

footer{

    margin-top:40px;

    text-align:center;

    color:#64748b;
}

.security-warning{

    background:
    rgba(239,68,68,.12);

    border:
    1px solid rgba(239,68,68,.35);

    border-left:
    5px solid #ef4444;

    padding:20px;

    border-radius:15px;

    margin-bottom:30px;
}

.security-warning h3{

    color:#fca5a5;

    margin-bottom:10px;
}

.security-warning p{

    color:#fecaca;

    margin-top:8px;
}