/* ===== RESET ===== */
*{
  box-sizing:border-box;
  font-family:'Inter',Arial,sans-serif;
}

body{
  margin:0;
  min-height:100vh;
  background:
    linear-gradient(120deg,#2563eb,#1e40af),
    url("../fotky/arena-bg.jpg") center/cover no-repeat;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* ===== OVERLAY ===== */
body::before{
  content:"";
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.75);
  z-index:-1;
}

/* ===== LOGIN / REGISTER BOX ===== */
.login-box{
  width:420px;
  background:rgba(255,255,255,.95);
  border-radius:24px;
  padding:35px 30px;
  box-shadow:0 30px 80px rgba(0,0,0,.4);
  animation:fadeIn .6s ease;
}

@keyframes fadeIn{
  from{opacity:0;transform:translateY(30px)}
  to{opacity:1;transform:none}
}

.login-box h1{
  text-align:center;
  margin-bottom:6px;
  font-weight:800;
  color:#020617;
}

.subtitle{
  text-align:center;
  color:#64748b;
  margin-bottom:25px;
  font-size:14px;
}

/* ===== INPUTS ===== */
.login-box input{
  width:100%;
  padding:14px 15px;
  border-radius:14px;
  border:1px solid #cbd5e1;
  margin-bottom:14px;
  font-size:15px;
}

.login-box input:focus{
  outline:none;
  border-color:#2563eb;
  box-shadow:0 0 0 3px rgba(37,99,235,.15);
}

/* ===== BUTTON ===== */
.login-box button{
  width:100%;
  padding:14px;
  border:none;
  border-radius:14px;
  font-weight:700;
  font-size:16px;
  cursor:pointer;
  background:linear-gradient(135deg,#2563eb,#1d4ed8);
  color:#fff;
  transition:.2s;
}

.login-box button:hover{
  filter:brightness(1.1);
}

/* ===== ERRORS ===== */
.error{
  background:#fee2e2;
  color:#991b1b;
  padding:10px 12px;
  border-radius:12px;
  font-size:14px;
  margin-bottom:10px;
}

/* ===== LINKS ===== */
.login-links,
.login-box p{
  margin-top:18px;
  text-align:center;
  font-size:14px;
}

.login-box a{
  color:#2563eb;
  text-decoration:none;
  font-weight:600;
}

.login-box a:hover{
  text-decoration:underline;
}

/* ===== RESPONSIVE ===== */
@media(max-width:480px){
  .login-box{
    width:92%;
    padding:28px 22px;
  }
}
