@import url('https://fonts.googleapis.com/css2?family=Anton&family=Work+Sans:wght@400;500;600;700&display=swap');

:root{
  --bg: #0d0b09;
  --ember: #d62828;
  --gold: #f2a900;
  --cream: #f6ede0;
  --crust: #8a4b26;
  --field-bg: rgba(255,255,255,0.05);
  --field-border: rgba(242,169,0,0.25);
  --danger: #ff6b6b;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html,body{
  min-height:100%;
  background: radial-gradient(circle at 20% 10%, rgba(214,40,40,0.10), transparent 45%),
              radial-gradient(circle at 85% 90%, rgba(242,169,0,0.08), transparent 50%),
              var(--bg);
  color: var(--cream);
  font-family: 'Work Sans', sans-serif;
}

body{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  padding: 28px 18px;
}

.card{
  width:100%;
  max-width: 380px;
}

.brand{
  text-align:center;
  margin-bottom: 26px;
}

.brand .eyebrow{
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 6px;
}

.brand h1{
  font-family: 'Anton', sans-serif;
  font-weight:400;
  font-size: 2rem;
  text-transform: uppercase;
  color: var(--cream);
}
.brand h1 span{ color: var(--ember); }

.panel{
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(242,169,0,0.15);
  border-radius: 16px;
  padding: 26px 22px;
}

.field{
  margin-bottom: 16px;
}

.field label{
  display:block;
  font-size: 0.82rem;
  color: rgba(246,237,224,0.7);
  margin-bottom: 6px;
  font-weight: 500;
}

.field input{
  width:100%;
  padding: 13px 14px;
  border-radius: 10px;
  border: 1px solid var(--field-border);
  background: var(--field-bg);
  color: var(--cream);
  font-size: 1rem;
  font-family: inherit;
}

.field input:focus{
  outline: none;
  border-color: var(--gold);
}

.btn{
  width:100%;
  padding: 14px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(135deg, var(--ember), #b31f1f);
  color: var(--cream);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor:pointer;
  margin-top: 6px;
}
.btn:active{ transform: scale(0.99); }

.switch{
  text-align:center;
  margin-top: 18px;
  font-size: 0.9rem;
  color: rgba(246,237,224,0.65);
}
.switch a{
  color: var(--gold);
  text-decoration:none;
  font-weight:600;
}

.alert{
  background: rgba(255,107,107,0.1);
  border: 1px solid rgba(255,107,107,0.3);
  color: var(--danger);
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 0.87rem;
  margin-bottom: 18px;
}

.alert.success{
  background: rgba(242,169,0,0.1);
  border-color: rgba(242,169,0,0.3);
  color: var(--gold);
}