:root {
    --ink: #17181c;
    --gold: #a5792a;
    --gold-deep: #8a641f;
    --gold-soft: #f8efdc;
    --gray-50: #f6f5f3;
    --gray-200: #e3e1da;
    --gray-300: #cfccc2;
    --gray-500: #78756d;
    --gray-700: #47443c;
    --gray-800: #26241f;
    --red: #a4222b;
    --red-bg: #fbecec;
  }
  * { box-sizing: border-box; }
  body {
    margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center;
    font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
    background: var(--ink);
    background-image: radial-gradient(circle at 20% 20%, rgba(165,121,42,0.10), transparent 45%), radial-gradient(circle at 85% 80%, rgba(165,121,42,0.08), transparent 45%);
    padding: 20px;
  }
  input { appearance: none; outline: none; font-family: inherit; }
  input[type=number]::-webkit-outer-spin-button, input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

  .card { background: white; border-radius: 16px; padding: 38px 36px; width: 380px; max-width: 100%; box-shadow: 0 24px 60px rgba(0,0,0,0.35); }
  .logo-wrap { display: flex; justify-content: center; margin-bottom: 22px; }
  .logo-wrap img { width: 52px; height: 52px; object-fit: contain; }
  h1 { font-size: 19px; font-weight: 800; text-align: center; margin: 0 0 4px 0; color: var(--gray-800); }
  .sub { font-size: 12.5px; color: var(--gray-500); text-align: center; margin-bottom: 28px; }

  .field { margin-bottom: 16px; }
  .field label { font-size: 12px; font-weight: 700; color: var(--gray-700); display: block; margin-bottom: 6px; }
  .field-input-wrap { position: relative; }
  .field input { width: 100%; border: 1px solid var(--gray-300); border-radius: 9px; padding: 11px 12px; font-size: 13.5px; color: var(--gray-800); background: var(--gray-50); transition: border-color .12s, box-shadow .12s; }
  .field input:focus { border-color: var(--gold); background: white; box-shadow: 0 0 0 3px rgba(165,121,42,0.12); }
  .field-input-wrap .eye-btn { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; padding: 4px; display: flex; }
  .field-input-wrap .eye-btn svg { width: 16px; height: 16px; stroke: var(--gray-500); }

  .row-between { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; font-size: 12.5px; }
  .checkbox-wrap { display: flex; align-items: center; gap: 7px; cursor: pointer; color: var(--gray-700); }
  .checkbox-box { width: 15px; height: 15px; border: 1.5px solid var(--gray-300); border-radius: 4px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .12s; }
  .checkbox-box.checked { background: var(--ink); border-color: var(--ink); }
  .checkbox-box svg { width: 10px; height: 10px; stroke: white; display: none; }
  .checkbox-box.checked svg { display: block; }
  .forgot-link { color: var(--gold-deep); font-weight: 700; cursor: pointer; }
  .forgot-link:hover { text-decoration: underline; }

  .login-btn { width: 100%; background: var(--ink); color: white; border: none; padding: 12px; border-radius: 9px; font-size: 13.5px; font-weight: 700; cursor: pointer; transition: background .12s; }
  .login-btn:hover { background: #232429; }

  .foot-note { text-align: center; font-size: 11.5px; color: var(--gray-500); margin-top: 22px; }

  .error-banner { display: none; background: var(--red-bg); color: var(--red); border-radius: 9px; padding: 10px 14px; font-size: 12.5px; font-weight: 600; margin-bottom: 16px; text-align: center; }
  .error-banner.show { display: block; }
  .toast { background: var(--ink); color: white; padding: 11px 18px; border-radius: 9px; font-size: 13px; box-shadow: 0 6px 16px rgba(0,0,0,0.3); opacity: 0; transform: translateY(-8px); transition: opacity .25s ease, transform .25s ease; }
  .toast.show { opacity: 1; transform: translateY(0); }