body{
  background:#052e16; /* deep money green */
  color:#dcfce7;
  font-family:system-ui;
}

.login-box, .dashboard{
  max-width:400px;
  margin:80px auto;
  background:#022c22;
  padding:25px;
  border-radius:14px;
  border:1px solid rgba(34,197,94,0.2);
}

h2{
  margin-bottom:15px;
  color:#facc15; /* gold */
}

form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

h3 {
  margin-top: 15px;
  color: #4ade80;
  font-size: 16px;
}

label {
  font-size: 13px;
  opacity: 0.8;
  margin-top: 8px;
  color:#bbf7d0;
}

input {
  width: 100%;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid rgba(34,197,94,0.3);
  background: rgba(2,44,34,0.9);
  color: white;
  outline: none;
}

input:focus {
  border-color: #22c55e;
  box-shadow: 0 0 8px rgba(34,197,94,0.35);
}

button {
  margin-top: 15px;
  padding: 12px;
  border-radius: 10px;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
  font-weight: bold;
  border: none;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(34,197,94,0.35);
}

button:hover{
  opacity:0.95;
  transform: translateY(-1px);
}

.logout{
  display:block;
  margin-top:15px;
  text-align:center;
  color:#4ade80;
}

.error{
  color:#f87171;
}

/* ================= MOBILE OPTIMIZATION ================= */
@media (max-width: 480px){

  body{
    padding:12px;
  }

  .login-box, .dashboard{
    margin:40px auto;
    padding:20px;
    border-radius:12px;
  }

  h2{
    font-size:20px;
    font-weight:800; /* stronger */
  }

  h3{
    font-size:15px;
    font-weight:700;
  }

  label{
    font-size:13px;
    font-weight:600;
  }

  input{
    padding:12px;
    font-size:15px;
    font-weight:600;
  }

  button{
    padding:14px;
    font-size:15px;
    font-weight:800;
  }

  .logout{
    font-size:14px;
    font-weight:600;
  }

  .error{
    font-size:14px;
    font-weight:700;
  }
}