/\* style.css \*/

body {
font-family: sans-serif;
background: linear-gradient(to bottom, #ffffff, #FFFBEB);
padding: 2rem;
color: #1A1A1A;
margin: 0;
box-sizing: border-box;
}

.container {
max-width: 400px;
margin: 0 auto;
background: #ffffff;
padding: 1.5rem;
border: 2px solid #F7C700;
border-radius: 0.5rem;
box-shadow: 0 0 15px rgba(247, 199, 0, 0.3);
}

h1 {
text-align: center;
margin-bottom: 1rem;
color: #1A1A1A;
}

form label {
display: block;
margin-bottom: 0.75rem;
color: #333333;
}

form input {
width: 100%;
padding: 0.5rem;
margin-top: 0.25rem;
border: 1px solid #CCCCCC;
border-radius: 0.25rem;
color: #1A1A1A;
box-sizing: border-box;
transition: border-color 0.2s, box-shadow 0.2s;
}

form input\:focus {
outline: none;
border-color: #F7C700;
box-shadow: 0 0 5px rgba(247, 199, 0, 0.5);
}

button {
width: 100%;
padding: 0.75rem;
background: linear-gradient(to right, #F7C700, #FFDB2D);
color: #1A1A1A;
font-weight: bold;
border: none;
border-radius: 0.25rem;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
box-sizing: border-box;
}

button\:hover {
background: #1A1A1A;
color: #FFFBEB;
transform: translateY(-1px);
}

button\:active {
background: #333333;
transform: translateY(0);
}

.message {
padding: 0.75rem;
margin-bottom: 1rem;
border-radius: 0.25rem;
}

.error {
background: #FFF8E1;
color: #E65100;
border: 1px solid #FFD54F;
}

.success {
background: #E8F5E9;
color: #33691E;
border: 1px solid #C5E1A5;
}

.lang-switch {
text-align: right;
margin-bottom: 1rem;
}

.lang-switch a {
margin-left: 0.5rem;
color: #333333;
text-decoration: none;
}

.lang-switch a.active {
color: #1A1A1A;
font-weight: bold;
}

/\* Mobile-friendly tweaks \*/
@media (max-width: 600px) {
html,
body {
height: 100%;
margin: 0;
}

body {
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}

.container {
max-width: 90vw;
margin: 0;
padding: 1rem;
border-radius: 0.25rem;
box-shadow: none;
}

h1 {
font-size: 1.5rem;
margin-bottom: 0.75rem;
}

form label {
font-size: 0.9rem;
}

form input,
button {
font-size: 1rem;
padding: 0.75rem;
}

button {
margin-top: 0.5rem;
}

.lang-switch {
text-align: center;
margin-bottom: 0.75rem;
}

.lang-switch a {
margin: 0 0.25rem;
font-size: 0.9rem;
}

.message {
font-size: 0.9rem;
}
}