* {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      min-height: 100vh;
      font-family: 'Archivo', sans-serif;
      background-color: #f5f5f5;
      /* Dot grid background (simplified) */
      background-image: radial-gradient(circle at center, #e0e0e0 1px, transparent 1px);
      background-size: 24px 24px;
      background-position: 0 0;
      color: var(--grey-900);
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .page {
      width: 100%;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      position: relative;
    }

    /* Header */
    .header {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 32px 40px;
      height: 100px;
      flex-shrink: 0;
    }

    .header__icon {
      width: 36px;
      height: 36px;
      background: var(--primary-600);
      border: 1.125px solid var(--primary-500);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 1px 2px rgba(13, 13, 18, 0.1);
    }

    .header__icon img {
      width: 24px;
      height: 24px;
      object-fit: contain;
    }

    .header__title {
      font-size: 24px;
      font-weight: 600;
      line-height: 1.3;
      color: var(--grey-900);
      margin: 0;
    }

    /* Main content — centered form */
    .main {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 40px 24px;
    }

    .form-card {
      width: 100%;
      max-width: 500px;
      background: var(--grey-0);
      border-radius: 16px;
      padding: 32px;
      display: flex;
      flex-direction: column;
      gap: 32px;
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
    }

    .form-header {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      text-align: center;
    }

    .form-header__icon-wrap {
      background: linear-gradient(to bottom, var(--gradient-start), var(--gradient-end), var(--gradient-end));
      border: 1px solid var(--border-tint);
      border-radius: 96px;
      padding: 16px;
    }

    .form-header__icon-inner {
      width: 52px;
      height: 52px;
      background: var(--grey-0);
      border: 1px solid var(--primary-100);
      border-radius: 96px;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 4px rgba(179, 212, 253, 0.04);
    }

    .form-header__icon-inner img {
      width: 24px;
      height: 24px;
      object-fit: contain;
    }

    .form-header__title {
      font-size: 24px;
      font-weight: 600;
      line-height: 1.3;
      color: var(--grey-900);
      margin: 0;
    }

    .form-header__subtitle {
      font-size: 16px;
      font-weight: 400;
      line-height: 1.5;
      color: var(--grey-500);
      letter-spacing: 0.32px;
      margin: 0;
    }

    .form-fields {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .field {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }

    .field__label {
      font-size: 14px;
      font-weight: 500;
      line-height: 1.5;
      color: var(--grey-500);
      letter-spacing: 0.28px;
    }

    .field__label span {
      color: #dc2626;
    }

    .field__input-wrap {
      display: flex;
      align-items: center;
      height: 52px;
      padding: 8px 12px;
      background: var(--grey-0);
      border: 1px solid var(--grey-100);
      border-radius: 12px;
    }

    .field__input-wrap:focus-within {
      border-color: var(--primary-500);
      outline: none;
    }

    /* Error state */
    .field__input-wrap.is-error {
      border-color: var(--error-500);
    }

    .field__input-wrap.is-error:focus-within {
      border-color: var(--error-500);
    }

    .field__error-msg {
      display: none;
      font-size: 14px;
      font-weight: 400;
      line-height: 1.5;
      color: var(--error-500);
      letter-spacing: 0.28px;
      margin: 4px 0 0;
    }

    .form-card.has-error .field--has-error .field__error-msg {
      display: block;
    }

    .field__input {
      flex: 1;
      border: none;
      background: none;
      font-family: inherit;
      font-size: 16px;
      font-weight: 400;
      line-height: 1.5;
      color: var(--grey-900);
      letter-spacing: 0.32px;
    }

    .field__input::placeholder {
      color: var(--grey-400);
    }

    .field__input:focus {
      outline: none;
    }

    .field__toggle {
      width: 24px;
      height: 24px;
      flex-shrink: 0;
      cursor: pointer;
      background: none;
      border: none;
      padding: 0;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .field__toggle img {
      width: 24px;
      height: 24px;
      object-fit: contain;
    }

    .form-options {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
    }

    .checkbox-wrap {
      display: flex;
      align-items: center;
      gap: 8px;
      cursor: pointer;
    }

    .checkbox-wrap input {
      width: 16px;
      height: 16px;
      accent-color: var(--primary-500);
      cursor: pointer;
    }

    .checkbox-wrap span {
      font-size: 14px;
      font-weight: 400;
      line-height: 1.5;
      color: var(--grey-500);
      letter-spacing: 0.28px;
    }

    .form-options__forgot {
      font-size: 14px;
      font-weight: 500;
      line-height: 1.5;
      color: var(--primary-500);
      letter-spacing: 0.28px;
      text-decoration: none;
    }

    .form-options__forgot:hover {
      text-decoration: underline;
    }

    .btn-login {
      width: 100%;
      height: 52px;
      background: var(--primary-600);
      color: var(--grey-0);
      border: none;
      border-radius: 14px;
      font-family: inherit;
      font-size: 16px;
      font-weight: 600;
      line-height: 1.5;
      letter-spacing: 0.32px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .btn-login:hover {
      background: var(--primary-600);
    }

    .form-register {
      text-align: center;
      font-size: 16px;
      font-weight: 400;
      line-height: 1.5;
      color: var(--grey-500);
      letter-spacing: 0.32px;
      margin: 0;
    }

    .form-register a {
      font-weight: 500;
      color: var(--primary-500);
      text-decoration: none;
    }

    .form-register a:hover {
      text-decoration: underline;
    }

    /* Footer */
    .footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 32px 40px;
      height: 85px;
      flex-shrink: 0;
      border-top: 1px solid var(--grey-100);
      background: var(--grey-0);
    }

    .footer__copyright {
      font-size: 14px;
      font-weight: 400;
      line-height: 1.5;
      color: var(--grey-500);
      letter-spacing: 0.28px;
      margin: 0;
    }

    .footer__links {
      display: flex;
      align-items: center;
      gap: 24px;
    }

    .footer__link {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 14px;
      font-weight: 400;
      line-height: 1.5;
      color: var(--grey-500);
      letter-spacing: 0.28px;
      text-decoration: none;
    }

    .footer__link:hover {
      color: var(--primary-500);
    }

    .footer__link img {
      width: 16px;
      height: 16px;
      object-fit: contain;
    }