:root{
    --ink:#12182B; --paper:#F1F5F3; --card:#FFFFFF; --gold:#E3A73B; --gold-dark:#C4881F;
    --teal:#146B64; --line:rgba(18,24,43,0.12); --muted:#5B6472;
  }
  *{box-sizing:border-box;}
  body{
    margin:0; min-height:100vh; display:flex; align-items:center; justify-content:center;
    background:var(--ink); font-family:'IBM Plex Sans',sans-serif; padding:28px;
  }
  .card{
    background:var(--card); border-radius:16px; padding:32px 30px; width:100%; max-width:340px;
    box-shadow:0 20px 44px -22px rgba(18,24,43,0.5);
  }
  h1{
    font-family:'Space Grotesk',sans-serif; font-size:19px; font-weight:700; color:var(--ink);
    margin:0 0 4px;
  }
  .sub{ font-size:13px; color:var(--muted); margin:0 0 24px; }
  label{ display:block; font-size:12.5px; font-weight:600; color:var(--ink); margin-bottom:6px; }
  input{
    width:100%; padding:10px 12px; margin-bottom:16px; border:1px solid var(--line);
    border-radius:8px; font-size:14px; font-family:inherit;
  }
  input:focus{ outline:2px solid var(--teal); outline-offset:1px; }
  button{
    width:100%; padding:11px; border:none; border-radius:999px; background:var(--gold);
    color:var(--ink); font-weight:600; font-size:14.5px; cursor:pointer; transition:background .18s ease;
  }
  button:hover{ background:var(--gold-dark); }
  .note{ margin-top:16px; font-size:11.5px; color:var(--muted); text-align:center; }