:root {
    --primary: #0F172A;
    --accent: #2563EB;
    --accent-light: #38BDF8;
    --bg: #F8FAFC;
    --text-main: #1E293B;
    --text-sub: #64748B;
    --white: #FFFFFF;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Inter', -apple-system, sans-serif; background-color: var(--bg); color: var(--text-main); display: flex; align-items: center; justify-content: center; min-height: 100vh; }

.login-card {
    background: var(--white);
    padding: 50px;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05);
    width: 100%;
    max-width: 450px;
    text-align: center;
}

.logo {
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 20px;
    margin-bottom: 30px;
    color: var(--primary);
}

h1 { font-size: 24px; margin-bottom: 10px; }
p { color: var(--text-sub); font-size: 14px; margin-bottom: 35px; }

.input-group { margin-bottom: 25px; text-align: left; }
label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--text-sub); margin-bottom: 8px; }
input { 
    width: 100%; 
    padding: 14px; 
    border: 1px solid #E2E8F0; 
    border-radius: 6px; 
    font-size: 16px; 
    transition: all 0.2s;
}
input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); }

.btn-primary { 
    width: 100%; 
    padding: 15px; 
    background: var(--primary); 
    color: white; 
    border: none; 
    border-radius: 6px; 
    font-weight: 700; 
    cursor: pointer; 
    transition: opacity 0.2s;
}
.btn-primary:hover { opacity: 0.9; }

.footer-note { font-size: 11px; color: var(--text-sub); margin-top: 30px; }