*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  body {
    font-family: 'DM Sans', sans-serif;
    background: linear-height(160deg, #f0f5ff, #fff);
    background: linear-gradient(160deg, #f0f5ff 0%, #ffffff 100%);
    min-height: 100vh;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
  }
  .card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.1);
    padding: 48px 40px;
    width: 100%; max-width: 440px;
    text-align: center;
  }
  .logo { height: 80px; width: auto; mix-blend-mode: multiply; margin: -15px 0 8px; }
  h1 {
    font-family: 'Syne', sans-serif; font-weight: 800;
    font-size: 1.6rem; color: #0a0a0f; margin-bottom: 8px;
  }
  p { color: #888; font-size: 0.95rem; margin-bottom: 32px; }

  .input-row {
    display: flex; align-items: center;
    border: 1.5px solid #dde; border-radius: 12px;
    overflow: hidden; background: #fff; margin-bottom: 16px;
  }
  .input-row span {
    padding: 14px 14px; color: #aaa; font-size: 0.88rem;
    white-space: nowrap; background: #f8f9fc; border-right: 1.5px solid #dde;
  }
  .input-row span.suffix {
    border-right: none; border-left: 1.5px solid #dde;
  }
  .input-row input {
    flex: 1; border: none; outline: none; padding: 14px 10px;
    font-size: 1rem; font-family: 'DM Sans', sans-serif;
    color: #0a0a0f; text-align: center;
  }
  .btn {
    width: 100%; background: #1a6cf0; color: #fff;
    border: none; border-radius: 12px; padding: 14px;
    font-size: 1rem; font-weight: 600; cursor: pointer;
    font-family: 'DM Sans', sans-serif;
    transition: background .2s, transform .15s;
  }
  .btn:hover { background: #0f4bbf; transform: translateY(-1px); }
  .error {
    color: #e53e3e; font-size: 0.85rem; margin-top: 12px; display: none;
  }
  .back { margin-top: 24px; font-size: 0.85rem; color: #aaa; }
  .back a { color: #1a6cf0; text-decoration: none; }