@import url('/static/css/auth.css');

.auth-shell {
    flex-direction: column;
    gap: 32px;
}

.logo {
display: flex;
align-items: center;
gap: 2px;
font-size: 28px;
font-weight: 800;
letter-spacing: -0.5px;
user-select: none;
}

.logo-tytan { color: var(--red); font-style: italic; }

.card {
    padding: 40px 36px;
    max-width: 380px;
    box-shadow: 0 4px 32px rgba(34, 85, 212, 0.10);
}

h1 {
font-size: 20px;
font-weight: 800;
color: var(--text);
margin-bottom: 4px;
text-align: center;
}

.subtitle {
font-size: 13px;
color: var(--muted);
text-align: center;
margin-bottom: 28px;
}

input {
    padding: 11px 16px;
}

label {
    letter-spacing: 0.03em;
}

.error-msg {
background: #fff1f1;
border: 2px solid #fcd0d0;
color: var(--red);
padding: 10px 14px;
font-size: 13px;
font-weight: 600;
border-radius: 12px;
margin-bottom: 16px;
text-align: center;
}

.btn {
width: 100%;
background: var(--blue);
color: white;
border: none;
padding: 14px;
font-size: 15px;
font-weight: 800;
cursor: pointer;
border-radius: 14px;
transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
margin-top: 8px;
box-shadow: 0 4px 16px rgba(34, 85, 212, 0.25);
letter-spacing: 0.01em;
}

.btn:hover {
background: var(--blue-dark);
box-shadow: 0 6px 20px rgba(34, 85, 212, 0.35);
}

.btn:active { transform: scale(0.98); }