:root{
  --on-surface:#281716; --surface-variant:#fadbd9; --outline:#906f6c;
  --secondary:#895100; --primary-container:#dd2e33; --on-tertiary:#ffffff;
  --secondary-fixed-dim:#ffb86b; --surface-container-lowest:#ffffff;
  --tertiary-fixed-dim:#4fdbcc; --tertiary-fixed:#70f8e8; --on-error-container:#93000a;
  --tertiary:#00685f; --background:#fff8f7; --secondary-container:#fd9d1a;
  --on-primary-container:#fffbff; --surface-container-low:#fff0ef; --surface-container:#ffe9e7;
  --tertiary-container:#008379; --error:#ba1a1a; --on-primary:#ffffff;
  --outline-variant:#e5bdba; --on-surface-variant:#5c403d; --surface:#fff8f7;
  --surface-bright:#fff8f7; --surface-container-highest:#fadbd9; --primary:#b90b1e;
  --on-secondary-container:#663b00;
  --font-display:'Bricolage Grotesque', serif; --font-body:'Plus Jakarta Sans', sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  font-family:var(--font-body); color:var(--on-surface); background:var(--surface-bright);
  min-height:100vh; display:flex; flex-direction:column;
  background-image:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23906f6c' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.material-symbols-outlined{font-variation-settings:'FILL' 1;}

.wrap{
  flex:1; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:48px;
  max-width:1100px; width:100%; margin:0 auto; padding:48px 20px;
}
.hero-banner{position:relative; border:2px solid var(--on-surface); border-radius:24px; box-shadow:4px 4px 0 var(--on-surface); overflow:hidden; background:var(--surface-container-high, #ffe2df);}
.hero-banner img{width:100%; height:100%; min-height:320px; object-fit:cover; display:block;}
.float-badge{position:absolute; width:44px; height:44px; border-radius:50%; border:2px solid var(--on-surface); box-shadow:4px 4px 0 var(--on-surface); display:flex; align-items:center; justify-content:center; animation:bounce 3s infinite;}
.float-badge.top{top:-16px; left:-16px; background:var(--tertiary); color:var(--on-tertiary);}
.float-badge.bottom{bottom:-16px; right:-16px; background:var(--secondary-container); color:var(--on-secondary-container); animation-duration:2.5s; animation-delay:1s;}
@keyframes bounce{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}

.card{
  background:var(--surface); padding:32px; border-radius:24px; border:2px solid var(--on-surface);
  box-shadow:4px 4px 0 var(--on-surface); display:flex; flex-direction:column; gap:24px;
}
.card-head{text-align:center;}
.card-head h1{font-family:var(--font-display); font-weight:800; font-size:32px; color:var(--primary); text-transform:uppercase; letter-spacing:-0.02em; margin-bottom:8px;}
.card-head p{color:var(--on-surface-variant); font-weight:600; font-size:18px;}

form{display:flex; flex-direction:column; gap:12px;}
.field{position:relative; display:flex; align-items:center;}
.field .material-symbols-outlined{position:absolute; left:12px; color:var(--on-surface-variant); pointer-events:none;}
.field input{
  width:100%; padding:12px 16px 12px 40px; background:var(--surface-container-lowest);
  border:2px solid var(--on-surface); border-radius:12px; font-size:18px; font-weight:600; color:var(--on-surface);
  outline:none; transition:all .2s ease;
}
.field input:focus{border-color:var(--secondary-container); box-shadow:2px 2px 0 var(--secondary-container);}
.field input::placeholder{color:rgba(92,64,61,.5);}

.btn-primary{
  margin-top:12px; background:var(--primary-container); color:var(--on-primary-container);
  font-family:var(--font-display); font-weight:700; font-size:24px; padding:16px;
  border:2px solid var(--on-surface); border-radius:12px; box-shadow:4px 4px 0 var(--on-surface);
  display:flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; transition:all .2s ease;
}
.btn-primary:active{box-shadow:0 0 0 var(--on-surface); transform:translate(4px,4px);}

.login-note{
  text-align:center; font-weight:700; font-size:14px; color:var(--on-surface-variant);
  text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:2px;
}
.login-note:hover{color:var(--primary);}

@media (max-width:820px){
  .wrap{grid-template-columns:1fr;}
}

/* ===== Backend integration additions ===== */
.form-error{background:#ffdad6; color:#ba1a1a; font-weight:700; font-size:14px; padding:10px 14px; border-radius:8px; border:2px solid #ba1a1a;}
.hidden{display:none;}
.btn-primary:disabled{opacity:.6; cursor:not-allowed;}