:root{
    --white: #fff;
    --bg:#f7f8fc;
    --btn-bg: #81bb04;
    --border:#e6e8f0;
    --slate:#3d4f7c;
    --slate-dk:#2c3a5e;
    --slate-lt:#eef0f8;
    --slate-bd:#c5cbdf;
    --slate-mid:#6b7db3;
    --coral:#e8604a;
    --text:#1a1d2e;
    --muted:#8892b0;
    --font:'Manrope',sans-serif;
}

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

body{
    background:var(--white);
    color:var(--text);
    font-family:var(--font);
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction: column;
    padding: 15px;
}

.topbar{
    position:fixed;
    top:0; left:0; right:0;
    height:4px;
    background:linear-gradient(90deg, var(--slate-dk), var(--slate-mid), var(--coral));
}

.card {
    background: linear-gradient(180deg,rgba(42,75,125,1) 33%,rgba(31,58,102,1) 66%,rgba(17,38,77,1) 100%);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 40px 36px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 4px 24px rgba(61,79,124,.10);
}

.logo-wrap{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:28px;
}


.error-box{
    background:#fef2ef;
    border:1px solid #f6c5bb;
    color:var(--coral);
    border-radius:10px;
    padding:10px 14px;
    font-size:13px;
    font-weight:600;
    margin-bottom:18px;
}

label{
    display:block;
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.6px;
    color:var(--white);
    margin-bottom:7px;
}

input[type="password"]{
    width:100%;
    border:1.5px solid var(--border);
    border-radius:10px;
    padding:11px 14px;
    font-size:14px;
    font-family:var(--font);
    color:var(--text);
    background:var(--bg);
    outline:none;
    transition:.2s;
}

input[type="password"]:focus{
    border-color:var(--slate-mid);
    background:var(--white);
    box-shadow:0 0 0 3px rgba(107,125,179,.12);
}

.btn{
    width:100%;
    margin-top:18px;
    background:var(--btn-bg);
    color: var(--white);
    font-size:14px;
    font-weight:700;
    font-family:var(--font);
    padding:12px;
    border-radius:11px;
    border:none;
    cursor:pointer;
    letter-spacing:.2px;
    transition:.2s;
}

.btn:hover{
    background: var(--white);
    color: var(--text);
}