:root {
    --bg-page: #f2f4f7;
    --bg-card: #fff;
    --primary: #0056b3;
    --accent: #007bff;
    --text: #333;
    --border: #d1d5db;
    --radius:6px;
    --spacing:1rem;
    --field-h:44px;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  body {
    font-family:'Roboto',sans-serif;
    background:var(--bg-page);
    color:var(--text);
    display:flex;justify-content:center;align-items:center;
    min-height:100vh;padding:2rem;
  }
  .form-container{
    width:100%;
    max-width:400px;
    background: rgb(86, 230, 16);
    border-radius: 12px;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;} 

  .form-card {
    background:var(--bg-card);
    border-radius:var(--radius);
    box-shadow:0 4px 16px rgba(0,0,0,0.1);
    padding:calc(var(--spacing)*2);
  }
  .form-card h1 {
    text-align:center;
    margin-bottom:calc(var(--spacing)*1.5);
    font-size:1.5rem;
    color:var(--primary);
    font-weight:500;
  }
  #message-container{margin-bottom:var(--spacing); text-align:center;}
  .alert {
    display:inline-block;
    padding:.75rem 1.25rem;
    background:#fdecea;
    color:#a71d2a;
    border-radius:var(--radius);
    font-weight:500;
  }
  form{display:flex;flex-direction:column;gap:var(--spacing);}
  .form-group{display:flex;flex-direction:column;}
  .form-group label{font-weight:500;margin-bottom:.5rem;}
  .form-group input {
    width:100%;
    height:var(--field-h);
    padding:0 1rem;
    border:1px solid var(--border);
    border-radius:var(--radius);
    font-size:.95rem;
    background:#fafafa;
    transition:border-color .3s;
  }
  .form-group input:focus {
    outline:none;
    border-color:var(--accent);
  }
  button {
    height:var(--field-h);
    background:var(--primary);
    color:#fff;
    border:none;
    border-radius:var(--radius);
    font-size:1rem;
    cursor:pointer;
    transition:background .3s;
  }
  button:hover{background:var(--accent);}
  .link-back{
    margin-top:.5rem;
    text-align:center;
  }
  .link-back a{color:var(--accent);text-decoration:underline;}
  @media(max-width:480px){
    .form-container{padding:0 1rem;}
  }