*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:system-ui,Segoe UI,Tahoma;
}

body{
min-height:100vh;
display:flex;
flex-direction:column;
background:linear-gradient(135deg,#072c6b,#021a3c);
color:#fff;
}

/* header */

header{
display:flex;
justify-content:space-between;
align-items:center;
padding:14px 30px;
background:#0b3d91;
}

.logo{
font-weight:600;
letter-spacing:1px;
}

/* language */

.lang a{
color:white;
text-decoration:none;
margin-left:8px;
font-size:13px;
padding:5px 8px;
border-radius:6px;
}

.lang a.active{
background:white;
color:#0b3d91;
}

/* ticker */

.ticker{
background:#021a3c;
padding:6px 15px;
font-size:13px;
overflow:hidden;
white-space:nowrap;
}

.ticker span{
display:inline-block;
padding-left:100%;
animation:scroll 20s linear infinite;
}

@keyframes scroll{
0%{transform:translateX(0)}
100%{transform:translateX(-100%)}
}

/* main */

main{
flex:1;
display:flex;
justify-content:center;
align-items:center;
padding:20px;
}

/* card */

.card{
width:420px;
max-width:100%;
background:#ffffff10;
backdrop-filter:blur(15px);
padding:40px;
border-radius:16px;
box-shadow:0 20px 50px rgba(0,0,0,.4);
}

.card h2{
text-align:center;
margin-bottom:25px;
}

/* inputs */

.field{
margin-bottom:18px;
}

.field label{
font-size:14px;
display:block;
margin-bottom:6px;
}

.field input{
width:100%;
padding:12px;
border-radius:8px;
border:none;
}

/* button */

.btn{
width:100%;
padding:12px;
background:#0b3d91;
border:none;
border-radius:8px;
color:white;
font-size:15px;
cursor:pointer;
}

.btn:hover{
background:#072c6b;
}

/* footer */

footer{
text-align:center;
padding:10px;
font-size:12px;
background:#00000040;
}

/* mobile */

@media(max-width:600px){

.card{
padding:25px;
border-radius:20px;
}

header{
flex-direction:column;
gap:6px;
}

}



.header-controls{
display:flex;
gap:10px;
align-items:center;
}

/* mode toggle */

.mode-toggle{

display:flex;
align-items:center;
gap:6px;

background:white;
color:#0b3d91;

border:none;
border-radius:20px;

padding:4px 10px;

cursor:pointer;
font-size:13px;

}

.mode-toggle span{
pointer-events:none;
}

/* light mode */

body.light{

background:#f3f6fb;
color:#111;

}

body.light header{
background:#ffffff;
color:#0b3d91;
}

body.light .ticker{
background:#e9eef6;
color:#111;
}

body.light .card{
background:white;
color:#111;
box-shadow:0 15px 35px rgba(0,0,0,.15);
}

body.light .btn{
background:#0b3d91;
}

.alert{
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 80, 80, .15);
  border: 1px solid rgba(255, 80, 80, .35);
  color: #ffd1d1;
  font-size: 13px;
  text-align: center;
}

body.light .alert{
  background: #ffecec;
  border-color: #ffb6b6;
  color: #7a0f0f;
}